import { Meta, Canvas, Story } from '@storybook/addon-docs'
import rplSpacing from './../tokens/settings/spacing.yaml'
import rplLayerStyles from './../tokens/settings/layers.yaml'
import sbTokenTable from './components/token-table.vue'
import sbTokenTableRow from './components/token-row.vue'
import sbTokenTableCol from './components/token-col.vue'
import sbTokenTableSwatch from './components/token-swatch.vue'


export const SpacingTemplate = (args) => ({
  components: { sbTokenTable, sbTokenTableRow, sbTokenTableCol, sbTokenTableSwatch },
  setup() {
    const items = Object.keys(rplSpacing?.sp).map(k => {
      return rplSpacing.sp[k]
    })
    return {
      columns: ['Size (px)'],
      items
    }
  },
  template: `
    <sbTokenTable :columns="columns" >
      <sbTokenTableRow lined v-for="(item, i) in items" :key="item">
        <sbTokenTableCol collapse width="10%">{{item.value}}</sbTokenTableCol>
        <sbTokenTableCol center><sbTokenTableSwatch :size="item.value" :color="item.color">{{item.value}}</sbTokenTableSwatch></sbTokenTableCol>
        <sbTokenTableCol >--rpl-sp-{{i + 1}}</sbTokenTableCol>
      </sbTokenTableRow>
    </sbTokenTable>
  `
});

# Spacing

<Meta title='Base Styles/Layout' parameters={{viewMode: 'docs'}} />

<Canvas>
  <Story name="Spacing" parameters={{
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=1286%3A17241',
    }
  }}>
    {SpacingTemplate.bind({})}
  </Story>
</Canvas>
