From 63f68a35c1674bde39c08ed66ab3454b7707ccc2 Mon Sep 17 00:00:00 2001 From: Oliver Abrahams Date: Thu, 29 Feb 2024 10:07:55 +0000 Subject: [PATCH] Add description to the Theme prop in storybook (#1230) Update theme docs in storybook --- .../src/@types/Icons.ts | 8 +++++ .../src/accordion/Accordion.tsx | 13 ++++++++ .../src/accordion/AccordionRow.tsx | 11 ++++++- .../src/button/@types/SharedButtonProps.ts | 16 +++++++++- .../src/checkbox/Checkbox.tsx | 15 ++++++++- .../src/checkbox/CheckboxGroup.stories.tsx | 7 ++--- .../src/checkbox/CheckboxGroup.tsx | 12 +++++++ .../src/choice-card/ChoiceCard.tsx | 18 ++++++++++- .../choice-card/ChoiceCardGroup.stories.tsx | 2 +- .../src/choice-card/ChoiceCardGroup.tsx | 12 +++++++ .../src/icons/Icons.stories.tsx | 31 +++++++++++++++++++ .../src/label/@types/LabelProps.ts | 11 +++++++ .../src/label/@types/LegendProps.ts | 11 +++++++ .../src/link/@types/SharedLinkProps.ts | 11 +++++++ .../src/radio/Radio.stories.tsx | 2 +- .../src/radio/Radio.tsx | 13 +++++++- .../src/radio/RadioGroup.tsx | 12 ++++++- .../src/select/Select.tsx | 19 ++++++++++++ .../src/text-area/TextArea.tsx | 23 +++++++++++--- .../src/text-input/TextInput.tsx | 25 ++++++++++++--- .../user-feedback/@types/UserFeedbackProps.ts | 9 ++++++ 21 files changed, 259 insertions(+), 22 deletions(-) diff --git a/libs/@guardian/source-react-components/src/@types/Icons.ts b/libs/@guardian/source-react-components/src/@types/Icons.ts index 0c9201607..e793c1eb7 100644 --- a/libs/@guardian/source-react-components/src/@types/Icons.ts +++ b/libs/@guardian/source-react-components/src/@types/Icons.ts @@ -4,6 +4,14 @@ export type IconSize = 'xsmall' | 'small' | 'medium'; export interface IconProps { size?: IconSize; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have have been set out by the design system team. + * The colours which can be changed are: + * + * `fill` + * + */ theme?: Partial; isAnnouncedByScreenReader?: boolean; } diff --git a/libs/@guardian/source-react-components/src/accordion/Accordion.tsx b/libs/@guardian/source-react-components/src/accordion/Accordion.tsx index 86baba492..2958652e3 100644 --- a/libs/@guardian/source-react-components/src/accordion/Accordion.tsx +++ b/libs/@guardian/source-react-components/src/accordion/Accordion.tsx @@ -21,6 +21,19 @@ export interface AccordionProps extends Props { */ hideToggleLabel?: boolean; children: ReactElement[]; + /** + * Partial or complete theme to override the component's colour palette. + * Sanctioned colours to change have been set out by the design system team. + * + * The theme colours available to change are: + * + * `textLabel`
+ * `textBody`
+ * `textCta`
+ * `border`
+ * `iconFill` + * + */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/accordion/AccordionRow.tsx b/libs/@guardian/source-react-components/src/accordion/AccordionRow.tsx index 45359c583..667da54bd 100644 --- a/libs/@guardian/source-react-components/src/accordion/AccordionRow.tsx +++ b/libs/@guardian/source-react-components/src/accordion/AccordionRow.tsx @@ -48,7 +48,16 @@ export interface AccordionRowProps */ hideToggleLabel?: boolean; /** - * Overriding of partial or entire Accordion Row theme. + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textBody`
+ * `textCta`
+ * `border`
+ * `iconFill` + * */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/button/@types/SharedButtonProps.ts b/libs/@guardian/source-react-components/src/button/@types/SharedButtonProps.ts index d02722f57..fe53737b7 100644 --- a/libs/@guardian/source-react-components/src/button/@types/SharedButtonProps.ts +++ b/libs/@guardian/source-react-components/src/button/@types/SharedButtonProps.ts @@ -44,7 +44,21 @@ export interface SharedButtonProps extends Props { */ loadingAnnouncement?: string; /** - * Overriding of partial or entire button theme. + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textPrimary`
+ * `backgroundPrimary`
+ * `backgroundPrimaryHover`
+ * `textSecondary`
+ * `backgroundSecondary`
+ * `backgroundSecondaryHover`
+ * `textTertiary`
+ * `backgroundTertiaryHover`
+ * `borderTertiary`
+ * `textSubdued`
+ * */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx b/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx index 193165bb4..e513b21fe 100644 --- a/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx +++ b/libs/@guardian/source-react-components/src/checkbox/Checkbox.tsx @@ -58,7 +58,20 @@ export interface CheckboxProps */ error?: boolean; /** - * A component level theme to override the colour palette of the choice card component + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `borderUnselected`
+ * `borderHover`
+ * `borderSelected`
+ * `borderError`
+ * `fillSelected`
+ * `fillUnselected`
+ * `textLabel`
+ * `textSupporting`
+ * `textIndeterminate` + * */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.stories.tsx b/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.stories.tsx index e3cefb7e0..33b4551ff 100644 --- a/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.stories.tsx +++ b/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.stories.tsx @@ -4,11 +4,8 @@ import { useState } from 'react'; import { Checkbox } from './Checkbox'; import CheckboxStories from './Checkbox.stories'; import { CheckboxGroup } from './CheckboxGroup'; -import { - ThemeCheckbox, - themeCheckboxBrand, - themeCheckboxGroupBrand, -} from './theme'; +import type { ThemeCheckbox } from './theme'; +import { themeCheckboxBrand, themeCheckboxGroupBrand } from './theme'; const meta: Meta = { title: 'CheckboxGroup', diff --git a/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx b/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx index f3aeaee23..5fbebee14 100644 --- a/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx +++ b/libs/@guardian/source-react-components/src/checkbox/CheckboxGroup.tsx @@ -35,6 +35,18 @@ export interface CheckboxGroupProps extends Props { */ error?: string; children: JSX.Element | JSX.Element[]; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * + */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/choice-card/ChoiceCard.tsx b/libs/@guardian/source-react-components/src/choice-card/ChoiceCard.tsx index 188ac86e5..452abf8f8 100644 --- a/libs/@guardian/source-react-components/src/choice-card/ChoiceCard.tsx +++ b/libs/@guardian/source-react-components/src/choice-card/ChoiceCard.tsx @@ -56,7 +56,23 @@ export interface ChoiceCardProps */ type?: 'radio' | 'checkbox'; /** - * A component level theme to override the colour palette of the choice card component + * A component level theme to override the theme. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textUnselected`
+ * `textSelected`
+ * `textHover`
+ * `textError`
+ * `borderUnselected`
+ * `borderSelected`
+ * `borderHover`
+ * `borderError`
+ * `backgroundUnselected`
+ * `backgroundHover`
+ * `backgroundSelected`
+ * `backgroundTick`
+ * */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.stories.tsx b/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.stories.tsx index ba96bc555..a72b32d68 100644 --- a/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.stories.tsx +++ b/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.stories.tsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import { ChoiceCard } from './ChoiceCard'; import ChoiceCardStories from './ChoiceCard.stories'; import { ChoiceCardGroup } from './ChoiceCardGroup'; -import { ThemeChoiceCard } from './theme'; +import type { ThemeChoiceCard } from './theme'; const meta: Meta = { title: 'ChoiceCardGroup', diff --git a/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx b/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx index 347736493..61c03a034 100644 --- a/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx +++ b/libs/@guardian/source-react-components/src/choice-card/ChoiceCardGroup.tsx @@ -51,6 +51,18 @@ export interface ChoiceCardGroupProps */ columns?: ChoiceCardColumns; children: JSX.Element | JSX.Element[]; + /** + * A component level theme to override the theme. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * + */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/icons/Icons.stories.tsx b/libs/@guardian/source-react-components/src/icons/Icons.stories.tsx index 4ff92006d..b3ff01eaf 100644 --- a/libs/@guardian/source-react-components/src/icons/Icons.stories.tsx +++ b/libs/@guardian/source-react-components/src/icons/Icons.stories.tsx @@ -265,6 +265,37 @@ type IconChromaticStoryArgs = { const meta: Meta = { title: 'Icons', + args: { + theme: undefined, + isAnnouncedByScreenReader: false, + size: 'small', + }, + argTypes: { + theme: { + description: + " Partial or complete theme to override the component's colour palette.\n" + + 'The sanctioned colours have have been set out by the design system team.\n', + table: { + type: { + summary: 'Partial', + detail: '{\n' + '\tfill?: string;\n' + '}', + }, + }, + }, + size: { + control: 'select', + options: ['xsmall', 'small', 'medium'], + description: 'The size of the Icon', + table: { + type: { summary: 'xsmall | small | medium' }, + }, + }, + icons: { + table: { + disable: true, + }, + }, + }, }; export default meta; diff --git a/libs/@guardian/source-react-components/src/label/@types/LabelProps.ts b/libs/@guardian/source-react-components/src/label/@types/LabelProps.ts index b756578c5..0b23656dc 100644 --- a/libs/@guardian/source-react-components/src/label/@types/LabelProps.ts +++ b/libs/@guardian/source-react-components/src/label/@types/LabelProps.ts @@ -29,5 +29,16 @@ export interface LabelProps size?: InputSize; cssOverrides?: SerializedStyles | SerializedStyles[]; children?: ReactNode; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/label/@types/LegendProps.ts b/libs/@guardian/source-react-components/src/label/@types/LegendProps.ts index 0d39e1cc5..1c9fbe2d2 100644 --- a/libs/@guardian/source-react-components/src/label/@types/LegendProps.ts +++ b/libs/@guardian/source-react-components/src/label/@types/LegendProps.ts @@ -21,5 +21,16 @@ export interface LegendProps extends HTMLAttributes, Props { */ hideLabel?: boolean; cssOverrides?: SerializedStyles | SerializedStyles[]; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/link/@types/SharedLinkProps.ts b/libs/@guardian/source-react-components/src/link/@types/SharedLinkProps.ts index c62b8df69..b8ff6e024 100644 --- a/libs/@guardian/source-react-components/src/link/@types/SharedLinkProps.ts +++ b/libs/@guardian/source-react-components/src/link/@types/SharedLinkProps.ts @@ -26,5 +26,16 @@ export interface SharedLinkProps extends Props { */ iconSide?: IconSide; children?: ReactNode; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textPrimary`
+ * `textPrimaryHover`
+ * `textSecondary`
+ * `textSecondaryHover`
+ * + */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/radio/Radio.stories.tsx b/libs/@guardian/source-react-components/src/radio/Radio.stories.tsx index 0de12241e..948997511 100644 --- a/libs/@guardian/source-react-components/src/radio/Radio.stories.tsx +++ b/libs/@guardian/source-react-components/src/radio/Radio.stories.tsx @@ -1,8 +1,8 @@ +import { palette } from '@guardian/source-foundations'; import type { Meta, StoryFn } from '@storybook/react'; import { Radio } from './Radio'; import type { RadioProps } from './Radio'; import { themeRadioBrand } from './theme'; -import { palette } from '@guardian/source-foundations'; const meta: Meta = { title: 'Radio', diff --git a/libs/@guardian/source-react-components/src/radio/Radio.tsx b/libs/@guardian/source-react-components/src/radio/Radio.tsx index 16ea4d946..4dc0013ec 100644 --- a/libs/@guardian/source-react-components/src/radio/Radio.tsx +++ b/libs/@guardian/source-react-components/src/radio/Radio.tsx @@ -46,7 +46,18 @@ export interface RadioProps */ supporting?: string | ReactNode; /** - * Partial or complete theme to override radio button's colour palette + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `borderSelected`
+ * `borderUnselected`
+ * `borderHover`
+ * `borderError`
+ * `fillSelected`
+ * `fillUnselected`
+ * `textLabel`
+ * `textSupporting`
*/ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx b/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx index fbd0a940e..92aba3376 100644 --- a/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx +++ b/libs/@guardian/source-react-components/src/radio/RadioGroup.tsx @@ -40,7 +40,17 @@ export interface RadioGroupProps */ error?: string; /** - * Partial or complete theme to override radio button's colour palette + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * `borderHover`
+ * `borderError`
*/ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/select/Select.tsx b/libs/@guardian/source-react-components/src/select/Select.tsx index 805b8388d..5360cbd86 100644 --- a/libs/@guardian/source-react-components/src/select/Select.tsx +++ b/libs/@guardian/source-react-components/src/select/Select.tsx @@ -50,6 +50,25 @@ export interface SelectProps */ success?: string; children: JSX.Element | JSX.Element[]; + /** + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textUserInput`
+ * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * `backgroundInput`
+ * `border`
+ * `borderActive`
+ * `borderError`
+ * `borderSuccess`
+ * `iconFill`
+ * + */ theme?: Partial; } diff --git a/libs/@guardian/source-react-components/src/text-area/TextArea.tsx b/libs/@guardian/source-react-components/src/text-area/TextArea.tsx index a3bbefa10..37a428af4 100644 --- a/libs/@guardian/source-react-components/src/text-area/TextArea.tsx +++ b/libs/@guardian/source-react-components/src/text-area/TextArea.tsx @@ -1,6 +1,7 @@ import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'; import { descriptionId, generateSourceId } from '@guardian/source-foundations'; import type { InputHTMLAttributes } from 'react'; +import type { InputSize } from '../@types/InputSize'; import type { Props } from '../@types/Props'; import { Label } from '../label/Label'; import { InlineError } from '../user-feedback/InlineError'; @@ -14,8 +15,8 @@ import { textArea, widthFluid, } from './styles'; -import { InputSize } from '../@types/InputSize'; -import { ThemeTextArea, themeTextArea } from './theme'; +import type { ThemeTextArea } from './theme'; +import { themeTextArea } from './theme'; export interface TextAreaProps extends Omit, 'size'>, @@ -61,7 +62,21 @@ export interface TextAreaProps */ rows?: number; /** - * Partial or complete theme to override text area's colour palette + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textUserInput`
+ * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * `backgroundInput`
+ * `border`
+ * `borderError`
+ * `borderSuccess`
+ * */ theme?: Partial; } @@ -152,7 +167,7 @@ export const TextArea = ({ id={textAreaId} aria-required={!optional} aria-invalid={!!error} - aria-describedby={error || success ? descriptionId(textAreaId) : ''} + aria-describedby={error ?? success ? descriptionId(textAreaId) : ''} required={!optional} rows={rows} className={getClassName()} diff --git a/libs/@guardian/source-react-components/src/text-input/TextInput.tsx b/libs/@guardian/source-react-components/src/text-input/TextInput.tsx index e0a0d1ded..28be7ca11 100644 --- a/libs/@guardian/source-react-components/src/text-input/TextInput.tsx +++ b/libs/@guardian/source-react-components/src/text-input/TextInput.tsx @@ -2,11 +2,13 @@ import type { SerializedStyles } from '@emotion/react'; import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'; import { descriptionId, generateSourceId } from '@guardian/source-foundations'; import type { InputHTMLAttributes } from 'react'; +import type { InputSize } from '../@types/InputSize'; import type { Props } from '../@types/Props'; import type { Theme } from '../@types/Theme'; import { Label } from '../label/Label'; import { InlineError } from '../user-feedback/InlineError'; import { InlineSuccess } from '../user-feedback/InlineSuccess'; +import { mergeThemes } from '../utils/themes'; import { errorInput, inlineMessageMargin, @@ -19,9 +21,8 @@ import { width4, widthFluid, } from './styles'; -import type { InputSize } from '../@types/InputSize'; -import { ThemeTextInput, themeTextInput } from './theme'; -import { mergeThemes } from '../utils/themes'; +import type { ThemeTextInput } from './theme'; +import { themeTextInput } from './theme'; export type Width = 30 | 10 | 4; @@ -78,7 +79,21 @@ export interface TextInputProps */ value?: string; /** - * Partial or complete theme to override text input's colour palette + * Partial or complete theme to override the component's colour palette. + * The sanctioned colours have been set out by the design system team. + * The colours which can be changed are: + * + * `textUserInput`
+ * `textLabel`
+ * `textOptional`
+ * `textSupporting`
+ * `textError`
+ * `textSuccess`
+ * `backgroundInput`
+ * `border`
+ * `borderError`
+ * `borderSuccess`
+ * */ theme?: Partial; } @@ -161,7 +176,7 @@ export const TextInput = ({ id={textInputId} aria-required={!optional} aria-invalid={!!error} - aria-describedby={error || success ? descriptionId(textInputId) : ''} + aria-describedby={error ?? success ? descriptionId(textInputId) : ''} required={!optional} {...props} /> diff --git a/libs/@guardian/source-react-components/src/user-feedback/@types/UserFeedbackProps.ts b/libs/@guardian/source-react-components/src/user-feedback/@types/UserFeedbackProps.ts index 3acb5ecd8..4cc5bc1e1 100644 --- a/libs/@guardian/source-react-components/src/user-feedback/@types/UserFeedbackProps.ts +++ b/libs/@guardian/source-react-components/src/user-feedback/@types/UserFeedbackProps.ts @@ -11,5 +11,14 @@ export interface UserFeedbackProps */ size?: InputSize; children: ReactNode; + /** + * Partial or complete theme to override the component's colour palette.
+ * The sanctioned colours have been set out by the design system team.
+ * The colours which can be changed are: + * + * `textSuccess`
+ * `textError` + * + */ theme?: Partial; }