From e269790ff45027eaa8743c3970527301c1da2e22 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Thu, 9 Feb 2023 16:09:33 -0800
Subject: [PATCH] Removing TEXT_VARIANTS in favour of TextVariant (#17674)

---
 docs/design-system.md                            |  2 +-
 ui/components/component-library/index.js         |  2 +-
 ui/components/component-library/text/README.mdx  |  8 +++-----
 ui/components/component-library/text/index.js    |  2 +-
 .../component-library/text/text.constants.js     | 16 ----------------
 ui/components/component-library/text/text.js     |  4 ++--
 6 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/docs/design-system.md b/docs/design-system.md
index fa088bdbf..6c9c729fc 100644
--- a/docs/design-system.md
+++ b/docs/design-system.md
@@ -2,4 +2,4 @@
 
 A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.
 
-Design System [Figma File](https://www.figma.com/file/aWgwMrzdAuv9VuPdtst64uuw/Style-Guide?node-id=211%3A0)
+Design System [Figma File](https://www.figma.com/file/HKpPKij9V3TpsyMV1TpV7C/DS-Components?node-id=401%3A2122&t=oqaI3NKZ059Vo67h-1)
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
index fc83f105c..383b0aadb 100644
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@@ -26,7 +26,7 @@ export { Label } from './label';
 export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';
 export { TagUrl } from './tag-url';
-export { Text, TEXT_VARIANTS, TEXT_DIRECTIONS } from './text';
+export { Text, TEXT_DIRECTIONS } from './text';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export {
   TextFieldBase,
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index a41981549..da2bac1c8 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -20,9 +20,7 @@ The `Text` accepts all props below as well as all [Box](/docs/components-ui-box-
 
 ### Variant
 
-Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design-system.js` to change the font size of the component.
-
-Optional: `TEXT_VARIANTS` from ./text object can also be used.
+Use the `variant` prop and the `TextVariant` enum from `./ui/helpers/constants/design-system.js` to change the font size of the component.
 
 <Canvas>
   <Story id="components-componentlibrary-text--variant" />
@@ -47,10 +45,10 @@ import { TextVariant } from '../../../helpers/constants/design-system';
 
 ### Color
 
-Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component.
+Use the `color` prop and the `TextColor` object from `./ui/helpers/constants/design-system.js` to change the color of the `Text` component.
 
 <Canvas>
-  <Story id="components-componentlibrary-text--color" />
+  <Story id="components-componentlibrary-text--color-story" />
 </Canvas>
 
 ```jsx
diff --git a/ui/components/component-library/text/index.js b/ui/components/component-library/text/index.js
index f19894b05..00fcac3b2 100644
--- a/ui/components/component-library/text/index.js
+++ b/ui/components/component-library/text/index.js
@@ -1,2 +1,2 @@
 export { Text } from './text';
-export { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants';
+export { TEXT_DIRECTIONS } from './text.constants';
diff --git a/ui/components/component-library/text/text.constants.js b/ui/components/component-library/text/text.constants.js
index 2a44ba355..3cd8eaa58 100644
--- a/ui/components/component-library/text/text.constants.js
+++ b/ui/components/component-library/text/text.constants.js
@@ -1,19 +1,3 @@
-import { TextVariant } from '../../../helpers/constants/design-system';
-
-export const TEXT_VARIANTS = {
-  DISPLAY_MD: TextVariant.displayMd,
-  HEADING_LG: TextVariant.headingLg,
-  HEADING_MD: TextVariant.headingMd,
-  HEADING_SM: TextVariant.headingSm,
-  BODY_LG_MEDIUM: TextVariant.bodyLgMedium,
-  BODY_MD: TextVariant.bodyMd,
-  BODY_MD_BOLD: TextVariant.bodyMdBold,
-  BODY_SM: TextVariant.bodySm,
-  BODY_SM_BOLD: TextVariant.bodySmBold,
-  BODY_XS: TextVariant.bodyXs,
-  INHERIT: TextVariant.inherit,
-};
-
 export const TEXT_DIRECTIONS = {
   LEFT_TO_RIGHT: 'ltr',
   RIGHT_TO_LEFT: 'rtl',
diff --git a/ui/components/component-library/text/text.js b/ui/components/component-library/text/text.js
index dc502349c..44cc5772b 100644
--- a/ui/components/component-library/text/text.js
+++ b/ui/components/component-library/text/text.js
@@ -11,7 +11,7 @@ import {
   OVERFLOW_WRAP,
   TextColor,
 } from '../../../helpers/constants/design-system';
-import { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants';
+import { TEXT_DIRECTIONS } from './text.constants';
 
 export const ValidTags = [
   'dd',
@@ -115,7 +115,7 @@ Text.propTypes = {
    * `BODY_XS` large screen: 12px / small screen: 10px,
    * `INHERIT`
    */
-  variant: PropTypes.oneOf(Object.values(TEXT_VARIANTS)),
+  variant: PropTypes.oneOf(Object.values(TextVariant)),
   /**
    * The color of the Text component Should use the COLOR object from
    * ./ui/helpers/constants/design-system.js