From 88154a4161f57828574e947ef25a9a33917da163 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 8 Mar 2022 10:29:32 -0800 Subject: [PATCH] Typography design token color and docs update (#13758) * Updating typography docs and removing some unused design-system constants * Adding boxProps controls to default story --- ui/components/ui/typography/README.mdx | 335 +++++++++++++++++- ui/components/ui/typography/typography.js | 153 ++++++-- .../ui/typography/typography.stories.js | 276 +++++++++++++-- ui/helpers/constants/design-system.js | 10 - 4 files changed, 703 insertions(+), 71 deletions(-) diff --git a/ui/components/ui/typography/README.mdx b/ui/components/ui/typography/README.mdx index 1286a8b1c..552b26573 100644 --- a/ui/components/ui/typography/README.mdx +++ b/ui/components/ui/typography/README.mdx @@ -1,16 +1,343 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import ActionableMessage from '../actionable-message'; import Typography from '.'; # Typography +Good typography improves readability, legibility and hierarchy of information. + - - - - ## Component API + +## Usage + +The following describes the props and example usage for this component. + +### Variant + +Use the `variant` prop and the `TYPOGRAPHY` object from `./ui/helpers/constants/design-system.js` to change the font size of the Typography component. + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { TYPOGRAPHY} from '../../../helpers/constants/design-system'; + +h1 +h2 +h3 +h4 +h5 +h6 +h7 +h8 +h9 +p +``` + +### Color + +Use the `color` prop and the `COLOR` object from `./ui/helpers/constants/design-system.js` to change the color of the Typography component. + + + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { COLORS} from '../../../helpers/constants/design-system'; + + + text-default + + + text-alternative + + + text-muted + + + overlay-inverse + + + primary-default + + + primary-inverse + + + secondary-default + + + secondary-inverse + + + error-default + + + error-inverse + + + success-default + + + success-inverse + + + warning-inverse + + + info-default + + + info-inverse + +``` + +## Deprecated Colors + +List of deprecated color props that are not theme compatible and should not be used. + +```js +/** !!! DEPRECATED DO NOT USE!!! */ +UI1: 'ui-1', +UI2: 'ui-2', +UI3: 'ui-3', +UI4: 'ui-4', +BLACK: 'black', +GREY: 'grey', +NEUTRAL_GREY: 'neutral-grey', +WHITE: 'white', +PRIMARY1: 'primary-1', +PRIMARY2: 'primary-2', +PRIMARY3: 'primary-3', +SECONDARY1: 'secondary-1', +SECONDARY2: 'secondary-2', +SECONDARY3: 'secondary-3', +SUCCESS1: 'success-1', +SUCCESS2: 'success-2', +SUCCESS3: 'success-3', +ERROR1: 'error-1', +ERROR2: 'error-2', +ERROR3: 'error-3', +ALERT1: 'alert-1', +ALERT2: 'alert-2', +ALERT3: 'alert-3', +``` + +### Font Weight + +Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/constants/design-system.js` to change the font weight of the Typography component. There are 2 font weights: + +- `FONT_WEIGHT.NORMAL` = `normal` || `400` +- `FONT_WEIGHT.BOLD` = `bold` || `700` + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { FONT_WEIGHT } from '../../../helpers/constants/design-system'; + + + normal + + + bold + +``` + +### Font Style + +Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constants/design-system.js` to change the font style of the Typography component. There are 2 font styles: + +- `FONT_STYLE.NORMAL` +- `FONT_STYLE.ITALIC` + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { FONT_STYLE } from '../../../helpers/constants/design-system'; + + + normal + + + bold + +``` + +### Align + +Use the `align` prop and the `TEXT_ALIGN` object from `./ui/helpers/constants/design-system.js` to change the text alignment of the Typography component. + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { TEXT_ALIGN } from '../../../helpers/constants/design-system'; + + + left + + + center + + + right + + + justify + + + end + +``` + +### Overflow Wrap + +Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/constants/design-system.js` to change the overflow wrap of the Typography component. + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system'; + +
+ + {OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d + + + {OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d + +
; +``` + +### Tag + +Use the `tag` prop to change the root html element of the Typography component + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; + +dd +div +dt +em +h1 +h2 +h3 +h4 +h5 +h6 +li +p +span +strong +``` + +Renders the html: + +```html +
dd
+
div
+
dt
+em +

h1

+

h2

+

h3

+

h4

+
h5
+
h6
+
  • li
    • +

    p

    +span +strong +``` + +### Margin + +Use the `margin` prop to change margin of the Typography component. For more control over bounding box properties use the `boxProps` props object. + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; + +This uses the boxProps prop; +``` + +### Box Props + +Use the `boxProps` prop object to pass any valid [Box](/?path=/story/ui-components-ui-box-box-stories-js--default-story) component props to the Typography component. `boxProps` will overwrite the `margin` prop + + + + + +```jsx +// If importing from ui/components/app/[YOUR_COMPONENT]/ directory +import Typography from '../../ui/typography'; +import { COLORS } from '../../../helpers/constants/design-system'; + + + This uses the boxProps prop +; +``` + +### Class Name + +Adds an additional class to the Typography component + +### Children + +The text content of the typography component diff --git a/ui/components/ui/typography/typography.js b/ui/components/ui/typography/typography.js index c04666aa6..9496533ba 100644 --- a/ui/components/ui/typography/typography.js +++ b/ui/components/ui/typography/typography.js @@ -13,24 +13,93 @@ import Box, { MultipleSizes } from '../box'; const { H6, H7, H8, H9 } = TYPOGRAPHY; +export const ValidColors = [ + COLORS.TEXT_DEFAULT, + COLORS.TEXT_ALTERNATIVE, + COLORS.TEXT_MUTED, + COLORS.OVERLAY_INVERSE, + COLORS.PRIMARY_DEFAULT, + COLORS.PRIMARY_INVERSE, + COLORS.SECONDARY_DEFAULT, + COLORS.SECONDARY_INVERSE, + COLORS.ERROR_DEFAULT, + COLORS.ERROR_INVERSE, + COLORS.SUCCESS_DEFAULT, + COLORS.SUCCESS_INVERSE, + COLORS.WARNING_INVERSE, + COLORS.INFO_DEFAULT, + COLORS.INFO_INVERSE, + /** + * COLORS BELOW HAVE BEEN DEPRECATED + */ + COLORS.UI1, + COLORS.UI2, + COLORS.UI3, + COLORS.UI4, + COLORS.BLACK, + COLORS.GREY, + COLORS.NEUTRAL_GREY, + COLORS.WHITE, + COLORS.PRIMARY1, + COLORS.PRIMARY2, + COLORS.PRIMARY3, + COLORS.SECONDARY1, + COLORS.SECONDARY2, + COLORS.SECONDARY3, + COLORS.SUCCESS1, + COLORS.SUCCESS2, + COLORS.SUCCESS3, + COLORS.ERROR1, + COLORS.ERROR2, + COLORS.ERROR3, + COLORS.ALERT1, + COLORS.ALERT2, + COLORS.ALERT3, +]; + +export const ValidTags = [ + 'dd', + 'div', + 'dt', + 'em', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'li', + 'p', + 'span', + 'strong', + 'ul', +]; + export default function Typography({ variant = TYPOGRAPHY.Paragraph, - className, color = COLORS.TEXT_DEFAULT, - tag, - children, fontWeight = 'normal', fontStyle = 'normal', align, overflowWrap, - boxProps = {}, + tag, margin = [1, 0], + boxProps = {}, + className, + children, }) { + let Tag = tag ?? variant; + let strongTagFontWeight; + + if (Tag === 'strong') { + strongTagFontWeight = FONT_WEIGHT.BOLD; + } + const computedClassName = classnames( 'typography', className, `typography--${variant}`, - `typography--weight-${fontWeight}`, + `typography--weight-${strongTagFontWeight || fontWeight}`, `typography--style-${fontStyle}`, { [`typography--align-${align}`]: Boolean(align), @@ -39,8 +108,6 @@ export default function Typography({ }, ); - let Tag = tag ?? variant; - if (Tag === TYPOGRAPHY.Paragraph) { Tag = 'p'; } else if ([H7, H8, H9].includes(Tag)) { @@ -59,33 +126,57 @@ export default function Typography({ } Typography.propTypes = { + /** + * The variation of font sizes of the Typography component + */ variant: PropTypes.oneOf(Object.values(TYPOGRAPHY)), - children: PropTypes.node.isRequired, - color: PropTypes.oneOf(Object.values(COLORS)), - className: PropTypes.string, + /** + * The color of the Typography component Should use the COLOR object from + * ./ui/helpers/constants/design-system.js + */ + color: PropTypes.oneOf(ValidColors), + /** + * The font-weight of the Typography component. Should use the FONT_WEIGHT object from + * ./ui/helpers/constants/design-system.js + */ + fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), + /** + * The font-style of the Typography component. Should use the FONT_STYLE object from + * ./ui/helpers/constants/design-system.js + */ + fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), + /** + * The text-align of the Typography component. Should use the TEXT_ALIGN object from + * ./ui/helpers/constants/design-system.js + */ align: PropTypes.oneOf(Object.values(TEXT_ALIGN)), + /** + * The overflow-wrap of the Typography component. Should use the OVERFLOW_WRAP object from + * ./ui/helpers/constants/design-system.js + */ + overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)), + /** + * Changes the root html element tag of the Typography component. + */ + tag: PropTypes.oneOf(ValidTags), + /** + * Adds margin to the Typography component should use valid sizes + * 1,2,4,6,8 or an array of those values + */ + margin: MultipleSizes, + /** + * Used to pass any valid Box component props such as margin or padding + * to the Typography component + */ boxProps: PropTypes.shape({ ...Box.propTypes, }), - margin: MultipleSizes, - fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)), - fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)), - overflowWrap: PropTypes.oneOf(Object.values(OVERFLOW_WRAP)), - tag: PropTypes.oneOf([ - 'p', - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'span', - 'strong', - 'em', - 'li', - 'div', - 'dt', - 'dd', - 'ul', - ]), + /** + * Additional className to assign the Typography component + */ + className: PropTypes.string, + /** + * The text content of the Typography component + */ + children: PropTypes.node.isRequired, }; diff --git a/ui/components/ui/typography/typography.stories.js b/ui/components/ui/typography/typography.stories.js index 119860c25..d36024ba4 100644 --- a/ui/components/ui/typography/typography.stories.js +++ b/ui/components/ui/typography/typography.stories.js @@ -2,12 +2,20 @@ import React from 'react'; import { COLORS, FONT_WEIGHT, + FONT_STYLE, TEXT_ALIGN, TYPOGRAPHY, + OVERFLOW_WRAP, } from '../../../helpers/constants/design-system'; + +import { ValidColors, ValidTags } from './typography'; + import README from './README.mdx'; import Typography from '.'; +const sizeKnobOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; +const marginSizeKnobOptions = [...sizeKnobOptions, 'auto']; + export default { title: 'Components/UI/Typography', id: __filename, @@ -17,49 +25,265 @@ export default { }, }, argTypes: { + variant: { + control: { type: 'select' }, + options: Object.values(TYPOGRAPHY), + }, color: { control: { type: 'select' }, - options: COLORS, - defaultValue: COLORS.BLACK, - }, - align: { - control: { type: 'select' }, - options: TEXT_ALIGN, - defaultValue: TEXT_ALIGN.LEFT, + options: ValidColors, }, fontWeight: { control: { type: 'select' }, - options: FONT_WEIGHT, - defaultValue: FONT_WEIGHT.NORMAL, + options: Object.values(FONT_WEIGHT), }, - variant: { + fontStyle: { control: { type: 'select' }, - options: TYPOGRAPHY, - defaultValue: TYPOGRAPHY.Paragraph, + options: Object.values(FONT_STYLE), }, - content: { + align: { + control: { type: 'select' }, + options: Object.values(TEXT_ALIGN), + }, + overflowWrap: { + control: { type: 'select' }, + options: Object.values(OVERFLOW_WRAP), + }, + tag: { + control: { type: 'select' }, + options: ValidTags, + }, + margin: { + options: marginSizeKnobOptions, + control: 'select', + }, + boxProps: { + control: 'object', + }, + className: { + control: { type: 'text' }, + }, + children: { control: { type: 'text' }, - defaultValue: 'The quick orange fox jumped over the lazy dog.', }, }, }; +function renderBackgroundColor(color) { + let bgColor; + switch (color) { + case COLORS.OVERLAY_INVERSE: + bgColor = COLORS.OVERLAY_DEFAULT; + break; + case COLORS.PRIMARY_INVERSE: + bgColor = COLORS.PRIMARY_DEFAULT; + break; + case COLORS.SECONDARY_INVERSE: + bgColor = COLORS.SECONDARY_DEFAULT; + break; + case COLORS.ERROR_INVERSE: + bgColor = COLORS.ERROR_DEFAULT; + break; + case COLORS.WARNING_INVERSE: + bgColor = COLORS.WARNING_DEFAULT; + break; + case COLORS.SUCCESS_INVERSE: + bgColor = COLORS.SUCCESS_DEFAULT; + break; + case COLORS.INFO_INVERSE: + bgColor = COLORS.INFO_DEFAULT; + break; + default: + bgColor = null; + break; + } + + return bgColor; +} + export const DefaultStory = (args) => ( -
    + + {args.children} + +); + +DefaultStory.storyName = 'Default'; + +DefaultStory.args = { + children: 'The quick orange fox jumped over the lazy dog.', +}; + +export const Variant = (args) => ( + <> {Object.values(TYPOGRAPHY).map((variant) => ( -
    - {variant} -
    + + {args.children || variant} + ))} + +); + +export const Color = (args) => { + // Index of last valid color in ValidColors array + const LAST_VALID_COLORS_ARRAY_INDEX = 16; + return ( + <> + {Object.values(ValidColors).map((color, index) => { + if (index === LAST_VALID_COLORS_ARRAY_INDEX) { + return ( + + + DEPRECATED COLORS - DO NOT USE + + + {color} + + + ); + } else if (index >= LAST_VALID_COLORS_ARRAY_INDEX) { + return ( + + {color} + + ); + } + return ( + + {color} + + ); + })} + + ); +}; + +export const FontWeight = (args) => ( + <> + {Object.values(FONT_WEIGHT).map((weight) => ( + + {weight} + + ))} + +); + +export const FontStyle = (args) => ( + <> + {Object.values(FONT_STYLE).map((style) => ( + + {style} + + ))} + +); + +export const Align = (args) => ( + <> + {Object.values(TEXT_ALIGN).map((align) => ( + + {align} + + ))} + +); + +export const OverflowWrap = (args) => ( +
    + + {OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d + + + {OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d +
    ); -DefaultStory.storyName = 'List'; - -export const TheQuickOrangeFox = (args) => ( -
    -
    - {args.content} -
    -
    +export const Tag = (args) => ( + <> + {Object.values(ValidTags).map((tag) => ( + + {tag} + + ))} + ); + +export const Margin = (args) => ( + + This Typography component has a margin of {args.margin * 4}px + +); + +Margin.args = { + margin: 4, +}; + +export const BoxProps = (args) => ( + This uses the boxProps prop +); + +BoxProps.args = { + color: COLORS.TEXT_DEFAULT, + boxProps: { + backgroundColor: COLORS.INFO_MUTED, + borderColor: COLORS.INFO_DEFAULT, + padding: 4, + borderRadius: 4, + }, +}; diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js index 650655330..d27c43d1f 100644 --- a/ui/helpers/constants/design-system.js +++ b/ui/helpers/constants/design-system.js @@ -205,15 +205,6 @@ export const TEXT_ALIGN = { export const FONT_WEIGHT = { BOLD: 'bold', NORMAL: 'normal', - 100: 100, - 200: 200, - 300: 300, - 400: 400, - 500: 500, - 600: 600, - 700: 700, - 800: 800, - 900: 900, }; export const OVERFLOW_WRAP = { @@ -224,7 +215,6 @@ export const OVERFLOW_WRAP = { export const FONT_STYLE = { ITALIC: 'italic', NORMAL: 'normal', - OBLIQUE: 'oblique', }; export const SEVERITIES = {