wix-style-react/src/CheckToggle/docs/CheckToggle.examples.js

wix-style-react

export const _size = `
<StorybookComponents.Stack>
  <CheckToggle size="medium" checked />
  <CheckToggle size="small" checked />
</StorybookComponents.Stack>;
`;

export const _skin = `
<StorybookComponents.Stack>
  <CheckToggle skin="standard" checked />
  <CheckToggle skin="success" checked />
</StorybookComponents.Stack>;
`;

export const _state = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <FormField label="Default" labelPlacement="right">
      <CheckToggle default />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked" labelPlacement="right">
      <CheckToggle checked />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Disabled" labelPlacement="right">
      <CheckToggle disabled />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked and disabled" labelPlacement="right">
      <CheckToggle disabled checked />
    </FormField>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _tooltip = `
<StorybookComponents.Stack>
  <FormField
    label="Hover the check toggle to see a tooltip"
    labelPlacement="right"
  >
    <CheckToggle tooltipContent="Message explaining the action that will be performed" />
  </FormField>
</StorybookComponents.Stack>;
`;

export const _todoList = `() => {
  const renderItem = ({ text, checked: initiallyChecked }) => {
    const [checked, setChecked] = React.useState(initiallyChecked);
    const options = [
      {
        value: (
          <CheckToggle
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
        ),
        width: 'auto',
      },
      {
        value: (
          <Text light={checked} secondary={checked}>
            {checked ? <strike>{text}</strike> : text}
          </Text>
        ),
      },
      {
        value: (
          <PopoverMenu
            triggerElement={
              <IconButton size="small" skin="inverted">
                <Icons.MoreSmall />
              </IconButton>
            }
          >
            <PopoverMenu.MenuItem text="Edit" prefixIcon={<Icons.Edit />} />
            <PopoverMenu.MenuItem
              skin="destructive"
              text="Delete"
              prefixIcon={<Icons.Delete />}
            />
          </PopoverMenu>
        ),
        width: 'auto',
      },
    ];
    return (
      <TableListItem verticalPadding="small" showDivider options={options} />
    );
  };
  const options = [
    renderItem({ text: 'Define a user flow', checked: true }),
    renderItem({ text: 'Define the content', checked: false }),
    renderItem({ text: 'Prepare the wireframes', checked: false }),
  ];
  return (
    <Card>
      <Card.Header title="Tasks" />
      <Card.Divider />
      {options}
    </Card>
  );
};
`;