mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 17:49:09 +00:00
chore: update prettier tab width for consistency (#175)
This commit is contained in:
parent
a931f8c69c
commit
f24d2fcc99
247 changed files with 7224 additions and 7375 deletions
|
@ -5,75 +5,65 @@ import { roleCategory } from '../../fixtures/storyData';
|
|||
import { Role as RoleComponent } from './Role';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Role',
|
||||
component: RoleComponent,
|
||||
decorators: [withColors],
|
||||
title: 'Atoms/Role',
|
||||
component: RoleComponent,
|
||||
decorators: [withColors],
|
||||
};
|
||||
|
||||
const Demo = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const RoleWithState = (props: any) => {
|
||||
const [selected, updateSelected] = React.useState(false);
|
||||
return (
|
||||
<div style={{ padding: 5 }}>
|
||||
<RoleComponent
|
||||
{...props}
|
||||
selected={selected}
|
||||
onClick={(next) => updateSelected(next)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const [selected, updateSelected] = React.useState(false);
|
||||
return (
|
||||
<div style={{ padding: 5 }}>
|
||||
<RoleComponent
|
||||
{...props}
|
||||
selected={selected}
|
||||
onClick={(next) => updateSelected(next)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Role = () => (
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleWithState key={idx} role={c} />
|
||||
))}
|
||||
</Demo>
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleWithState key={idx} role={c} />
|
||||
))}
|
||||
</Demo>
|
||||
);
|
||||
|
||||
export const Selected = () => (
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={c} selected={true} />
|
||||
))}
|
||||
</Demo>
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={c} selected={true} />
|
||||
))}
|
||||
</Demo>
|
||||
);
|
||||
|
||||
export const Unselected = () => (
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={c} selected={false} />
|
||||
))}
|
||||
</Demo>
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={c} selected={false} />
|
||||
))}
|
||||
</Demo>
|
||||
);
|
||||
|
||||
export const DisabledByPosition = () => (
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent
|
||||
key={idx}
|
||||
role={{ ...c, safety: 1 }}
|
||||
selected={false}
|
||||
disabled
|
||||
/>
|
||||
))}
|
||||
</Demo>
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={{ ...c, safety: 1 }} selected={false} disabled />
|
||||
))}
|
||||
</Demo>
|
||||
);
|
||||
|
||||
export const DisabledByDanger = () => (
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent
|
||||
key={idx}
|
||||
role={{ ...c, safety: 2 }}
|
||||
selected={false}
|
||||
disabled
|
||||
/>
|
||||
))}
|
||||
</Demo>
|
||||
<Demo>
|
||||
{roleCategory.map((c, idx) => (
|
||||
<RoleComponent key={idx} role={{ ...c, safety: 2 }} selected={false} disabled />
|
||||
))}
|
||||
</Demo>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue