BREAKING CHANGE(web-react): Switch Link, Heading and Text to v3 desig…

…n tokens #DS-1451

Remove inverted Link variant and introduce emphasis in Heading.

packages/web-react/src/components/Heading/README.md

@@ -3,15 +3,16 @@
 The Heading component provides helper classes to render headings.
 
 ```jsx
-<Heading elementType="h1" size="large" />
+<Heading elementType="h1" size="large" emphasis="bold" />
 ```
 
 ## API
 
-| Name          | Type                                        | Default  | Required | Description      |
-| ------------- | ------------------------------------------- | -------- | -------- | ---------------- |
-| `elementType` | `React.Element`                             | `div`    | ✕        | HTML tag         |
-| `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text |
+| Name          | Type                                        | Default  | Required | Description          |
+| ------------- | ------------------------------------------- | -------- | -------- | -------------------- |
+| `elementType` | `React.Element`                             | `div`    | ✕        | HTML tag             |
+| `emphasis`    | [`italic` \| `bold` \| `semibold`]          | —        | ✕        | Emphasis of the text |
+| `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text     |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

packages/web-react/src/components/Heading/__tests__/Heading.test.tsx

@@ -1,16 +1,16 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { sizeExtendedPropsTest, sizePropsTest } from '../../../../tests/providerTests/dictionaryPropsTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
-import { SizesDictionaryType, SizeExtendedDictionaryType } from '../../../types';
+import { SizesDictionaryType, SizeExtendedDictionaryType, HeadingEmphasis } from '../../../types';
 import Heading from '../Heading';
 import headingSizeDataProvider from './headingSizeDataProvider';
 
 describe('Heading', () => {
-  classNamePrefixProviderTest(Heading, 'typography-heading-medium-text');
+  classNamePrefixProviderTest(Heading, 'typography-headline-medium-regular');
 
   stylePropsTest(Heading);
 
@@ -20,9 +20,15 @@ describe('Heading', () => {
 
   restPropsTest(Heading, 'div');
 
-  it.each(headingSizeDataProvider)('should have for size %s an expected class %s', (size, expectedClassName) => {
-    const dom = render(<Heading size={size as SizesDictionaryType<string> as SizeExtendedDictionaryType<string>} />);
+  it.each(headingSizeDataProvider)('should have classname', (size, emphasis, expectedClassName) => {
+    render(
+      <Heading
+        size={size as SizesDictionaryType<string> as SizeExtendedDictionaryType<string>}
+        emphasis={emphasis as HeadingEmphasis}
+        elementType="h1"
+      />,
+    );
 
-    expect(dom.container.querySelector('div')).toHaveClass(expectedClassName);
+    expect(screen.getByRole('heading')).toHaveClass(expectedClassName as string);
   });
 });

packages/web-react/src/components/Heading/__tests__/headingSizeDataProvider.ts

@@ -1,10 +1,25 @@
 const headingSizeDataProvider = [
-  // size, expected class
-  ['xlarge', 'typography-heading-xlarge-text'],
-  ['large', 'typography-heading-large-text'],
-  ['medium', 'typography-heading-medium-text'],
-  ['small', 'typography-heading-small-text'],
-  ['xsmall', 'typography-heading-xsmall-text'],
+  // [size, emphasis, expectedClassName]
+  ['xsmall', undefined, 'typography-headline-xsmall-regular'],
+  ['small', undefined, 'typography-headline-small-regular'],
+  ['medium', undefined, 'typography-headline-medium-regular'],
+  ['large', undefined, 'typography-headline-large-regular'],
+  ['xlarge', undefined, 'typography-headline-xlarge-regular'],
+  ['xsmall', 'italic', 'typography-headline-xsmall-italic'],
+  ['small', 'italic', 'typography-headline-small-italic'],
+  ['medium', 'italic', 'typography-headline-medium-italic'],
+  ['large', 'italic', 'typography-headline-large-italic'],
+  ['xlarge', 'italic', 'typography-headline-xlarge-italic'],
+  ['xsmall', 'bold', 'typography-headline-xsmall-bold'],
+  ['small', 'bold', 'typography-headline-small-bold'],
+  ['medium', 'bold', 'typography-headline-medium-bold'],
+  ['large', 'bold', 'typography-headline-large-bold'],
+  ['xlarge', 'bold', 'typography-headline-xlarge-bold'],
+  ['xsmall', 'semibold', 'typography-headline-xsmall-semibold'],
+  ['small', 'semibold', 'typography-headline-small-semibold'],
+  ['medium', 'semibold', 'typography-headline-medium-semibold'],
+  ['large', 'semibold', 'typography-headline-large-semibold'],
+  ['xlarge', 'semibold', 'typography-headline-xlarge-semibold'],
 ];
 
 export default headingSizeDataProvider;

packages/web-react/src/components/Heading/__tests__/useHeadingStyleProps.ts

@@ -4,8 +4,8 @@ import { useHeadingStyleProps } from '../useHeadingStyleProps';
 import headingSizeDataProvider from './headingSizeDataProvider';
 
 describe('useHeadingStyleProps', () => {
-  it.each(headingSizeDataProvider)('should return for size %s expected class %s', (size, expectedClassName) => {
-    const props = { size } as SpiritHeadingProps;
+  it.each(headingSizeDataProvider)('should return typography headline class', (size, emphasis, expectedClassName) => {
+    const props = { size, emphasis } as SpiritHeadingProps;
     const { result } = renderHook(() => useHeadingStyleProps(props));
 
     expect(result.current.classProps).toBe(expectedClassName);

packages/web-react/src/components/Heading/demo/HeadingEmphasis.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Heading from '../Heading';
+
+const HeadingEmphasis = () => (
+  <>
+    <Heading>Heading regular</Heading>
+    <Heading emphasis="semibold">Heading semibold</Heading>
+    <Heading emphasis="bold">Heading bold</Heading>
+    <Heading emphasis="italic">Heading italic</Heading>
+  </>
+);
+
+export default HeadingEmphasis;

packages/web-react/src/components/Heading/demo/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
 import HeadingDefault from './HeadingDefault';
+import HeadingEmphasis from './HeadingEmphasis';
 import HeadingSizes from './HeadingSizes';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
@@ -12,5 +13,8 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <DocsSection title="Sizes">
       <HeadingSizes />
     </DocsSection>
+    <DocsSection title="Emphasis">
+      <HeadingEmphasis />
+    </DocsSection>
   </React.StrictMode>,
 );

packages/web-react/src/components/Heading/stories/Heading.stories.tsx

@@ -20,6 +20,13 @@ const meta: Meta<typeof Heading> = {
     elementType: {
       control: 'text',
     },
+    emphasis: {
+      control: 'select',
+      options: ['italic', 'bold', 'semibold', undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
     size: {
       control: 'select',
       options: [...Object.values(SizesExtended)],
@@ -31,6 +38,7 @@ const meta: Meta<typeof Heading> = {
   args: {
     children: 'Heading',
     elementType: 'h1',
+    emphasis: undefined,
     size: SizesExtended.MEDIUM,
   },
 };

packages/web-react/src/components/Heading/useHeadingStyleProps.ts

@@ -12,10 +12,10 @@ export interface HeadingStyles<T extends ElementType = 'p'> {
 export function useHeadingStyleProps<T extends ElementType = 'div', S = void>(
   props: SpiritHeadingProps<T, S>,
 ): HeadingStyles<T> {
-  const { size, ...restProps } = props;
+  const { size, emphasis, ...restProps } = props;
 
-  const headingClass = useClassNamePrefix('typography-heading');
-  const className = `${headingClass}-${size}-text`;
+  const headingClass = useClassNamePrefix('typography-headline');
+  const className = `${headingClass}-${size}-${emphasis || 'regular'}`;
 
   return {
     classProps: className,

packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts

@@ -2,13 +2,13 @@ const linkPropsDataProvider = [
   // color, isUnderlined, isDisabled, expectedClassName
   ['primary', false, false, 'link-primary'],
   ['secondary', false, false, 'link-secondary'],
-  ['inverted', false, false, 'link-inverted'],
+  ['tertiary', false, false, 'link-tertiary'],
   ['primary', true, false, 'link-primary link-underlined'],
   ['secondary', true, false, 'link-secondary link-underlined'],
-  ['inverted', true, false, 'link-inverted link-underlined'],
+  ['tertiary', true, false, 'link-tertiary link-underlined'],
   ['primary', true, true, 'link-primary link-disabled link-underlined'],
   ['secondary', true, true, 'link-secondary link-disabled link-underlined'],
-  ['inverted', true, true, 'link-inverted link-disabled link-underlined'],
+  ['tertiary', true, true, 'link-tertiary link-disabled link-underlined'],
 ];
 
 export default linkPropsDataProvider;

packages/web-react/src/components/Link/demo/LinkColors.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import DocsBox from '../../../../docs/DocsBox';
 import Link from '../Link';
 
 const LinkColors = () => (
@@ -12,11 +11,9 @@ const LinkColors = () => (
       Secondary Link
     </Link>
 
-    <DocsBox>
-      <Link href="#" color="inverted">
-        Inverted Link
-      </Link>
-    </DocsBox>
+    <Link href="#" color="tertiary">
+      Tertiary Link
+    </Link>
   </>
 );
 

packages/web-react/src/components/Link/demo/LinkDisabled.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import DocsBox from '../../../../docs/DocsBox';
 import Link from '../Link';
 
 const LinkDisabled = () => (
@@ -12,11 +11,9 @@ const LinkDisabled = () => (
       Secondary Disabled Link
     </Link>
 
-    <DocsBox>
-      <Link href="#" color="inverted" isDisabled>
-        Inverted Disabled Link
-      </Link>
-    </DocsBox>
+    <Link href="#" color="tertiary" isDisabled>
+      Tertiary Disabled Link
+    </Link>
   </>
 );
 

packages/web-react/src/components/Text/README.md

@@ -11,7 +11,7 @@ The Text component provides helper classes to render text.
 | Name          | Type                                        | Default  | Required | Description          |
 | ------------- | ------------------------------------------- | -------- | -------- | -------------------- |
 | `elementType` | `React.Element`                             | `p`      | ✕        | HTML tag             |
-| `emphasis`    | [`italic` \| `bold`]                        | —        | ✕        | Emphasis of the text |
+| `emphasis`    | [`italic` \| `bold` \| `semibold`]          | —        | ✕        | Emphasis of the text |
 | `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text     |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].

packages/web-react/src/components/Text/__tests__/Text.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import '@testing-library/jest-dom';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
@@ -10,7 +10,7 @@ import Text from '../Text';
 import textPropsDataProvider from './textPropsDataProvider';
 
 describe('Text', () => {
-  classNamePrefixProviderTest(Text, 'typography-body-medium-text-regular');
+  classNamePrefixProviderTest(Text, 'typography-body-medium-regular');
 
   stylePropsTest(Text);
 
@@ -21,13 +21,15 @@ describe('Text', () => {
   restPropsTest(Text, 'p');
 
   it.each(textPropsDataProvider)('should have classname', (size, emphasis, expectedClassName) => {
-    const dom = render(
+    render(
       <Text
         size={size as SizesDictionaryType<string> as SizeExtendedDictionaryType<string>}
         emphasis={emphasis as TextEmphasis}
-      />,
+      >
+        Text
+      </Text>,
     );
 
-    expect(dom.container.querySelector('p')).toHaveClass(expectedClassName as string);
+    expect(screen.getByText('Text')).toHaveClass(expectedClassName as string);
   });
 });

packages/web-react/src/components/Text/__tests__/textPropsDataProvider.ts

@@ -1,20 +1,25 @@
 const textPropsDataProvider = [
   // [size, emphasis, expectedClassName]
-  ['xsmall', undefined, 'typography-body-xsmall-text-regular'],
-  ['small', undefined, 'typography-body-small-text-regular'],
-  ['medium', undefined, 'typography-body-medium-text-regular'],
-  ['large', undefined, 'typography-body-large-text-regular'],
-  ['xlarge', undefined, 'typography-body-xlarge-text-regular'],
-  ['xsmall', 'italic', 'typography-body-xsmall-text-italic'],
-  ['small', 'italic', 'typography-body-small-text-italic'],
-  ['medium', 'italic', 'typography-body-medium-text-italic'],
-  ['large', 'italic', 'typography-body-large-text-italic'],
-  ['xlarge', 'italic', 'typography-body-xlarge-text-italic'],
-  ['xsmall', 'bold', 'typography-body-xsmall-text-bold'],
-  ['small', 'bold', 'typography-body-small-text-bold'],
-  ['medium', 'bold', 'typography-body-medium-text-bold'],
-  ['large', 'bold', 'typography-body-large-text-bold'],
-  ['xlarge', 'bold', 'typography-body-xlarge-text-bold'],
+  ['xsmall', undefined, 'typography-body-xsmall-regular'],
+  ['small', undefined, 'typography-body-small-regular'],
+  ['medium', undefined, 'typography-body-medium-regular'],
+  ['large', undefined, 'typography-body-large-regular'],
+  ['xlarge', undefined, 'typography-body-xlarge-regular'],
+  ['xsmall', 'italic', 'typography-body-xsmall-italic'],
+  ['small', 'italic', 'typography-body-small-italic'],
+  ['medium', 'italic', 'typography-body-medium-italic'],
+  ['large', 'italic', 'typography-body-large-italic'],
+  ['xlarge', 'italic', 'typography-body-xlarge-italic'],
+  ['xsmall', 'bold', 'typography-body-xsmall-bold'],
+  ['small', 'bold', 'typography-body-small-bold'],
+  ['medium', 'bold', 'typography-body-medium-bold'],
+  ['large', 'bold', 'typography-body-large-bold'],
+  ['xlarge', 'bold', 'typography-body-xlarge-bold'],
+  ['xsmall', 'semibold', 'typography-body-xsmall-semibold'],
+  ['small', 'semibold', 'typography-body-small-semibold'],
+  ['medium', 'semibold', 'typography-body-medium-semibold'],
+  ['large', 'semibold', 'typography-body-large-semibold'],
+  ['xlarge', 'semibold', 'typography-body-xlarge-semibold'],
 ];
 
 export default textPropsDataProvider;

packages/web-react/src/components/Text/demo/TextEmphasis.tsx

@@ -4,6 +4,7 @@ import Text from '../Text';
 const TextEmphasis = () => (
   <>
     <Text>Text regular</Text>
+    <Text emphasis="semibold">Text semibold</Text>
     <Text emphasis="bold">Text bold</Text>
     <Text emphasis="italic">Text italic</Text>
   </>

packages/web-react/src/components/Text/stories/Text.stories.tsx

@@ -22,7 +22,7 @@ const meta: Meta<typeof Text> = {
     },
     emphasis: {
       control: 'select',
-      options: ['italic', 'bold', undefined],
+      options: ['italic', 'bold', 'semibold', undefined],
       table: {
         defaultValue: { summary: undefined },
       },

packages/web-react/src/components/Text/useTextStyleProps.ts

@@ -13,7 +13,7 @@ export function useTextStyleProps<T extends ElementType = 'p', S = void>(props:
   const { size, emphasis, ...restProps } = props;
 
   const textClass = useClassNamePrefix('typography-body');
-  const className = `${textClass}-${size}-text-${emphasis || 'regular'}`;
+  const className = `${textClass}-${size}-${emphasis || 'regular'}`;
 
   return {
     classProps: className,

packages/web-react/src/constants/dictionaries.ts

@@ -37,9 +37,11 @@ export const ActionButtonColors = {
   TERTIARY: 'tertiary',
 } as const;
 
+// TODO - Remove INVERTED from ActionLinkColors when Toast is updated in DS-1446
 export const ActionLinkColors = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
   INVERTED: 'inverted',
 } as const;
 

packages/web-react/src/types/heading.ts

@@ -1,6 +1,8 @@
 import { ElementType, JSXElementConstructor } from 'react';
 import { ChildrenProps, SizeExtendedDictionaryType, SizeProps, StyleProps, TransferProps } from './shared';
 
+export type HeadingEmphasis = 'bold' | 'semibold' | 'italic';
+
 export interface HeadingElementTypeProps<T extends ElementType = 'div'> {
   /**
    * The HTML element or React element used to render the Heading, e.g. 'div'.
@@ -18,4 +20,7 @@ export interface HeadingProps<T extends ElementType = 'div'>
 
 export interface SpiritHeadingProps<T extends ElementType = 'div', S = void>
   extends HeadingProps<T>,
-    SizeProps<SizeExtendedDictionaryType<S>> {}
+    SizeProps<SizeExtendedDictionaryType<S>> {
+  /** Emphasis of the heading */
+  emphasis?: HeadingEmphasis | undefined | null;
+}

packages/web-react/src/types/text.ts

@@ -1,7 +1,7 @@
 import { ElementType, JSXElementConstructor } from 'react';
 import { ChildrenProps, SizeExtendedDictionaryType, SizeProps, StyleProps, TransferProps } from './shared';
 
-export type TextEmphasis = 'bold' | 'italic';
+export type TextEmphasis = 'bold' | 'semibold' | 'italic';
 
 export interface TextElementTypeProps<T extends ElementType = 'p'> {
   /**