Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

refactor(app): move react components to react codebase [EE-3179] (#6971)

Browse source
This commit is contained in:
Chaim Lev-Ari 2022-06-17 19:18:42 +03:00 • committed by GitHub
parent 212400c283
commit 18252ab854
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
346 changed files with 642 additions and 644 deletions
Download patch file Download diff file Expand all files Collapse all files

117
app/react/components/buttons/ButtonGroup.stories.tsx Normal file
View file

@ -0,0 +1,117 @@
import { Meta, Story } from '@storybook/react';
import { PropsWithChildren } from 'react';
import { Button } from './Button';
import { ButtonGroup, Props } from './ButtonGroup';
export default {
component: ButtonGroup,
title: 'Components/Buttons/ButtonGroup',
} as Meta;
function Template({
size,
}: JSX.IntrinsicAttributes & PropsWithChildren<Props>) {
return (
<ButtonGroup size={size}>
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-stop space-right" aria-hidden="true" />
Stop
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-bomb space-right" aria-hidden="true" />
Kill
</Button>
<Button color="primary" onClick={() => {}}>
<i className="fa fa-sync space-right" aria-hidden="true" />
Restart
</Button>
<Button color="primary" disabled onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Resume
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-trash-alt space-right" aria-hidden="true" />
Remove
</Button>
</ButtonGroup>
);
}
export const Primary: Story<PropsWithChildren<Props>> = Template.bind({});
Primary.args = {
size: 'small',
};
export function Xsmall() {
return (
<ButtonGroup size="xsmall">
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-stop space-right" aria-hidden="true" />
Stop
</Button>
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="primary" onClick={() => {}}>
<i className="fa fa-sync space-right" aria-hidden="true" />
Restart
</Button>
</ButtonGroup>
);
}
export function Small() {
return (
<ButtonGroup size="small">
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-stop space-right" aria-hidden="true" />
Stop
</Button>
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="primary" onClick={() => {}}>
<i className="fa fa-sync space-right" aria-hidden="true" />
Restart
</Button>
</ButtonGroup>
);
}
export function Large() {
return (
<ButtonGroup size="large">
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="danger" onClick={() => {}}>
<i className="fa fa-stop space-right" aria-hidden="true" />
Stop
</Button>
<Button color="success" onClick={() => {}}>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
<Button color="primary" onClick={() => {}}>
<i className="fa fa-sync space-right" aria-hidden="true" />
Restart
</Button>
</ButtonGroup>
);
}