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.

docs/DICTIONARIES.md

@@ -11,6 +11,7 @@ This project uses `dictionaries` to unify props between different components.
 
 - [Alignment](#alignment)
 - [Color](#color)
+- [Emphasis](#emphasis)
 - [Placement](#placement)
 - [Size](#size)
 - [Validation](#validation)
@@ -33,6 +34,12 @@ This project uses `dictionaries` to unify props between different components.
 | Emotion Color     | `success`, `informative`, `warning`, `danger`                    | EmotionColor    |
 | Text Color        | `primary`, `secondary`, `primary-inverted`, `secondary-inverted` | TextColor       |
 
+### Emphasis
+
+| Dictionary | Values                                  | Code name |
+| ---------- | --------------------------------------- | --------- |
+| Emphasis   | `regular`, `bold`, `semibold`, `italic` | Emphasis  |
+
 ### Placement
 
 | Dictionary | Values                                                                                                                                       | Code name |

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

@@ -3,15 +3,24 @@
 The Heading component provides helper classes to render headings.
 
 ```jsx
-<Heading elementType="h1" size="large" />
+<Heading />
+```
+
+With all props:
+
+```jsx
+<Heading elementType="h1" size="large" emphasis="semibold">
+  Heading
+</Heading>
 ```
 
 ## 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`    | [Emphasis dictionary][dictionary-emphasis]  | `bold`   | ✕        | 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]
@@ -33,6 +42,7 @@ const CustomText = (props: SpiritHeadingProps): JSX.Element => {
 };
 ```
 
+[dictionary-emphasis]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#emphasis
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches

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, EmphasisDictionaryType } from '../../../types';
 import Heading from '../Heading';
 import headingSizeDataProvider from './headingSizeDataProvider';
 
 describe('Heading', () => {
-  classNamePrefixProviderTest(Heading, 'typography-heading-medium-text');
+  classNamePrefixProviderTest(Heading, 'typography-headline-medium-bold');
 
   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 EmphasisDictionaryType}
+        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,30 @@
 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-bold'],
+  ['small', undefined, 'typography-headline-small-bold'],
+  ['medium', undefined, 'typography-headline-medium-bold'],
+  ['large', undefined, 'typography-headline-large-bold'],
+  ['xlarge', undefined, 'typography-headline-xlarge-bold'],
+  ['xsmall', 'regular', 'typography-headline-xsmall-regular'],
+  ['small', 'regular', 'typography-headline-small-regular'],
+  ['medium', 'regular', 'typography-headline-medium-regular'],
+  ['large', 'regular', 'typography-headline-large-regular'],
+  ['xlarge', 'regular', '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 emphasis="regular">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

@@ -1,7 +1,7 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { SizesExtended } from '../../../constants';
+import { Emphasis, SizesExtended } from '../../../constants';
 import ReadMe from '../README.md';
 import { Heading } from '..';
 
@@ -20,6 +20,13 @@ const meta: Meta<typeof Heading> = {
     elementType: {
       control: 'text',
     },
+    emphasis: {
+      control: 'select',
+      options: [...Object.values(Emphasis), 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 || 'bold'}`;
 
   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

@@ -8,11 +8,11 @@ The Text component provides helper classes to render text.
 
 ## API
 
-| Name          | Type                                        | Default  | Required | Description          |
-| ------------- | ------------------------------------------- | -------- | -------- | -------------------- |
-| `elementType` | `React.Element`                             | `p`      | ✕        | HTML tag             |
-| `emphasis`    | [`italic` \| `bold`]                        | —        | ✕        | Emphasis of the text |
-| `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text     |
+| Name          | Type                                        | Default   | Required | Description          |
+| ------------- | ------------------------------------------- | --------- | -------- | -------------------- |
+| `elementType` | `React.Element`                             | `p`       | ✕        | HTML tag             |
+| `emphasis`    | [Emphasis dictionary][dictionary-emphasis]  | `regular` | ✕        | 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]
@@ -34,6 +34,7 @@ const CustomText = (props: SpiritTextProps): JSX.Element => {
 };
 ```
 
+[dictionary-emphasis]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#emphasis
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches

packages/web-react/src/components/Text/__tests__/Text.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, TextEmphasis } from '../../../types';
+import { SizesDictionaryType, SizeExtendedDictionaryType, EmphasisDictionaryType } from '../../../types';
 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}
-      />,
+        emphasis={emphasis as EmphasisDictionaryType}
+      >
+        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,30 @@
 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', 'regular', 'typography-body-xsmall-regular'],
+  ['small', 'regular', 'typography-body-small-regular'],
+  ['medium', 'regular', 'typography-body-medium-regular'],
+  ['large', 'regular', 'typography-body-large-regular'],
+  ['xlarge', 'regular', '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;