import { Canvas, Meta } from '@storybook/addon-docs/blocks'

import { space } from '../_utils/branding'
import { STYLES } from '../_utils/taxonomy'

<Meta title={`${STYLES}/Spacing`} />

export const styles = {
  main: {
    margin: '20px',
    overflow: 'hidden',
  },
  colorTile: {
    float: 'left',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    height: '150px',
    width: '150px',
  },
  fontTile: {
    marginBottom: '10px',
  },
  fontTableTile: {
    width: '100%',
    textAlign: 'center',
  },
}

export const renderTabSpacing = (s) => (
  <tr key={s}>
    <td>{s}</td>
    <td>{space[s]}</td>
  </tr>
)

# Spacing

<Canvas>
  <div style={styles.main}>
    <table style={styles.fontTableTile}>
      <tbody>
        <tr>
          <th>Name</th>
          <th>Space</th>
        </tr>
        {Object.keys(space).map(renderTabSpacing)}
      </tbody>
    </table>
  </div>
</Canvas>