From c9ce85bd85c4f8cf48782e729e491a36fec80df7 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 21 Jul 2023 08:44:57 -0700 Subject: [PATCH] Removing unused deprecated Text component (#20119) --- .../__snapshots__/text.test.tsx.snap | 71 ----- .../text/deprecated/index.ts | 3 - .../text/deprecated/text.test.tsx | 249 ------------------ .../text/deprecated/text.tsx | 89 ------- .../text/deprecated/text.types.ts | 146 ---------- 5 files changed, 558 deletions(-) delete mode 100644 ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap delete mode 100644 ui/components/component-library/text/deprecated/index.ts delete mode 100644 ui/components/component-library/text/deprecated/text.test.tsx delete mode 100644 ui/components/component-library/text/deprecated/text.tsx delete mode 100644 ui/components/component-library/text/deprecated/text.types.ts diff --git a/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap b/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap deleted file mode 100644 index de0c46263..000000000 --- a/ui/components/component-library/text/deprecated/__snapshots__/text.test.tsx.snap +++ /dev/null @@ -1,71 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Text should render the Text with proper variant class name 1`] = ` -
-

- display-md -

-

- heading-lg -

-

- heading-md -

-

- heading-sm -

-

- body-lg-medium -

-

- body-md -

-

- body-md-medium -

-

- body-md-bold -

-

- body-sm -

-

- body-sm-medium -

-

- body-sm-bold -

-

- body-xs -

-

- body-xs-medium -

-
-`; diff --git a/ui/components/component-library/text/deprecated/index.ts b/ui/components/component-library/text/deprecated/index.ts deleted file mode 100644 index 0e4a6d9a9..000000000 --- a/ui/components/component-library/text/deprecated/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Text } from './text'; -export { ValidTag, TextDirection, InvisibleCharacter } from './text.types'; -export type { TextProps, ValidTagType } from './text.types'; diff --git a/ui/components/component-library/text/deprecated/text.test.tsx b/ui/components/component-library/text/deprecated/text.test.tsx deleted file mode 100644 index 4608da9c4..000000000 --- a/ui/components/component-library/text/deprecated/text.test.tsx +++ /dev/null @@ -1,249 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { - FontStyle, - FontWeight, - OverflowWrap, - TextAlign, - TextColor, - TextTransform, - TextVariant, - Color, -} from '../../../../helpers/constants/design-system'; -import { TextDirection } from './text.types'; -import { Text } from '.'; - -describe('Text', () => { - it('should render the Text without crashing', () => { - const { getByText } = render(Test type); - expect(getByText('Test type')).toBeDefined(); - }); - it('should render the Text with correct html elements', () => { - const { getByText, container } = render( - <> - p - h1 - h2 - h3 - h4 - h5 - h6 - span - strong - em - li - div - dt - dd - , - ); - expect(container.querySelector('p')).toBeDefined(); - expect(getByText('p')).toBeDefined(); - expect(container.querySelector('h1')).toBeDefined(); - expect(getByText('h1')).toBeDefined(); - expect(container.querySelector('h2')).toBeDefined(); - expect(getByText('h2')).toBeDefined(); - expect(container.querySelector('h3')).toBeDefined(); - expect(getByText('h3')).toBeDefined(); - expect(container.querySelector('h4')).toBeDefined(); - expect(getByText('h4')).toBeDefined(); - expect(container.querySelector('h5')).toBeDefined(); - expect(getByText('h5')).toBeDefined(); - expect(container.querySelector('h6')).toBeDefined(); - expect(getByText('h6')).toBeDefined(); - expect(container.querySelector('span')).toBeDefined(); - expect(getByText('span')).toBeDefined(); - expect(container.querySelector('strong')).toBeDefined(); - expect(getByText('strong')).toBeDefined(); - expect(container.querySelector('em')).toBeDefined(); - expect(getByText('em')).toBeDefined(); - expect(container.querySelector('li')).toBeDefined(); - expect(getByText('li')).toBeDefined(); - expect(container.querySelector('div')).toBeDefined(); - expect(getByText('div')).toBeDefined(); - expect(container.querySelector('dt')).toBeDefined(); - expect(getByText('dt')).toBeDefined(); - expect(container.querySelector('dd')).toBeDefined(); - expect(getByText('dd')).toBeDefined(); - }); - - it('should render the Text with proper variant class name', () => { - const { getByText, container } = render( - <> - display-md - heading-lg - heading-md - heading-sm - body-lg-medium - body-md - body-md-medium - body-md-bold - body-sm - body-sm-medium - body-sm-bold - body-xs - body-xs-medium - , - ); - - expect(getByText('display-md')).toHaveClass('mm-text--display-md'); - expect(getByText('heading-lg')).toHaveClass('mm-text--heading-lg'); - expect(getByText('heading-md')).toHaveClass('mm-text--heading-md'); - expect(getByText('heading-sm')).toHaveClass('mm-text--heading-sm'); - expect(getByText('body-lg-medium')).toHaveClass('mm-text--body-lg-medium'); - expect(getByText('body-md')).toHaveClass('mm-text--body-md'); - expect(getByText('body-md-medium')).toHaveClass('mm-text--body-md-medium'); - expect(getByText('body-md-bold')).toHaveClass('mm-text--body-md-bold'); - expect(getByText('body-sm')).toHaveClass('mm-text--body-sm'); - expect(getByText('body-sm-medium')).toHaveClass('mm-text--body-sm-medium'); - expect(getByText('body-sm-bold')).toHaveClass('mm-text--body-sm-bold'); - expect(getByText('body-xs')).toHaveClass('mm-text--body-xs'); - expect(getByText('body-xs-medium')).toHaveClass('mm-text--body-xs-medium'); - expect(container).toMatchSnapshot(); - }); - - it('should render the Text with proper font weight class name', () => { - const { getByText } = render( - <> - bold - medium - normal - , - ); - expect(getByText('bold')).toHaveClass('mm-text--font-weight-bold'); - expect(getByText('medium')).toHaveClass('mm-text--font-weight-medium'); - expect(getByText('normal')).toHaveClass('mm-text--font-weight-normal'); - }); - - it('should render the Text with proper text color class name', () => { - const { getByText } = render( - <> - text-default - text-alternative - text-muted - overlay-inverse - primary-default - primary-inverse - error-default - error-inverse - success-default - success-inverse - warning-inverse - info-default - info-inverse - , - ); - expect(getByText('text-default')).toHaveClass('box--color-text-default'); - expect(getByText('text-alternative')).toHaveClass( - 'box--color-text-alternative', - ); - expect(getByText('text-muted')).toHaveClass('box--color-text-muted'); - expect(getByText('primary-default')).toHaveClass( - 'box--color-primary-default', - ); - expect(getByText('primary-inverse')).toHaveClass( - 'box--color-primary-inverse', - ); - expect(getByText('error-default')).toHaveClass('box--color-error-default'); - expect(getByText('error-inverse')).toHaveClass('box--color-error-inverse'); - expect(getByText('success-default')).toHaveClass( - 'box--color-success-default', - ); - expect(getByText('success-inverse')).toHaveClass( - 'box--color-success-inverse', - ); - expect(getByText('warning-inverse')).toHaveClass( - 'box--color-warning-inverse', - ); - expect(getByText('info-default')).toHaveClass('box--color-info-default'); - expect(getByText('info-inverse')).toHaveClass('box--color-info-inverse'); - }); - - it('should render the Text with proper font style class name', () => { - const { getByText } = render( - <> - italic - normal - , - ); - expect(getByText('italic')).toHaveClass('mm-text--font-style-italic'); - expect(getByText('normal')).toHaveClass('mm-text--font-style-normal'); - }); - - it('should render the Text with proper text align class name', () => { - const { getByText } = render( - <> - left - center - right - justify - end - , - ); - - expect(getByText('left')).toHaveClass('mm-text--text-align-left'); - expect(getByText('center')).toHaveClass('mm-text--text-align-center'); - expect(getByText('right')).toHaveClass('mm-text--text-align-right'); - expect(getByText('justify')).toHaveClass('mm-text--text-align-justify'); - expect(getByText('end')).toHaveClass('mm-text--text-align-end'); - }); - - it('should render the Text with proper overflow wrap class name', () => { - const { getByText } = render( - <> - break-word - normal - , - ); - expect(getByText('break-word')).toHaveClass( - 'mm-text--overflow-wrap-break-word', - ); - expect(getByText('normal')).toHaveClass('mm-text--overflow-wrap-normal'); - }); - - it('should render the Text with proper ellipsis class name', () => { - const { getByText } = render( - <> - ellipsis - , - ); - expect(getByText('ellipsis')).toHaveClass('mm-text--ellipsis'); - }); - - it('should render the Text with proper text transform class name', () => { - const { getByText } = render( - <> - uppercase - lowercase - capitalize - , - ); - expect(getByText('uppercase')).toHaveClass( - 'mm-text--text-transform-uppercase', - ); - expect(getByText('lowercase')).toHaveClass( - 'mm-text--text-transform-lowercase', - ); - expect(getByText('capitalize')).toHaveClass( - 'mm-text--text-transform-capitalize', - ); - }); - it('should accept a ref prop that is passed down to the html element', () => { - const mockRef = jest.fn(); - render(); - expect(mockRef).toHaveBeenCalledTimes(1); - }); - - it('should render the Text with proper direction', () => { - const { getByText } = render( - <> - auto - ltr - rtl - , - ); - expect(getByText('auto')).toHaveAttribute('dir', 'auto'); - expect(getByText('ltr')).toHaveAttribute('dir', 'ltr'); - expect(getByText('rtl')).toHaveAttribute('dir', 'rtl'); - }); -}); diff --git a/ui/components/component-library/text/deprecated/text.tsx b/ui/components/component-library/text/deprecated/text.tsx deleted file mode 100644 index cc3a551ff..000000000 --- a/ui/components/component-library/text/deprecated/text.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { forwardRef, Ref } from 'react'; -import classnames from 'classnames'; -import Box from '../../../ui/box'; -import { - FontWeight, - TextVariant, - TextColor, -} from '../../../../helpers/constants/design-system'; -import { TextProps } from './text.types'; - -const getTextElementDefault = (variant: TextVariant) => { - switch (variant) { - case TextVariant.displayMd: - return 'h1'; - case TextVariant.headingLg: - return 'h2'; - case TextVariant.headingMd: - return 'h3'; - case TextVariant.headingSm: - return 'h4'; - case TextVariant.inherit: - return 'span'; - // TextVariant.bodyLgMedium, TextVariant.bodyMd, TextVariant.bodyMdBold, TextVariant.bodySm, TextVariant.bodySmBold, TextVariant.bodyXs use default 'p' tag - default: - return 'p'; - } -}; - -/** - * @deprecated This version of the `` component has been deprecated - * Use `import { Text } from '../../component-library';` instead - */ - -export const Text = forwardRef(function Text( - { - variant = TextVariant.bodyMd, - color = TextColor.textDefault, - fontWeight, - fontStyle, - textTransform, - textAlign, - textDirection, - overflowWrap, - ellipsis, - as, - className = '', - children, - ...props - }: TextProps, - ref: Ref, -) { - // Check if as is set otherwise set a default tag based on variant - const Tag = as ?? getTextElementDefault(variant); - let strongTagFontWeight; - - if (Tag === 'strong') { - strongTagFontWeight = FontWeight.Bold; - } - - const computedClassName = classnames( - 'mm-text', - className, - `mm-text--${variant}`, - { - [`mm-text--font-weight-${strongTagFontWeight || fontWeight}`]: Boolean( - strongTagFontWeight || fontWeight, - ), - [`mm-text--font-style-${String(fontStyle)}`]: Boolean(fontStyle), - [`mm-text--ellipsis`]: Boolean(ellipsis), - [`mm-text--text-transform-${String(textTransform)}`]: - Boolean(textTransform), - [`mm-text--text-align-${String(textAlign)}`]: Boolean(textAlign), - [`mm-text--overflow-wrap-${String(overflowWrap)}`]: Boolean(overflowWrap), - }, - ); - - return ( - - {children} - - ); -}); diff --git a/ui/components/component-library/text/deprecated/text.types.ts b/ui/components/component-library/text/deprecated/text.types.ts deleted file mode 100644 index f6d5debc5..000000000 --- a/ui/components/component-library/text/deprecated/text.types.ts +++ /dev/null @@ -1,146 +0,0 @@ -import React from 'react'; -import type { BoxProps } from '../../../ui/box/box.d'; -import { - FontWeight, - FontStyle, - TextVariant, - TextAlign, - TextTransform, - OverflowWrap, - TextColor, - Color, -} from '../../../../helpers/constants/design-system'; - -export enum TextDirection { - LeftToRight = 'ltr', - RightToLeft = 'rtl', - Auto = 'auto', -} - -/** - * The InvisibleCharacter is a very useful tool if you want to make sure a line of text - * takes up vertical space even if it's empty. - */ -export const InvisibleCharacter = '\u200B'; - -/** - * @deprecated ValidTag enum is deprecated in favor of a union of strings. - * To change the root html element tag of the Text component, use the `as` prop and string value. - * e.g. `Hello World` - * - * Contribute to replacing the enum with a union of string by submitting a PR - */ - -export enum ValidTag { - Dd = 'dd', - Div = 'div', - Dt = 'dt', - Em = 'em', - H1 = 'h1', - H2 = 'h2', - H3 = 'h3', - H4 = 'h4', - H5 = 'h5', - H6 = 'h6', - Li = 'li', - P = 'p', - Span = 'span', - Strong = 'strong', - Ul = 'ul', - Label = 'label', - Input = 'input', - Header = 'header', -} - -export type ValidTagType = - | 'dd' - | 'div' - | 'dt' - | 'em' - | 'h1' - | 'h2' - | 'h3' - | 'h4' - | 'h5' - | 'h6' - | 'li' - | 'p' - | 'span' - | 'strong' - | 'ul' - | 'label' - | 'input' - | 'header'; - -export interface TextProps extends BoxProps { - /** - * The text content of the Text component - */ - children?: React.ReactNode; - /** - * The variation of font styles including sizes and weights of the Text component - * Possible values: - * `displayMd` large screen: 48px / small screen: 32px, - * `headingLg` large screen: 32px / small screen: 24px, - * `headingMd` large screen: 24px / small screen: 18px, - * `headingSm` large screen: 18px / small screen: 16px, - * `bodyLgMedium` large screen: 18px / small screen: 16px, - * `bodyMd` large screen: 16px / small screen: 14px, - * `bodyMdMedium` large screen: 16px / small screen: 14px, - * `bodyMdBold` large screen: 16px / small screen: 14px, - * `bodySm` large screen: 14px / small screen: 12px, - * `bodySmMedium` large screen: 14px / small screen: 12px, - * `bodySmBold` large screen: 14px / small screen: 12px, - * `bodyXsMedium` large screen: 12px / small screen: 10px, - * `bodyXs` large screen: 12px / small screen: 10px, - * `inherit` - */ - variant?: TextVariant; - /** - * The color of the Text component Should use the COLOR object from - * ./ui/helpers/constants/design-system.js - */ - color?: TextColor | Color; - /** - * The font-weight of the Text component. Should use the FontWeight enum from - * ./ui/helpers/constants/design-system.js - */ - fontWeight?: FontWeight; - /** - * The font-style of the Text component. Should use the FontStyle enum from - * ./ui/helpers/constants/design-system.js - */ - fontStyle?: FontStyle; - /** - * The textTransform of the Text component. Should use the TextTransform enum from - * ./ui/helpers/constants/design-system.js - */ - textTransform?: TextTransform; - /** - * The text-align of the Text component. Should use the TextAlign enum from - * ./ui/helpers/constants/design-system.js - */ - textAlign?: TextAlign; - /** - * Change the dir (direction) global attribute of text to support the direction a language is written - * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides) - */ - textDirection?: TextDirection; - /** - * The overflow-wrap of the Text component. Should use the OverflowWrap enum from - * ./ui/helpers/constants/design-system.js - */ - overflowWrap?: OverflowWrap; - /** - * Used for long strings that can be cut off... - */ - ellipsis?: boolean; - /** - * Changes the root html element tag of the Text component. - */ - as?: ValidTagType; - /** - * Additional className to assign the Text component - */ - className?: string; -}