import { Meta } from '@storybook/blocks';
import { parameters } from '../../../utils/docsPage.js';
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
import { cssStringToTableArray } from '../../../utils/parseCss';
import alignContent from '../../../../scss/tokens/layout/flex/_align-content.scss?raw';
import alignItems from '../../../../scss/tokens/layout/flex/_align-items.scss?raw';
import alignSelf from '../../../../scss/tokens/layout/flex/_align-self.scss?raw';
import flexDirection from '../../../../scss/tokens/layout/flex/_flex-direction.scss?raw';
import flexGrow from '../../../../scss/tokens/layout/flex/_flex-grow.scss?raw';
import flexShrink from '../../../../scss/tokens/layout/flex/_flex-shrink.scss?raw';
import flexWrap from '../../../../scss/tokens/layout/flex/_flex-wrap.scss?raw';
import flex from '../../../../scss/tokens/layout/flex/_flex.scss?raw';
import justifyContent from '../../../../scss/tokens/layout/flex/_justify-content.scss?raw';
import justifyItems from '../../../../scss/tokens/layout/flex/_justify-items.scss?raw';
import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?raw';

<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />

# Flexbox tokens

Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent [CSS tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Our style library provides these flexbox utility classes:

<CopyTable
  title="Align content"
  mdnLink="align-content"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(alignContent)}
  copyable={[true, false]}
/>

<CopyTable
  title="Align items"
  mdnLink="align-items"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(alignItems)}
  copyable={[true, false]}
/>

<CopyTable
  title="Align self"
  mdnLink="align-self"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(alignSelf)}
  copyable={[true, false]}
/>

<CopyTable
  title="Flex direction"
  mdnLink="flex-direction"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(flexDirection)}
  copyable={[true, false]}
/>

<CopyTable
  title="Flex grow"
  mdnLink="flex-grow"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(flexGrow)}
  copyable={[true, false]}
/>

<CopyTable
  title="Flex shrink"
  mdnLink="flex-shrink"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(flexShrink)}
  copyable={[true, false]}
/>

<CopyTable
  title="Flex wrap"
  mdnLink="flex-wrap"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(flexWrap)}
  copyable={[true, false]}
/>

<CopyTable
  title="Flex"
  mdnLink="flex"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(flex)}
  copyable={[true, false]}
/>

<CopyTable
  title="Justify content"
  mdnLink="justify-content"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(justifyContent)}
  copyable={[true, false]}
/>

<CopyTable
  title="Justify items"
  mdnLink="justify-items"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(justifyItems)}
  copyable={[true, false]}
/>

<CopyTable
  title="Justify self"
  mdnLink="justify-self"
  header={['Class', 'Properties']}
  body={cssStringToTableArray(justifySelf)}
  copyable={[true, false]}
/>