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

wix-style-react

export const primary = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <Button>Standard Primary</Button>
    <Button priority="secondary">Standard Secondary</Button>
    <Button skin="inverted">Standard Inverted</Button>
  </StorybookComponents.Stack>
  <Box backgroundColor="D10" padding="9px">
    <StorybookComponents.Stack>
      <Button skin="light">Light Primary</Button>
      <Button skin="light" priority="secondary">Light Secondary</Button>
    </StorybookComponents.Stack>
    </Box>
  <StorybookComponents.Stack>
    <Button skin="destructive">Destructive Primary</Button>
    <Button skin="destructive" priority="secondary">Destructive Secondary</Button>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <Button skin="premium">Premium Primary</Button>
    <Button skin="premium" priority="secondary">Premium Secondary</Button>
  </StorybookComponents.Stack>
  <Box backgroundColor="D10" padding="9px">
  <StorybookComponents.Stack>
      <Button skin="premium-light">Premium Light Primary</Button>
      <Button skin="premium-light" priority="secondary">Premium Light Secondary</Button>
    </StorybookComponents.Stack>
  </Box>
  <StorybookComponents.Stack>
    <Button skin="dark">Dark Primary</Button>
    <Button skin="dark" priority="secondary">Dark Secondary</Button>
  </StorybookComponents.Stack>
  <Box backgroundColor="B10" padding="9px">
    <StorybookComponents.Stack>
      <Button skin="transparent">Transparent Primary</Button>
      <Button skin="transparent" priority="secondary">Transparent Secondary</Button>
    </StorybookComponents.Stack>
  </Box>
</StorybookComponents.Stack>`;

export const sizes = `
<Layout cols={4} gap="10px"> 
  <Button size="large">large</Button>
  <Button size="medium">medium</Button> 
  <Button size="small">small</Button>
  <Button size="tiny">tiny</Button>  
</Layout>
`;

export const affixes = `
<Layout cols={4} gap="10px"> 
  <Button size="medium" prefixIcon={<Icons.Add />}>Prefix</Button>
  <Button size="small" suffixIcon={<Icons.ChevronDownSmall/>}>Suffix</Button>
</Layout>
`;

export const states = `
<Layout cols={4} gap="10px">
  <Button><Loader size="tiny" /></Button>
  <Button disabled>Disabled</Button>
</Layout>
`;

export const custom = `
<Layout cols={3} gap={0} justifyItems="center">
  <Box direction="vertical" align="center">
    <p>An &lt;a/&gt; tag</p>
    <Button as="a" href="https://www.wix.com" target="_blank">wix.com</Button>
  </Box>
  <Box direction="vertical" align="center">
    <p>A react router &lt;Link/&gt; tag</p>
    <Button as={Link} skin="premium" to="/home">Go to Home</Button>
  </Box>
  <Box direction="vertical" align="center">
    <p>A native &lt;button/&gt; tag</p>
    <Button as="button" onClick={() => alert('yay')}>Alert yay</Button>
  </Box>
</Layout>
`;

export const ellipsis = `
<Box width="300px">
  <Button ellipsis>
    This is a very very very very long text that will be cropped by ellipsis at some point
  </Button>
</Box>
`;