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

wix-style-react

export const _colors = `
<StorybookComponents.Stack>
  <Swatches
    colors={[
      '#3370fb',
      '#17b0e2',
      '#c53e99',
      'rgb(200,250,0)',
      'hsl(10,100%,50%)',
      'teal',
    ]}
  />
</StorybookComponents.Stack>;`;

export const _columns = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    6 columns:
    <Swatches
      columns={6}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    3 columns:
    <Swatches
      columns={3}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _gap = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    12px gap:
    <Swatches
      gap={12}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    24px gap:
    <Swatches
      gap={24}
      colors={[
        '#3370fb',
        '#7852d2',
        '#17b0e2',
        '#c53e99',
        '#fdb10c',
        '#3d9fa1',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _clearColor = `
<StorybookComponents.Stack>
  <Swatches
    showClear
    showClearMessage="Clear color"
    colors={[
      '#3370fb',
      '#7852d2',
      '#17b0e2',
      '#c53e99',
      '#fdb10c',
      '#3d9fa1',
      '#2bc759',
      '#ff0165',
    ]}
  />
</StorybookComponents.Stack>;`;

export const _addButton = `
<StorybookComponents.Stack>
  <Swatches
    showAddButton
    addButtonIconSize="small"
    addButtonMessage="Message explaining add action"
    onAdd={() => {}}
    colors={['#3370fb', '#7852d2', '#17b0e2', '#c53e99', '#fdb10c']}
  />
</StorybookComponents.Stack>;`;

export const _insideColorPicker = `
() => {
  const [value, setValue] = React.useState(null);
  const [colors, setColors] = React.useState([
    '#3370fb',
    '#7852d2',
    '#17b0e2',
    '#c53e99',
    '#fdb10c',
    '#3d9fa1',
    '#2bc759',
    '#ff0165',
  ]);

  return (
    <FormField label="Fill">
      <Box>
        <Swatches
          showAddButton
          addButtonIconSize="small"
          addButtonMessage="Add color"
          onAdd={color => setColors([...colors, color])}
          showClear
          showClearMessage="Clear color"
          colors={colors}
          onClick={setValue}
          selected={value}
        />
      </Box>
    </FormField>
  );
};`;