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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <Checkbox size="medium">Medium</Checkbox>
  <Checkbox size="small">Small</Checkbox>
</StorybookComponents.Stack>;
`;

export const _state = `
<StorybookComponents.Stack flexDirection="column">
  <Checkbox>Default</Checkbox>
  <Checkbox checked>Checked</Checkbox>
  <Checkbox indeterminate>Indeterminate</Checkbox>
  <Checkbox hasError>Error</Checkbox>
  <Checkbox disabled>Disabled</Checkbox>
</StorybookComponents.Stack>;
`;

export const _verticalAlignment = `
<StorybookComponents.Stack width="300px">
  <Checkbox vAlign="top">Checkbox label that wraps to multiple lines</Checkbox>
</StorybookComponents.Stack>;
`;

export const _selectionArea = `
<StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" width="50%">
    <Checkbox
      selectionArea="always"
      selectionAreaSkin="outlined"
      selectionAreaPadding="12px 18px"
      checked
    >
      Option 1
    </Checkbox>
    <Checkbox
      selectionArea="always"
      selectionAreaSkin="outlined"
      selectionAreaPadding="12px 18px"
    >
      Option 2
    </Checkbox>
    <Checkbox
      selectionArea="always"
      selectionAreaSkin="outlined"
      selectionAreaPadding="12px 18px"
    >
      Option 3
    </Checkbox>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" width="50%">
    <Checkbox
      selectionArea="hover"
      selectionAreaSkin="filled"
      selectionAreaPadding="12px 18px"
      checked
    >
      Option 1
    </Checkbox>
    <Checkbox
      selectionArea="hover"
      selectionAreaSkin="filled"
      selectionAreaPadding="12px 18px"
    >
      Option 2
    </Checkbox>
    <Checkbox
      selectionArea="hover"
      selectionAreaSkin="filled"
      selectionAreaPadding="12px 18px"
    >
      Option 3
    </Checkbox>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;

`;

export const _tooltip = `
<Checkbox
  tooltipContent="Message explaining the select option"
  tooltipProps={{
    placement: 'top-start',
    textAlign: 'start'
  }}
>
  Hover the mouse on a checkbox to see a tooltip
</Checkbox>;
`;

export const _forms = `
() => {
  const checkboxes = [
    {
      id: 'newArrivals',
      label: 'New Arrivals',
      initialState: true,
    },
    {
      id: 'womensClothing',
      label: "Women's clothing",
      initialState: true,
    },
    {
      id: 'mensClothing',
      label: "Men's clothing",
      initialState: false,
    },
    {
      id: 'kids',
      label: 'Kids',
      initialState: false,
    },
    {
      id: 'home',
      label: 'Home',
      initialState: false,
    },
  ];

  const [checkboxesList, setCheckboxesList] = React.useState(checkboxes);

  const isAllSelected = !checkboxesList
    .map(item => item.isChecked)
    .includes(false);

  const isAllDeselected = !checkboxesList
    .map(item => item.isChecked)
    .includes(true);

  const toggleCheckedAll = checked => {
    setCheckboxesList(
      checkboxesList.map(item => ({ ...item, isChecked: checked })),
    );
  };

  const renderCheckboxes = () =>
    checkboxesList.map(item => {
      const [checked, setChecked] = React.useState(item.initialState);
      return (
        <Checkbox
          id={item.id}
          checked={item.isChecked}
          onChange={() => setChecked(!checked)}
        >
          {item.label}
        </Checkbox>
      );
    });

  return (
    <Layout>
      <Cell span={6}>
        <Card>
          <Card.Header
            title="Collections"
            subtitle="Assign products to a collection"
          />
          <Card.Divider />
          <Card.Content>
            <Box direction="vertical" gap="12px">
              <Checkbox
                checked={isAllSelected || (!isAllSelected && !isAllDeselected)}
                onChange={() => {
                  isAllSelected
                    ? toggleCheckedAll(false)
                    : toggleCheckedAll(true);
                }}
                disabled={!isAllSelected && !isAllDeselected}
              >
                All products
              </Checkbox>
              {renderCheckboxes()}
              <TextButton prefixIcon={<Icons.Add />}>
                Create Collection
              </TextButton>
            </Box>
          </Card.Content>
        </Card>
      </Cell>
    </Layout>
  );
};
`;

export const _customLabels = `
() => {
  checkboxes = [
    {
      id: 'members',
      label: 'Members',
      description: 'All registered users',
      initialState: true,
    },
    {
      id: 'roles',
      label: 'Roles',
      description: 'Users who are assigned to a special role',
      initialState: false,
    },
    {
      id: 'badges',
      label: 'Badges',
      description: 'Users who have selected badges',
      initialState: false,
    },
  ];

  const getCheckboxLabel = item => (
    <Box direction="vertical">
      <Text weight="bold">{item.label}</Text>
      <Text size="small" secondary>
        {item.description}
      </Text>
    </Box>
  );

  const renderCheckboxes = () => {
    return checkboxes.map(item => {
      const [checked, setChecked] = React.useState(item.initialState);

      return (
        <Checkbox
          checked={checked}
          onChange={() => setChecked(!checked)}
          selectionArea="hover"
          id={item.id}
        >
          {getCheckboxLabel(item)}
        </Checkbox>
      );
    });
  };

  return (
    <Card>
      <Card.Content>
        <Box direction="vertical">
          <Box paddingBottom="12px">
            <Text secondary>Who can access this category?</Text>
          </Box>
          <Box direction="vertical" gap="12px">
            {renderCheckboxes()}
          </Box>
        </Box>
      </Card.Content>
    </Card>
  );
};
`;