import { ComponentMeta, ComponentStory } from '@storybook/react'; import Button from './button'; /** * Button - Storybook Meta */ export default { title: 'Atoms/Buttons/Button', component: Button, args: { disabled: false, type: 'button', }, argTypes: { 'aria-label': { control: { type: 'text', }, description: 'An accessible label.', table: { category: 'Accessibility', }, type: { name: 'string', required: false, }, }, children: { control: { type: 'text', }, description: 'The button body.', type: { name: 'string', required: true, }, }, className: { control: { type: 'text', }, description: 'Set additional classnames to the button wrapper.', table: { category: 'Styles', }, type: { name: 'string', required: false, }, }, disabled: { control: { type: 'boolean', }, description: 'Render button as disabled.', table: { category: 'Options', defaultValue: { summary: false }, }, type: { name: 'boolean', required: false, }, }, kind: { control: { type: 'select', }, description: 'Button kind.', options: ['primary', 'secondary', 'tertiary', 'neutral'], table: { category: 'Options', defaultValue: { summary: 'secondary' }, }, type: { name: 'string', required: false, }, }, onClick: { control: { type: null, }, description: 'A callback function to handle click.', table: { category: 'Events', }, type: { name: 'function', required: false, }, }, shape: { control: { type: 'select', }, description: 'The link shape.', options: ['circle', 'rectangle', 'square', 'initial'], table: { category: 'Options', defaultValue: { summary: 'rectangle' }, }, type: { name: 'string', required: false, }, }, type: { control: { type: 'select', }, description: 'Button type attribute.', options: ['button', 'reset', 'submit'], table: { category: 'Options', defaultValue: { summary: 'button' }, }, type: { name: 'string', required: false, }, }, }, } as ComponentMeta; const Template: ComponentStory = (args) => { const { children, type, ...props } = args; const getBody = () => { if (children) return children; switch (type) { case 'reset': return 'Reset'; case 'submit': return 'Submit'; case 'button': default: return 'Button'; } }; return ( ); }; /** * Button Story - Primary */ export const Primary = Template.bind({}); Primary.args = { kind: 'primary', }; /** * Button Story - Secondary */ export const Secondary = Template.bind({}); Secondary.args = { kind: 'secondary', }; /** * Button Story - Tertiary */ export const Tertiary = Template.bind({}); Tertiary.args = { kind: 'tertiary', }; '#n4'>4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

Prism.languages.turtle = {
  comment: {
    pattern: /#.*/,
    greedy: true,
  },
  'multiline-string': {
    pattern:
      /"""(?:(?:""?)?(?:[^"\\]|\\.))*"""|'''(?:(?:''?)?(?:[^'\\]|\\.))*'''/,
    greedy: true,
    alias: 'string',
    inside: {
      comment: /#.*/,
    },
  },
  string: {
    pattern: /"(?:[^\\"\r\n]|\\.)*"|'(?:[^\\'\r\n]|\\.)*'/,
    greedy: true,
  },
  url: {
    pattern:
      /<(?:[^\x00-\x20<>"{}|^`\\]|\\(?:u[\da-fA-F]{4}|U[\da-fA-F]{8}))*>/,
    greedy: true,
    inside: {
      punctuation: /[<>]/,
    },
  },
  function: {
    pattern:
      /(?:(?![-.\d\xB7])[-.\w\xB7\xC0-\uFFFD]+)?:(?:(?![-.])(?:[-.:\w\xC0-\uFFFD]|%[\da-f]{2}|\\.)+)?/i,
    inside: {
      'local-name': {
        pattern: /([^:]*:)[\s\S]+/,
        lookbehind: true,
      },
      prefix: {
        pattern: /[\s\S]+/,
        inside: {
          punctuation: /:/,
        },
      },
    },
  },
  number: /[+-]?\b\d+(?:\.\d*)?(?:e[+-]?\d+)?/i,
  punctuation: /[{}.,;()[\]]|\^\^/,
  boolean: /\b(?:false|true)\b/,
  keyword: [/(?:\ba|@prefix|@base)\b|=/, /\b(?:base|graph|prefix)\b/i],
  tag: {
    pattern: /@[a-z]+(?:-[a-z\d]+)*/i,
    inside: {
      punctuation: /@/,
    },
  },
};
Prism.languages.trig = Prism.languages['turtle'];