hypnagaga/src/docs/styles/tokens/layout/main.stories.mdx
2023-07-30 10:35:58 +01:00

76 lines
1.9 KiB
Text

import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../../utils/parseCss';
{/* @ts-ignore */}
import boxSizing from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
{/* @ts-ignore */}
import display from '$lib/scss/tokens/layout/\_display.scss?raw';
{/* @ts-ignore */}
import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
{/* @ts-ignore */}
import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
{/* @ts-ignore */}
import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
{/* @ts-ignore */}
import position from '$lib/scss/tokens/layout/\_position.scss?raw';
<Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Layout tokens
<CopyTable
title="Display"
mdnLink="display"
header={['Class', 'Properties']}
body={cssStringToTableArray(display)}
copyable={[true, false]}
/>
<CopyTable
title="Position"
mdnLink="position"
header={['Class', 'Properties']}
body={cssStringToTableArray(position)}
copyable={[true, false]}
/>
<CopyTable
title="Float"
mdnLink="float"
header={['Class', 'Properties']}
body={cssStringToTableArray(floats)}
copyable={[true, false]}
/>
<CopyTable
title="Box sizing"
mdnLink="box-sizing"
header={['Class', 'Properties']}
body={cssStringToTableArray(boxSizing)}
copyable={[true, false]}
/>
<CopyTable
title="Object fit"
mdnLink="object-fit"
header={['Class', 'Properties']}
body={cssStringToTableArray(objectFit)}
copyable={[true, false]}
/>
<CopyTable
title="Object position"
mdnLink="object-position"
header={['Class', 'Properties']}
body={cssStringToTableArray(objectPosition)}
copyable={[true, false]}
/>