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

wix-style-react

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

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

export const _states = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <FormField label="Default" labelPlacement="right">
      <ToggleSwitch />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked" labelPlacement="right">
      <ToggleSwitch checked />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Checked Disabled" labelPlacement="right">
      <ToggleSwitch checked disabled />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <FormField label="Disabled" labelPlacement="right">
      <ToggleSwitch disabled />
    </FormField>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _settings = `
() => {
  const renderListItem = ({ title, subtitle, padding, toggleChecked }) => {
    const [checked, setChecked] = React.useState(toggleChecked);

    return (
      <Box verticalAlign="middle" align="space-between" padding={padding}>
        <Box direction="vertical">
          <Text weight="normal">{title}</Text>
          <Text secondary size="small">
            {subtitle}
          </Text>
        </Box>
        <ToggleSwitch checked={checked} onChange={() => setChecked(!checked)} />
      </Box>
    );
  };

  return (
    <Card>
      <Card.Header
        title="Default Emails"
        subtitle="Send default notifications about this event"
      />
      <Card.Divider />
      <Card.Content>
        <Box direction="vertical">
          {renderListItem({
            title: 'Confirmation',
            subtitle: 'Let guests know their spot is confirmed',
            padding: '0px 0px 18px',
            toggleChecked: false,
          })}
          <Divider />

          {renderListItem({
            title: 'Reminder',
            subtitle: 'Send a friendly reminder when the event is coming up',
            padding: '18px 0px',
            toggleChecked: true,
          })}
          <Divider />

          {renderListItem({
            title: 'Cancelation',
            subtitle: 'Notify guests if this event is canceled',
            padding: '18px 0px 0px',
            toggleChecked: true,
          })}
        </Box>
      </Card.Content>
    </Card>
  );
};
`;

export const _partOfAForm = `
() => {
  const [toggleChecked, setToggleChecked] = React.useState(true);

  return (
    <Card>
      <Card.Header title="Product Info" />
      <Card.Divider />
      <Card.Content>
        <Layout cols={12}>
          <Cell span={12}>
            <Heading appearance="H5">Basic info</Heading>
          </Cell>
          <Cell span={8}>
            <FormField label="Name">
              <Input placeholder="Add a product name" />
            </FormField>
          </Cell>
          <Cell span={4}>
            <FormField label="Ribbon">
              <Input placeholder="e.g., New Arrival" />
            </FormField>
          </Cell>
          <Cell span={4}>
            <FormField label="Price">
              <NumberInput
                prefix={<Input.Affix>$</Input.Affix>}
                hideStepper
                value="12"
              />
            </FormField>
          </Cell>
          <Cell span={12}>
            <Box>
              <FormField label="On Sale" labelPlacement="right">
                <ToggleSwitch
                  checked={toggleChecked}
                  onChange={() => setToggleChecked(!toggleChecked)}
                />
              </FormField>
            </Box>
          </Cell>
          <Cell span={4}>
            <FormField label="Discount">
              <NumberInput
                suffix={<Input.Affix>%</Input.Affix>}
                hideStepper
                value="20"
              />
            </FormField>
          </Cell>
          <Cell span={4}>
            <FormField label="Sale price">
              <NumberInput
                prefix={<Input.Affix>$</Input.Affix>}
                hideStepper
                value="12"
              />
            </FormField>
          </Cell>
          <Cell span={12}>
            <FormField label="Description">
              <RichTextInputArea minHeight="120px" />
            </FormField>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;