import { ComponentMeta, ComponentStory } from '@storybook/react'; import ButtonLink from './button-link'; /** * ButtonLink - Storybook Meta */ export default { title: 'Atoms/Buttons/ButtonLink', component: ButtonLink, args: { shape: 'rectangle', }, argTypes: { 'aria-label': { control: { type: 'text', }, description: 'An accessible label.', table: { category: 'Accessibility', }, type: { name: 'string', required: false, }, }, children: { control: { type: 'text', }, description: 'The link body.', type: { name: 'string', required: true, }, }, className: { control: { type: 'text', }, description: 'Set additional classnames to the button link.', table: { category: 'Styles', }, type: { name: 'string', required: false, }, }, kind: { control: { type: 'select', }, description: 'The link kind.', options: ['primary', 'secondary'], table: { category: 'Options', defaultValue: { summary: 'secondary' }, }, type: { name: 'string', required: false, }, }, shape: { control: { type: 'select', }, description: 'The link shape.', options: ['rectangle', 'square'], table: { category: 'Options', defaultValue: { summary: 'rectangle' }, }, type: { name: 'string', required: false, }, }, target: { control: { type: null, }, description: 'The link target.', type: { name: 'string', required: true, }, }, }, } as ComponentMeta; const Template: ComponentStory = (args) => ( ); /** * ButtonLink Story - Primary */ export const Primary = Template.bind({}); Primary.args = { children: 'Link', kind: 'primary', target: '#', }; /** * ButtonLink Story - Secondary */ export const Secondary = Template.bind({}); Secondary.args = { children: 'Link', kind: 'secondary', target: '#', }; /** * ButtonLink Story - Tertiary */ export const Tertiary = Template.bind({}); Tertiary.args = { children: 'Link', kind: 'tertiary', target: '#', }; ' value='540e56dff30d525ad78291664b3880caa73ffdae'/>

path: root/src/components/molecules/forms/flipping-label.tsx

blob: c8743691397aebe1baab20694818173ec7c04b6e (plain)