import { hbs } from 'ember-cli-htmlbars'; import { withKnobs, boolean, text, number, select } from '@storybook/addon-knobs'; import { argument, attribute, example, rootName } from './knob-categories'; import { POSITIONS, SORT_DIRECTIONS } from '../addon/components/denali-table/cell-enums'; export default { title: `${rootName}/DenaliTable`, component: 'DenaliTable', decorators: [withKnobs], }; export const Default = () => ({ template: hbs` <DenaliTable @isStriped={{true}} as |Table|> <Table.Header as |Head|> <Head.Row as |Row|> <Row.HeaderCell @isSorted={{true}} @sortDirection="descend">Date</Row.HeaderCell> <Row.HeaderCell>Device</Row.HeaderCell> <Row.HeaderCell @isSorted={{true}} @position="right">Stock</Row.HeaderCell> </Head.Row> </Table.Header> <Table.Body as |Body|> {{#each this.data as |row|}} <Body.Row as |Row|> {{#each (range 0 row.length) as |index|}} <Row.Cell @position={{if (eq index 2) "right"}}>{{get row index}}</Row.Cell> {{/each}} </Body.Row> {{/each}} </Table.Body> <Table.Footer as |Foot|> <Foot.Row class="is-bold" as |Row|> <Row.Cell>Total</Row.Cell> <Row.Cell></Row.Cell> <Row.Cell @position="right">18</Row.Cell> </Foot.Row> </Table.Footer> </DenaliTable> `, context: { data: [ ['08/12/2021', 'Mobile', 2], ['08/12/2021', 'Desktop', 4], ['08/12/2021', 'Other', 1], ['08/13/2021', 'Mobile', 4], ['08/13/2021', 'Desktop', 5], ['08/13/2021', 'Other', 2], ], }, }); export const Playground = () => ({ template: hbs` <DenaliTable class={{this.class}} @isFrozen={{this.isFrozen}} @isStriped={{this.isStriped}} @isCards={{this.isCards}} as |Table| > <Table.Header as |Head|> <Head.Row as |Row|> {{#each (range 1 this.numCols true) as |colNum|}} <Row.HeaderCell @position={{this.position}} @isMono={{this.isMono}} @isSorted={{this.isSorted}} @sortDirection={{this.sortDirection}} > H{{colNum}} </Row.HeaderCell> {{/each}} </Head.Row> </Table.Header> <Table.Body as |Body|> {{#each (range 1 this.numRows true) as |rowNum|}} <Body.Row as |Row|> {{#each (range 1 this.numCols true) as |colNum|}} {{#if (eq colNum 1)}} <Row.HeaderCell @position={{this.position}}>{{rowNum}}:{{colNum}}</Row.HeaderCell> {{else}} <Row.Cell @position={{this.position}}>{{rowNum}}:{{colNum}}</Row.Cell> {{/if}} {{/each}} </Body.Row> {{/each}} </Table.Body> <Table.Footer as |Foot|> <Foot.Row as |Row|> {{#each (range 1 this.numCols true) as |colNum|}} {{#if (eq colNum 1)}} <Row.HeaderCell @position={{this.position}}>F{{colNum}}</Row.HeaderCell> {{else}} <Row.Cell @position={{this.position}}>F{{colNum}}</Row.Cell> {{/if}} {{/each}} </Foot.Row> </Table.Footer> </DenaliTable> `, context: { isFrozen: boolean('isFrozen', false, argument), isStriped: boolean('isStriped', false, argument), isCards: boolean('isCards', false, argument), class: text('class', '', attribute), position: select('position', POSITIONS, POSITIONS[0], argument), isSorted: boolean('isSorted', false, argument), sortDirection: select('sortDirection', SORT_DIRECTIONS, SORT_DIRECTIONS[0], argument), isMono: boolean('isMono', false, argument), numRows: number('numRows', 5, { min: 1, max: 99 }, example), numCols: number('numCols', 3, { min: 1, max: 20 }, example), }, });