github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Button.stories.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import Button from '@ui/Button';
     4  import { ComponentStory, ComponentMeta } from '@storybook/react';
     5  import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
     6  import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
     7  import '../webapp/sass/profile.scss';
     8  
     9  const Template: ComponentStory<typeof Button> = (args) => (
    10    <Button {...args}>Button</Button>
    11  );
    12  
    13  export default {
    14    title: 'Components/Button',
    15    component: Button,
    16  } as ComponentMeta<typeof Button>;
    17  
    18  export const Default = Template.bind({});
    19  Default.args = {
    20    disabled: false,
    21  };
    22  
    23  export const DefaultWithIcon = () => (
    24    <Button icon={faClock}>Button with icon</Button>
    25  );
    26  
    27  export const IconOnly = () => <Button icon={faSyncAlt} />;
    28  
    29  export const Primary = () => <Button kind="primary">Primary</Button>;
    30  export const Secondary = () => <Button kind="secondary">Secondary</Button>;
    31  export const Floating = () => <Button kind="float">Floating</Button>;
    32  
    33  export const GroupedButtons = () => (
    34    <>
    35      <Button grouped>Button</Button>
    36      <Button grouped>Button 2</Button>
    37      <Button grouped>Button 3</Button>
    38    </>
    39  );