Skip to content

Commit

Permalink
feat: linkbutton: add link button component (#607)
Browse files Browse the repository at this point in the history 
* feat: linkbutton: add link button component

* chore: linkbutton: address pr feedback consolidating button and linkbutton by variant

* chore: linkbutton: push prettier changes

* chore: linkbutton: removes redundant enum

* chore: linkbutton: removes missing type

* chore: linkbutton: update stories
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold authored May 1, 2023
1 parent 0539a61 commit 8b3d782
Show file tree
Hide file tree
Showing 28 changed files with 2,733 additions and 312 deletions.
99 changes: 39 additions & 60 deletions src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,13 @@ import React from 'react';
import { Stories } from '@storybook/addon-docs';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import {
BaseButton,
Button,
ButtonIconAlign,
ButtonShape,
ButtonSize,
ButtonTextAlign,
ButtonVariant,
ButtonWidth,
DefaultButton,
NeutralButton,
PrimaryButton,
SecondaryButton,
SystemUIButton,
} from './';
import { IconName } from '../Icon';
import { NudgeAnimation } from './Nudge';
Expand Down Expand Up @@ -154,63 +150,34 @@ export default {
],
control: { type: 'radio' },
},
theme: {
options: ['light', 'dark'],
control: { type: 'inline-radio' },
variant: {
options: [
ButtonVariant.Default,
ButtonVariant.Neutral,
ButtonVariant.Primary,
ButtonVariant.Secondary,
ButtonVariant.SystemUI,
],
control: { type: 'radio' },
},
},
} as ComponentMeta<typeof BaseButton>;

const Primary_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
<PrimaryButton {...args} />
);

export const Primary = Primary_Button_Story.bind({});
export const Counter = Primary_Button_Story.bind({});
} as ComponentMeta<typeof Button>;

const Secondary_Button_Story: ComponentStory<typeof SecondaryButton> = (
args
) => <SecondaryButton {...args} />;

export const Secondary = Secondary_Button_Story.bind({});

const Default_Button_Story: ComponentStory<typeof DefaultButton> = (args) => (
<DefaultButton {...args} />
const Button_Story: ComponentStory<typeof Button> = (args) => (
<Button {...args} />
);

export const Default = Default_Button_Story.bind({});

const Neutral_Button_Story: ComponentStory<typeof NeutralButton> = (args) => (
<NeutralButton {...args} />
);

export const Neutral = Neutral_Button_Story.bind({});

const System_UI_Button_Story: ComponentStory<typeof SystemUIButton> = (
args
) => <SystemUIButton {...args} />;

export const System_UI = System_UI_Button_Story.bind({});

const Toggle_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
<PrimaryButton {...args} />
);

export const Toggle = Toggle_Button_Story.bind({});
export const Toggle_With_Counter = Toggle_Button_Story.bind({});

const Split_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
<PrimaryButton {...args} />
);

export const Split = Split_Button_Story.bind({});
export const Split_With_Counter = Split_Button_Story.bind({});

const Floating_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
<PrimaryButton {...args} />
);

export const Floating_Button = Floating_Button_Story.bind({});
export const Primary = Button_Story.bind({});
export const Counter = Button_Story.bind({});
export const Secondary = Button_Story.bind({});
export const Default = Button_Story.bind({});
export const Neutral = Button_Story.bind({});
export const System_UI = Button_Story.bind({});
export const Toggle = Button_Story.bind({});
export const Toggle_With_Counter = Button_Story.bind({});
export const Split = Button_Story.bind({});
export const Split_With_Counter = Button_Story.bind({});
export const Floating_Button = Button_Story.bind({});

const buttonArgs: Object = {
alignIcon: ButtonIconAlign.Left,
Expand All @@ -221,6 +188,7 @@ const buttonArgs: Object = {
checked: false,
classNames: 'my-btn-class',
'data-test-id': 'my-btn-test-id',
counter: 0,
disabled: false,
disruptive: false,
dropShadow: false,
Expand All @@ -241,53 +209,59 @@ const buttonArgs: Object = {
'data-test-id': 'myButtonIconTestId',
},
id: 'myButton',
loading: false,
shape: ButtonShape.Pill,
size: ButtonSize.Medium,
split: false,
splitButtonChecked: false,
style: {},
text: 'Button',
toggle: false,
counter: 0,
loading: false,
variant: ButtonVariant.Default,
};

Primary.args = {
...buttonArgs,
ariaLabel: 'Primary Button',
text: 'Primary Button',
variant: ButtonVariant.Primary,
};

Counter.args = {
...buttonArgs,
ariaLabel: 'Primary Button',
counter: '8',
text: 'Primary Button',
variant: ButtonVariant.Primary,
};

Secondary.args = {
...buttonArgs,
ariaLabel: 'Secondary Button',
text: 'Secondary Button',
variant: ButtonVariant.Secondary,
};

System_UI.args = {
...buttonArgs,
ariaLabel: 'System UI Button',
text: 'System UI Button',
transparent: false,
variant: ButtonVariant.SystemUI,
};

Default.args = {
...buttonArgs,
ariaLabel: 'Default Button',
text: 'Default Button',
variant: ButtonVariant.Default,
};

Neutral.args = {
...buttonArgs,
ariaLabel: 'Neutral Button',
text: 'Neutral Button',
variant: ButtonVariant.Neutral,
};

Toggle.args = {
Expand All @@ -308,6 +282,7 @@ Toggle.args = {
},
text: 'Toggle Button',
toggle: true,
variant: ButtonVariant.Primary,
};

Toggle_With_Counter.args = {
Expand All @@ -329,6 +304,7 @@ Toggle_With_Counter.args = {
},
text: 'Toggle Button',
toggle: true,
variant: ButtonVariant.Primary,
};

Split.args = {
Expand All @@ -343,6 +319,7 @@ Split.args = {
path: IconName.mdiClockOutline,
},
},
variant: ButtonVariant.Primary,
};

Split_With_Counter.args = {
Expand All @@ -353,6 +330,7 @@ Split_With_Counter.args = {
split: true,
splitButtonChecked: false,
text: 'Split Button',
variant: ButtonVariant.Primary,
};

Floating_Button.args = {
Expand All @@ -368,4 +346,5 @@ Floating_Button.args = {
},
shape: ButtonShape.Round,
text: null,
variant: ButtonVariant.Primary,
};
Loading

0 comments on commit 8b3d782

Please sign in to comment.