import {Meta} from '@storybook/addon-docs';
import Text from '../../../components/text/Text';
import Headline from '../../../components/text/Headline';
import PageHeader from 'blocks/PageHeader';
import {StoryVariantTable} from '../../utils';
const shadows = ['sg-shadow-small', 'sg-shadow-medium', 'sg-shadow-large'];

<Meta title="Utilities/Shadows" />

<PageHeader type="utility">Shadows</PageHeader>

You can use following single purpose flexible classes to highlight differences in elevation between two surfaces. All classes are based on the [Design System shadow tokens](/story/foundation-✨-shadows--page).

<StoryVariantTable>
  <thead>
    <tr>
      <td>
        <Headline
          extraBold
          transform="uppercase"
          as="span"
          color="text-gray-60"
          size="xsmall"
        >
          Utility class
        </Headline>
      </td>
      <td>
        <Headline
          extraBold
          transform="uppercase"
          as="span"
          color="text-gray-60"
          size="xsmall"
        >
          Preview
        </Headline>
      </td>
    </tr>
  </thead>
  <tbody>
    {shadows.map(shadow => (
      <tr key={shadow}>
        <td>
          <code>.{shadow}</code>
        </td>
        <td>
          <div className={shadow} style={{width: 150, height: 150}} />
        </td>
      </tr>
    ))}
  </tbody>
</StoryVariantTable>