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

… tokens #DS-1451 Remove inverted Link variant and introduce emphasis in Heading.
lmc-eu · Sep 19, 2024 · 2d42419 · 2d42419
1 parent 32fa62f
commit 2d42419
Show file tree

Hide file tree

Showing 16 changed files with 151 additions and 42 deletions.
diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig b/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig
@@ -10,4 +10,8 @@
         {% include '@components/Heading/stories/HeadingSizes.twig' %}
     </DocsSection>
 
+    <DocsSection title="Emphasis">
+        {% include '@components/Heading/stories/HeadingEmphasis.twig' %}
+    </DocsSection>
+
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.twig b/packages/web-twig/src/Resources/components/Heading/Heading.twig
@@ -1,10 +1,11 @@
 {# API #}
 {%- set props = props | default([]) -%}
+{%- set _emphasis = props.emphasis | default('bold') -%}
 {%- set _size = props.size | default('medium') -%}
 {%- set _elementType = props.elementType | default('div') -%}
 
 {# Class names #}
-{%- set _rootClassName = _spiritClassPrefix ~ 'typography-heading-' ~ _size ~ '-text' -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'typography-heading-' ~ _size ~ '-' ~ _emphasis -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/packages/web-twig/src/Resources/components/Heading/README.md b/packages/web-twig/src/Resources/components/Heading/README.md
@@ -2,42 +2,77 @@
 
 This is Twig implementation of the [Heading][heading] component.
 
-Basic example usage:
+## Basic Usage
 
 ```twig
-<Heading>Heading</Heading>
+<Heading>This is a heading</Heading>
 ```
 
-Advanced example usage:
+## Element Type
+
+Use the `elementType` prop to set the HTML tag of the Heading component.
+
+```twig
+<Heading elementType="h1">
+  Heading
+</Heading>
+```
+
+## Size
+
+Use the `size` prop to set the size of the text.
+
+```twig
+<Heading size="large">
+  Heading
+</Heading>
+```
+
+## Emphasis
+
+Use the `emphasis` prop to set the emphasis of the text.
+
+⚠️ This prop only affects styling, not the semantics of the element.
 
 ```twig
-<Heading size="large" elementType="h2">Text content</Heading>
+<Heading emphasis="semibold">Semibold heading</Heading>
 ```
 
-Without lexer:
+## Full Example
+
+```twig
+<Heading elementType="h1" size="large" emphasis="semibold">
+  Heading
+</Heading>
+```
+
+## Without Lexer
 
 ```twig
 {% embed "@spirit/heading.twig" with { props: {
-    size: 'medium'
+  emphasis: 'semibold',
+  size: 'medium'
 }} %}
-    {% block content %}
-        Text content
-    {% endblock %}
+  {% block content %}
+    Text content
+  {% endblock %}
 {% endembed %}
 ```
 
 ## API
 
 | Name          | Type                                        | Default  | Required | Description                                                    |
 | ------------- | ------------------------------------------- | -------- | -------- | -------------------------------------------------------------- |
-| `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text                                               |
 | `elementType` | `string`                                    | `div`    | ✕        | HTML tag to render                                             |
-| `translate`   | [`yes` \| `no` \| `''`]                     | `null`   | ✕        | Set to `no` to disable machine translation of the text content |
+| `emphasis`    | [Emphasis dictionary][dictionary-emphasis]  | `bold`   | ✕        | Emphasis of the text                                           |
+| `size`        | [Size Extended dictionary][dictionary-size] | `medium` | ✕        | Size of the text                                               |
+| `translate`   | \[`yes` \| `no` \| `''`]                    | `null`   | ✕        | Set to `no` to disable machine translation of the text content |
 
 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]
 and [escape hatches][readme-escape-hatches].
 
+[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
 [heading]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Heading
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes

diff --git a/...ages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig b/...ages/web-twig/src/Resources/components/Heading/__tests__/__fixtures__/headingDefault.twig
@@ -1,9 +1,23 @@
 <Heading>
     Example heading
 </Heading>
+
+<!-- Render as h1 -->
 <Heading elementType="h1">
     Example heading
 </Heading>
-<Heading size="large" translate="no">
+
+<!-- Render as semibold -->
+<Heading emphasis="semibold">
+    Example heading
+</Heading>
+
+<!-- Render with all props -->
+<Heading
+    elementType="h2"
+    emphasis="italic"
+    size="large"
+    translate="no"
+>
     Example heading
 </Heading>
diff --git a/...ig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html b/...ig/src/Resources/components/Heading/__tests__/__snapshots__/headingDefault.twig.snap.html
@@ -5,16 +5,23 @@
     </title>
   </head>
   <body>
-    <div class="typography-heading-medium-text">
+    <div class="typography-heading-medium-bold">
       Example heading
     </div>
+    <!-- Render as h1 -->
 
-    <h1 class="typography-heading-medium-text">
+    <h1 class="typography-heading-medium-bold">
       Example heading
     </h1>
+    <!-- Render as semibold -->
 
-    <div translate="no" class="typography-heading-large-text">
+    <div class="typography-heading-medium-semibold">
       Example heading
     </div>
+    <!-- Render with all props -->
+
+    <h2 translate="no" class="typography-heading-large-italic">
+      Example heading
+    </h2>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig b/packages/web-twig/src/Resources/components/Heading/stories/HeadingEmphasis.twig
@@ -0,0 +1,7 @@
+<Heading emphasis="regular">Heading regular</Heading>
+
+<Heading emphasis="semibold">Heading semibold</Heading>
+
+<Heading emphasis="bold">Heading bold</Heading>
+
+<Heading emphasis="italic">Heading italic</Heading>
diff --git a/packages/web-twig/src/Resources/components/Link/__tests__/__fixtures__/linkDefault.twig b/packages/web-twig/src/Resources/components/Link/__tests__/__fixtures__/linkDefault.twig
@@ -12,7 +12,7 @@
 
 <!-- Render with all props -->
 <Link
-    color="inverted"
+    color="tertiary"
     UNSAFE_className="my-custom-class"
     href="https://spirit.design"
     isDisabled

diff --git a/...web-twig/src/Resources/components/Link/__tests__/__snapshots__/linkDefault.twig.snap.html b/...web-twig/src/Resources/components/Link/__tests__/__snapshots__/linkDefault.twig.snap.html
@@ -8,6 +8,6 @@
     <a href="" class="link-primary">Example link</a> <!-- Render as an underlined secondary link -->
      <a href="/" class="link-secondary link-underlined">Example link</a> <!-- Render as disabled -->
      <a href="/" class="link-primary link-disabled">Example link</a> <!-- Render with all props -->
-     <a onclick="console.log('Hello!');" target="_blank" title="test title" href="https://spirit.design" class="link-inverted link-disabled link-underlined my-custom-class">Example link</a>
+     <a onclick="console.log('Hello!');" target="_blank" title="test title" href="https://spirit.design" class="link-tertiary link-disabled link-underlined my-custom-class">Example link</a>
   </body>
 </html>
diff --git a/packages/web-twig/src/Resources/components/Link/stories/LinkColors.twig b/packages/web-twig/src/Resources/components/Link/stories/LinkColors.twig
@@ -2,6 +2,4 @@
 
 <Link href="#" color="secondary">Secondary Link</Link>
 
-<DocsBox>
-    <Link href="#" color="inverted">Inverted Link</Link>
-</DocsBox>
+<Link href="#" color="tertiary">Tertiary Link</Link>
diff --git a/packages/web-twig/src/Resources/components/Link/stories/LinkDisabled.twig b/packages/web-twig/src/Resources/components/Link/stories/LinkDisabled.twig
@@ -2,6 +2,4 @@
 
 <Link href="#" color="secondary" isDisabled>Secondary Disabled Link</Link>
 
-<DocsBox>
-    <Link href="#" color="inverted" isDisabled>Inverted Disabled Link</Link>
-</DocsBox>
+<Link href="#" color="tertiary" isDisabled>Tertiary Disabled Link</Link>
diff --git a/packages/web-twig/src/Resources/components/Text/README.md b/packages/web-twig/src/Resources/components/Text/README.md
@@ -2,28 +2,60 @@
 
 This is Twig implementation of the [Text][text] component.
 
-Basic example usage:
+## Basic Usage
 
 ```twig
-<Text>Text content</Text>
+<Text>This is a text</Text>
 ```
 
-Advanced example usage:
+## Element Type
+
+Use the `elementType` prop to set the HTML tag of the Text component.
+
+```twig
+<Text elementType="span">
+  Text
+</Text>
+```
+
+## Size
+
+Use the `size` prop to set the size of the text.
+
+```twig
+<Text size="large">
+  Text
+</Text>
+```
+
+## Emphasis
+
+Use the `emphasis` prop to set the emphasis of the text.
+
+⚠️ This prop only affects styling, not the semantics of the element.
+
+```twig
+<Text emphasis="bold">Bold text</Text>
+```
+
+## Full Example
 
 ```twig
-<Text size="large" emphasis="italic">Text content</Text>
+<Text elementType="span" size="large" emphasis="bold">
+  Text
+</Text>
 ```
 
-Without lexer:
+## Without Lexer
 
 ```twig
 {% embed "@spirit/text.twig" with { props: {
-    size: 'medium'
-    emphasis: 'bold'
+  emphasis: 'bold',
+  size: 'medium'
 }} %}
-    {% block content %}
-        Text content
-    {% endblock %}
+  {% block content %}
+    Text content
+  {% endblock %}
 {% endembed %}
 ```
 
@@ -32,14 +64,15 @@ Without lexer:
 | Name          | Type                                        | Default   | Required | Description                                                    |
 | ------------- | ------------------------------------------- | --------- | -------- | -------------------------------------------------------------- |
 | `elementType` | `string`                                    | `p`       | ✕        | HTML tag to render                                             |
-| `emphasis`    | [`regular` \| `bold` \| `italic`]           | `regular` | ✕        | Emphasis of the text                                           |
+| `emphasis`    | [Emphasis dictionary][dictionary-emphasis]  | `regular` | ✕        | Emphasis of the text                                           |
 | `size`        | [Size Extended dictionary][dictionary-size] | `medium`  | ✕        | Size of the text                                               |
-| `translate`   | [`yes` \| `no` \| `''`]                     | `null`    | ✕        | Set to `no` to disable machine translation of the text content |
+| `translate`   | \[`yes` \| `no` \| `''`]                    | `null`    | ✕        | Set to `no` to disable machine translation of the text content |
 
 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]
 and [escape hatches][readme-escape-hatches].
 
+[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-twig/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches

diff --git a/packages/web-twig/src/Resources/components/Text/Text.twig b/packages/web-twig/src/Resources/components/Text/Text.twig
@@ -5,7 +5,7 @@
 {%- set _elementType = props.elementType | default('p') -%}
 
 {# Class names #}
-{%- set _rootClassName = _spiritClassPrefix ~ 'typography-body-' ~ _size ~ '-text-' ~ _emphasis -%}
+{%- set _rootClassName = _spiritClassPrefix ~ 'typography-body-' ~ _size ~ '-' ~ _emphasis -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/packages/web-twig/src/Resources/components/Text/__tests__/__fixtures__/textDefault.twig b/packages/web-twig/src/Resources/components/Text/__tests__/__fixtures__/textDefault.twig
@@ -5,6 +5,11 @@
     Example text
 </Text>
 
+<!-- Render as semibold -->
+<Text emphasis="semibold">
+    Example text
+</Text>
+
 <!-- Render with all props -->
 <Text
     elementType="div"

diff --git a/...web-twig/src/Resources/components/Text/__tests__/__snapshots__/textDefault.twig.snap.html b/...web-twig/src/Resources/components/Text/__tests__/__snapshots__/textDefault.twig.snap.html
@@ -5,17 +5,22 @@
     </title>
   </head>
   <body>
-    <p class="typography-body-medium-text-regular">
+    <p class="typography-body-medium-regular">
       Example text
     </p>
     <!-- Render as <div> -->
 
-    <div class="typography-body-medium-text-regular">
+    <div class="typography-body-medium-regular">
       Example text
     </div>
+    <!-- Render as semibold -->
+
+    <p class="typography-body-medium-semibold">
+      Example text
+    </p>
     <!-- Render with all props -->
 
-    <div translate="no" class="typography-body-large-text-bold">
+    <div translate="no" class="typography-body-large-bold">
       Example text
     </div>
   </body>

diff --git a/packages/web-twig/src/Resources/components/Text/stories/TextEmphasis.twig b/packages/web-twig/src/Resources/components/Text/stories/TextEmphasis.twig
@@ -1,5 +1,7 @@
 <Text emphasis="regular">Text regular</Text>
 
+<Text emphasis="semibold">Text semibold</Text>
+
 <Text emphasis="bold">Text bold</Text>
 
 <Text emphasis="italic">Text italic</Text>
diff --git a/...components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html b/...components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html
@@ -15,11 +15,11 @@
       </div>
 
       <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
-        <h2 class="typography-heading-xsmall-text">
+        <h2 class="typography-heading-xsmall-bold">
           Headline
         </h2>
 
-        <p class="typography-body-medium-text-regular">
+        <p class="typography-body-medium-regular">
           In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic
           elements
         </p>