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

wix-style-react

export const _iconSize = `
<StorybookComponents.Stack gap="12px">
  <FillButton iconSize="small" tooltipContent="Small"/>
  <FillButton iconSize="medium" tooltipContent="Medium"/>
</StorybookComponents.Stack>;`;

export const _fill = `
<StorybookComponents.Stack gap="24px">
  <FillButton tooltipContent="no fill" />
  <FillButton fill="#3399ff" tooltipContent="hex" />
  <FillButton
    fill="linear-gradient(#73d2de, #3399ff)"
    tooltipContent="linear gradient"
  />
  <FillButton
    fill="linear-gradient(to right top, #73d2de, #3399ff)"
    tooltipContent="to right top linear gradient"
  />
</StorybookComponents.Stack>;`;

export const _disabled = `
<StorybookComponents.Stack>
  <FillButton disabled />
</StorybookComponents.Stack>;`;

export const _tooltip = `
<StorybookComponents.Stack>
  <FillButton
    tooltipContent="Message explaining the action"
    tooltipProps={{
      placement: 'right',
      maxWidth: 400,
    }}
  />
</StorybookComponents.Stack>;`;

export const _addingCustomSwatch = `
() => {
  const [selectedId, setSelectedId] = React.useState(0);

  return (
    <Layout gap="12px">
      <FileUpload multiple accept=".jpeg,.gif,.png">
        {({ openFileUploadDialog }) => (
          <FillButton
            iconSize="medium"
            tooltipContent="Upload image"
            onClick={openFileUploadDialog}
          />
        )}
      </FileUpload>
      <Tooltip content="Black & white geometric shapes" size="small">
        <FillPreview
          fill="PatternExample4.jpg"
          selected={selectedId === 1}
          onClick={() => setSelectedId(1)}
        />
      </Tooltip>
      <Tooltip content="Multicolored wallpaper" size="small">
        <FillPreview
          fill="PatternExample5.jpg"
          selected={selectedId === 2}
          onClick={() => setSelectedId(2)}
        />
      </Tooltip>
      <Tooltip content="Color twirl pattern" size="small">
        <FillPreview
          fill="PatternExample6.jpg"
          selected={selectedId === 3}
          onClick={() => setSelectedId(3)}
        />
      </Tooltip>
    </Layout>
  );
};
`;