From bff38403642176d5d4b634ace7f6e11cf8463436 Mon Sep 17 00:00:00 2001 From: langermank Date: Mon, 26 Sep 2022 13:52:19 -0700 Subject: [PATCH 01/14] add icon control --- src/Button/Button.stories.tsx | 127 +++++++++++++++++++++------------- 1 file changed, 77 insertions(+), 50 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 518701589ab..6f1acd2b0b0 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,10 +1,14 @@ import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} from '@primer/octicons-react' +// import * as Octicons from '@primer/octicons-react' +// import StyledOcticon from '../StyledOcticon' import {Meta} from '@storybook/react' import React, {useState, forwardRef} from 'react' import {Button, ButtonProps, IconButton} from '.' import {BaseStyles, ThemeProvider} from '..' import Box from '../Box' +const icons = {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} + export default { title: 'Composite components/Button', @@ -23,6 +27,7 @@ export default { size: { control: { type: 'radio', + default: 'medium', options: ['small', 'medium', 'large'] } }, @@ -31,11 +36,33 @@ export default { type: 'boolean', default: false } + }, + variant: { + control: { + type: 'radio', + default: 'default', + options: ['default', 'primary', 'danger', 'invisible', 'outline'] + } + }, + trailingIcon: { + description: 'The displayed icon on the left', + control: {type: 'select', options: Object.keys(icons)}, + table: {category: 'content'} } + // trailingIcon: { + // control: { + // type: 'select', + // options: { + // EyeClosedIcon: 'EyeClosedIcon', + // EyeIcon: 'EyeIcon' + // } + // } + // } } } as Meta export const defaultButton = (args: ButtonProps) => { + console.log(icons) return } @@ -63,35 +90,35 @@ export const invisibleButton = (args: ButtonProps) => { ) } -export const iconBeforeButton = (args: ButtonProps) => { - return ( - - ) -} +// export const iconBeforeButton = (args: ButtonProps) => { +// return ( +// +// ) +// } -export const iconButton = ({...args}: ButtonProps) => { - return ( - <> - - - - - - - - - - - - - - - - - ) -} +// export const iconButton = ({...args}: ButtonProps) => { +// return ( +// <> +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// ) +// } export const WatchCounterButton = ({...args}: ButtonProps) => { const [count, setCount] = useState(0) @@ -131,23 +158,23 @@ export const WatchCounterButton = ({...args}: ButtonProps) => { ) } -export const WatchIconButton = ({...args}: ButtonProps) => { - const [watching, setWatching] = useState(false) - const icon = watching ? EyeClosedIcon : () => - return ( - - ) -} +// export const WatchIconButton = ({...args}: ButtonProps) => { +// const [watching, setWatching] = useState(false) +// const icon = watching ? EyeClosedIcon : () => +// return ( +// +// ) +// } -export const caretButton = ({...args}: ButtonProps) => { - return ( - - ) -} +// export const caretButton = ({...args}: ButtonProps) => { +// return ( +// +// ) +// } export const blockButton = ({...args}: ButtonProps) => { return ( @@ -192,9 +219,9 @@ export const DisabledButton = ({...args}: ButtonProps) => { Disabled - + {/* } aria-label="Close" {...args} /> - + */} ) } @@ -235,16 +262,16 @@ export const linkButton = ({...args}: ButtonProps) => { Link to Primer - + {/* - - + */} + {/* - + */} ) } From d10bc766e196d3dee842f8eecf13c43def277ce0 Mon Sep 17 00:00:00 2001 From: langermank Date: Mon, 26 Sep 2022 17:01:50 -0700 Subject: [PATCH 02/14] alignment CSS and props --- src/Button/Button.stories.tsx | 40 +++++++++++-------- src/Button/ButtonBase.tsx | 45 ++++++++++++++++------ src/Button/styles.ts | 72 ++++++++++++++++++++++++----------- src/Button/types.ts | 14 +++++++ 4 files changed, 121 insertions(+), 50 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 6f1acd2b0b0..7718256b4b1 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -27,43 +27,53 @@ export default { size: { control: { type: 'radio', - default: 'medium', options: ['small', 'medium', 'large'] } }, disabled: { control: { - type: 'boolean', - default: false + type: 'boolean' } }, variant: { control: { type: 'radio', - default: 'default', options: ['default', 'primary', 'danger', 'invisible', 'outline'] } }, - trailingIcon: { - description: 'The displayed icon on the left', - control: {type: 'select', options: Object.keys(icons)}, - table: {category: 'content'} + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'] + } + }, + block: { + control: { + type: 'boolean' + } } // trailingIcon: { + // description: 'The displayed icon on the left', // control: { // type: 'select', - // options: { - // EyeClosedIcon: 'EyeClosedIcon', - // EyeIcon: 'EyeIcon' - // } - // } + // options: Object.keys(icons) + // }, + // mapping: icons, + // table: {category: 'content'} // } + }, + args: { + block: false } } as Meta export const defaultButton = (args: ButtonProps) => { - console.log(icons) - return + // console.log(icons) + return ( + + ) } export const primaryButton = (args: ButtonProps) => { diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 10d2e83bc47..4f309ce72e8 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -4,11 +4,19 @@ import Box from '../Box' import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' import {ButtonProps, StyledButton} from './types' -import {getVariantStyles, getSizeStyles, getButtonStyles} from './styles' +import {getVariantStyles, getSizeStyles, getButtonStyles, getAlignContentSize} from './styles' const ButtonBase = forwardRef( ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => { - const {leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, variant = 'default', size = 'medium'} = props + const { + leadingIcon: LeadingIcon, + trailingIcon: TrailingIcon, + trailingAction: TrailingAction, + variant = 'default', + size = 'medium', + alignContent = 'center', + block = false + } = props const {theme} = useTheme() const iconWrapStyles = { display: 'inline-block' @@ -17,16 +25,29 @@ const ButtonBase = forwardRef( return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)]) }, [theme, size, variant]) return ( - - {LeadingIcon && ( - - - - )} - {children && {children}} - {TrailingIcon && ( - - + + + {LeadingIcon && ( + + + + )} + {children && {children}} + {TrailingIcon && ( + + + + )} + + {TrailingAction && ( + + )} diff --git a/src/Button/styles.ts b/src/Button/styles.ts index c586faa0d58..7b847c92750 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -1,4 +1,4 @@ -import {VariantType} from './types' +import {VariantType, AlignContent} from './types' import {Theme} from '../ThemeProvider' export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale @@ -170,43 +170,43 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme return style[variant] } -/* The button heights have to amount to +/* The button heights have to amount to small - 28 medium - 32 large - 34 In icon these have to be square. */ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => { - let paddingY, paddingX, fontSize + let paddingY, paddingX, fontSize, height switch (size) { case 'small': - paddingY = 3 - paddingX = 12 + height = 28 + paddingX = 8 fontSize = 0 break case 'large': - paddingY = 9 + height = 40 paddingX = 20 - fontSize = 2 + fontSize = 1 break case 'medium': default: - paddingY = 5 + height = 32 paddingX = 16 fontSize = 1 } - if (iconOnly) { - // when `size !== 'medium'`, vertical alignment of the icon is thrown off - // because changing the font size draws an em-box that does not match the - // bounding box of the SVG - fontSize = 1 - paddingX = paddingY + 3 // to make it a square - } - if (variant === 'invisible') { - paddingY = paddingY + 1 // to make up for absence of border - } + // if (iconOnly) { + // // when `size !== 'medium'`, vertical alignment of the icon is thrown off + // // because changing the font size draws an em-box that does not match the + // // bounding box of the SVG + // fontSize = 1 + // paddingX = paddingY + 3 // to make it a square + // } + // if (variant === 'invisible') { + // paddingY = paddingY + 1 // to make up for absence of border + // } return { - paddingY: `${paddingY}px`, + height: `${height}px`, paddingX: `${paddingX}px`, fontSize, '[data-component=ButtonCounter]': { @@ -229,6 +229,10 @@ export const getBaseStyles = (theme?: Theme) => ({ userSelect: 'none', textDecoration: 'none', textAlign: 'center', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + gap: 2, '&:disabled': { cursor: 'default' }, @@ -246,10 +250,8 @@ export const getBaseStyles = (theme?: Theme) => ({ export const getButtonStyles = (theme?: Theme) => { const styles = { ...getBaseStyles(theme), - display: 'grid', - gridTemplateAreas: '"leadingIcon text trailingIcon"', - '& > :not(:last-child)': { - mr: '2' + '&[data-component="block"]': { + width: '100%' }, '[data-component="leadingIcon"]': { gridArea: 'leadingIcon' @@ -259,7 +261,31 @@ export const getButtonStyles = (theme?: Theme) => { }, '[data-component="trailingIcon"]': { gridArea: 'trailingIcon' + }, + '& > [data-component="buttonContent"]': { + flex: '1 0 auto', + display: 'grid', + gridTemplateAreas: '"leadingIcon text trailingIcon"', + gridTemplateColumns: 'min-content minmax(0, auto) min-content', + alignItems: 'center', + alignContent: 'center' + }, + '& > [data-component="buttonContent"] & > :not(:last-child)': { + mr: '2' } } return styles } + +export const getAlignContentSize = (alignContent: AlignContent = 'center') => { + const style = { + center: { + justifyContent: 'space-between', + backgroundColor: 'pink' + }, + start: { + justifyContent: 'flex-start' + } + } + return style[alignContent] +} diff --git a/src/Button/types.ts b/src/Button/types.ts index ab6100897c3..27f0a0b8326 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -13,6 +13,8 @@ export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outl export type Size = 'small' | 'medium' | 'large' +export type AlignContent = 'start' | 'center' + /** * Remove styled-components polymorphic as prop, which conflicts with radix's */ @@ -33,11 +35,19 @@ export type ButtonBaseProps = { * Items that are disabled can not be clicked, selected, or navigated through. */ disabled?: boolean + /** + * Allow button width to fill its container. + */ + block?: boolean } & SxProp & HTMLAttributes & StyledButtonProps export type ButtonProps = { + /** + * The leading icon comes before button content + */ + alignContent?: AlignContent /** * The leading icon comes before button content */ @@ -46,6 +56,10 @@ export type ButtonProps = { * The trailing icon comes after button content */ trailingIcon?: React.FunctionComponent> + /** + * Trailing action appears to the right of the trailing visual and is always locked to the end + */ + trailingAction?: React.FunctionComponent> children: React.ReactNode } & ButtonBaseProps From 892f013bbd17e4f96ab10e52b05c1ae9a83602af Mon Sep 17 00:00:00 2001 From: langermank Date: Wed, 28 Sep 2022 18:45:34 -0700 Subject: [PATCH 03/14] more cleanup --- src/Button/Button.stories.tsx | 249 ++++++++++++++-------------------- src/Button/ButtonBase.tsx | 11 +- src/Button/IconButton.tsx | 8 +- src/Button/styles.ts | 60 ++++---- 4 files changed, 147 insertions(+), 181 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 7718256b4b1..35309797f63 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,13 +1,22 @@ -import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} from '@primer/octicons-react' -// import * as Octicons from '@primer/octicons-react' -// import StyledOcticon from '../StyledOcticon' -import {Meta} from '@storybook/react' +import { + EyeClosedIcon, + EyeIcon, + SearchIcon, + TriangleDownIcon, + XIcon, + TriangleRightIcon, + HeartIcon +} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' import React, {useState, forwardRef} from 'react' import {Button, ButtonProps, IconButton} from '.' import {BaseStyles, ThemeProvider} from '..' import Box from '../Box' -const icons = {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} +const unset = undefined +const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} + +const actionIcons = {unset, TriangleDownIcon} export default { title: 'Composite components/Button', @@ -51,118 +60,112 @@ export default { control: { type: 'boolean' } + }, + leadingIcon: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingIcon: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingAction: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(actionIcons) + }, + mapping: actionIcons } - // trailingIcon: { - // description: 'The displayed icon on the left', - // control: { - // type: 'select', - // options: Object.keys(icons) - // }, - // mapping: icons, - // table: {category: 'content'} - // } }, args: { - block: false + block: false, + size: 'medium', + disabled: false, + variant: 'default', + alignContent: 'center', + trailingIcon: null, + leadingIcon: null, + trailingAction: null } -} as Meta +} as Meta -export const defaultButton = (args: ButtonProps) => { - // console.log(icons) - return ( - - ) +export const Playground: Story = args => + +// const Playground = args => +// } + +export const Default = Playground.bind({}) +Default.args = { + variant: 'default' } -export const primaryButton = (args: ButtonProps) => { - return ( - - ) +export const Primary = Playground.bind({}) +Primary.args = { + variant: 'primary' } -export const dangerButton = (args: ButtonProps) => { - return ( - - ) +export const Danger = Playground.bind({}) +Danger.args = { + variant: 'danger' } -export const invisibleButton = (args: ButtonProps) => { - return ( - - ) +export const Invisible = Playground.bind({}) +Invisible.args = { + variant: 'invisible' } -// export const iconBeforeButton = (args: ButtonProps) => { -// return ( -// -// ) -// } +export const LeadingVisual = Playground.bind({}) +LeadingVisual.args = { + leadingIcon: HeartIcon +} -// export const iconButton = ({...args}: ButtonProps) => { -// return ( -// <> -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// ) -// } +export const TrailingVisual = Playground.bind({}) +TrailingVisual.args = { + trailingIcon: HeartIcon +} + +export const TrailingAction = Playground.bind({}) +TrailingAction.args = { + trailingAction: TriangleDownIcon +} + +export const Block = Playground.bind({}) +Block.args = { + block: true +} -export const WatchCounterButton = ({...args}: ButtonProps) => { +export const Disabled = Playground.bind({}) +Disabled.args = { + disabled: true +} + +export const TrailingCounter = ({...args}: ButtonProps) => { const [count, setCount] = useState(0) + return ( + + ) +} + +export const iconButton = ({...args}: ButtonProps) => { return ( <> - - - - - - - - - - - - - + ) @@ -186,56 +189,6 @@ export const WatchCounterButton = ({...args}: ButtonProps) => { // ) // } -export const blockButton = ({...args}: ButtonProps) => { - return ( - - ) -} - -export const DisabledButton = ({...args}: ButtonProps) => { - const [count, setCount] = useState(0) - return ( - <> - - - - - - - - - - - - - - - - - - - {/* - } aria-label="Close" {...args} /> - */} - - ) -} - type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} const ReactRouterLikeLink = forwardRef( ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 4f309ce72e8..112ca41d784 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -19,10 +19,11 @@ const ButtonBase = forwardRef( } = props const {theme} = useTheme() const iconWrapStyles = { - display: 'inline-block' + display: 'flex', + pointerEvents: 'none' } const sxStyles = useMemo(() => { - return merge.all([getButtonStyles(theme), getSizeStyles(size, variant, false), getVariantStyles(variant, theme)]) + return merge.all([getButtonStyles(theme), getSizeStyles(size, false), getVariantStyles(variant, theme)]) }, [theme, size, variant]) return ( ( > {LeadingIcon && ( - + )} {children && {children}} {TrailingIcon && ( - + )} {TrailingAction && ( - + )} diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx index 401650829fc..4a80e6a9fcc 100644 --- a/src/Button/IconButton.tsx +++ b/src/Button/IconButton.tsx @@ -10,15 +10,13 @@ const IconButton = forwardRef((props, forwar const {theme} = useTheme() const sxStyles = merge.all([ getBaseStyles(theme), - getSizeStyles(size, variant, true), + getSizeStyles(size, true), getVariantStyles(variant, theme), sxProp as SxProp ]) return ( - - - - + + ) }) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 7b847c92750..edd7c52b5ff 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -1,5 +1,6 @@ import {VariantType, AlignContent} from './types' import {Theme} from '../ThemeProvider' +import {background} from 'styled-system' export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale @@ -176,8 +177,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme large - 34 In icon these have to be square. */ -export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', iconOnly: boolean) => { - let paddingY, paddingX, fontSize, height +export const getSizeStyles = (size = 'medium', iconOnly: boolean) => { + let paddingX, fontSize, height, width switch (size) { case 'small': height = 28 @@ -195,18 +196,21 @@ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default', paddingX = 16 fontSize = 1 } - // if (iconOnly) { - // // when `size !== 'medium'`, vertical alignment of the icon is thrown off - // // because changing the font size draws an em-box that does not match the - // // bounding box of the SVG - // fontSize = 1 - // paddingX = paddingY + 3 // to make it a square - // } - // if (variant === 'invisible') { - // paddingY = paddingY + 1 // to make up for absence of border - // } + if (iconOnly && size === 'small') { + width = 28 + paddingX = 'unset' + } + if (iconOnly && size === 'large') { + width = 40 + paddingX = 'unset' + } + if (iconOnly && size === 'medium') { + width = 32 + paddingX = 'unset' + } return { height: `${height}px`, + width: `${width}px`, paddingX: `${paddingX}px`, fontSize, '[data-component=ButtonCounter]': { @@ -220,10 +224,8 @@ export const getBaseStyles = (theme?: Theme) => ({ border: '1px solid', borderColor: theme?.colors.btn.border, fontFamily: 'inherit', - fontWeight: 'bold', - lineHeight: TEXT_ROW_HEIGHT, - whiteSpace: 'nowrap', - verticalAlign: 'middle', + fontWeight: 'var(--base-text-weight-medium, 500)', + fontSize: 'var(--primer-text-body-size-medium, 14px)', cursor: 'pointer', appearance: 'none', userSelect: 'none', @@ -232,9 +234,9 @@ export const getBaseStyles = (theme?: Theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - gap: 2, + gap: '2', '&:disabled': { - cursor: 'default' + cursor: 'not-allowed' }, '&:disabled svg': { opacity: '0.6' @@ -244,6 +246,11 @@ export const getBaseStyles = (theme?: Theme) => ({ // Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips outline: 'solid 1px transparent' } + }, + '&[data-component=IconButton]': { + display: 'grid', + padding: 'initial', + placeContent: 'center' } }) @@ -253,16 +260,24 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-component="block"]': { width: '100%' }, + '[data-component="Icon"]': { + backgroundColor: 'pink' + }, '[data-component="leadingIcon"]': { gridArea: 'leadingIcon' }, '[data-component="text"]': { - gridArea: 'text' + gridArea: 'text', + lineHeight: 'var(--primer-text-body-lineHeight-medium, calc(20/14))', + whiteSpace: 'nowrap' }, '[data-component="trailingIcon"]': { gridArea: 'trailingIcon' }, - '& > [data-component="buttonContent"]': { + '[data-component="trailingAction"]': { + marginRight: '-4px' + }, + '[data-component="buttonContent"]': { flex: '1 0 auto', display: 'grid', gridTemplateAreas: '"leadingIcon text trailingIcon"', @@ -270,7 +285,7 @@ export const getButtonStyles = (theme?: Theme) => { alignItems: 'center', alignContent: 'center' }, - '& > [data-component="buttonContent"] & > :not(:last-child)': { + '[data-component="buttonContent"] > :not(:last-child)': { mr: '2' } } @@ -280,8 +295,7 @@ export const getButtonStyles = (theme?: Theme) => { export const getAlignContentSize = (alignContent: AlignContent = 'center') => { const style = { center: { - justifyContent: 'space-between', - backgroundColor: 'pink' + justifyContent: 'center' }, start: { justifyContent: 'flex-start' From 5bb931aa07ca6a0f12454d967c43a5409d1492fa Mon Sep 17 00:00:00 2001 From: langermank Date: Wed, 28 Sep 2022 19:52:07 -0700 Subject: [PATCH 04/14] move stories to features --- src/Button/Button.stories.tsx | 64 +---------- src/Button/ButtonFeatures.stories.tsx | 146 ++++++++++++++++++++++++++ 2 files changed, 147 insertions(+), 63 deletions(-) create mode 100644 src/Button/ButtonFeatures.stories.tsx diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 35309797f63..f1d4880c3ff 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -19,8 +19,7 @@ const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} const actionIcons = {unset, TriangleDownIcon} export default { - title: 'Composite components/Button', - + title: 'Components/Button', decorators: [ Story => { return ( @@ -100,67 +99,6 @@ export default { export const Playground: Story = args => -// const Playground = args => -// } - -export const Default = Playground.bind({}) -Default.args = { - variant: 'default' -} - -export const Primary = Playground.bind({}) -Primary.args = { - variant: 'primary' -} - -export const Danger = Playground.bind({}) -Danger.args = { - variant: 'danger' -} - -export const Invisible = Playground.bind({}) -Invisible.args = { - variant: 'invisible' -} - -export const LeadingVisual = Playground.bind({}) -LeadingVisual.args = { - leadingIcon: HeartIcon -} - -export const TrailingVisual = Playground.bind({}) -TrailingVisual.args = { - trailingIcon: HeartIcon -} - -export const TrailingAction = Playground.bind({}) -TrailingAction.args = { - trailingAction: TriangleDownIcon -} - -export const Block = Playground.bind({}) -Block.args = { - block: true -} - -export const Disabled = Playground.bind({}) -Disabled.args = { - disabled: true -} - -export const TrailingCounter = ({...args}: ButtonProps) => { - const [count, setCount] = useState(0) - return ( - - ) -} - export const iconButton = ({...args}: ButtonProps) => { return ( <> diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx new file mode 100644 index 00000000000..6b780b407b8 --- /dev/null +++ b/src/Button/ButtonFeatures.stories.tsx @@ -0,0 +1,146 @@ +import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import React, {useState} from 'react' +import {Button, ButtonProps} from '.' +import {BaseStyles, ThemeProvider} from '..' + +const unset = undefined +const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} + +const actionIcons = {unset, TriangleDownIcon} + +export default { + title: 'Components/Button/Features', + decorators: [ + Story => { + return ( + + + + + + ) + } + ], + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + control: { + type: 'boolean' + } + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible', 'outline'] + } + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'] + } + }, + block: { + control: { + type: 'boolean' + } + }, + leadingIcon: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingIcon: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingAction: { + description: 'The displayed icon on the left', + control: { + type: 'select', + options: Object.keys(actionIcons) + }, + mapping: actionIcons + } + }, + args: { + block: false, + size: 'medium', + disabled: false, + variant: 'default', + alignContent: 'center', + trailingIcon: null, + leadingIcon: null, + trailingAction: null + } +} as Meta + +const Template: Story = args => + +export const Default = Template.bind({}) +Default.args = { + variant: 'default' +} + +export const Primary = Template.bind({}) +Primary.args = { + variant: 'primary' +} + +export const Danger = Template.bind({}) +Danger.args = { + variant: 'danger' +} + +export const Invisible = Template.bind({}) +Invisible.args = { + variant: 'invisible' +} + +export const LeadingVisual = Template.bind({}) +LeadingVisual.args = { + leadingIcon: HeartIcon +} + +export const TrailingVisual = Template.bind({}) +TrailingVisual.args = { + trailingIcon: HeartIcon +} + +export const TrailingAction = Template.bind({}) +TrailingAction.args = { + trailingAction: TriangleDownIcon +} + +export const Block = Template.bind({}) +Block.args = { + block: true +} + +export const Disabled = Template.bind({}) +Disabled.args = { + disabled: true +} + +export const TrailingCounter = ({...args}: ButtonProps) => { + const [count, setCount] = useState(0) + return ( + + ) +} From b553e93b47a28ab604c28aac0d8d126054d2512c Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 13:01:43 -0700 Subject: [PATCH 05/14] make counter part of button Co-authored-by: Josh Black --- src/Button/ButtonBase.tsx | 11 +++++++++-- src/Button/ButtonFeatures.stories.tsx | 13 ++++++++++--- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 112ca41d784..a15918126d3 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -5,6 +5,7 @@ import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' import {ButtonProps, StyledButton} from './types' import {getVariantStyles, getSizeStyles, getButtonStyles, getAlignContentSize} from './styles' +import CounterLabel from '../CounterLabel' const ButtonBase = forwardRef( ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => { @@ -12,6 +13,7 @@ const ButtonBase = forwardRef( leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, trailingAction: TrailingAction, + trailingVisualCount, variant = 'default', size = 'medium', alignContent = 'center', @@ -25,6 +27,7 @@ const ButtonBase = forwardRef( const sxStyles = useMemo(() => { return merge.all([getButtonStyles(theme), getSizeStyles(size, false), getVariantStyles(variant, theme)]) }, [theme, size, variant]) + return ( ( )} {children && {children}} - {TrailingIcon && ( + {trailingVisualCount !== undefined ? ( + + {trailingVisualCount} + + ) : TrailingIcon ? ( - )} + ) : null} {TrailingAction && ( diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx index 6b780b407b8..dde995359b8 100644 --- a/src/Button/ButtonFeatures.stories.tsx +++ b/src/Button/ButtonFeatures.stories.tsx @@ -88,7 +88,7 @@ export default { } } as Meta -const Template: Story = args => +const Template: Story = args => export const Default = Template.bind({}) Default.args = { @@ -136,11 +136,18 @@ Disabled.args = { } export const TrailingCounter = ({...args}: ButtonProps) => { + // ) + // return ( + // + // ) } From 9f097e12d80b5dbd7755f9e5287c29cb450f4840 Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 14:06:51 -0700 Subject: [PATCH 06/14] fix export --- src/Button/Button.stories.tsx | 35 +++++++++++++-------------- src/Button/ButtonBase.tsx | 2 +- src/Button/ButtonFeatures.stories.tsx | 8 ------ src/Button/index.ts | 5 +--- 4 files changed, 19 insertions(+), 31 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index f1d4880c3ff..7c756e740a6 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,14 +1,6 @@ -import { - EyeClosedIcon, - EyeIcon, - SearchIcon, - TriangleDownIcon, - XIcon, - TriangleRightIcon, - HeartIcon -} from '@primer/octicons-react' +import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' import {Story, Meta} from '@storybook/react' -import React, {useState, forwardRef} from 'react' +import React, {forwardRef} from 'react' import {Button, ButtonProps, IconButton} from '.' import {BaseStyles, ThemeProvider} from '..' import Box from '../Box' @@ -83,6 +75,12 @@ export default { options: Object.keys(actionIcons) }, mapping: actionIcons + }, + trailingVisualCount: { + description: 'The displayed icon on the left', + control: { + type: 'number' + } } }, args: { @@ -93,7 +91,8 @@ export default { alignContent: 'center', trailingIcon: null, leadingIcon: null, - trailingAction: null + trailingAction: null, + trailingVisualCount: null } } as Meta @@ -127,13 +126,13 @@ export const iconButton = ({...args}: ButtonProps) => { // ) // } -type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} -const ReactRouterLikeLink = forwardRef( - ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { - // eslint-disable-next-line jsx-a11y/anchor-has-content - return - } -) +// type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} +// const ReactRouterLikeLink = forwardRef( +// ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { +// // eslint-disable-next-line jsx-a11y/anchor-has-content +// return +// } +// ) export const linkButton = ({...args}: ButtonProps) => { return ( diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index a15918126d3..5c951468f49 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -13,7 +13,7 @@ const ButtonBase = forwardRef( leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, trailingAction: TrailingAction, - trailingVisualCount, + trailingVisualCount: trailingVisualCount, variant = 'default', size = 'medium', alignContent = 'center', diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx index dde995359b8..c1a4e4313e9 100644 --- a/src/Button/ButtonFeatures.stories.tsx +++ b/src/Button/ButtonFeatures.stories.tsx @@ -136,18 +136,10 @@ Disabled.args = { } export const TrailingCounter = ({...args}: ButtonProps) => { - // ) - // return ( - // - // ) } diff --git a/src/Button/index.ts b/src/Button/index.ts index 6aef1f6f8f8..85c1d2bb2bf 100644 --- a/src/Button/index.ts +++ b/src/Button/index.ts @@ -1,10 +1,7 @@ import {ButtonComponent} from './Button' -import {Counter} from './ButtonCounter' import {IconButton} from './IconButton' import {LinkButton} from './LinkButton' export type {ButtonProps, IconButtonProps} from './types' export {IconButton, LinkButton} -export const Button = Object.assign(ButtonComponent, { - Counter -}) +export const Button = Object.assign(ButtonComponent) From 951467bd7cb354351f67c293f63b5a1da010d38a Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 16:12:59 -0700 Subject: [PATCH 07/14] cleanup stories --- .storybook/main.js | 1 + .storybook/preview.js | 1 - package-lock.json | 649 ++++++++++++++++------ package.json | 1 + src/Button/Button.stories.tsx | 102 +--- src/Button/ButtonCounter.tsx | 17 - src/Button/ButtonFeatures.stories.tsx | 151 +---- src/Button/IconButton.stories.tsx | 47 ++ src/Button/IconButtonFeatures.stories.tsx | 23 + src/Button/LinkButton.stories.tsx | 73 +++ src/Button/LinkButtonFeatures.stories.tsx | 87 +++ 11 files changed, 725 insertions(+), 427 deletions(-) delete mode 100644 src/Button/ButtonCounter.tsx create mode 100644 src/Button/IconButton.stories.tsx create mode 100644 src/Button/IconButtonFeatures.stories.tsx create mode 100644 src/Button/LinkButton.stories.tsx create mode 100644 src/Button/LinkButtonFeatures.stories.tsx diff --git a/.storybook/main.js b/.storybook/main.js index 97120ff5946..484250581f9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { '@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-interactions', + '@storybook/addon-storysource', {name: '@storybook/addon-essentials', options: {backgrounds: false}}, 'storybook-addon-performance/register', {name: 'storybook-addon-turbo-build', options: {optimizationLevel: 2}}, diff --git a/.storybook/preview.js b/.storybook/preview.js index cf3e0091f3b..f8468b6f6b8 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,7 +1,6 @@ import {addons} from '@storybook/addons' import {withPerformance} from 'storybook-addon-performance' import {withThemeProvider, toolbarTypes} from '../src/utils/story-helpers' - export const globalTypes = toolbarTypes export const decorators = [withThemeProvider, withPerformance] diff --git a/package-lock.json b/package-lock.json index 04ca1283902..4992431bd2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@primer/octicons-react": "^17.3.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", + "@storybook/addon-storysource": "6.5.12", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", @@ -7453,6 +7454,258 @@ } } }, + "node_modules/@storybook/addon-storysource": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-6.5.12.tgz", + "integrity": "sha512-FpqEbBET2buZ3tzf0I902zokf0zhbeUWmkq8wUxygn4SKhog8yVbvzTIjG7l0kh53t+y/udirzjjAt66LgR2hA==", + "dependencies": { + "@storybook/addons": "6.5.12", + "@storybook/api": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/components": "6.5.12", + "@storybook/router": "6.5.12", + "@storybook/source-loader": "6.5.12", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "loader-utils": "^2.0.0", + "prop-types": "^15.7.2", + "react-syntax-highlighter": "^15.4.5", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/addons": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz", + "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==", + "dependencies": { + "@storybook/api": "6.5.12", + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/theming": "6.5.12", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/api": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz", + "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==", + "dependencies": { + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/channels": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz", + "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==", + "dependencies": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/client-logger": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz", + "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==", + "dependencies": { + "core-js": "^3.8.2", + "global": "^4.4.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/components": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz", + "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==", + "dependencies": { + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/core-events": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz", + "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==", + "dependencies": { + "core-js": "^3.8.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/router": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz", + "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==", + "dependencies": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/source-loader": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz", + "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==", + "dependencies": { + "@storybook/addons": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "global": "^4.4.0", + "loader-utils": "^2.0.0", + "lodash": "^4.17.21", + "prettier": ">=2.2.1 <=2.3.0", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/@storybook/theming": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz", + "integrity": "sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==", + "dependencies": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/@storybook/addon-storysource/node_modules/prettier": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz", + "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==", + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@storybook/addon-toolbars": { "version": "6.5.9", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz", @@ -8695,7 +8948,6 @@ "version": "0.0.2--canary.4566f4d.1", "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz", "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==", - "dev": true, "dependencies": { "lodash": "^4.17.15" } @@ -9724,7 +9976,6 @@ "version": "7.3.2", "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, "dependencies": { "core-js": "^3.6.5", "find-up": "^4.1.0" @@ -11938,7 +12189,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz", "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==", - "dev": true, "dependencies": { "@types/unist": "*" } @@ -11961,8 +12211,7 @@ "node_modules/@types/is-function": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.1.tgz", - "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==", - "dev": true + "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==" }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.3", @@ -12305,8 +12554,7 @@ "node_modules/@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", - "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==", - "dev": true + "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==" }, "node_modules/@types/wait-on": { "version": "5.3.1", @@ -12334,8 +12582,7 @@ "node_modules/@types/webpack-env": { "version": "1.16.3", "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz", - "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==", - "dev": true + "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==" }, "node_modules/@types/webpack-sources": { "version": "3.2.0", @@ -14762,7 +15009,6 @@ "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", - "dev": true, "engines": { "node": "*" } @@ -15539,7 +15785,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", - "dev": true, "dependencies": { "function-bind": "^1.1.1", "get-intrinsic": "^1.0.2" @@ -15706,7 +15951,6 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -15726,7 +15970,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -15736,7 +15979,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -16381,7 +16623,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -16974,7 +17215,6 @@ "version": "3.19.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.0.tgz", "integrity": "sha512-L1TpFRWXZ76vH1yLM+z6KssLZrP8Z6GxxW4auoCj+XiViOzNPJCAuTIkn03BGdFe6Z5clX5t64wRIRypsZQrUg==", - "dev": true, "hasInstallScript": true, "funding": { "type": "opencollective", @@ -18633,8 +18873,7 @@ "node_modules/dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", - "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==", - "dev": true + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, "node_modules/domain-browser": { "version": "1.2.0", @@ -18800,7 +19039,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", - "dev": true, "engines": { "node": ">= 4" } @@ -21382,8 +21620,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-diff": { "version": "1.2.0", @@ -21509,7 +21746,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", - "dev": true, "dependencies": { "format": "^0.2.0" }, @@ -21932,7 +22168,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -22496,7 +22731,6 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", - "dev": true, "engines": { "node": ">=0.4.x" } @@ -22663,8 +22897,7 @@ "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "node_modules/function.prototype.name": { "version": "1.1.5", @@ -22790,7 +23023,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", - "dev": true, "dependencies": { "function-bind": "^1.1.1", "has": "^1.0.3", @@ -22950,7 +23182,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", - "dev": true, "dependencies": { "min-document": "^2.19.0", "process": "^0.11.10" @@ -23127,7 +23358,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "dependencies": { "function-bind": "^1.1.1" }, @@ -23193,7 +23423,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -23205,7 +23434,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", - "dev": true, "dependencies": { "has-symbols": "^1.0.2" }, @@ -23397,7 +23625,6 @@ "version": "2.2.5", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", - "dev": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/unified" @@ -23446,7 +23673,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", - "dev": true, "dependencies": { "@types/hast": "^2.0.0", "comma-separated-tokens": "^1.0.0", @@ -23472,7 +23698,6 @@ "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "dev": true, "engines": { "node": "*" } @@ -24005,7 +24230,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -24024,7 +24248,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", - "dev": true, "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" @@ -24193,7 +24416,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -24290,8 +24512,7 @@ "node_modules/is-function": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz", - "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==", - "dev": true + "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==" }, "node_modules/is-generator-fn": { "version": "2.1.0", @@ -24318,7 +24539,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -24454,7 +24674,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "dev": true, "dependencies": { "call-bind": "^1.0.2", "has-tostringtag": "^1.0.0" @@ -24533,7 +24752,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", - "dev": true, "dependencies": { "has-symbols": "^1.0.2" }, @@ -31426,7 +31644,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, "dependencies": { "minimist": "^1.2.5" }, @@ -32094,7 +32311,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, "dependencies": { "p-locate": "^4.1.0" }, @@ -32105,8 +32321,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.clonedeep": { "version": "4.5.0", @@ -32240,7 +32455,6 @@ "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", - "dev": true, "dependencies": { "fault": "^1.0.0", "highlight.js": "~10.7.0" @@ -32333,8 +32547,7 @@ "node_modules/map-or-similar": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", - "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=", - "dev": true + "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=" }, "node_modules/map-visit": { "version": "1.0.0", @@ -32515,7 +32728,6 @@ "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", "integrity": "sha1-fIekZGREwy11Q4VwkF8tvRsagFo=", - "dev": true, "dependencies": { "map-or-similar": "^1.5.0" } @@ -32732,7 +32944,6 @@ "version": "2.19.0", "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", - "dev": true, "dependencies": { "dom-walk": "^0.1.0" } @@ -32773,8 +32984,7 @@ "node_modules/minimist": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", - "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", - "dev": true + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" }, "node_modules/minimist-options": { "version": "4.1.0", @@ -33467,7 +33677,6 @@ "version": "1.12.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz", "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -33784,7 +33993,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, "dependencies": { "p-try": "^2.0.0" }, @@ -33799,7 +34007,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, "dependencies": { "p-limit": "^2.2.0" }, @@ -33832,7 +34039,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true, "engines": { "node": ">=6" } @@ -33908,7 +34114,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", - "dev": true, "dependencies": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", @@ -34008,7 +34213,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, "engines": { "node": ">=8" } @@ -34567,7 +34771,6 @@ "version": "1.28.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", - "dev": true, "engines": { "node": ">=6" } @@ -34576,7 +34779,6 @@ "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", - "dev": true, "engines": { "node": ">= 0.6.0" } @@ -34668,7 +34870,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -34679,7 +34880,6 @@ "version": "5.6.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz", "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==", - "dev": true, "dependencies": { "xtend": "^4.0.0" }, @@ -34856,7 +35056,6 @@ "version": "6.10.3", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz", "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==", - "dev": true, "dependencies": { "side-channel": "^1.0.4" }, @@ -35157,7 +35356,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -35288,7 +35486,6 @@ "version": "15.5.0", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "dev": true, "dependencies": { "@babel/runtime": "^7.3.1", "highlight.js": "^10.4.1", @@ -35466,7 +35663,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "dev": true, "dependencies": { "hastscript": "^6.0.0", "parse-entities": "^2.0.0", @@ -35481,7 +35677,6 @@ "version": "1.27.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "dev": true, "engines": { "node": ">=6" } @@ -36546,7 +36741,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -36786,7 +36980,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "dev": true, "dependencies": { "call-bind": "^1.0.0", "get-intrinsic": "^1.0.2", @@ -37282,7 +37475,6 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -37512,8 +37704,7 @@ "node_modules/store2": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz", - "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==", - "dev": true + "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==" }, "node_modules/storybook-addon-performance": { "version": "0.16.1", @@ -38383,7 +38574,6 @@ "version": "6.0.8", "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz", "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==", - "dev": true, "dependencies": { "@types/is-function": "^1.0.0", "global": "^4.4.0", @@ -38399,7 +38589,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz", "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -39031,7 +39220,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", - "dev": true, "engines": { "node": ">=6.10" } @@ -39854,8 +40042,7 @@ "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, "node_modules/util.promisify": { "version": "1.0.0", @@ -40901,7 +41088,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "dev": true, "engines": { "node": ">=0.4" } @@ -46477,6 +46663,172 @@ "ts-dedent": "^2.0.0" } }, + "@storybook/addon-storysource": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-6.5.12.tgz", + "integrity": "sha512-FpqEbBET2buZ3tzf0I902zokf0zhbeUWmkq8wUxygn4SKhog8yVbvzTIjG7l0kh53t+y/udirzjjAt66LgR2hA==", + "requires": { + "@storybook/addons": "6.5.12", + "@storybook/api": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/components": "6.5.12", + "@storybook/router": "6.5.12", + "@storybook/source-loader": "6.5.12", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "loader-utils": "^2.0.0", + "prop-types": "^15.7.2", + "react-syntax-highlighter": "^15.4.5", + "regenerator-runtime": "^0.13.7" + }, + "dependencies": { + "@storybook/addons": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz", + "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==", + "requires": { + "@storybook/api": "6.5.12", + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/theming": "6.5.12", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz", + "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==", + "requires": { + "@storybook/channels": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/core-events": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/router": "6.5.12", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^6.0.8", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channels": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz", + "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==", + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz", + "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==", + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/components": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz", + "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==", + "requires": { + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "@storybook/theming": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/core-events": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz", + "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==", + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz", + "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==", + "requires": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/source-loader": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz", + "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==", + "requires": { + "@storybook/addons": "6.5.12", + "@storybook/client-logger": "6.5.12", + "@storybook/csf": "0.0.2--canary.4566f4d.1", + "core-js": "^3.8.2", + "estraverse": "^5.2.0", + "global": "^4.4.0", + "loader-utils": "^2.0.0", + "lodash": "^4.17.21", + "prettier": ">=2.2.1 <=2.3.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/theming": { + "version": "6.5.12", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz", + "integrity": "sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==", + "requires": { + "@storybook/client-logger": "6.5.12", + "core-js": "^3.8.2", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7" + } + }, + "estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==" + }, + "loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "prettier": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz", + "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==" + } + } + }, "@storybook/addon-toolbars": { "version": "6.5.9", "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.9.tgz", @@ -47352,7 +47704,6 @@ "version": "0.0.2--canary.4566f4d.1", "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz", "integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==", - "dev": true, "requires": { "lodash": "^4.17.15" } @@ -48070,7 +48421,6 @@ "version": "7.3.2", "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", - "dev": true, "requires": { "core-js": "^3.6.5", "find-up": "^4.1.0" @@ -49796,7 +50146,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz", "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==", - "dev": true, "requires": { "@types/unist": "*" } @@ -49819,8 +50168,7 @@ "@types/is-function": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.1.tgz", - "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==", - "dev": true + "integrity": "sha512-A79HEEiwXTFtfY+Bcbo58M2GRYzCr9itHWzbzHVFNEYCcoU/MMGwYYf721gBrnhpj1s6RGVVha/IgNFnR0Iw/Q==" }, "@types/istanbul-lib-coverage": { "version": "2.0.3", @@ -50155,8 +50503,7 @@ "@types/unist": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz", - "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==", - "dev": true + "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==" }, "@types/wait-on": { "version": "5.3.1", @@ -50202,8 +50549,7 @@ "@types/webpack-env": { "version": "1.16.3", "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz", - "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==", - "dev": true + "integrity": "sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==" }, "@types/webpack-sources": { "version": "3.2.0", @@ -52057,8 +52403,7 @@ "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", - "dev": true + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" }, "binary-extensions": { "version": "1.13.1", @@ -52683,7 +53028,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", - "dev": true, "requires": { "function-bind": "^1.1.1", "get-intrinsic": "^1.0.2" @@ -52801,8 +53145,7 @@ "character-entities": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", - "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", - "dev": true + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==" }, "character-entities-html4": { "version": "1.1.4", @@ -52813,14 +53156,12 @@ "character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", - "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", - "dev": true + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==" }, "character-reference-invalid": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", - "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", - "dev": true + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==" }, "chardet": { "version": "0.7.0", @@ -53306,8 +53647,7 @@ "comma-separated-tokens": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", - "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", - "dev": true + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==" }, "commander": { "version": "4.1.1", @@ -53758,8 +54098,7 @@ "core-js": { "version": "3.19.0", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.0.tgz", - "integrity": "sha512-L1TpFRWXZ76vH1yLM+z6KssLZrP8Z6GxxW4auoCj+XiViOzNPJCAuTIkn03BGdFe6Z5clX5t64wRIRypsZQrUg==", - "dev": true + "integrity": "sha512-L1TpFRWXZ76vH1yLM+z6KssLZrP8Z6GxxW4auoCj+XiViOzNPJCAuTIkn03BGdFe6Z5clX5t64wRIRypsZQrUg==" }, "core-js-compat": { "version": "3.19.0", @@ -55060,8 +55399,7 @@ "dom-walk": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz", - "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==", - "dev": true + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" }, "domain-browser": { "version": "1.2.0", @@ -55197,8 +55535,7 @@ "emojis-list": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", - "dev": true + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" }, "encodeurl": { "version": "1.0.2", @@ -57046,8 +57383,7 @@ "fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "fast-diff": { "version": "1.2.0", @@ -57154,7 +57490,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", - "dev": true, "requires": { "format": "^0.2.0" } @@ -57484,7 +57819,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, "requires": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" @@ -57888,8 +58222,7 @@ "format": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", - "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=", - "dev": true + "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=" }, "forwarded": { "version": "0.2.0", @@ -58013,8 +58346,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "function.prototype.name": { "version": "1.1.5", @@ -58112,7 +58444,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", - "dev": true, "requires": { "function-bind": "^1.1.1", "has": "^1.0.3", @@ -58232,7 +58563,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", - "dev": true, "requires": { "min-document": "^2.19.0", "process": "^0.11.10" @@ -58366,7 +58696,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -58415,14 +58744,12 @@ "has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", - "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "dev": true + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==" }, "has-tostringtag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", - "dev": true, "requires": { "has-symbols": "^1.0.2" } @@ -58561,8 +58888,7 @@ "hast-util-parse-selector": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", - "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", - "dev": true + "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==" }, "hast-util-raw": { "version": "6.0.1", @@ -58599,7 +58925,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", - "dev": true, "requires": { "@types/hast": "^2.0.0", "comma-separated-tokens": "^1.0.0", @@ -58617,8 +58942,7 @@ "highlight.js": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", - "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", - "dev": true + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" }, "history": { "version": "5.0.0", @@ -59018,8 +59342,7 @@ "is-alphabetical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", - "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", - "dev": true + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==" }, "is-alphanumeric": { "version": "1.0.0", @@ -59031,7 +59354,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", - "dev": true, "requires": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" @@ -59149,8 +59471,7 @@ "is-decimal": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", - "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", - "dev": true + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==" }, "is-descriptor": { "version": "0.1.6", @@ -59215,8 +59536,7 @@ "is-function": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz", - "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==", - "dev": true + "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==" }, "is-generator-fn": { "version": "2.1.0", @@ -59236,8 +59556,7 @@ "is-hexadecimal": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", - "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", - "dev": true + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==" }, "is-map": { "version": "2.0.2", @@ -59335,7 +59654,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "dev": true, "requires": { "call-bind": "^1.0.2", "has-tostringtag": "^1.0.0" @@ -59390,7 +59708,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", - "dev": true, "requires": { "has-symbols": "^1.0.2" } @@ -64638,7 +64955,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, "requires": { "minimist": "^1.2.5" } @@ -65125,7 +65441,6 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, "requires": { "p-locate": "^4.1.0" } @@ -65133,8 +65448,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.clonedeep": { "version": "4.5.0", @@ -65252,7 +65566,6 @@ "version": "1.20.0", "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", - "dev": true, "requires": { "fault": "^1.0.0", "highlight.js": "~10.7.0" @@ -65325,8 +65638,7 @@ "map-or-similar": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", - "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=", - "dev": true + "integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=" }, "map-visit": { "version": "1.0.0", @@ -65464,7 +65776,6 @@ "version": "1.11.3", "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", "integrity": "sha1-fIekZGREwy11Q4VwkF8tvRsagFo=", - "dev": true, "requires": { "map-or-similar": "^1.5.0" } @@ -65634,7 +65945,6 @@ "version": "2.19.0", "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", - "dev": true, "requires": { "dom-walk": "^0.1.0" } @@ -65669,8 +65979,7 @@ "minimist": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", - "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", - "dev": true + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" }, "minimist-options": { "version": "4.1.0", @@ -66266,8 +66575,7 @@ "object-inspect": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz", - "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==", - "dev": true + "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==" }, "object-is": { "version": "1.1.5", @@ -66496,7 +66804,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, "requires": { "p-try": "^2.0.0" } @@ -66505,7 +66812,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, "requires": { "p-limit": "^2.2.0" } @@ -66528,8 +66834,7 @@ "p-try": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "dev": true + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" }, "package-hash": { "version": "4.0.0", @@ -66596,7 +66901,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", - "dev": true, "requires": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", @@ -66676,8 +66980,7 @@ "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" }, "path-is-absolute": { "version": "1.0.1", @@ -67085,14 +67388,12 @@ "prismjs": { "version": "1.28.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", - "dev": true + "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==" }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", - "dev": true + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" }, "process-nextick-args": { "version": "2.0.1", @@ -67160,7 +67461,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -67171,7 +67471,6 @@ "version": "5.6.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz", "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==", - "dev": true, "requires": { "xtend": "^4.0.0" } @@ -67319,7 +67618,6 @@ "version": "6.10.3", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz", "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==", - "dev": true, "requires": { "side-channel": "^1.0.4" } @@ -67532,7 +67830,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -67633,7 +67930,6 @@ "version": "15.5.0", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", - "dev": true, "requires": { "@babel/runtime": "^7.3.1", "highlight.js": "^10.4.1", @@ -67783,7 +68079,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", - "dev": true, "requires": { "hastscript": "^6.0.0", "parse-entities": "^2.0.0", @@ -67793,8 +68088,7 @@ "prismjs": { "version": "1.27.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", - "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", - "dev": true + "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==" } } }, @@ -68604,7 +68898,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -68809,7 +69102,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "dev": true, "requires": { "call-bind": "^1.0.0", "get-intrinsic": "^1.0.2", @@ -69195,8 +69487,7 @@ "space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", - "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", - "dev": true + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==" }, "spawn-command": { "version": "0.0.2-1", @@ -69387,8 +69678,7 @@ "store2": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz", - "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==", - "dev": true + "integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==" }, "storybook-addon-performance": { "version": "0.16.1", @@ -70076,7 +70366,6 @@ "version": "6.0.8", "resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz", "integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==", - "dev": true, "requires": { "@types/is-function": "^1.0.0", "global": "^4.4.0", @@ -70091,8 +70380,7 @@ "isobject": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz", - "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==", - "dev": true + "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==" } } }, @@ -70556,8 +70844,7 @@ "ts-dedent": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", - "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", - "dev": true + "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==" }, "ts-pnp": { "version": "1.2.0", @@ -71164,8 +71451,7 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, "util.promisify": { "version": "1.0.0", @@ -71964,8 +72250,7 @@ "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "dev": true + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" }, "y18n": { "version": "4.0.3", diff --git a/package.json b/package.json index b506b9f01f9..71a77a910a7 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "@primer/octicons-react": "^17.3.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", + "@storybook/addon-storysource": "6.5.12", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5", "@styled-system/theme-get": "^5.1.2", diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 7c756e740a6..a7570c2028a 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,10 +1,7 @@ import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' import {Story, Meta} from '@storybook/react' -import React, {forwardRef} from 'react' -import {Button, ButtonProps, IconButton} from '.' -import {BaseStyles, ThemeProvider} from '..' -import Box from '../Box' - +import React from 'react' +import {Button} from '.' const unset = undefined const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} @@ -12,17 +9,6 @@ const actionIcons = {unset, TriangleDownIcon} export default { title: 'Components/Button', - decorators: [ - Story => { - return ( - - - - - - ) - } - ], argTypes: { size: { control: { @@ -53,7 +39,6 @@ export default { } }, leadingIcon: { - description: 'The displayed icon on the left', control: { type: 'select', options: Object.keys(icons) @@ -61,7 +46,6 @@ export default { mapping: icons }, trailingIcon: { - description: 'The displayed icon on the left', control: { type: 'select', options: Object.keys(icons) @@ -69,7 +53,6 @@ export default { mapping: icons }, trailingAction: { - description: 'The displayed icon on the left', control: { type: 'select', options: Object.keys(actionIcons) @@ -77,7 +60,6 @@ export default { mapping: actionIcons }, trailingVisualCount: { - description: 'The displayed icon on the left', control: { type: 'number' } @@ -92,86 +74,8 @@ export default { trailingIcon: null, leadingIcon: null, trailingAction: null, - trailingVisualCount: null + trailingVisualCount: undefined } } as Meta export const Playground: Story = args => - -export const iconButton = ({...args}: ButtonProps) => { - return ( - <> - - - - - ) -} - -// export const WatchIconButton = ({...args}: ButtonProps) => { -// const [watching, setWatching] = useState(false) -// const icon = watching ? EyeClosedIcon : () => -// return ( -// -// ) -// } - -// export const caretButton = ({...args}: ButtonProps) => { -// return ( -// -// ) -// } - -// type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} -// const ReactRouterLikeLink = forwardRef( -// ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { -// // eslint-disable-next-line jsx-a11y/anchor-has-content -// return -// } -// ) - -export const linkButton = ({...args}: ButtonProps) => { - return ( - <> - - - - - - - - - - - - - - - - {/* - - */} - {/* - - */} - - ) -} diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx deleted file mode 100644 index bc386530d08..00000000000 --- a/src/Button/ButtonCounter.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import {SxProp} from '../sx' -import CounterLabel from '../CounterLabel' - -export type CounterProps = { - children: number -} & SxProp - -const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => { - return ( - - {children} - - ) -} - -export {Counter} diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx index c1a4e4313e9..afcbe4a3e5b 100644 --- a/src/Button/ButtonFeatures.stories.tsx +++ b/src/Button/ButtonFeatures.stories.tsx @@ -1,145 +1,40 @@ -import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' -import {Story, Meta} from '@storybook/react' +import {EyeIcon, TriangleDownIcon, HeartIcon} from '@primer/octicons-react' import React, {useState} from 'react' -import {Button, ButtonProps} from '.' -import {BaseStyles, ThemeProvider} from '..' - -const unset = undefined -const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} - -const actionIcons = {unset, TriangleDownIcon} +import {Button} from '.' export default { - title: 'Components/Button/Features', - decorators: [ - Story => { - return ( - - - - - - ) - } - ], - argTypes: { - size: { - control: { - type: 'radio', - options: ['small', 'medium', 'large'] - } - }, - disabled: { - control: { - type: 'boolean' - } - }, - variant: { - control: { - type: 'radio', - options: ['default', 'primary', 'danger', 'invisible', 'outline'] - } - }, - alignContent: { - control: { - type: 'radio', - options: ['center', 'start'] - } - }, - block: { - control: { - type: 'boolean' - } - }, - leadingIcon: { - description: 'The displayed icon on the left', - control: { - type: 'select', - options: Object.keys(icons) - }, - mapping: icons - }, - trailingIcon: { - description: 'The displayed icon on the left', - control: { - type: 'select', - options: Object.keys(icons) - }, - mapping: icons - }, - trailingAction: { - description: 'The displayed icon on the left', - control: { - type: 'select', - options: Object.keys(actionIcons) - }, - mapping: actionIcons - } - }, - args: { - block: false, - size: 'medium', - disabled: false, - variant: 'default', - alignContent: 'center', - trailingIcon: null, - leadingIcon: null, - trailingAction: null - } -} as Meta - -const Template: Story = args => - -export const Default = Template.bind({}) -Default.args = { - variant: 'default' -} - -export const Primary = Template.bind({}) -Primary.args = { - variant: 'primary' + title: 'Components/Button/Features' } -export const Danger = Template.bind({}) -Danger.args = { - variant: 'danger' -} +export const Default = () => -export const Invisible = Template.bind({}) -Invisible.args = { - variant: 'invisible' -} - -export const LeadingVisual = Template.bind({}) -LeadingVisual.args = { - leadingIcon: HeartIcon -} +export const Primary = () => -export const TrailingVisual = Template.bind({}) -TrailingVisual.args = { - trailingIcon: HeartIcon -} +export const Danger = () => -export const TrailingAction = Template.bind({}) -TrailingAction.args = { - trailingAction: TriangleDownIcon -} +export const Invisible = () => -export const Block = Template.bind({}) -Block.args = { - block: true -} +export const LeadingVisual = () => -export const Disabled = Template.bind({}) -Disabled.args = { - disabled: true -} +export const TrailingVisual = () => -export const TrailingCounter = ({...args}: ButtonProps) => { +export const TrailingCounter = () => { const [count, setCount] = useState(0) return ( - ) } + +export const TrailingAction = () => + +export const Block = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx new file mode 100644 index 00000000000..e2504b2cbd3 --- /dev/null +++ b/src/Button/IconButton.stories.tsx @@ -0,0 +1,47 @@ +import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import React from 'react' +import {IconButton} from '.' + +const unset = undefined +const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} + +export default { + title: 'Components/IconButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + control: { + type: 'boolean' + } + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible', 'outline'] + } + }, + icon: { + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + ariaLabel: {control: 'text'} + }, + args: { + size: 'medium', + disabled: false, + variant: 'default', + ariaLabel: 'Icon button description', + icon: XIcon + } +} as Meta + +export const Playground: Story = args => diff --git a/src/Button/IconButtonFeatures.stories.tsx b/src/Button/IconButtonFeatures.stories.tsx new file mode 100644 index 00000000000..f712788c5ba --- /dev/null +++ b/src/Button/IconButtonFeatures.stories.tsx @@ -0,0 +1,23 @@ +import {HeartIcon} from '@primer/octicons-react' +import React from 'react' +import {IconButton} from '.' + +export default { + title: 'Components/IconButton/Features' +} + +export const Default = () => + +export const Primary = () => + +export const Danger = () => + +export const Invisible = () => + +export const Disabled = () => + +export const Small = () => + +export const Medium = () => + +export const Large = () => diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx new file mode 100644 index 00000000000..ef03870430c --- /dev/null +++ b/src/Button/LinkButton.stories.tsx @@ -0,0 +1,73 @@ +import {EyeClosedIcon, EyeIcon, SearchIcon, ChevronRightIcon, XIcon, HeartIcon} from '@primer/octicons-react' +import {Story, Meta} from '@storybook/react' +import React from 'react' +import {Button} from '.' +const unset = undefined +const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} +const actionIcons = {unset, ChevronRightIcon} + +export default { + title: 'Components/LinkButton', + argTypes: { + size: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + }, + variant: { + control: { + type: 'radio', + options: ['default', 'primary', 'danger', 'invisible', 'outline'] + } + }, + alignContent: { + control: { + type: 'radio', + options: ['center', 'start'] + } + }, + block: { + control: { + type: 'boolean' + } + }, + leadingIcon: { + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingIcon: { + control: { + type: 'select', + options: Object.keys(icons) + }, + mapping: icons + }, + trailingAction: { + control: { + type: 'select', + options: Object.keys(actionIcons) + }, + mapping: actionIcons + }, + href: {control: 'text'} + }, + args: { + block: false, + size: 'medium', + variant: 'default', + alignContent: 'center', + trailingIcon: null, + leadingIcon: null, + href: '/' + } +} as Meta + +export const Playground: Story = args => ( + +) diff --git a/src/Button/LinkButtonFeatures.stories.tsx b/src/Button/LinkButtonFeatures.stories.tsx new file mode 100644 index 00000000000..b0bcf5d20a9 --- /dev/null +++ b/src/Button/LinkButtonFeatures.stories.tsx @@ -0,0 +1,87 @@ +import {EyeIcon, ChevronRightIcon, HeartIcon} from '@primer/octicons-react' +import React, {forwardRef} from 'react' +import {Button} from '.' + +export default { + title: 'Components/LinkButton/Features' +} + +export const Default = () => ( + +) + +export const Primary = () => ( + +) + +export const Danger = () => ( + +) + +export const Invisible = () => ( + +) + +export const LeadingVisual = () => ( + +) + +export const TrailingVisual = () => ( + +) + +export const TrailingAction = () => ( + +) + +export const Block = () => ( + +) + +export const Small = () => ( + +) + +export const Medium = () => ( + +) + +export const Large = () => ( + +) + +type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode} +const ReactRouterLikeLink = forwardRef( + ({to, ...props}: {to: string; children: React.ReactNode}, ref) => { + // eslint-disable-next-line jsx-a11y/anchor-has-content + return + } +) + +export const WithReactRouter = () => ( + +) From da4960e377ec15fe34d2e18e4901e93290d72813 Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 17:16:17 -0700 Subject: [PATCH 08/14] cleanup size CSS --- src/Button/ButtonBase.tsx | 7 ++-- src/Button/IconButton.tsx | 17 ++++---- src/Button/styles.ts | 85 +++++++++++++++++---------------------- 3 files changed, 49 insertions(+), 60 deletions(-) diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 5c951468f49..c65d1ce6d69 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -4,7 +4,7 @@ import Box from '../Box' import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' import {ButtonProps, StyledButton} from './types' -import {getVariantStyles, getSizeStyles, getButtonStyles, getAlignContentSize} from './styles' +import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles' import CounterLabel from '../CounterLabel' const ButtonBase = forwardRef( @@ -25,8 +25,8 @@ const ButtonBase = forwardRef( pointerEvents: 'none' } const sxStyles = useMemo(() => { - return merge.all([getButtonStyles(theme), getSizeStyles(size, false), getVariantStyles(variant, theme)]) - }, [theme, size, variant]) + return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)]) + }, [theme, variant]) return ( ( {...props} ref={forwardedRef} data-component={block ? 'block' : null} + data-size={size === 'small' ? 'small' : size === 'large' ? 'large' : undefined} > {LeadingIcon && ( diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx index 4a80e6a9fcc..f77cb937ef4 100644 --- a/src/Button/IconButton.tsx +++ b/src/Button/IconButton.tsx @@ -3,19 +3,20 @@ import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' import Box from '../Box' import {IconButtonProps, StyledButton} from './types' -import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles' +import {getBaseStyles, getVariantStyles} from './styles' const IconButton = forwardRef((props, forwardedRef): JSX.Element => { const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props const {theme} = useTheme() - const sxStyles = merge.all([ - getBaseStyles(theme), - getSizeStyles(size, true), - getVariantStyles(variant, theme), - sxProp as SxProp - ]) + const sxStyles = merge.all([getBaseStyles(theme), getVariantStyles(variant, theme), sxProp as SxProp]) return ( - + ) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index edd7c52b5ff..c4926bba5a9 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -171,54 +171,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme return style[variant] } -/* The button heights have to amount to - small - 28 - medium - 32 - large - 34 - In icon these have to be square. -*/ -export const getSizeStyles = (size = 'medium', iconOnly: boolean) => { - let paddingX, fontSize, height, width - switch (size) { - case 'small': - height = 28 - paddingX = 8 - fontSize = 0 - break - case 'large': - height = 40 - paddingX = 20 - fontSize = 1 - break - case 'medium': - default: - height = 32 - paddingX = 16 - fontSize = 1 - } - if (iconOnly && size === 'small') { - width = 28 - paddingX = 'unset' - } - if (iconOnly && size === 'large') { - width = 40 - paddingX = 'unset' - } - if (iconOnly && size === 'medium') { - width = 32 - paddingX = 'unset' - } - return { - height: `${height}px`, - width: `${width}px`, - paddingX: `${paddingX}px`, - fontSize, - '[data-component=ButtonCounter]': { - fontSize - } - } -} - export const getBaseStyles = (theme?: Theme) => ({ borderRadius: '2', border: '1px solid', @@ -234,7 +186,9 @@ export const getBaseStyles = (theme?: Theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - gap: '2', + height: 'var(--primer-control-medium-size, 32px)', + padding: '0 var(--primer-control-medium-paddingInline-normal, 12px)', + gap: 'var(--primer-control-medium-gap, 8px)', '&:disabled': { cursor: 'not-allowed' }, @@ -251,6 +205,39 @@ export const getBaseStyles = (theme?: Theme) => ({ display: 'grid', padding: 'initial', placeContent: 'center' + }, + '&[data-size="small"]': { + padding: '0 var(--primer-control-small-paddingInline-condensed, 8px)', + height: 'var(--primer-control-small-size, 28px)', + gap: 'var(--primer-control-small-gap, 4px)', + fontSize: 'var(--primer-text-body-size-small, 12px)', + + '[data-component="text"]': { + lineHeight: 'var(--primer-text-body-lineHeight-small, calc(20 / 12))' + }, + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: 'var(--primer-control-small-gap, 4px)' + }, + + '&[data-component=IconButton]': { + width: 'var(--primer-control-small-size, 28px)', + padding: 'unset' + } + }, + '&[data-size="large"]': { + padding: '0 var(--primer-control-large-paddingInline-spacious, 16px)', + height: 'var(--primer-control-large-size, 40px)', + gap: 'var(--primer-control-large-gap, 8px)', + + '[data-component="buttonContent"] > :not(:last-child)': { + mr: 'var(--primer-control-large-gap, 8px)' + }, + + '&[data-component=IconButton]': { + width: 'var(--primer-control-large-size, 40px)', + padding: 'unset' + } } }) From c02b9f29cfee7ebc46dadd8e063e639b7a7fa8ca Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 19:51:31 -0700 Subject: [PATCH 09/14] cleanup CSS --- src/Button/Button.stories.tsx | 2 +- src/Button/IconButton.stories.tsx | 2 +- src/Button/LinkButton.stories.tsx | 2 +- src/Button/LinkButton.tsx | 15 +---- src/Button/styles.ts | 98 ++++++++++++------------------- src/Button/types.ts | 2 +- 6 files changed, 43 insertions(+), 78 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index a7570c2028a..0bdf15afa4b 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -24,7 +24,7 @@ export default { variant: { control: { type: 'radio', - options: ['default', 'primary', 'danger', 'invisible', 'outline'] + options: ['default', 'primary', 'danger', 'invisible'] } }, alignContent: { diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx index e2504b2cbd3..c1622fa02a7 100644 --- a/src/Button/IconButton.stories.tsx +++ b/src/Button/IconButton.stories.tsx @@ -23,7 +23,7 @@ export default { variant: { control: { type: 'radio', - options: ['default', 'primary', 'danger', 'invisible', 'outline'] + options: ['default', 'primary', 'danger', 'invisible'] } }, icon: { diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx index ef03870430c..3b7e516d318 100644 --- a/src/Button/LinkButton.stories.tsx +++ b/src/Button/LinkButton.stories.tsx @@ -18,7 +18,7 @@ export default { variant: { control: { type: 'radio', - options: ['default', 'primary', 'danger', 'invisible', 'outline'] + options: ['default', 'primary', 'danger', 'invisible'] } }, alignContent: { diff --git a/src/Button/LinkButton.tsx b/src/Button/LinkButton.tsx index 5c610994945..948cb43f3e9 100644 --- a/src/Button/LinkButton.tsx +++ b/src/Button/LinkButton.tsx @@ -8,20 +8,7 @@ type MyProps = LinkButtonProps & ButtonBaseProps const LinkButton = forwardRef( ({children, as: Component = 'a', sx = {}, ...props}, forwardedRef): JSX.Element => { - const style = { - width: 'fit-content', - '&:hover:not([disabled])': { - textDecoration: 'underline' - }, - // focus must come before :active so that the active box shadow overrides - '&:focus:not([disabled])': { - textDecoration: 'underline' - }, - '&:active:not([disabled])': { - textDecoration: 'underline' - } - } - const sxStyle = merge.all([style, sx as SxProp]) + const sxStyle = merge.all([sx as SxProp]) return ( {children} diff --git a/src/Button/styles.ts b/src/Button/styles.ts index c4926bba5a9..3165dd75d21 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -1,6 +1,5 @@ import {VariantType, AlignContent} from './types' import {Theme} from '../ThemeProvider' -import {background} from 'styled-system' export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale @@ -11,7 +10,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme backgroundColor: 'btn.bg', boxShadow: `${theme?.shadows.btn.shadow}, ${theme?.shadows.btn.insetShadow}`, '&:hover:not([disabled])': { - backgroundColor: 'btn.hoverBg' + backgroundColor: 'btn.hoverBg', + borderColor: 'btn.hoverBorder' }, '&:active:not([disabled])': { backgroundColor: 'btn.activeBg', @@ -31,7 +31,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme primary: { color: 'btn.primary.text', backgroundColor: 'btn.primary.bg', - borderColor: 'border.subtle', + borderColor: 'btn.primary.border', boxShadow: `${theme?.shadows.btn.primary.shadow}`, '&:hover:not([disabled])': { color: 'btn.primary.hoverText', @@ -106,13 +106,13 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme invisible: { color: 'accent.fg', backgroundColor: 'transparent', - border: '0', + borderColor: 'transparent', boxShadow: 'none', '&:hover:not([disabled])': { - backgroundColor: 'btn.hoverBg' + backgroundColor: `actionListItem.default.hoverBg` }, '&:active:not([disabled])': { - backgroundColor: 'btn.selectedBg' + backgroundColor: 'actionListItem.default.activeBg' }, '&:disabled': { color: 'primer.fg.disabled', @@ -121,50 +121,10 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme } }, '&[aria-expanded=true]': { - backgroundColor: 'btn.selectedBg' - } - }, - outline: { - color: 'btn.outline.text', - boxShadow: `${theme?.shadows.btn.shadow}`, - borderColor: 'btn.border', - backgroundColor: 'btn.bg', - - '&:hover:not([disabled])': { - color: 'btn.outline.hoverText', - backgroundColor: 'btn.outline.hoverBg', - borderColor: 'outline.hoverBorder', - boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.hoverCounterBg', - color: 'inherit' - } - }, - '&:active:not([disabled])': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: 'btn.outline.selectedBorder' + backgroundColor: 'actionListItem.default.selectedBg' }, - - '&:disabled': { - color: 'btn.outline.disabledText', - backgroundColor: 'btn.outline.disabledBg', - borderColor: 'btn.border', - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.disabledCounterBg', - color: 'inherit' - } - }, - '[data-component=ButtonCounter]': { - backgroundColor: 'btn.outline.counterBg', - color: 'btn.outline.text' - }, - '&[aria-expanded=true]': { - color: 'btn.outline.selectedText', - backgroundColor: 'btn.outline.selectedBg', - boxShadow: `${theme?.shadows.btn.outline.selectedShadow}`, - borderColor: 'btn.outline.selectedBorder' + svg: { + color: 'fg.muted' } } } @@ -189,11 +149,24 @@ export const getBaseStyles = (theme?: Theme) => ({ height: 'var(--primer-control-medium-size, 32px)', padding: '0 var(--primer-control-medium-paddingInline-normal, 12px)', gap: 'var(--primer-control-medium-gap, 8px)', - '&:disabled': { - cursor: 'not-allowed' + minWidth: 'max-content', + transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)', + transitionProperty: 'color, fill, background-color, border-color', + '&[href]': { + display: 'inline-flex', + '&:hover': { + textDecoration: 'none' + } }, - '&:disabled svg': { - opacity: '0.6' + '&:hover': { + transitionDuration: '80ms' + }, + '&:active': { + transition: 'none' + }, + '&:disabled': { + cursor: 'not-allowed', + boxShadow: 'none' }, '@media (forced-colors: active)': { '&:focus': { @@ -201,10 +174,14 @@ export const getBaseStyles = (theme?: Theme) => ({ outline: 'solid 1px transparent' } }, + '[data-component=ButtonCounter]': { + fontSize: 'var(--primer-text-body-size-medium, 14px)' + }, '&[data-component=IconButton]': { display: 'grid', - padding: 'initial', - placeContent: 'center' + padding: 'unset', + placeContent: 'center', + width: 'var(--primer-control-medium-size, 32px)' }, '&[data-size="small"]': { padding: '0 var(--primer-control-small-paddingInline-condensed, 8px)', @@ -216,6 +193,10 @@ export const getBaseStyles = (theme?: Theme) => ({ lineHeight: 'var(--primer-text-body-lineHeight-small, calc(20 / 12))' }, + '[data-component=ButtonCounter]': { + fontSize: 'var(--primer-text-body-size-small, 12px)' + }, + '[data-component="buttonContent"] > :not(:last-child)': { mr: 'var(--primer-control-small-gap, 4px)' }, @@ -247,9 +228,6 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-component="block"]': { width: '100%' }, - '[data-component="Icon"]': { - backgroundColor: 'pink' - }, '[data-component="leadingIcon"]': { gridArea: 'leadingIcon' }, @@ -262,7 +240,7 @@ export const getButtonStyles = (theme?: Theme) => { gridArea: 'trailingIcon' }, '[data-component="trailingAction"]': { - marginRight: '-4px' + marginRight: 'calc(var(--base-size-4, 4px) * -1)' }, '[data-component="buttonContent"]': { flex: '1 0 auto', @@ -273,7 +251,7 @@ export const getButtonStyles = (theme?: Theme) => { alignContent: 'center' }, '[data-component="buttonContent"] > :not(:last-child)': { - mr: '2' + mr: 'var(--primer-control-medium-gap, 8px)' } } return styles diff --git a/src/Button/types.ts b/src/Button/types.ts index 27f0a0b8326..d5d4d4bbc7d 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -9,7 +9,7 @@ export const StyledButton = styled.button` ${sx}; ` -export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' +export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' export type Size = 'small' | 'medium' | 'large' From f30ded960f8509d13fc93feb25d3cf644603c211 Mon Sep 17 00:00:00 2001 From: langermank Date: Thu, 6 Oct 2022 20:19:46 -0700 Subject: [PATCH 10/14] rename visual props --- src/Button/Button.stories.tsx | 8 ++++---- src/Button/ButtonBase.tsx | 18 +++++++++--------- src/Button/ButtonFeatures.stories.tsx | 4 ++-- src/Button/LinkButton.stories.tsx | 8 ++++---- src/Button/LinkButtonFeatures.stories.tsx | 4 ++-- src/Button/styles.ts | 10 +++++----- src/Button/types.ts | 4 ++-- 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 0bdf15afa4b..649a8595540 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -38,14 +38,14 @@ export default { type: 'boolean' } }, - leadingIcon: { + leadingVisual: { control: { type: 'select', options: Object.keys(icons) }, mapping: icons }, - trailingIcon: { + trailingVisual: { control: { type: 'select', options: Object.keys(icons) @@ -71,8 +71,8 @@ export default { disabled: false, variant: 'default', alignContent: 'center', - trailingIcon: null, - leadingIcon: null, + trailingVisual: null, + leadingVisual: null, trailingAction: null, trailingVisualCount: undefined } diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index c65d1ce6d69..4392cfb86d1 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -10,8 +10,8 @@ import CounterLabel from '../CounterLabel' const ButtonBase = forwardRef( ({children, as: Component = 'button', sx: sxProp = {}, ...props}, forwardedRef): JSX.Element => { const { - leadingIcon: LeadingIcon, - trailingIcon: TrailingIcon, + leadingVisual: LeadingVisual, + trailingVisual: TrailingVisual, trailingAction: TrailingAction, trailingVisualCount: trailingVisualCount, variant = 'default', @@ -38,19 +38,19 @@ const ButtonBase = forwardRef( data-size={size === 'small' ? 'small' : size === 'large' ? 'large' : undefined} > - {LeadingIcon && ( - - + {LeadingVisual && ( + + )} {children && {children}} {trailingVisualCount !== undefined ? ( - + {trailingVisualCount} - ) : TrailingIcon ? ( - - + ) : TrailingVisual ? ( + + ) : null} diff --git a/src/Button/ButtonFeatures.stories.tsx b/src/Button/ButtonFeatures.stories.tsx index afcbe4a3e5b..d501248d1db 100644 --- a/src/Button/ButtonFeatures.stories.tsx +++ b/src/Button/ButtonFeatures.stories.tsx @@ -14,9 +14,9 @@ export const Danger = () => export const Invisible = () => -export const LeadingVisual = () => +export const LeadingVisual = () => -export const TrailingVisual = () => +export const TrailingVisual = () => export const TrailingCounter = () => { const [count, setCount] = useState(0) diff --git a/src/Button/LinkButton.stories.tsx b/src/Button/LinkButton.stories.tsx index 3b7e516d318..425136a9412 100644 --- a/src/Button/LinkButton.stories.tsx +++ b/src/Button/LinkButton.stories.tsx @@ -32,14 +32,14 @@ export default { type: 'boolean' } }, - leadingIcon: { + leadingVisual: { control: { type: 'select', options: Object.keys(icons) }, mapping: icons }, - trailingIcon: { + trailingVisual: { control: { type: 'select', options: Object.keys(icons) @@ -60,8 +60,8 @@ export default { size: 'medium', variant: 'default', alignContent: 'center', - trailingIcon: null, - leadingIcon: null, + trailingVisual: null, + leadingVisual: null, href: '/' } } as Meta diff --git a/src/Button/LinkButtonFeatures.stories.tsx b/src/Button/LinkButtonFeatures.stories.tsx index b0bcf5d20a9..b2d2c1cae2f 100644 --- a/src/Button/LinkButtonFeatures.stories.tsx +++ b/src/Button/LinkButtonFeatures.stories.tsx @@ -31,13 +31,13 @@ export const Invisible = () => ( ) export const LeadingVisual = () => ( - ) export const TrailingVisual = () => ( - ) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 3165dd75d21..7f61c7dc915 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -228,16 +228,16 @@ export const getButtonStyles = (theme?: Theme) => { '&[data-component="block"]': { width: '100%' }, - '[data-component="leadingIcon"]': { - gridArea: 'leadingIcon' + '[data-component="leadingVisual"]': { + gridArea: 'leadingVisual' }, '[data-component="text"]': { gridArea: 'text', lineHeight: 'var(--primer-text-body-lineHeight-medium, calc(20/14))', whiteSpace: 'nowrap' }, - '[data-component="trailingIcon"]': { - gridArea: 'trailingIcon' + '[data-component="trailingVisual"]': { + gridArea: 'trailingVisual' }, '[data-component="trailingAction"]': { marginRight: 'calc(var(--base-size-4, 4px) * -1)' @@ -245,7 +245,7 @@ export const getButtonStyles = (theme?: Theme) => { '[data-component="buttonContent"]': { flex: '1 0 auto', display: 'grid', - gridTemplateAreas: '"leadingIcon text trailingIcon"', + gridTemplateAreas: '"leadingVisual text trailingVisual"', gridTemplateColumns: 'min-content minmax(0, auto) min-content', alignItems: 'center', alignContent: 'center' diff --git a/src/Button/types.ts b/src/Button/types.ts index d5d4d4bbc7d..aef58e99b33 100644 --- a/src/Button/types.ts +++ b/src/Button/types.ts @@ -51,11 +51,11 @@ export type ButtonProps = { /** * The leading icon comes before button content */ - leadingIcon?: React.FunctionComponent> + leadingVisual?: React.FunctionComponent> /** * The trailing icon comes after button content */ - trailingIcon?: React.FunctionComponent> + trailingVisual?: React.FunctionComponent> /** * Trailing action appears to the right of the trailing visual and is always locked to the end */ From 9e1eda964d9d2006694eba46db30ae0df49a6846 Mon Sep 17 00:00:00 2001 From: Katie Langerman Date: Thu, 6 Oct 2022 20:21:44 -0700 Subject: [PATCH 11/14] Create mean-parrots-burn.md --- .changeset/mean-parrots-burn.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/mean-parrots-burn.md diff --git a/.changeset/mean-parrots-burn.md b/.changeset/mean-parrots-burn.md new file mode 100644 index 00000000000..85a13e1f1e6 --- /dev/null +++ b/.changeset/mean-parrots-burn.md @@ -0,0 +1,13 @@ +--- +"@primer/react": major +--- + + +- Add a block prop for full width +- Add alignContent prop to align content to center or start +- Use control sizing CSS variables +- Use height over padding for more control over sizing +- Refactor Button.Counter to better align with the other visual props +- Rename visual props to better align with other Primer components +- Deprecate outline variant + From 4ee27884d11416b656bda349c28e74810d9dfee5 Mon Sep 17 00:00:00 2001 From: langermank Date: Fri, 7 Oct 2022 08:06:06 -0700 Subject: [PATCH 12/14] tests --- package.json | 1 + src/Button/IconButton.tsx | 1 - src/__tests__/Button.test.tsx | 32 +- .../__snapshots__/Button.test.tsx.snap | 1330 ++++++++++++++--- 4 files changed, 1133 insertions(+), 231 deletions(-) diff --git a/package.json b/package.json index 8bb9bdb5fdc..24466d71f4d 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0", "lint:fix": "npm run lint -- --fix", "test": "jest", + "test:watch": "jest --watch", "test:storybook": "test-storybook", "test:update": "npm run test -- --updateSnapshot", "test:type-check": "tsc --noEmit", diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx index f77cb937ef4..5a532cf829e 100644 --- a/src/Button/IconButton.tsx +++ b/src/Button/IconButton.tsx @@ -1,7 +1,6 @@ import React, {forwardRef} from 'react' import {merge, SxProp} from '../sx' import {useTheme} from '../ThemeProvider' -import Box from '../Box' import {IconButtonProps, StyledButton} from './types' import {getBaseStyles, getVariantStyles} from './styles' diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx index 9b546620b4c..702602100c7 100644 --- a/src/__tests__/Button.test.tsx +++ b/src/__tests__/Button.test.tsx @@ -29,10 +29,10 @@ describe('Button', () => { expect(onClick).toHaveBeenCalledTimes(1) }) - it('respects width props', () => { - const container = render() + it('respects width prop', () => { + const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('width', '200px') + expect(button).toMatchSnapshot() }) it('respects the "disabled" prop', () => { @@ -48,20 +48,16 @@ describe('Button', () => { expect(onClick).toHaveBeenCalledTimes(0) }) - it('respects the "variant" prop', () => { + it('respects the small size prop', () => { const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('font-size', '12px') + expect(button).toMatchSnapshot() }) - it('respects the "fontSize" prop over the "variant" prop', () => { - const container = render( - - ) + it('respects the large size prop', () => { + const container = render() const button = container.getByRole('button') - expect(button).toHaveStyleRule('font-size', '20px') + expect(button).toMatchSnapshot() }) it('styles primary button appropriately', () => { @@ -82,18 +78,6 @@ describe('Button', () => { expect(button).toMatchSnapshot() }) - it('styles outline button appropriately', () => { - const container = render() - const button = container.getByRole('button') - expect(button).toMatchSnapshot() - }) - - it('styles icon only button to make it a square', () => { - const container = render() - const IconOnlyButton = container.getByRole('button') - expect(IconOnlyButton).toHaveStyleRule('padding-right', '8px') - expect(IconOnlyButton).toMatchSnapshot() - }) it('makes sure icon button has an aria-label', () => { const container = render() const IconOnlyButton = container.getByLabelText('Search button') diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap index f54c410ac25..60feb4be80a 100644 --- a/src/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/__tests__/__snapshots__/Button.test.tsx.snap @@ -1,15 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Button renders consistently 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 6px; border: 1px solid; border-color: rgba(27,31,36,0.15); font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -21,13 +26,28 @@ exports[`Button renders consistently 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); @@ -49,8 +69,31 @@ exports[`Button renders consistently 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -58,32 +101,101 @@ exports[`Button renders consistently 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { background-color: #f3f4f6; + border-color: rgba(27,31,36,0.15); } .c0:active:not([disabled]) { @@ -104,18 +216,29 @@ exports[`Button renders consistently 1`] = ` `; -exports[`Button styles danger button appropriately 1`] = ` +exports[`Button respects the large size prop 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -127,16 +250,31 @@ exports[`Button styles danger button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.danger.text; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.text; background-color: btn.bg; - box-shadow: undefined; + box-shadow: undefined,undefined; } .c0:focus:not(:disabled) { @@ -155,68 +293,143 @@ exports[`Button styles danger button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; - color: btn.danger.disabledText; - background-color: btn.danger.disabledBg; - border-color: btn.danger.disabledBorder; + cursor: not-allowed; + box-shadow: none; + color: primer.fg.disabled; } .c0:disabled [data-component=ButtonCounter] { color: inherit; - background-color: btn.danger.disabledCounterBg; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; - color: btn.danger.text; - background-color: btn.danger.counterBg; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); } -.c0:hover:not([disabled]) { - color: btn.danger.hoverText; - background-color: btn.danger.hoverBg; - border-color: btn.danger.hoverBorder; - box-shadow: undefined; +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; } -.c0:hover:not([disabled]) [data-component=ButtonCounter] { - background-color: btn.danger.hoverCounterBg; - color: btn.danger.hoverText; +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); +} + +.c0:hover:not([disabled]) { + background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; + background-color: btn.activeBg; + border-color: btn.activeBorder; } .c0[aria-expanded=true] { - color: btn.danger.selectedText; - background-color: btn.danger.selectedBg; - box-shadow: undefined; - border-color: btn.danger.selectedBorder; + background-color: btn.activeBg; + border-color: btn.activeBorder; } @media (forced-colors:active) { @@ -227,28 +440,35 @@ exports[`Button styles danger button appropriately 1`] = ` `; -exports[`Button styles icon only button to make it a square 1`] = ` +exports[`Button respects the small size prop 1`] = ` .c1 { - display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .c0 { border-radius: 2; border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -260,11 +480,28 @@ exports[`Button styles icon only button to make it a square 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 8px; - padding-right: 8px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: btn.text; background-color: btn.bg; box-shadow: undefined,undefined; @@ -286,8 +523,31 @@ exports[`Button styles icon only button to make it a square 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: primer.fg.disabled; } @@ -295,16 +555,101 @@ exports[`Button styles icon only button to make it a square 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c0 [data-component=ButtonCounter] { - font-size: 14px; +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c0 [data-component="text"] { + grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; +} + +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { @@ -324,40 +669,36 @@ exports[`Button styles icon only button to make it a square 1`] = ` } `; -exports[`Button styles invisible button appropriately 1`] = ` +exports[`Button respects width prop 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; - border: 0; + border: 1px solid; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -369,16 +710,31 @@ exports[`Button styles invisible button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 6px; - padding-bottom: 6px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: accent.fg; - background-color: transparent; - box-shadow: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.text; + background-color: btn.bg; + box-shadow: undefined,undefined; } .c0:focus:not(:disabled) { @@ -397,8 +753,31 @@ exports[`Button styles invisible button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: primer.fg.disabled; } @@ -406,40 +785,111 @@ exports[`Button styles invisible button appropriately 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { background-color: btn.hoverBg; + border-color: btn.hoverBorder; } .c0:active:not([disabled]) { - background-color: btn.selectedBg; + background-color: btn.activeBg; + border-color: btn.activeBorder; } .c0[aria-expanded=true] { - background-color: btn.selectedBg; + background-color: btn.activeBg; + border-color: btn.activeBorder; } @media (forced-colors:active) { @@ -450,25 +900,35 @@ exports[`Button styles invisible button appropriately 1`] = ` `; -exports[`Button styles outline button appropriately 1`] = ` +exports[`Button styles danger button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; - border-color: btn.border; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -480,16 +940,31 @@ exports[`Button styles outline button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; - color: btn.outline.text; - box-shadow: undefined; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: btn.danger.text; background-color: btn.bg; + box-shadow: undefined; } .c0:focus:not(:disabled) { @@ -508,68 +983,159 @@ exports[`Button styles outline button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; - color: btn.outline.disabledText; - background-color: btn.outline.disabledBg; - border-color: btn.border; + cursor: not-allowed; + box-shadow: none; + color: btn.danger.disabledText; + background-color: btn.danger.disabledBg; + border-color: btn.danger.disabledBorder; } .c0:disabled [data-component=ButtonCounter] { - background-color: btn.outline.disabledCounterBg; color: inherit; + background-color: btn.danger.disabledCounterBg; +} + +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); + color: btn.danger.text; + background-color: btn.danger.counterBg; } -.c0:disabled svg { - opacity: 0.6; +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; - background-color: btn.outline.counterBg; - color: btn.outline.text; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { - color: btn.outline.hoverText; - background-color: btn.outline.hoverBg; - border-color: outline.hoverBorder; + color: btn.danger.hoverText; + background-color: btn.danger.hoverBg; + border-color: btn.danger.hoverBorder; box-shadow: undefined; } .c0:hover:not([disabled]) [data-component=ButtonCounter] { - background-color: btn.outline.hoverCounterBg; - color: inherit; + background-color: btn.danger.hoverCounterBg; + color: btn.danger.hoverText; } .c0:active:not([disabled]) { - color: btn.outline.selectedText; - background-color: btn.outline.selectedBg; + color: btn.danger.selectedText; + background-color: btn.danger.selectedBg; box-shadow: undefined; - border-color: btn.outline.selectedBorder; + border-color: btn.danger.selectedBorder; } .c0[aria-expanded=true] { - color: btn.outline.selectedText; - background-color: btn.outline.selectedBg; + color: btn.danger.selectedText; + background-color: btn.danger.selectedBg; box-shadow: undefined; - border-color: btn.outline.selectedBorder; + border-color: btn.danger.selectedBorder; } @media (forced-colors:active) { @@ -582,23 +1148,33 @@ exports[`Button styles outline button appropriately 1`] = ` class="c0" > - Outline + + Danger + `; -exports[`Button styles primary button appropriately 1`] = ` +exports[`Button styles invisible button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c0 { border-radius: 2; border: 1px solid; - border-color: border.subtle; + border-color: transparent; font-family: inherit; - font-weight: bold; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -610,13 +1186,259 @@ exports[`Button styles primary button appropriately 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; + color: accent.fg; + background-color: transparent; + box-shadow: none; +} + +.c0:focus:not(:disabled) { + box-shadow: none; + outline: 2px solid; + outline-offset: -2px; +} + +.c0:focus:not(:disabled):not(:focus-visible) { + outline: solid 1px transparent; +} + +.c0:focus-visible:not(:disabled) { + box-shadow: none; + outline: 2px solid; + outline-offset: -2px; +} + +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + +.c0:disabled { + cursor: not-allowed; + box-shadow: none; + color: primer.fg.disabled; +} + +.c0:disabled [data-component=ButtonCounter] { + color: inherit; +} + +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; +} + +.c0 [data-component="text"] { + grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; +} + +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; +} + +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); +} + +.c0:hover:not([disabled]) { + background-color: actionListItem.default.hoverBg; +} + +.c0:active:not([disabled]) { + background-color: actionListItem.default.activeBg; +} + +.c0[aria-expanded=true] { + background-color: actionListItem.default.selectedBg; +} + +.c0 svg { + color: fg.muted; +} + +@media (forced-colors:active) { + .c0:focus { + outline: solid 1px transparent; + } +} + + +`; + +exports[`Button styles primary button appropriately 1`] = ` +.c1 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c0 { + border-radius: 2; + border: 1px solid; + border-color: btn.primary.border; + font-family: inherit; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-text-decoration: none; + text-decoration: none; + text-align: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: btn.primary.text; background-color: btn.primary.bg; box-shadow: undefined; @@ -638,8 +1460,31 @@ exports[`Button styles primary button appropriately 1`] = ` outline-offset: -2px; } +.c0[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c0[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c0:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c0:active { + -webkit-transition: none; + transition: none; +} + .c0:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: btn.primary.disabledText; background-color: btn.primary.disabledBg; } @@ -648,30 +1493,98 @@ exports[`Button styles primary button appropriately 1`] = ` color: inherit; } -.c0:disabled svg { - opacity: 0.6; +.c0 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); + background-color: btn.primary.counterBg; + color: btn.primary.text; } -.c0 > :not(:last-child) { - margin-right: 8px; +.c0[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); } -.c0 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c0[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c0[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c0[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c0[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c0[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c0[data-component="block"] { + width: 100%; +} + +.c0 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c0 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c0 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c0 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c0 [data-component=ButtonCounter] { - font-size: 14px; - background-color: btn.primary.counterBg; - color: btn.primary.text; +.c0 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c0 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c0 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c0:hover:not([disabled]) { @@ -707,9 +1620,14 @@ exports[`Button styles primary button appropriately 1`] = ` class="c0" > - Primary + + Primary + `; From f9e76d73ec01634f4b4857cfc681e51dbd7337d2 Mon Sep 17 00:00:00 2001 From: langermank Date: Fri, 7 Oct 2022 08:23:58 -0700 Subject: [PATCH 13/14] snaps --- .../__snapshots__/ActionMenu.test.tsx.snap | 190 ++++-- .../__snapshots__/TextInput.test.tsx.snap | 544 ++++++++++++++---- 2 files changed, 577 insertions(+), 157 deletions(-) diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 30a5e138b9e..03049f7bc09 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -8,8 +8,10 @@ exports[`ActionMenu renders consistently 1`] = ` } .c2 { - display: inline-block; - margin-left: 8px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; } .c1 { @@ -17,10 +19,8 @@ exports[`ActionMenu renders consistently 1`] = ` border: 1px solid; border-color: rgba(27,31,36,0.15); font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -32,13 +32,28 @@ exports[`ActionMenu renders consistently 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 5px; - padding-bottom: 5px; - padding-left: 16px; - padding-right: 16px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: #f6f8fa; box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25); @@ -60,8 +75,31 @@ exports[`ActionMenu renders consistently 1`] = ` outline-offset: -2px; } +.c1[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c1:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c1:active { + -webkit-transition: none; + transition: none; +} + .c1:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -69,32 +107,101 @@ exports[`ActionMenu renders consistently 1`] = ` color: inherit; } -.c1:disabled svg { - opacity: 0.6; +.c1 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); +} + +.c1[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c1[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c1[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c1[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c1[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c1[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c1[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; } -.c1 > :not(:last-child) { - margin-right: 8px; +.c1[data-component="block"] { + width: 100%; } -.c1 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c1 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c1 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c1 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c1 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c1 [data-component=ButtonCounter] { - font-size: 14px; +.c1 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c1 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c1 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c1:hover:not([disabled]) { background-color: #f3f4f6; + border-color: rgba(27,31,36,0.15); } .c1:active:not([disabled]) { @@ -127,43 +234,22 @@ exports[`ActionMenu renders consistently 1`] = ` diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 23bc455ccd4..890060a009f 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1253,19 +1253,13 @@ exports[`TextInput renders trailingAction icon button 1`] = ` margin: 4px; } -.c5 { - display: inline-block; -} - .c4 { border-radius: 6px; - border: 0; - border-color: rgba(27,31,36,0.15); + border: 1px solid; + border-color: transparent; font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -1277,14 +1271,35 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 4px; - padding-right: 4px; - font-size: 14px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: transparent; box-shadow: none; + padding-top: 2px; + padding-right: 4px; + padding-bottom: 2px; + padding-left: 4px; position: relative; } @@ -1304,8 +1319,31 @@ exports[`TextInput renders trailingAction icon button 1`] = ` outline-offset: -2px; } +.c4[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c4[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c4:active { + -webkit-transition: none; + transition: none; +} + .c4:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -1313,24 +1351,70 @@ exports[`TextInput renders trailingAction icon button 1`] = ` color: inherit; } -.c4:disabled svg { - opacity: 0.6; +.c4 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c4 [data-component=ButtonCounter] { - font-size: 14px; +.c4[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c4[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c4[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c4[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c4[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; } .c4:hover:not([disabled]) { - background-color: #f3f4f6; + background-color: rgba(208,215,222,0.32); } .c4:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.48); } .c4[aria-expanded=true] { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.24); +} + +.c4 svg { + color: #57606a; } .c0 { @@ -1693,35 +1777,33 @@ exports[`TextInput renders trailingAction icon button 1`] = ` @@ -1733,15 +1815,20 @@ exports[`TextInput renders trailingAction text button 1`] = ` margin: 4px; } +.c4 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c3 { border-radius: 6px; - border: 0; - border-color: rgba(27,31,36,0.15); + border: 1px solid; + border-color: transparent; font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -1753,16 +1840,35 @@ exports[`TextInput renders trailingAction text button 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 4px; - padding-right: 4px; - font-size: 12px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: transparent; box-shadow: none; + padding-top: 2px; + padding-right: 4px; + padding-bottom: 2px; + padding-left: 4px; position: relative; } @@ -1782,8 +1888,31 @@ exports[`TextInput renders trailingAction text button 1`] = ` outline-offset: -2px; } +.c3[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c3[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c3:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c3:active { + -webkit-transition: none; + transition: none; +} + .c3:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -1791,40 +1920,112 @@ exports[`TextInput renders trailingAction text button 1`] = ` color: inherit; } -.c3:disabled svg { - opacity: 0.6; +.c3 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c3 > :not(:last-child) { - margin-right: 8px; +.c3[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c3[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c3[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); +} + +.c3[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c3[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c3[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c3[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); } -.c3 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c3[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c3[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c3[data-component="block"] { + width: 100%; +} + +.c3 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c3 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c3 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c3 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c3 [data-component=ButtonCounter] { - font-size: 12px; +.c3 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c3 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c3 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c3:hover:not([disabled]) { - background-color: #f3f4f6; + background-color: rgba(208,215,222,0.32); } .c3:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.48); } .c3[aria-expanded=true] { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.24); +} + +.c3 svg { + color: #57606a; } .c0 { @@ -1962,14 +2163,21 @@ exports[`TextInput renders trailingAction text button 1`] = ` > @@ -1981,15 +2189,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` margin: 4px; } +.c5 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .c4 { border-radius: 6px; - border: 0; - border-color: rgba(27,31,36,0.15); + border: 1px solid; + border-color: transparent; font-family: inherit; - font-weight: 600; - line-height: 20px; - white-space: nowrap; - vertical-align: middle; + font-weight: var(--base-text-weight-medium,500); + font-size: var(--primer-text-body-size-medium,14px); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; @@ -2001,16 +2214,35 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -webkit-text-decoration: none; text-decoration: none; text-align: center; - display: grid; - grid-template-areas: "leadingIcon text trailingIcon"; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 4px; - padding-right: 4px; - font-size: 12px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + height: var(--primer-control-medium-size,32px); + padding: 0 var(--primer-control-medium-paddingInline-normal,12px); + gap: var(--primer-control-medium-gap,8px); + min-width: -webkit-max-content; + min-width: -moz-max-content; + min-width: max-content; + -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1); + transition: 80ms cubic-bezier(0.65,0,0.35,1); + -webkit-transition-property: color,fill,background-color,border-color; + transition-property: color,fill,background-color,border-color; color: #24292f; background-color: transparent; box-shadow: none; + padding-top: 2px; + padding-right: 4px; + padding-bottom: 2px; + padding-left: 4px; position: relative; } @@ -2030,8 +2262,31 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` outline-offset: -2px; } +.c4[href] { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c4[href]:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4:hover { + -webkit-transition-duration: 80ms; + transition-duration: 80ms; +} + +.c4:active { + -webkit-transition: none; + transition: none; +} + .c4:disabled { - cursor: default; + cursor: not-allowed; + box-shadow: none; color: #8c959f; } @@ -2039,40 +2294,112 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` color: inherit; } -.c4:disabled svg { - opacity: 0.6; +.c4 [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-medium,14px); } -.c4 > :not(:last-child) { - margin-right: 8px; +.c4[data-component=IconButton] { + display: grid; + padding: unset; + place-content: center; + width: var(--primer-control-medium-size,32px); +} + +.c4[data-size="small"] { + padding: 0 var(--primer-control-small-paddingInline-condensed,8px); + height: var(--primer-control-small-size,28px); + gap: var(--primer-control-small-gap,4px); + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="text"] { + line-height: var(--primer-text-body-lineHeight-small,calc(20 / 12)); } -.c4 [data-component="leadingIcon"] { - grid-area: leadingIcon; +.c4[data-size="small"] [data-component=ButtonCounter] { + font-size: var(--primer-text-body-size-small,12px); +} + +.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-small-gap,4px); +} + +.c4[data-size="small"][data-component=IconButton] { + width: var(--primer-control-small-size,28px); + padding: unset; +} + +.c4[data-size="large"] { + padding: 0 var(--primer-control-large-paddingInline-spacious,16px); + height: var(--primer-control-large-size,40px); + gap: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-large-gap,8px); +} + +.c4[data-size="large"][data-component=IconButton] { + width: var(--primer-control-large-size,40px); + padding: unset; +} + +.c4[data-component="block"] { + width: 100%; +} + +.c4 [data-component="leadingVisual"] { + grid-area: leadingVisual; } .c4 [data-component="text"] { grid-area: text; + line-height: var(--primer-text-body-lineHeight-medium,calc(20/14)); + white-space: nowrap; } -.c4 [data-component="trailingIcon"] { - grid-area: trailingIcon; +.c4 [data-component="trailingVisual"] { + grid-area: trailingVisual; } -.c4 [data-component=ButtonCounter] { - font-size: 12px; +.c4 [data-component="trailingAction"] { + margin-right: calc(var(--base-size-4,4px) * -1); +} + +.c4 [data-component="buttonContent"] { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + display: grid; + grid-template-areas: "leadingVisual text trailingVisual"; + grid-template-columns: min-content minmax(0,auto) min-content; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; +} + +.c4 [data-component="buttonContent"] > :not(:last-child) { + margin-right: var(--primer-control-medium-gap,8px); } .c4:hover:not([disabled]) { - background-color: #f3f4f6; + background-color: rgba(208,215,222,0.32); } .c4:active:not([disabled]) { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.48); } .c4[aria-expanded=true] { - background-color: hsla(220,14%,94%,1); + background-color: rgba(208,215,222,0.24); +} + +.c4 svg { + color: #57606a; } .c0 { @@ -2435,14 +2762,21 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` > From 79f8967878a5538275f027354fb2a7ac8528311c Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 5 Dec 2022 12:20:53 -0800 Subject: [PATCH 14/14] address feedback --- src/Button/Button.stories.tsx | 31 +++++-------------------------- src/Button/ButtonBase.tsx | 2 +- src/Button/IconButton.stories.tsx | 19 +++++-------------- src/Button/IconButton.tsx | 2 +- src/Button/LinkButton.stories.tsx | 31 ++++++++----------------------- src/__tests__/Button.test.tsx | 8 +++++++- 6 files changed, 27 insertions(+), 66 deletions(-) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index cfe19b77377..2f9b8dc0438 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -1,11 +1,8 @@ +import React from 'react' import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, HeartIcon} from '@primer/octicons-react' import {Story, Meta} from '@storybook/react' -import React from 'react' import {Button} from '.' -const unset = undefined -const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} - -const actionIcons = {unset, TriangleDownIcon} +import {OcticonArgType} from '../utils/story-helpers' export default { title: 'Components/Button', @@ -38,27 +35,9 @@ export default { type: 'boolean' } }, - leadingVisual: { - control: { - type: 'select', - options: Object.keys(icons) - }, - mapping: icons - }, - trailingVisual: { - control: { - type: 'select', - options: Object.keys(icons) - }, - mapping: icons - }, - trailingAction: { - control: { - type: 'select', - options: Object.keys(actionIcons) - }, - mapping: actionIcons - }, + leadingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingVisual: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]), + trailingAction: OcticonArgType([TriangleDownIcon]), trailingVisualCount: { control: { type: 'number' diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx index 4392cfb86d1..8b14be210b4 100644 --- a/src/Button/ButtonBase.tsx +++ b/src/Button/ButtonBase.tsx @@ -35,7 +35,7 @@ const ButtonBase = forwardRef( {...props} ref={forwardedRef} data-component={block ? 'block' : null} - data-size={size === 'small' ? 'small' : size === 'large' ? 'large' : undefined} + data-size={size === 'small' || size === 'large' ? size : undefined} > {LeadingVisual && ( diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx index c1622fa02a7..0f8f60624ce 100644 --- a/src/Button/IconButton.stories.tsx +++ b/src/Button/IconButton.stories.tsx @@ -1,10 +1,8 @@ +import React from 'react' import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react' import {Story, Meta} from '@storybook/react' -import React from 'react' import {IconButton} from '.' - -const unset = undefined -const icons = {unset, EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} +import {OcticonArgType} from '../utils/story-helpers' export default { title: 'Components/IconButton', @@ -26,22 +24,15 @@ export default { options: ['default', 'primary', 'danger', 'invisible'] } }, - icon: { - control: { - type: 'select', - options: Object.keys(icons) - }, - mapping: icons - }, - ariaLabel: {control: 'text'} + icon: OcticonArgType([EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon]) }, args: { size: 'medium', disabled: false, variant: 'default', - ariaLabel: 'Icon button description', + 'aria-label': 'Icon button description', icon: XIcon } } as Meta -export const Playground: Story = args => +export const Playground: Story = args => diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx index 5a532cf829e..9b8c79f4478 100644 --- a/src/Button/IconButton.tsx +++ b/src/Button/IconButton.tsx @@ -11,7 +11,7 @@ const IconButton = forwardRef((props, forwar return ( { expect(onClick).toHaveBeenCalledTimes(1) }) - it('respects width prop', () => { + it('respects block prop', () => { const container = render() const button = container.getByRole('button') expect(button).toMatchSnapshot() @@ -83,4 +83,10 @@ describe('Button', () => { const IconOnlyButton = container.getByLabelText('Search button') expect(IconOnlyButton).toBeTruthy() }) + + it('respects the alignContent prop', () => { + const container = render() + const button = container.getByRole('button') + expect(button).toMatchSnapshot() + }) })