@wix/design-system 1.193.0 → 1.194.0

package/dist/docs/components/IconButtonExamples.md

@@ -0,0 +1,357 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Update the dimensions of a button with the <code>size</code> prop.  </p><li><code>large</code> is for onboarding flows and marketing pages where the action needs more emphasis.</li><li><code>medium</code> is the default for all common cases.</li><li><code>small</code>  is for icon buttons used in cards and widgets.</li><li><code>tiny</code>  is for small and dense layouts.</li><p></p><p><em>Note</em>:  small and tiny size buttons should use the small icon size (18x18).</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <IconButton size="large">
+    <Icons.Add />
+  </IconButton>
+  <IconButton size="medium">
+    <Icons.Add />
+  </IconButton>
+  <IconButton size="small">
+    <Icons.AddSmall />
+  </IconButton>
+  <IconButton size="tiny">
+    <Icons.AddSmall />
+  </IconButton>
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Change the button's appearance with the <code>skin</code> prop.  </p><li><code>standard</code> is the default for all general actions.</li><li><code>light</code>  is for dark backgrounds.</li><li><code>transparent</code> is for backgrounds with colors or images.  </li><li><code>premium</code> is for actions that prompt users to upgrade their plans.</li><li><code>dark</code> should be used with buttons on backgrounds with colors. </li><li><code>ai</code> should be used with AI based features.</li><p></p><p>Each action can be <code>primary</code>, <code>secondary</code> or <code>tertiary</code>, depending on priority. There should only be one primary action per page.</p><p></p><p><em>Note</em>: Secondary buttons should be used alongside primary buttons for less utilized actions, such as cancel or back. </p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <StorybookComponents.Stack padding="12px" gap="6px">
+    <IconButton skin="standard" priority="primary">
+      <Icons.Check />
+    </IconButton>
+    <IconButton skin="standard" priority="secondary">
+      <Icons.X />
+    </IconButton>
+    <IconButton skin="standard" priority="tertiary">
+      <Icons.More />
+    </IconButton>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Background skin="dark">
+    <StorybookComponents.Stack padding="12px" gap="6px">
+      <IconButton skin="light" priority="primary">
+        <Icons.Check />
+      </IconButton>
+      <IconButton skin="light" priority="secondary">
+        <Icons.X />
+      </IconButton>
+      <IconButton skin="light" priority="tertiary">
+        <Icons.More />
+      </IconButton>
+    </StorybookComponents.Stack>
+  </StorybookComponents.Background>
+  <StorybookComponents.Background skin="blue">
+    <StorybookComponents.Stack padding="12px" gap="6px">
+      <IconButton skin="transparent" priority="primary">
+        <Icons.Check />
+      </IconButton>
+      <IconButton skin="transparent" priority="secondary">
+        <Icons.X />
+      </IconButton>
+      <IconButton skin="transparent" priority="tertiary">
+        <Icons.More />
+      </IconButton>
+    </StorybookComponents.Stack>
+  </StorybookComponents.Background>
+  <StorybookComponents.Background skin="light">
+    <StorybookComponents.Stack padding="12px" gap="6px">
+      <IconButton skin="premium" priority="primary">
+        <Icons.Check />
+      </IconButton>
+      <IconButton skin="premium" priority="secondary">
+        <Icons.X />
+      </IconButton>
+      <IconButton skin="premium" priority="tertiary">
+        <Icons.More />
+      </IconButton>
+    </StorybookComponents.Stack>
+  </StorybookComponents.Background>
+  <StorybookComponents.Stack padding="12px" gap="6px">
+    <IconButton skin="dark" priority="primary">
+      <Icons.Check />
+    </IconButton>
+    <IconButton skin="dark" priority="secondary">
+      <Icons.X />
+    </IconButton>
+    <IconButton skin="dark" priority="tertiary">
+      <Icons.More />
+    </IconButton>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack padding="12px" gap="6px">
+    <IconButton skin="ai" priority="primary">
+      <Icons.Check />
+    </IconButton>
+    <IconButton skin="ai" priority="secondary">
+      <Icons.X />
+    </IconButton>
+    <IconButton skin="ai" priority="tertiary">
+      <Icons.More />
+    </IconButton>
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Disabled
+- description: <p>To disable a button, use the <code>disabled</code> prop which indicates a button can't be selected.</p>
+- example: 
+```jsx 
+<IconButton disabled>
+  <Icons.Add />
+</IconButton>;
+```
+
+
+
+
+## Developer Examples
+
+
+### Custom HTML tag
+- description: <p>Render buttons as any given HTML tag with the <code>as</code> prop. For example, they can be rendered as:</p><li><code><a></code> when attributes like <code>href</code>, <code>target</code> are needed.</li><li><code><Link></code> when props like <code>to</code>, <code>replace</code>, etc. are needed.</li><p></p><p>All attributes will be passed to the rendered element.</p>
+- example: 
+```jsx 
+() => {
+  const ReactRouterLink = props => <div {...props} />;
+
+  return (
+    <StorybookComponents.Stack justifyContent="space-between">
+      <StorybookComponents.Stack
+        flexDirection="column"
+        gap="12px"
+        alignItems="center"
+      >
+        <Text secondary size="small">
+          {'<a/> tag'}
+        </Text>
+        <IconButton as="a" href="https://www.wix.com" target="_blank">
+          <Icons.Add />
+        </IconButton>
+      </StorybookComponents.Stack>
+      <StorybookComponents.Stack
+        flexDirection="column"
+        gap="12px"
+        alignItems="center"
+      >
+        <Text secondary size="small">
+          {'React router <Link/> tag'}
+        </Text>
+        <IconButton as={ReactRouterLink} to="/home">
+          <Icons.Add />
+        </IconButton>
+      </StorybookComponents.Stack>
+      <StorybookComponents.Stack
+        flexDirection="column"
+        gap="12px"
+        alignItems="center"
+      >
+        <Text secondary size="small">
+          {'Native <button/> tag'}
+        </Text>
+        <IconButton as="button">
+          <Icons.Add />
+        </IconButton>
+      </StorybookComponents.Stack>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Button labels
+- description: <p>Use <code><Tooltip/></code> <a href="https://www.wix-style-react.com/storybook/?path=/story/components-overlays--tooltip"></a> to add a label to icon buttons.</p>
+- example: 
+```jsx 
+<Box align="center">
+  <Tooltip content="Edit program">
+    <IconButton priority="secondary">
+      <Icons.Edit />
+    </IconButton>
+  </Tooltip>
+</Box>;
+```
+
+### Small layouts
+- description: <p>Use icon buttons in small and crowded layouts.</p>
+- example: 
+```jsx 
+<Layout>
+  <Cell span={4}>
+    <Proportion aspectRatio={1}>
+      <MediaOverlay skin="gradient" media="FoodExample2.jpg">
+        <MediaOverlay.Content placement="top-end" visible="always">
+          <Tooltip content="Edit image">
+            <IconButton priority="secondary" skin="inverted" size="small">
+              <Icons.CropSmall />
+            </IconButton>
+          </Tooltip>
+          <Tooltip content="Mark as favorite">
+            <IconButton priority="secondary" skin="inverted" size="small">
+              <Icons.FavoriteSmall />
+            </IconButton>
+          </Tooltip>
+          <PopoverMenu
+            textSize="small"
+            triggerElement={
+              <Tooltip content="More actions">
+                <IconButton priority="secondary" skin="inverted" size="small">
+                  <Icons.MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem text="Edit" />
+            <PopoverMenu.MenuItem text="Remove" skin="destructive" />
+          </PopoverMenu>
+        </MediaOverlay.Content>
+        <MediaOverlay.Content placement="bottom-start" visible="always">
+        <Text light size="small">Pasta with Ricotta Cheese</Text>
+        </MediaOverlay.Content>
+      </MediaOverlay>
+    </Proportion>
+  </Cell>
+</Layout>;
+```
+
+### Popover menu
+- description: <p>Use icon buttons to open a <code><PopoverMenu/></code>.</p>
+- example: 
+```jsx 
+() => {
+  const renderImage = () => <Image width={230} borderRadius={0}></Image>;
+
+  const renderContent = () => (
+    <Box
+      direction="vertical"
+      verticalAlign="space-between"
+      padding="24px 29px 27px"
+      backgroundColor="D80"
+      flexGrow={1}
+    >
+      <Box direction="vertical" gap={1}>
+        <Text weight="bold">JAVA meetup</Text>
+        <Text size="small" weight="thin" secondary light>
+          Jan 20, 2021, 10:00 AM, Location will be announced later
+        </Text>
+      </Box>
+      <Box align="space-between">
+        <Box />
+        <Box align="space-between" verticalAlign="middle" gap={1}>
+          <PopoverMenu
+            textSize="small"
+            triggerElement={
+              <Tooltip content="More actions">
+                <IconButton priority="secondary" size="small">
+                  <Icons.MoreSmall />
+                </IconButton>
+              </Tooltip>
+            }
+          >
+            <PopoverMenu.MenuItem
+              text="Edit SEO settings"
+              prefixIcon={<Icons.SettingsSmall />}
+            />
+            <PopoverMenu.Divider />
+            <PopoverMenu.MenuItem
+              text="Duplicate as draft"
+              prefixIcon={<Icons.DuplicateSmall />}
+            />
+            <PopoverMenu.MenuItem
+              text="Cancel event"
+              skin="destructive"
+              prefixIcon={<Icons.BlockSmall />}
+            />
+          </PopoverMenu>
+          <Button
+            priority="secondary"
+            size="small"
+            prefixIcon={<Icons.PromoteSmall />}
+          >
+            Promote
+          </Button>
+          <Button priority="secondary" size="small">
+            Edit
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Card hideOverflow>
+      <Box minHeight={200}>
+        {renderImage()}
+        {renderContent()}
+      </Box>
+    </Card>
+  );
+};
+```
+
+### Low priority actions
+- description: <p>Use icon buttons for lower-priority actions that have no effect on the main user flow. For example, to change the cover image of an audio.</p>
+- example: 
+```jsx 
+<SidePanel onCloseButtonClick={() => {}} skin="floating" width="288px">
+  <SidePanel.Header title="Audio Player Settings" />
+  <SidePanel.Content noPadding>
+    <SidePanel.Field>
+      <FieldSet
+        legend="Track cover image"
+        alignment="center"
+        columns="168px auto auto"
+      >
+        <Image width="156px" height="102px" src="TravelExample6.jpg" />
+        <Tooltip content="Change image">
+          <IconButton size="small" skin="standard" priority="secondary">
+            <Icons.RefreshSmall />
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Remove image">
+          <IconButton size="small" skin="standard" priority="secondary">
+            <Icons.DeleteSmall />
+          </IconButton>
+        </Tooltip>
+      </FieldSet>
+    </SidePanel.Field>
+    <SidePanel.Field>
+      <FormField label="Source (URL)">
+        <Input placeholder="Add link to the track" size="small" />
+      </FormField>
+    </SidePanel.Field>
+    <SidePanel.Field>
+      <FormField label="Name">
+        <Input value="Track Name" size="small" />
+      </FormField>
+    </SidePanel.Field>
+    <SidePanel.Field>
+      <FormField label="Description">
+        <InputArea
+          placeholder="Add a short description to promote your audio track."
+          size="small"
+          minHeight="120px"
+          resizable
+        />
+      </FormField>
+    </SidePanel.Field>
+  </SidePanel.Content>
+</SidePanel>;
+```
+
+

package/dist/docs/components/ImageExamples.md

@@ -0,0 +1,244 @@
+
+## Feature Examples
+
+
+### Dimensions
+- description: <p>Specify image dimensions in pixels or percentage with <code>width</code> and <code>height</code> props.</p>
+- example: 
+```jsx 
+<Image width="33%" height="180px" />;
+```
+
+### Border
+- description: <p>To separate images from backgrounds, enable the image border<code>showBorder</code>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack width="25%">
+  <Image showBorder />
+</StorybookComponents.Stack>;
+```
+
+### Border radius
+- description: <p>Control the rounded corners of the image box with the <code>borderRadius</code> prop. Radius levels can be specified for every corner.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Image />
+  <Image borderRadius={'24px'} />
+  <Image borderRadius={'36px 0px 0px 36px'} />
+</StorybookComponents.Stack>;
+```
+
+### States
+- description: <p>Use the <code>src</code> prop to display a link to a media file. If the <code>src</code> prop is added without a link, the default placeholder shows.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Image />
+  <Image src="example.jpg" />
+</StorybookComponents.Stack>;
+```
+
+### Background fill
+- description: <p>To remove the background color for PNG images or vector graphics, use the <code>transparent</code> prop. </p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Image fit="contain" height="240" src="example.jpg" />
+  <Image fit="contain" height="240" src="example.jpg" transparent />
+  <Image fit="contain" src="PromotionalPromoteMarketingHomeEmail.svg" />
+  <Image
+    fit="contain"
+    src="PromotionalPromoteMarketingHomeEmail.svg"
+    transparent
+  />
+</StorybookComponents.Stack>;
+```
+
+### Fit mode
+- description: <p>Control how images are displayed when their dimensions don't match the size of their containers with the <code>fit</code> prop. It supports all default <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">object-fit</a> values, but there are four that are most commonly used:  </p><p></p><li><code>contain</code>  maintains the aspect ratio while fitting images within containers.</li><li><code>cover</code>  maintains the aspect ratio and clips images to fill containers.</li><li><code>none</code>  loads the original image size and positions it in the center of the container.</li><li><code>tile</code>  repeats images when their dimensions are smaller than the containers.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Image fit="contain" height="300" src="example.jpg" />
+  <Image fit="cover" height="300" src="example.jpg" />
+  <Image fit="none" height="300" src="example.jpg" />
+</StorybookComponents.Stack>;
+```
+
+### Position
+- description: <p>Control image placement inside of a bounding box with the <code>position</code> property.  Specify the starting position of the image from where its fit will be defined.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Image src="example.jpg" fit="none" position="top" />
+  <Image src="example.jpg" fit="none" position="center left" />
+  <Image src="example.jpg" fit="none" position="bottom right" />
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Mixed border radius
+- description: <p>Use images with mixed corner radius levels in cases when they touch the edges of cards.</p>
+- example: 
+```jsx 
+() => {
+  const renderImage = () => (
+    <Image
+      src="TravelExample7.jpg"
+      borderRadius="15px 0px 0px 15px"
+      height="200px"
+      width="230px"
+    />
+  );
+
+  const renderContent = () => (
+    <Box
+      direction="vertical"
+      verticalAlign="space-between"
+      padding="24px 29px 27px"
+      backgroundColor="D80"
+      flexGrow={1}
+    >
+      <Box direction="vertical">
+        <Text weight="bold">Sunset</Text>
+        <Text size="tiny" weight="thin" secondary>
+          Jul 15, 2021 7:30pm, Cypher City
+        </Text>
+      </Box>
+      <Box align="right" verticalAlign="middle" minWidth={115} gap="12px">
+        <IconButton priority="secondary" size="small">
+          <Icons.More />
+        </IconButton>
+        <Button priority="secondary" size="small">
+          Edit
+        </Button>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box minHeight={200}>
+      {renderImage()}
+      {renderContent()}
+    </Box>
+  );
+};
+```
+
+### Product list
+- description: <p>Use images to display product thumbnails in lists and widgets.</p>
+- example: 
+```jsx 
+() => {
+  const records = [
+    {
+      name: 'Hoodie',
+      sku: 25232564,
+      inStock: true,
+      price: '$14.00',
+      image: <Image src="ProductExample1.jpg" />,
+    },
+    {
+      name: 'Watch',
+      sku: 35246432,
+      inStock: true,
+      price: '$29.00',
+      image: <Image src="ProductExample2.jpg" />,
+    },
+    {
+      name: 'Glasses',
+      sku: 4864310,
+      inStock: false,
+      price: '$69.00',
+      image: <Image src="ProductExample3.jpg" />,
+    },
+    {
+      name: 'Leather shoes',
+      sku: 125156422,
+      inStock: true,
+      price: '$7.00',
+      image: <Image src="ProductExample4.jpg" />,
+    },
+  ];
+
+  const Status = ({ isInStock }) => (
+    <Text size="small" secondary>
+      {isInStock ? 'In Stock' : 'Out Of Stock'}
+    </Text>
+  );
+
+  const secondaryAction = [
+    {
+      icon: <Icons.Duplicate />,
+      text: 'Duplicate',
+      onClick: () => {},
+    },
+    {
+      icon: <Icons.Delete />,
+      text: 'Delete',
+      onClick: () => {},
+    },
+  ];
+
+  const columns = [
+    {
+      title: '',
+      render: row => row.image,
+      width: '60px',
+    },
+    {
+      title: 'Name',
+      render: row => row.name,
+      width: '30%',
+    },
+    {
+      title: 'SKU',
+      render: row => row.sku,
+      width: '20%',
+      align: 'start',
+    },
+    {
+      title: 'Stock',
+      render: row => <Status isInStock={row.inStock} />,
+      width: '20%',
+      align: 'start',
+    },
+    {
+      title: 'Price',
+      render: row => row.price,
+      width: '10%',
+      align: 'start',
+    },
+    {
+      render: row => <TableActionCell secondaryActions={secondaryAction} />,
+      width: '10%',
+    },
+  ];
+
+  return (
+    <Card>
+      <Table data={records} columns={columns}>
+        <TableToolbar>
+          <TableToolbar.ItemGroup position="start">
+            <TableToolbar.Item>
+              <TableToolbar.Title>Products</TableToolbar.Title>
+            </TableToolbar.Item>
+          </TableToolbar.ItemGroup>
+        </TableToolbar>
+        <Table.Content />
+      </Table>
+    </Card>
+  );
+};
+```
+
+