v3/packages/design-system/atoms/role/Role.stories.tsx

import { withColors } from '@roleypoly/design-system/atoms/colors/withColors';
import * as React from 'react';
import styled from 'styled-components';
import { roleCategory } from '../../fixtures/storyData';
import { Role as RoleComponent } from './Role';

export default {
  title: 'Atoms/Role',
  component: RoleComponent,
  decorators: [withColors],
};

const Demo = styled.div`
  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>
  );
};

export const Role = () => (
  <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>
);

export const Unselected = () => (
  <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>
);

export const DisabledByDanger = () => (
  <Demo>
    {roleCategory.map((c, idx) => (
      <RoleComponent key={idx} role={{ ...c, safety: 2 }} selected={false} disabled />
    ))}
  </Demo>
);