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

wix-style-react

export const _direction = `
<StorybookComponents.Stack flexDirection="column">
  Horizontal:
  <Divider direction="horizontal" />
  Vertical:
  <StorybookComponents.Stack height="50px" justifyContent="space-between">
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
    <Divider direction="vertical" />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _skin = `
<StorybookComponents.Stack flexDirection="column">
  <Divider skin="light" />
  <Divider skin="dark" />
  <Divider skin="standard" />
  <Divider skin="warning" />
  <Divider skin="destructive" />
  <Divider skin="success" />
  <Divider skin="premium" />
</StorybookComponents.Stack>;
`;

export const _lists = `
() => {
  const ListItem = ({ title, subtitle }) => {
    const [checked, setChecked] = React.useState(true);
    return (
      <Box align="space-between">
        <Box direction="vertical">
          <Text weight="normal">{title}</Text>
          <Text size="small" secondary>
            {subtitle}
          </Text>
        </Box>
        <Box gap="24px" verticalAlign="middle">
          <ToggleSwitch
            size="medium"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
          <TextButton>Edit</TextButton>
        </Box>
      </Box>
    );
  };

  return (
    <Card>
      <Card.Header title="Default Emails" />
      <Card.Divider />
      <Card.Content>
        <Box direction="vertical" gap="18px">
          <ListItem
            title="Confirmation"
            subtitle="Let guests know their spot is confirmed"
          />
          <Divider />
          <ListItem
            title="Reminder"
            subtitle="Send a friendly reminder when the event is coming up"
          />
          <Divider />
          <ListItem
            title="Cancelation"
            subtitle="Notify guests if this event is canceled"
          />
        </Box>
      </Card.Content>
    </Card>
  );
};
`;

export const _separatedContent = `
<Card>
  <MarketingLayout
    title="Add Sessions to Get Booked"
    description="Set when this service is offered and the staff who provide it."
    actions={<Button size="small">Add Sessions</Button>}
    size="tiny"
    image={
      <Box width="100%" align="right">
        <Image width="180px" height="120px" src="Booking_Calendar.svg" />
      </Box>
    }
  />
  <Divider />
  <Box padding="12px 30px">
    <Text size="tiny" skin="standard">
      You can also add sessions directly from your <a>Calendar</a>
    </Text>
  </Box>
</Card>;
`;