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

wix-style-react

export const _fills = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="42px">
    <Palette fill={['rgb(50, 132, 144)', 'rgb(50, 183, 198)']} />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="42px">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _type = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={['rgb(50, 132, 144)', 'rgb(50, 183, 198)', 'rgb(146, 224, 225)']}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={[
        'linear-gradient(to right, #8364e8, #d397fa)',
        'linear-gradient(to right, #0061ff, #60efff)',
        'linear-gradient(to right , #099773, #87f4b5)',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="30px">
    <Palette
      fill={[
        <Image src="PatternExample1.jpg" borderRadius={0} />,
        <Image src="PatternExample2.jpg" borderRadius={0} />,
        <Image src="PatternExample3.jpg" borderRadius={0} />,
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _dimensions = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack height="42px">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack height="24px" width="40%">
    <Palette
      fill={[
        'rgb(50, 132, 144)',
        'rgb(50, 183, 198)',
        'rgb(146, 224, 225)',
        'rgb(203, 246, 255)',
        'rgb(255, 255, 255)',
      ]}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

export const _formField = `
<FormField label="Mellow Salmon">
  <Box height="24px" width="50%">
    <Palette
      fill={[
        'rgb(84, 84, 84)',
        'rgb(229, 150, 111)',
        'rgb(252, 225, 207)',
        'rgb(254, 194, 130)',
        'rgb(255, 255, 255)',
      ]}
    />
  </Box>
</FormField>;
`;

export const _thumbnail = `
() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <Layout>
      <Cell span={6}>
        <FormField label="Select a palette">
          <Layout gap="12px">
            <Cell span={12}>
              <Thumbnail
                selected={selected === 0}
                onClick={() => setSelected(0)}
              >
                <Box height="30px">
                  <Palette
                    fill={[
                      '#003049',
                      '#d62828',
                      '#f77f00',
                      '#fcbf49',
                      '#f3dfc1',
                    ]}
                  />
                </Box>
              </Thumbnail>
            </Cell>
            <Cell span={12}>
              <Thumbnail
                selected={selected === 1}
                onClick={() => setSelected(1)}
              >
                <Box height="30px">
                  <Palette
                    fill={[
                      '#6d2e46',
                      '#a26769',
                      '#c09891',
                      '#cebebe',
                      '#f4dbd8',
                    ]}
                  />
                </Box>
              </Thumbnail>
            </Cell>
          </Layout>
        </FormField>
      </Cell>
    </Layout>
  );
};
`;

export const _composer = `
() => {
  const [selected, setSelected] = React.useState(0);

  return (
    <SidePanel>
      <SidePanel.Header title="Theme" />
      <SidePanel.Content>
        <Layout gap="12px">
          <Cell span={12}>
            <Text>Current theme</Text>
            <Thumbnail selected={selected === 0} onClick={() => setSelected(0)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 1">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#000000',
                        '#E43510',
                        '#D6CEDF',
                        '#0227CF',
                        '#00CE83',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
          <Cell span={12}>
            <Box paddingTop="24px">
              <Text>Featured themes</Text>
            </Box>
          </Cell>
          <Cell span={12}>
            <Thumbnail selected={selected === 1} onClick={() => setSelected(1)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 2">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#000000',
                        '#C97D7C',
                        '#637EB3',
                        '#5EA6B0',
                        '#DFC2B8',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
          <Cell span={12}>
            <Thumbnail selected={selected === 2} onClick={() => setSelected(2)}>
              <Box padding="12px" direction="vertical">
                <FormField label="Palette 2">
                  <Box height="24px">
                    <Palette
                      fill={[
                        '#F2F2F2',
                        '#FFC824',
                        '#E68E93',
                        '#FD773F',
                        '#A01F25',
                      ]}
                    />
                  </Box>
                </FormField>
              </Box>
            </Thumbnail>
          </Cell>
        </Layout>
      </SidePanel.Content>
      <SidePanel.Footer>
        <Box align="right" gap="12px">
          <Button priority="secondary">Cancel</Button>
          <Button>Save</Button>
        </Box>
      </SidePanel.Footer>
    </SidePanel>
  );
};
`;