diff --git a/packages/circuit-ui/components/List/List.stories.tsx b/packages/circuit-ui/components/List/List.stories.tsx index e702de079c..b008128bbf 100644 --- a/packages/circuit-ui/components/List/List.stories.tsx +++ b/packages/circuit-ui/components/List/List.stories.tsx @@ -15,8 +15,8 @@ import { Fragment } from 'react'; +import { Stack } from '../../../../.storybook/components/index.js'; import Body from '../Body/index.js'; -import { spacing } from '../../styles/style-mixins.js'; import { List, ListProps } from './List.js'; @@ -40,31 +40,32 @@ export const Base = (args: ListProps) => ( const variants: ListProps['variant'][] = ['unordered', 'ordered']; -export const Variants = (args: ListProps) => - variants.map((variant) => ( - - - - )); +export const Variants = (args: ListProps) => ( + + {variants.map((variant) => ( + + + + ))} + +); const sizes: ListProps['size'][] = ['one', 'two']; -export const Sizes = (args: ListProps) => - sizes.map((size) => ( - <> - - Use List size {size} with Body {size} text. - - - - - - )); +export const Sizes = (args: ListProps) => ( + + {sizes.map((size) => ( + <> + + Use List size {size} with Body {size} text. + + + + + + ))} + +); export const Nested = (args: ListProps) => ( diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx index a8481e6112..8c15f82043 100644 --- a/packages/circuit-ui/components/Modal/Modal.stories.tsx +++ b/packages/circuit-ui/components/Modal/Modal.stories.tsx @@ -13,7 +13,6 @@ * limitations under the License. */ -/* eslint-disable react/display-name */ import { Fragment } from 'react'; import { Stack } from '../../../../.storybook/components/index.js'; @@ -22,7 +21,6 @@ import Headline from '../Headline/index.js'; import Body from '../Body/index.js'; import Image from '../Image/index.js'; import { ModalProvider } from '../ModalContext/index.js'; -import { spacing } from '../../styles/style-mixins.js'; import { Modal, ModalProps, useModal } from './Modal.js'; @@ -34,7 +32,7 @@ export default { const defaultModalChildren = () => ( - + Hello World! I am a modal. @@ -109,10 +107,10 @@ export const PreventClose = (modal: ModalProps): JSX.Element => { PreventClose.args = { children: ({ onClose }: { onClose: ModalProps['onClose'] }) => ( - + Complete the action - + Users have to complete the action inside the modal to close it. The close button is hidden and clicking outside the modal or pressing the escape key does not close the modal either. @@ -169,10 +167,10 @@ CustomStyles.args = { borderTopRightRadius: 'var(--cui-border-radius-mega)', }} /> - + Custom styles - + Custom styles can be applied using the css prop. diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx index bd640a6cc8..5562a079f0 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx @@ -24,7 +24,6 @@ import { TopNavigation } from '../TopNavigation/index.js'; import { baseArgs as topNavigationProps } from '../TopNavigation/TopNavigation.stories.js'; import { SideNavigation } from '../SideNavigation/index.js'; import { baseArgs as sideNavigationProps } from '../SideNavigation/SideNavigation.stories.js'; -import { spacing } from '../../styles/style-mixins.js'; import { SidePanelProvider } from './SidePanelContext.js'; import { @@ -69,7 +68,7 @@ const basePlay = ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => { }; const StoryInstructions = () => ( - + Select an item to open its details in a side panel. When this story is viewed in canvas mode we simulate a selection of the third item. @@ -98,12 +97,12 @@ const DefaultChildren = ({ return ( <> - + {showMoreInfo ? `These are the details of ${label}.` : `This is more information about ${label}.`} - + { 'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.' } @@ -127,7 +126,7 @@ const DefaultChildren = ({ headline: 'More information', }) } - css={spacing({ bottom: 'mega' })} + style={{ marginBottom: '1rem' }} > Show more @@ -140,7 +139,7 @@ const DefaultChildren = ({ variant="tertiary" size="kilo" onClick={onBack} - css={spacing({ bottom: 'mega' })} + style={{ marginBottom: '1rem' }} > Back @@ -150,7 +149,7 @@ const DefaultChildren = ({ variant="tertiary" size="kilo" onClick={onClose} - css={spacing({ left: 'mega', bottom: 'mega' })} + style={{ marginBottom: '1rem', marginLeft: '1rem' }} > Close @@ -182,7 +181,7 @@ const ComponentWithSidePanel = (props: SidePanelHookProps) => { }))} label="List of items with details in a side panel" hideLabel - css={spacing('mega')} + style={{ marginBottom: '1rem' }} /> ); }; @@ -216,7 +215,7 @@ export const WithTopNavigation = (props: SidePanelHookProps): JSX.Element => { onClose={() => setSideNavigationOpen(false)} />
- + @@ -279,7 +278,7 @@ const ComponentWithSidePanelExtended = (props: SidePanelHookProps) => { }))} label="List of items with details in a side panel" hideLabel - css={spacing('mega')} + style={{ marginBottom: '1rem' }} /> ); }; diff --git a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx index e4adf46cad..d58aff6f53 100644 --- a/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx +++ b/packages/circuit-ui/hooks/useCollapsible/useCollapsible.stories.tsx @@ -15,7 +15,6 @@ import Body from '../../components/Body/index.js'; import Button from '../../components/Button/index.js'; -import { spacing } from '../../styles/style-mixins.js'; import { CollapsibleOptions, useCollapsible } from './useCollapsible.js'; @@ -24,14 +23,15 @@ export default { }; export const Example = (args: CollapsibleOptions) => { - const { isOpen, getButtonProps, getContentProps } = useCollapsible(args); + const { isOpen, getButtonProps, getContentProps } = + useCollapsible(args); return (
- + { 'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.' } diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx index fcfcc7b956..0afabec567 100644 --- a/packages/circuit-ui/styles/style-mixins.stories.tsx +++ b/packages/circuit-ui/styles/style-mixins.stories.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +/** @jsxImportSource @emotion/react */ + import { Stack } from '../../../.storybook/components/index.js'; import Button from '../components/Button/index.js';