From 7a0c58b136dc7a3479b98cbecea11e8f69ac4728 Mon Sep 17 00:00:00 2001 From: Douglas Egiemeh Date: Mon, 2 Sep 2024 14:31:33 +0200 Subject: [PATCH] feat(Text.Headline): add tone property to Text.Headline (#2887) Co-authored-by: Ddouglasz --- .changeset/selfish-bottles-sip.md | 5 ++++ packages/components/text/README.md | 19 ++++++------ packages/components/text/src/text.story.js | 9 ++++++ packages/components/text/src/text.styles.ts | 1 + packages/components/text/src/text.tsx | 1 + .../components/text/src/text.visualroute.jsx | 30 +++++++++++++++++++ 6 files changed, 56 insertions(+), 9 deletions(-) create mode 100644 .changeset/selfish-bottles-sip.md diff --git a/.changeset/selfish-bottles-sip.md b/.changeset/selfish-bottles-sip.md new file mode 100644 index 0000000000..bdf8273046 --- /dev/null +++ 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 index 8f2822b2db..a539e19b95 100644 --- 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 index 6a2678ffba..3d29c4a513 100644 --- 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')} diff --git a/packages/components/text/src/text.styles.ts b/packages/components/text/src/text.styles.ts index 909c28961b..af9adf279b 100644 --- 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 index 325326b5d1..4907c3d5b9 100644 --- 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 index 4afd2ed0ff..627117821c 100644 --- a/packages/components/text/src/text.visualroute.jsx +++ b/packages/components/text/src/text.visualroute.jsx @@ -29,6 +29,36 @@ export const component = () => ( + + + {'Headline tone primary'} + + + + + {'Headline tone secondary'} + + + + + {'Headline tone tertiary'} + + + + + {'Headline tone information'} + + + + + {'Headline tone positive'} + + + + + {'Headline tone negative'} + + {'Title H2'}