bd3268adf0
* move key-value-table to ui-toolkit and use tailwind * add key-value-table to storybook * override border width 1px from the styles of the app, remove td and th from children * clone muted and numerical props to children elements * proposal change table remove empty lines * add Roboto mono to font-mono tailwind config * remove labels and labelfor * revert change on token-details-circulating * export the whole components directory rather than explicitly individual components * add classNames, add formatNumberPercentage, remove spans, add span in token details circulating * data-testid=governance-proposal-enactmentDate and use span instead of div * use custom spacing defined in tailwind & another README.md update for running cypress in watch mode * update divs to span within the vesting table * Update README.md Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * borders and text visible on both dark and light themes * add headingLevel and use dl instead of tables * update styling for dl inline * remove added grey from tailwind * ignore md files Co-authored-by: madalinaraicu <“madalina@raygroup.uk”> Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
49 lines
986 B
TypeScript
49 lines
986 B
TypeScript
import type { Story, Meta } from '@storybook/react';
|
|
import { KeyValueTable, KeyValueTableRow } from './key-value-table';
|
|
|
|
export default {
|
|
component: KeyValueTable,
|
|
title: 'KeyValueTable',
|
|
} as Meta;
|
|
|
|
const Template: Story = (args) => (
|
|
<KeyValueTable {...args}>
|
|
<KeyValueTableRow>
|
|
{'Token address'}
|
|
{'0x888'}
|
|
</KeyValueTableRow>
|
|
<KeyValueTableRow>
|
|
{'Value'}
|
|
{888}
|
|
</KeyValueTableRow>
|
|
<KeyValueTableRow>
|
|
{'Token address'}
|
|
{'0x888'}
|
|
</KeyValueTableRow>
|
|
</KeyValueTable>
|
|
);
|
|
|
|
export const Muted = Template.bind({});
|
|
Muted.args = {
|
|
title: 'Muted table',
|
|
muted: true,
|
|
numerical: false,
|
|
headingLevel: 5, // h5
|
|
};
|
|
|
|
export const Numerical = Template.bind({});
|
|
Numerical.args = {
|
|
title: 'Numerical table',
|
|
muted: false,
|
|
numerical: true,
|
|
headingLevel: 5, // h5
|
|
};
|
|
|
|
export const Normal = Template.bind({});
|
|
Normal.args = {
|
|
headingLevel: 5, // h5
|
|
title: 'Normal table',
|
|
muted: false,
|
|
numerical: false,
|
|
};
|