Deprecating Typography component (#17672)

* Deprecating Typography component

* Fixing lint issue

ui/components/ui/typography/README.mdx

@@ -1,6 +1,19 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import ActionableMessage from '../actionable-message';
 import Typography from '.';
+import { SEVERITIES } from '../../../helpers/constants/design-system';
+
+import { BannerAlert } from '../../component-library/banner-alert';
+
+<BannerAlert
+  severity={SEVERITIES.WARNING}
+  title="Deprecated"
+  description="<Typography/> has been deprecated in favour of the <Text /> component"
+  actionButtonLabel="See details"
+  actionButtonProps={{
+    href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+  }}
+/>
 
 # Typography
 

ui/components/ui/typography/typography.js

@@ -53,6 +53,14 @@ export const ValidTags = [
   'label',
 ];
 
+/**
+ * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ *
+ * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
+ *
+ * Help to replace `Typography` with `Text` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/17670
+ */
+
 export default function Typography({
   variant = TypographyVariant.paragraph,
   color = Color.textDefault,

ui/components/ui/typography/typography.scss

@@ -1,3 +1,11 @@
+/**
+ * @deprecated `<Typography />` has been deprecated in favour of the `<Text />` component in ./ui/components/component-library/text/text.js
+ *
+ * See storybook documentation for Text here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-text--default-story#text
+ *
+ * Help to replace `Typography` with `Text` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/17670
+ */
+
 @use "design-system";
 @use "sass:map";
 

ui/components/ui/typography/typography.stories.js

@@ -10,9 +10,12 @@ import {
   Color as ColorEnum,
   TextColor,
   BorderColor,
+  SEVERITIES,
 } from '../../../helpers/constants/design-system';
 import Box from '../box';
 
+import { BannerAlert } from '../../component-library/banner-alert';
+
 import { ValidColors, ValidTags } from './typography';
 
 import README from './README.mdx';
@@ -104,12 +107,23 @@ function renderBackgroundColor(color) {
 }
 
 export const DefaultStory = (args) => (
+  <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     <Typography
       boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
       {...args}
     >
       {args.children}
     </Typography>
+  </>
 );
 
 DefaultStory.storyName = 'Default';
@@ -120,6 +134,15 @@ DefaultStory.args = {
 
 export const Variant = (args) => (
   <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     {Object.values(TypographyVariant).map((variant) => (
       <Typography
         boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@@ -138,6 +161,15 @@ export const Color = (args) => {
   const LAST_VALID_COLORS_ARRAY_INDEX = 16;
   return (
     <>
+      <BannerAlert
+        severity={SEVERITIES.WARNING}
+        title="Deprecated"
+        description="<Typography/> has been deprecated in favour of the <Text /> component"
+        actionButtonLabel="See details"
+        actionButtonProps={{
+          href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+        }}
+      />
       {Object.values(ValidColors).map((color, index) => {
         if (index === LAST_VALID_COLORS_ARRAY_INDEX) {
           return (
@@ -191,6 +223,15 @@ export const Color = (args) => {
 
 export const FontWeight = (args) => (
   <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     {Object.values(FONT_WEIGHT).map((weight) => (
       <Typography
         boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@@ -206,6 +247,15 @@ export const FontWeight = (args) => (
 
 export const FontStyle = (args) => (
   <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     {Object.values(FONT_STYLE).map((style) => (
       <Typography
         boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@@ -221,6 +271,15 @@ export const FontStyle = (args) => (
 
 export const Align = (args) => (
   <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     {Object.values(TEXT_ALIGN).map((align) => (
       <Typography
         boxProps={{ backgroundColor: renderBackgroundColor(args.color) }}
@@ -235,6 +294,16 @@ export const Align = (args) => (
 );
 
 export const OverflowWrap = (args) => (
+  <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     <div
       style={{
         width: 250,
@@ -249,10 +318,20 @@ export const OverflowWrap = (args) => (
         {OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
       </Typography>
     </div>
+  </>
 );
 
 export const As = (args) => (
   <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     <Typography boxProps={{ display: DISPLAY.BLOCK }} marginBottom={4}>
       You can change the root element of the Typography component using the as
       prop. Inspect the below elements to see the underlying HTML elements
@@ -276,9 +355,20 @@ export const As = (args) => (
 );
 
 export const Margin = (args) => (
+  <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     <Typography {...args}>
       This Typography component has a margin of {args.margin * 4}px
     </Typography>
+  </>
 );
 
 Margin.args = {
@@ -286,7 +376,18 @@ Margin.args = {
 };
 
 export const BoxProps = (args) => (
+  <>
+    <BannerAlert
+      severity={SEVERITIES.WARNING}
+      title="Deprecated"
+      description="<Typography/> has been deprecated in favour of the <Text /> component"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/17670',
+      }}
+    />
     <Typography {...args}>This uses the boxProps prop</Typography>
+  </>
 );
 
 BoxProps.args = {