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

wix-style-react

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

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <ColorInput value="#FF0000" status="error" />
  <ColorInput value="#FF0000" status="warning" />
  <ColorInput value="#FF0000" status="loading" />
</StorybookComponents.Stack>;`;

export const _statusMessage = `
<ColorInput placeholder="Hover the mouse on status icon" status="error" statusMessage="Message in a tooltip explains the status" />`;

export const _disabled = `
<ColorInput placeholder="Disabled" disabled />`;

export const _popover = `
<StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    Popover placement: Left
    <ColorInput
      value="#FF4136"
      popoverProps={{
        placement: 'left',
        appendTo: 'viewport',
      }}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    Animate: true
    <ColorInput
      value="#FF4136"
      popoverProps={{
        animate: true,
      }}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _addColorPresets = `
() => {
  const [presets, setPresets] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);
  return (
    <ColorInput
      value="#FF4136"
      addTooltipContent="Add Color"
      onAddColor={color => setPresets([...presets, color])}
      colorPickerChildren={({ changeColor }) => (
        <Swatches colors={presets} onClick={changeColor} />
      )}
    />
  );
};`;

export const _customTextColor = `
() => {
  const [color, setColor] = React.useState('#000000');
  const [alignment, setAlignment] = React.useState(0);
  const [text, setText] = React.useState('Luna Boutique');

  return (
    <SidePanel>
      <SidePanel.Header title="Customise text"></SidePanel.Header>
      <SidePanel.Content>
        <Box direction="vertical" gap="30px">
          <Text size="small" secondary>
            Change the font, color and more to make your text stand out.
          </Text>
          <FormField label="Edit text">
            <Input value={text} onChange={e => setText(e.target.value)} />
          </FormField>
          <FormField label="Font">
            <Box gap="6px">
              <Text weight="bold">Playfair Display - 700</Text>
              <Button size="tiny">Change Font</Button>
            </Box>
          </FormField>
          <FormField label="Alignment">
            <Box gap="6px">
              <ToggleButton
                labelValue="Left"
                selected={alignment === 0}
                onClick={() => setAlignment(0)}
              >
                <Icons.TextAlignLeft />
              </ToggleButton>
              <ToggleButton
                labelValue="Center"
                selected={alignment === 1}
                onClick={() => setAlignment(1)}
              >
                <Icons.TextAlignCenter />
              </ToggleButton>
              <ToggleButton
                labelValue="Right"
                selected={alignment === 2}
                onClick={() => setAlignment(2)}
              >
                <Icons.TextAlignRight />
              </ToggleButton>
            </Box>
          </FormField>
          <FormField label="Text color">
            <ColorInput
              value={color}
              onChange={setColor}
              popoverAppendTo="viewport"
            />
          </FormField>
        </Box>
      </SidePanel.Content>
      <SidePanel.Footer>
        <Box align="right" gap="12px">
          <Button size="small" priority="secondary">
            Discard changes
          </Button>
          <Button size="small">Save</Button>
        </Box>
      </SidePanel.Footer>
    </SidePanel>
  );
};`;