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

wix-style-react

export const _fill = `
<StorybookComponents.Stack width="24px">
  <FillPreview fill="#3399ff" />
  <FillPreview fill="linear-gradient(to right top, #3399ff, #ffffff)" />
  <FillPreview fill="https://images.unsplash.com/photo-1559825481-12a05cc00344?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8b2NlYW58ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" />
  <FillPreview fill={<Icons.HomeSmall />} />
</StorybookComponents.Stack>`;

export const _previewRatio = `
<StorybookComponents.Stack width="24px">
  <FillPreview aspectRatio={1 / 4} fill="#3399ff" />
  <FillPreview aspectRatio={1 / 3} fill="#3399ff" />
  <FillPreview aspectRatio={1 / 2} fill="#3399ff" />
  <FillPreview aspectRatio={1} fill="#3399ff" />
</StorybookComponents.Stack>;`;

export const _states = `
<StorybookComponents.Stack gap="18px">
  <StorybookComponents.Stack gap="24px" flexDirection="column">
    <FillPreview />
    <FillPreview fill="#3399ff" />
    <FillPreview fill="#3399ff" selected />
    <FillPreview fill="#3399ff" disabled />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack gap="24px" flexDirection="column">
    <StorybookComponents.Stack height="24px" alignItems="center">
      No value
    </StorybookComponents.Stack>
    <StorybookComponents.Stack height="24px" alignItems="center">
      Filled
    </StorybookComponents.Stack>
    <StorybookComponents.Stack height="24px" alignItems="center">
      Selected
    </StorybookComponents.Stack>
    <StorybookComponents.Stack height="24px" alignItems="center">
      Disabled
    </StorybookComponents.Stack>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _renderAs = `
<StorybookComponents.Stack gap="18px">
  <StorybookComponents.Stack gap="24px" flexDirection="column">
    <FillPreview fill="#73d2de" as="a" />
    <FillPreview fill="#3399ff" as="button" />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack gap="24px" flexDirection="column">
    <StorybookComponents.Stack height="24px" alignItems="center">
      <p>Rendered as &lt;a/&gt; tag</p>
    </StorybookComponents.Stack>
    <StorybookComponents.Stack height="24px" alignItems="center">
      <p>Rendered as native &lt;button/&gt; tag</p>
    </StorybookComponents.Stack>
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _fillType = `
() => {
  const [inputValue, setInputValue] = React.useState('#ffffff');
  const [selected, setSelected] = React.useState(0);
  const [fillType, setFillType] = React.useState();

  const solidColors = ['#ffbc42', '#d81159', '#8f2d56', '#218380', '#73d2de'];
  const gradientColors = [
    'linear-gradient(45deg, rgba(14,0,255,1) 0%, rgba(0,212,255,1) 80%)',
    'linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
    'linear-gradient(to right top, #dbfd2d, #dd7c00)',
    'linear-gradient(to right, #00dd83, #22a0c3)',
    'linear-gradient(to right, #aa99ff, #aa11ff)',
  ];

  const renderFillPreview = ({ content, color, index }) => (
    <Tooltip appendTo="scrollParent" content={content}>
      <Box width="30px">
        <FillPreview
          selected={selected === index}
          onClick={() => setSelected(index)}
          fill={color}
        />
      </Box>
    </Tooltip>
  );

  return (
    <Card>
      <Card.Header title="Header style" />
      <Card.Divider />
      <Card.Content>
        <Layout>
          <Cell span={6}>
            <FormField label="Background fill type">
              <SegmentedToggle
                defaultSelected="gradient"
                selected={fillType}
                onClick={(_, value) => setFillType(value)}
              >
                <SegmentedToggle.Button value="solid">
                  Solid
                </SegmentedToggle.Button>
                <SegmentedToggle.Button value="gradient">
                  Gradient
                </SegmentedToggle.Button>
              </SegmentedToggle>
            </FormField>
          </Cell>
          <Cell span={6}>
            <FormField label="Background gradient">
              <Box gap="12px" height="36px" verticalAlign="middle">
                {fillType === 'solid'
                  ? solidColors.map((color, index) =>
                      renderFillPreview({
                        content: 'Solid color',
                        color,
                        index,
                      }),
                    )
                  : gradientColors.map((color, index) =>
                      renderFillPreview({
                        content: 'Gradient color',
                        color,
                        index,
                      }),
                    )}
              </Box>
            </FormField>
          </Cell>
          <Cell span={12}>
            <FormField label="Text color">
              <ColorInput value={inputValue} onConfirm={setInputValue} />
            </FormField>
          </Cell>
        </Layout>
      </Card.Content>
    </Card>
  );
};
`;