feat(Text.Headline): add tone property to Text.Headline (#2887)

Co-authored-by: Ddouglasz <[email protected]>
commercetools · Sep 2, 2024 · 7a0c58b · 7a0c58b
1 parent 7b02242
commit 7a0c58b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 9 deletions.
diff --git a/.changeset/selfish-bottles-sip.md b/.changeset/selfish-bottles-sip.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/text': minor
+---
+
+Add the tone prop to Text.Headline component. Just like the other derivatives of the Text components, we want to be able to change the Text color of the Text.Headline through the tone property.
diff --git a/packages/components/text/README.md b/packages/components/text/README.md
@@ -18,15 +18,16 @@ import Text from '@commercetools-uikit/text';
 
 ### Properties
 
-| Props         | Type             | Required | Values               | Default | Description                                                                               |
-| ------------- | ---------------- | :------: | -------------------- | ------- | ----------------------------------------------------------------------------------------- |
-| `as`          | `String`         |    ✅    | `['h1', 'h2', 'h3']` | -       | -                                                                                         |
-| `children`    | `PropTypes.node` | ✅ (\*)  | -                    | -       | -                                                                                         |
-| `intlMessage` | `intl message`   | ✅ (\*)  | -                    | -       | An `intl` message object that will be rendered with `FormattedMessage`                    |
-| `id`          | `String`         |    -     | -                    | -       | Used as HTML id property                                                                  |
-| `title`       | `String`         |    -     | -                    | -       | Text to show in a tooltip on hover over the element                                       |
-| `truncate`    | `Bool`           |    -     | -                    | `false` | Option for truncate content in case the screen has small width                            |
-| `nowrap`      | `Bool`           |    -     | -                    | `false` | The content in the element will not be wrapped to a new line unless explicitly specified. |
+| Props         | Type             | Required | Values                                                                        | Default | Description                                                                               |
+| ------------- | ---------------- | :------: | ----------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `as`          | `String`         |    ✅    | `['h1', 'h2', 'h3']`                                                          | -       | -                                                                                         |
+| `children`    | `PropTypes.node` | ✅ (\*)  | -                                                                             | -       | -                                                                                         |
+| `intlMessage` | `intl message`   | ✅ (\*)  | -                                                                             | -       | An `intl` message object that will be rendered with `FormattedMessage`                    |
+| `id`          | `String`         |    -     | -                                                                             | -       | Used as HTML id property                                                                  |
+| `title`       | `String`         |    -     | -                                                                             | -       | Text to show in a tooltip on hover over the element                                       |
+| `truncate`    | `Bool`           |    -     | -                                                                             | `false` | Option for truncate content in case the screen has small width                            |
+| `nowrap`      | `Bool`           |    -     | -                                                                             | `false` | The content in the element will not be wrapped to a new line unless explicitly specified. |
+| `tone`        | `String`         |    -     | `['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative']` | -       |                                                                                           |
 
 > `*`: `children` is required only if `intlMessage` is not provided
 

diff --git a/packages/components/text/src/text.story.js b/packages/components/text/src/text.story.js
@@ -25,6 +25,15 @@ storiesOf('Basics|Typography/Text', module)
         title={text('title', 'Text to be shown as tooltip on hover')}
         truncate={boolean('truncate', false)}
         nowrap={boolean('nowrap', false)}
+        tone={select('Text tone', {
+          none: null,
+          primary: 'primary',
+          information: 'information',
+          secondary: 'secondary',
+          tertiary: 'tertiary',
+          positive: 'positive',
+          negative: 'negative',
+        })}
       >
         {text('Text', 'Sample text Headline')}
       </Text.Headline>

diff --git a/packages/components/text/src/text.styles.ts b/packages/components/text/src/text.styles.ts
@@ -147,6 +147,7 @@ export const headlineStyles = (props: THeadlineProps) => css`
   font-size: ${getElementFontSize(props.as)};
   line-height: ${getElementLineHeight(props.as)};
   font-weight: ${getElementFontWeight(props.as)};
+  ${props.tone && getTone(props.tone)}
   ${props.truncate && truncate}
   ${props.nowrap && nowrap}
 `;

diff --git a/packages/components/text/src/text.tsx b/packages/components/text/src/text.tsx
@@ -87,6 +87,7 @@ Text.displayName = 'Text';
 export type THeadlineProps = {
   as?: 'h1' | 'h2' | 'h3';
   truncate?: boolean;
+  tone?: TTone;
   nowrap?: boolean;
 } & TBasicTextProps &
   TBasicHeadlineProps;

diff --git a/packages/components/text/src/text.visualroute.jsx b/packages/components/text/src/text.visualroute.jsx
@@ -29,6 +29,36 @@ export const component = () => (
         </Text.Headline>
       </Spec>
     </NarrowBox>
+    <Spec label="Headline - tone - primary">
+      <Text.Headline tone="primary" as="h1">
+        {'Headline tone primary'}
+      </Text.Headline>
+    </Spec>
+    <Spec label="Headline - tone - secondary">
+      <Text.Headline tone="secondary" as="h1">
+        {'Headline tone secondary'}
+      </Text.Headline>
+    </Spec>
+    <Spec label="Headline - tone - tertiary">
+      <Text.Headline tone="tertiary" as="h1">
+        {'Headline tone tertiary'}
+      </Text.Headline>
+    </Spec>
+    <Spec label="Headline - tone - information">
+      <Text.Headline tone="information" as="h1">
+        {'Headline tone information'}
+      </Text.Headline>
+    </Spec>
+    <Spec label="Headline - tone - positive">
+      <Text.Headline tone="positive" as="h1">
+        {'Headline tone positive'}
+      </Text.Headline>
+    </Spec>
+    <Spec label="Headline - tone - negative">
+      <Text.Headline tone="negative" as="h1">
+        {'Headline tone negative'}
+      </Text.Headline>
+    </Spec>
 
     <Spec label="Headline - h2">
       <Text.Headline as="h2">{'Title H2'}</Text.Headline>