cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

button.stories.tsx (1858B)

      1 import { Meta, StoryObj } from '@storybook/react';
      2 import Button from './button';
      3 
      4 const meta: Meta<typeof Button> = {
      5     title: 'Fundamentals/Buttons/BasicButton',
      6     component: Button,
      7     argTypes: {
      8         children: {
      9             required: true,
     10             name: "Label",
     11             description: "The button label",
     12         },
     13         onClick: {
     14             description: "The button onClick handler",
     15             required: true,
     16         },
     17         type: {
     18             description: "The button type",
     19             control: "select",
     20             options: ["button", "submit", "reset"],
     21             defaultValue: "button",
     22         },
     23         style: {
     24             description: "The button styling",
     25             control: "select",
     26             options: ["primary", "secondary", "abort"],
     27             defaultValue: "primary",
     28         }
     29     }
     30 };
     31 
     32 export default meta;
     33 type Story = StoryObj<typeof Button>;
     34 
     35 export const Default: Story = {
     36     args: {
     37         children: 'Click me',
     38         type: 'button',
     39         style: 'primary',
     40     },
     41 };
     42 
     43 export const Submit: Story = {
     44     args: {
     45         children: 'Submit',
     46         type: 'submit',
     47         style: 'primary',
     48     },
     49 };
     50 
     51 export const Reset: Story = {
     52     args: {
     53         children: 'Reset',
     54         type: 'reset',
     55         style: 'primary',
     56     },
     57 };
     58 
     59 export const DefaultSecondary: Story = {
     60     args: {
     61         children: 'Click me',
     62         type: 'button',
     63         style: 'secondary',
     64     },
     65 };
     66 
     67 export const SubmitSecondary: Story = {
     68     args: {
     69         children: 'Submit',
     70         type: 'submit',
     71         style: 'secondary',
     72     },
     73 };
     74 
     75 export const ResetSecondary: Story = {
     76     args: {
     77         children: 'Reset',
     78         type: 'reset',
     79         style: 'secondary',
     80     },
     81 };
     82 
     83 export const Abort: Story = {
     84     args: {
     85         children: 'Abort',
     86         type: 'button',
     87         style: 'abort',
     88     },
     89 };