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

wix-style-react

export const _structure = `
<StorybookComponents.Stack flexDirection="column">
  <SegmentedToggle defaultSelected="option1">
    <SegmentedToggle.Button value="option1">Option 1</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option2">Option 2</SegmentedToggle.Button>
  </SegmentedToggle>
  <SegmentedToggle defaultSelected="option1">
    <SegmentedToggle.Button value="option1">Option 1</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option2">Option 2</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option3">Option 3</SegmentedToggle.Button>
  </SegmentedToggle>
  <SegmentedToggle defaultSelected="option1">
    <SegmentedToggle.Button value="option1">Option 1</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option2">Option 2</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option3">Option 3</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option4">Option 4</SegmentedToggle.Button>
  </SegmentedToggle>
</StorybookComponents.Stack>;
`;

export const _children = `
<StorybookComponents.Stack>
  <SegmentedToggle defaultSelected="option1">
    <SegmentedToggle.Button value="option1">Option 1</SegmentedToggle.Button>
    <SegmentedToggle.Button value="option2">Option 2</SegmentedToggle.Button>
  </SegmentedToggle>
  <SegmentedToggle defaultSelected="option1">
    <SegmentedToggle.Icon value="option1" tooltipText="Option 1">
      <Icons.LockLocked />
    </SegmentedToggle.Icon>
    <SegmentedToggle.Icon value="option2" tooltipText="Option 2">
      <Icons.LockUnlocked />
    </SegmentedToggle.Icon>
  </SegmentedToggle>
</StorybookComponents.Stack>;
`;

export const _prefixIcon = `
<SegmentedToggle defaultSelected="option1">
  <SegmentedToggle.Button prefixIcon={<Icons.LockLocked />} value="option1">
    Option 1
  </SegmentedToggle.Button>
  <SegmentedToggle.Button prefixIcon={<Icons.LockUnlocked />} value="option2">
    Option 2
  </SegmentedToggle.Button>
</SegmentedToggle>;
`;

export const _disabled = `
<SegmentedToggle defaultSelected="option1" disabled>
  <SegmentedToggle.Button value="option1">Option</SegmentedToggle.Button>
  <SegmentedToggle.Button value="option2">Option</SegmentedToggle.Button>
</SegmentedToggle>;
`;

export const _controlledMode = `
() => {
  const [selectedValue, setSelectedValue] = React.useState('option1');
  const onClick = (_, value) => setSelectedValue(value);

  return (
    <FormField label="Alignment">
      <Box>
        <SegmentedToggle selected={selectedValue} onClick={onClick}>
          <SegmentedToggle.Icon value="option1" tooltipText="Left align">
            <Icons.TextAlignLeft />
          </SegmentedToggle.Icon>
          <SegmentedToggle.Icon value="option2" tooltipText="Center align">
            <Icons.TextAlignCenter />
          </SegmentedToggle.Icon>
          <SegmentedToggle.Icon value="option3" tooltipText="Right align">
            <Icons.TextAlignRight />
          </SegmentedToggle.Icon>
          <SegmentedToggle.Icon value="option4" tooltipText="Justify">
            <Icons.TextJustify />
          </SegmentedToggle.Icon>
        </SegmentedToggle>
      </Box>
    </FormField>
  );
};
`;

export const _switchBetweenViews = `
() => {
  const VIEW_TYPE = {
    listView: 'listView',
    tileView: 'tileView',
  };
  const [viewType, setViewType] = React.useState(VIEW_TYPE.listView);

  const changeViewType = (_, value) => setViewType(value);

  const ActionsCell = (
    <TableActionCell
      primaryAction={{
        text: 'Edit',
        skin: 'standard',
        onClick: () => {},
      }}
      secondaryActions={[
        {
          text: 'Move',
          icon: <Icons.MoveTo />,
          onClick: () => {},
        },
        {
          text: 'Mark as sold out',
          icon: <Icons.FoodOutOfStock />,
          onClick: () => {},
        },
        {
          text: 'Hide',
          icon: <Icons.Hidden />,
          onClick: () => {},
        },
        {
          text: 'Archive',
          icon: <Icons.Archive />,
          onClick: () => {},
        },
      ]}
      numOfVisibleSecondaryActions={0}
    />
  );

  const ListView = () => [
    <TableListItem
      key="1"
      draggable
      showDivider
      options={[
        {
          value: (
            <Image src="FoodExample1.jpg" width="90px" height="52px" />
          ),
          width: '90px',
        },
        { value: 'Breakfast Toast' },
        { value: '$8.00' },
        {
          value: ActionsCell,
        },
      ]}
    />,
    <TableListItem
      key="2"
      draggable
      showDivider
      options={[
        {
          value: (
            <Image src="FoodExample2.jpg" width="90px" height="52px" />
          ),
          width: '90px',
        },
        { value: 'Lemon Ricotta Pasta' },
        { value: '$27.00' },
        {
          value: ActionsCell,
        },
      ]}
    />,
    <TableListItem
      key="3"
      draggable
      options={[
        {
          value: (
            <Image src="FoodExample3.jpg" width="90px" height="52px" />
          ),
          width: '90px',
        },
        { value: 'Spanish Paella' },
        { value: '$18.00' },
        {
          value: ActionsCell,
        },
      ]}
    />,
  ];

  const Tile = ({ media, title }) => (
    <Proportion aspectRatio={1}>
      <MediaOverlay skin="gradient" media={media}>
        <MediaOverlay.Content placement="top-end" visible="hover">
          <IconButton priority="secondary" skin="inverted" size="tiny">
            <Icons.Edit />
          </IconButton>
        </MediaOverlay.Content>
        <MediaOverlay.Content placement="bottom-start" visible="always">
          <Text size="small" weight="normal" light>
            {title}
          </Text>
        </MediaOverlay.Content>
      </MediaOverlay>
    </Proportion>
  );

  const TileView = () => (
    <Card.Content>
      <Layout cols={4}>
        <Tile media="FoodExample1.jpg" title="Breakfast toast" />
        <Tile media="FoodExample2.jpg" title="Lemon Ricotta Pasta" />
        <Tile media="FoodExample3.jpg" title="Spanish Paella" />
      </Layout>
    </Card.Content>
  );

  return (
    <Card>
      <Card.Header
        title="Dishes"
        suffix={
          <Box gap="18px" verticalAlign="middle">
            <SegmentedToggle selected={viewType} onClick={changeViewType}>
              <SegmentedToggle.Icon
                value={VIEW_TYPE.tileView}
                tooltipText="Tile view"
              >
                <Icons.LayoutGallery />
              </SegmentedToggle.Icon>
              <SegmentedToggle.Icon
                value={VIEW_TYPE.listView}
                tooltipText="List view"
              >
                <Icons.LayoutList />
              </SegmentedToggle.Icon>
            </SegmentedToggle>
            <Button size="small" prefixIcon={<Icons.Add />}>
              Add Dish
            </Button>
          </Box>
        }
      />
      <Card.Divider />
      {viewType === VIEW_TYPE.listView ? <ListView /> : <TileView />}
    </Card>
  );
};
`;

export const _statusControl = `
() => {
  const [registrationOrigin, setRegistrationOrigin] = React.useState(1);
  return (
    <Card>
      <Card.Header title="Guest Registration" />
      <Card.Divider />
      <Card.Content>
        <Layout cols={1}>
          <Box direction="vertical" gap="12px">
            <Text secondary>Where do guests register?</Text>
            <RadioGroup
              value={registrationOrigin}
              onChange={setRegistrationOrigin}
            >
              <RadioGroup.Radio value={1}>
                On my Wix Events registration page
              </RadioGroup.Radio>
              <RadioGroup.Radio value={2}>
                On a different page or web address
              </RadioGroup.Radio>
              <RadioGroup.Radio value={3}>
                Guest don't need to register
              </RadioGroup.Radio>
            </RadioGroup>
          </Box>
          <Divider />
          <FormField label="Registration for this event is:">
            <Box>
              <SegmentedToggle defaultSelected="option1">
                <SegmentedToggle.Button
                  prefixIcon={<Icons.LockUnlocked />}
                  value="option1"
                >
                  Open
                </SegmentedToggle.Button>
                <SegmentedToggle.Button
                  prefixIcon={<Icons.LockLocked />}
                  value="option2"
                >
                  Closed
                </SegmentedToggle.Button>
              </SegmentedToggle>
            </Box>
          </FormField>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;