PANGOLIN-3258 / SHIELD-960: Add Text tone: Tertiary for: text.capti…

…on, text.detail. text.body and text.subheadline (#2643) * feat(text): add tertiary tone * chore(changelog): add updates to changeset * test(text): add tertiary tone to text.visualroute.jsx * chore(readme): add caption draft to readme * chore(readme): add final instructions to caption readme * fix(readme): adjust table pt2 * Update .changeset/shiny-files-dress.md Co-authored-by: Carlos Cortizas <[email protected]> --------- Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Nov 14, 2023 · 0a5594d · 0a5594d · vercel · Nov 14, 2023
1 parent 6e53b7a
commit 0a5594d
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 40 deletions.
diff --git a/.changeset/shiny-files-dress.md b/.changeset/shiny-files-dress.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/text': minor
+---
+
+Add a new option (**tertiary**) for the `tone` property of `Text.Caption`, `Text.Detail`, `Text.Body` and `Text.Subheadline` component
diff --git a/packages/components/text/README.md b/packages/components/text/README.md
diff --git a/packages/components/text/src/text.story.js b/packages/components/text/src/text.story.js
@@ -40,6 +40,7 @@ storiesOf('Basics|Typography/Text', module)
           primary: 'primary',
           information: 'information',
           secondary: 'secondary',
+          tertiary: 'tertiary',
           positive: 'positive',
           negative: 'negative',
         })}
@@ -81,6 +82,7 @@ storiesOf('Basics|Typography/Text', module)
           primary: 'primary',
           information: 'information',
           secondary: 'secondary',
+          tertiary: 'tertiary',
           positive: 'positive',
           negative: 'negative',
           inverted: 'inverted',
@@ -113,6 +115,7 @@ storiesOf('Basics|Typography/Text', module)
           primary: 'primary',
           information: 'information',
           secondary: 'secondary',
+          tertiary: 'tertiary',
           positive: 'positive',
           negative: 'negative',
           inverted: 'inverted',
@@ -141,6 +144,7 @@ storiesOf('Basics|Typography/Text', module)
           primary: 'primary',
           information: 'information',
           secondary: 'secondary',
+          tertiary: 'tertiary',
           positive: 'positive',
           negative: 'negative',
           inverted: 'inverted',

diff --git a/packages/components/text/src/text.styles.ts b/packages/components/text/src/text.styles.ts
@@ -54,6 +54,8 @@ const getTone = (tone: string) => {
       return `color: ${designTokens.colorWarning};`;
     case 'critical':
       return `color: ${designTokens.colorError40};`;
+    case 'tertiary':
+      return `color: ${designTokens.colorNeutral60};`;
     case 'inherit':
       return 'color: inherit;';
     default:

diff --git a/packages/components/text/src/text.tsx b/packages/components/text/src/text.tsx
@@ -15,6 +15,7 @@ import {
 export type TTone =
   | 'primary'
   | 'secondary'
+  | 'tertiary'
   | 'information'
   | 'positive'
   | 'negative'

diff --git a/packages/components/text/src/text.visualroute.jsx b/packages/components/text/src/text.visualroute.jsx
@@ -68,6 +68,11 @@ export const component = () => (
         {'Subheadline tone secondary'}
       </Text.Subheadline>
     </Spec>
+    <Spec label="Subheadline - tone - tertiary">
+      <Text.Subheadline tone="tertiary" as="h4">
+        {'Subheadline tone tertiary'}
+      </Text.Subheadline>
+    </Spec>
     <Spec label="Subheadline - tone - information">
       <Text.Subheadline tone="information" as="h4">
         {'Subheadline tone information'}
@@ -120,6 +125,9 @@ export const component = () => (
     <Spec label="Body - tone - secondary">
       <Text.Body tone="secondary">Body text secondary</Text.Body>
     </Spec>
+    <Spec label="Body - tone - tertiary">
+      <Text.Body tone="tertiary">Body text tertiary</Text.Body>
+    </Spec>
     <Spec label="Body - tone - information">
       <Text.Body tone="information">Body text information</Text.Body>
     </Spec>
@@ -173,6 +181,9 @@ export const component = () => (
     <Spec label="Detail - tone - secondary">
       <Text.Detail tone="secondary">Detail text secondary</Text.Detail>
     </Spec>
+    <Spec label="Detail - tone - tertiary">
+      <Text.Detail tone="tertiary">Detail text tertiary</Text.Detail>
+    </Spec>
     <Spec label="Detail - tone - information">
       <Text.Detail tone="information">Detail text information</Text.Detail>
     </Spec>
@@ -222,6 +233,9 @@ export const component = () => (
     <Spec label="Caption - tone - secondary">
       <Text.Caption tone="secondary">Caption text secondary</Text.Caption>
     </Spec>
+    <Spec label="Caption - tone - tertiary">
+      <Text.Caption tone="tertiary">Caption text tertiary</Text.Caption>
+    </Spec>
     <Spec label="Caption - tone - information">
       <Text.Caption tone="information">Caption text information</Text.Caption>
     </Spec>