@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/TextButtonExamples.md

@@ -0,0 +1,226 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control the size of a button with the <code>size</code> prop:</p><li><code>Medium</code> is the default size for general actions.</li><li><code>Small</code> should be used for cards and widgets.</li><li><code>Tiny</code> is for dense layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection='column' gap='60px'>
+  <TextButton size="medium">Medium</TextButton>
+  <TextButton size="small">Small</TextButton>
+  <TextButton size="tiny">Tiny</TextButton>
+</StorybookComponents.Stack>
+```
+
+### Skin
+- description: <p>Control the appearance of a button with <code>skin</code> prop:</p><li><code>Standard</code> is the default for general actions.</li><li><code>Destructive</code> is for actions that have a destructive effect on user data, such as delete.</li><li><code>Standard-light</code> is for main actions placed on dark backgrounds.</li><li><code>Light</code> is for general actions placed on dark backgrounds.</li><li><code>Premium</code> is used for actions that prompt users to upgrade their plans.</li><li><code>Dark</code> is for a list of actions stacked in a single place, like quick links in the sidebar.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" gap="60px">
+  <TextButton skin="standard">Standard</TextButton>
+  <TextButton skin="destructive">Destructive</TextButton>
+    <StorybookComponents.Background skin="dark">
+    <TextButton skin="standard-light">Standard Light</TextButton>
+  </StorybookComponents.Background>
+    <StorybookComponents.Background skin="dark">
+    <TextButton skin="light">Light</TextButton>
+  </StorybookComponents.Background>
+  <TextButton skin="premium">Premium</TextButton>
+  <TextButton skin="dark">Dark</TextButton>
+</StorybookComponents.Stack>;
+```
+
+### Affix
+- description: <p>Add more context to actions with affix icons:</p><li>Emphasize the button action with a <code>prefixIcon</code>.</li><li>Indicate that an action will open a popover or navigate users to another page with a <code>suffixIcon</code>.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" gap='60px'>
+  <StorybookComponents.Stack>
+    <TextButton size="medium" prefixIcon={<Icons.Add />}>
+      Prefix
+    </TextButton>
+    <TextButton size="medium" suffixIcon={<Icons.ChevronDown />}>
+      Suffix
+    </TextButton>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack>
+    <TextButton size="small" prefixIcon={<Icons.AddSmall />}>
+      Prefix
+    </TextButton>
+    <TextButton size="small" suffixIcon={<Icons.ChevronDownSmall />}>
+      Suffix
+    </TextButton>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack>
+    <TextButton size="tiny" prefixIcon={<Icons.AddSmall />}>
+      Prefix
+    </TextButton>
+    <TextButton size="tiny" suffixIcon={<Icons.ChevronDownSmall />}>
+      Suffix
+    </TextButton>
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Underline
+- description: <p>Control underline visibility with <code>underline</code> prop:</p><li><code>none</code> is the default.</li><li><code>onHover</code> shows an underline on mouse hover.</li><li><code>always</code> shows an underline at all times. It is most suitable for text links.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" gap='60px'>
+  <TextButton>None</TextButton>
+  <TextButton underline="onHover">On Hover</TextButton>
+  <TextButton underline="always">Always</TextButton>
+</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 
+<TextButton disabled>Disabled</TextButton>
+```
+
+### Text overflow
+- description: <p>Use an <code>ellipsis</code> prop for overflow text. The full text will be displayed when a user hovers over the button.</p><p></p><p><em>Note</em>: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or three max for specific use cases.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" width="360px">
+  <TextButton ellipsis>
+    This label exceeds available space and is shown in a tooltip
+  </TextButton>
+</StorybookComponents.Stack>;
+```
+
+### Full width
+- description: <p>Set the button to fill 100% of its parent container width with the <code>fluid</code> prop. Use this setting for mobile designs only.</p>
+- example: 
+```jsx 
+<TextButton fluid>Full Width</TextButton>;
+```
+
+
+
+
+## Developer Examples
+
+
+### Custom HTML tag
+- description: <p>Render buttons as any given HTML tag with the <code>as</code> prop.</p><p></p><p>Render text buttons that are links as:</p><li> <code><a></code> when attributes like href, target, etc., 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 HTML tag.</p>
+- example: 
+```jsx 
+() => {
+  const ReactRouterLink = props => <div {...props} />;
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <TextButton as="a" href="https://www.wix.com" target="_blank">
+        {'Native <a/> tag'}
+      </TextButton>
+      <TextButton as={ReactRouterLink} skin="premium" to="/home">
+        {'React Router <Link/> tag'}
+      </TextButton>
+      <TextButton as="button">{'Native <button/> tag'}</TextButton>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Settings panel
+- description: <p>Use text buttons for optional actions, such as links to help center articles.  </p>
+- example: 
+```jsx 
+<SidePanel skin="floating" width="420px" onCloseButtonClick onHelpButtonClick>
+  <SidePanel.Header title="Booking Calendar" />
+  <Box height="480px">
+    <VerticalTabs size="small" activeTabId={5} onChange={() => {}}>
+      <VerticalTabs.TabItem id={0}>Manage</VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={1}>Layout</VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={2}>Display</VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={3}>Design</VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={4}>Text</VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={5}>Support</VerticalTabs.TabItem>
+    </VerticalTabs>
+    <Divider direction="vertical" />
+    <SidePanel.Content noPadding>
+      <SidePanel.Field>
+        <section>
+          <Text size="small" secondary>
+            Frequently asked questions
+          </Text>
+          <Box gap={2} direction="vertical" paddingTop={2}>
+            <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              Customize calendar page
+            </TextButton>
+            <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              Time zone display
+            </TextButton>
+            <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              Appointment time slots
+            </TextButton>
+            <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              Date and time formatting
+            </TextButton>
+            <TextButton size="small" suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              How-to articles
+            </TextButton>
+          </Box>
+        </section>
+      </SidePanel.Field>
+      <SidePanel.Field>
+        <section>
+          <Text size="small" secondary>
+            Still having issues?
+          </Text>
+          <Box gap={2} direction="vertical" paddingTop={2}>
+            <TextButton size="small" prefixIcon={<Icons.ChatSmall />} suffixIcon={<Icons.ExternalLinkSmall />} ellipsis>
+              Contact customer care
+            </TextButton>
+          </Box>
+        </section>
+      </SidePanel.Field>
+    </SidePanel.Content>
+  </Box>
+</SidePanel>
+```
+
+### List of actions
+- description: <p>Use a <code>dark</code> skin for a list of actions to avoid distracting or overwhelming the user.</p>
+- example: 
+```jsx 
+<Layout>
+  <Cell span={6}>
+    <Card>
+      <Card.Header title="Promote" />
+      <Card.Divider />
+      <Card.Content>
+        <Box direction="vertical" gap="18px">
+          <TextButton skin="dark" prefixIcon={<Icons.Coupon />}>
+            Create Coupon
+          </TextButton>
+          <TextButton skin="dark" prefixIcon={<Icons.VideoCamera />}>
+            Create Promo Video
+          </TextButton>
+          <TextButton skin="dark" prefixIcon={<Icons.EmailSend />}>
+            Send Email Campaign
+          </TextButton>
+          <TextButton skin="dark" prefixIcon={<Icons.Share />}>
+            Share Product
+          </TextButton>
+          <TextButton skin="dark" prefixIcon={<Icons.Settings />}>
+            Edit SEO Settings
+          </TextButton>
+        </Box>
+      </Card.Content>
+    </Card>
+  </Cell>
+</Layout>;
+```
+
+

package/dist/docs/components/TextExamples.md

@@ -0,0 +1,264 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control the size of the text with the <code>size</code> prop. It supports 3 sizes:</p><li><code>medium</code> is the default for all common cases of running text.</li><li><code>small</code> is for field labels and secondary content.</li><li><code>tiny</code> is for short messages of minor importance. </li><p></p><p>Note: Use <code>tiny</code> in exceptional cases only, as it's hard to read, and not recommended for accessibility.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text size="medium">
+    Medium size is a default size that's used most of the time.
+  </Text>
+  <Text size="small">
+    Small size is used where medium doesn't fit or content is less important.
+  </Text>
+  <Text size="tiny">
+    Tiny size is used when there's no space or it's the last thing users need to
+    see.
+  </Text>
+</StorybookComponents.Stack>;
+```
+
+### Weight
+- description: <p>Control the weight of the text with the <code>weight</code> prop. It supports 3 weights:</p><li><code>bold</code> emphasizes running text.</li><li><code>normal</code> is for form field values and button labels.</li><li><code>thin</code> is the default for all regular paragraphs.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text weight="bold">Bold weight is meant to emphasize running text.</Text>
+  <Text weight="normal">
+    Normal weight is for form field values and buttons.
+  </Text>
+  <Text weight="thin">
+    Thin weight is for running text. Use it for all regular paragraphs. 
+  </Text>
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Control the color of text with the <code>skin</code> prop. It supports 6 skins:</p><li><code>standard</code></li><li><code>premium</code></li><li><code>success</code></li><li><code>error</code></li><li><code>disabled</code></li><li><code>primary</code></li><p></p><p><code>standard</code> skin can be placed on backgrounds with color. All other skins can be used only on white or gray backgrounds.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text skin="standard">Standard skin appears in all regular texts.</Text>
+  <Text skin="premium">
+    Premium skin calls users to upgrade to get unlimited features.
+  </Text>
+  <Text skin="success">
+    Success skin indicates that everything went smooth.
+  </Text>
+  <Text skin="error">Error skin alerts users that something went wrong.</Text>
+  <Text skin="disabled">
+    Disabled skin indicates that something cannot be accessed.
+  </Text>
+  <Text skin="primary">Primary skin is for inline links.</Text>
+</StorybookComponents.Stack>;
+```
+
+### Light
+- description: <p>Invert text color so it can be used on a dark background with the <code>light</code> prop. It affects standard and disabled skins only.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text>Dark text is used on light backgrounds.</Text>
+  <Box backgroundColor="D10">
+    <Text light>Light text is used on dark backgrounds.</Text>
+  </Box>
+</StorybookComponents.Stack>;
+```
+
+### Secondary
+- description: <p>Emphasize content hierarchy by setting running text priority to <code>secondary</code>. It applies lower contrast font color for standard skin text only.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text skin="standard" secondary>
+    Dark secondary text is used where it's less important than standard text.
+  </Text>
+  <Box backgroundColor="D10">
+    <Text light secondary>
+      Light secondary text also serves as neutral content just on a dark
+      background.
+    </Text>
+  </Box>
+</StorybookComponents.Stack>;
+```
+
+### Unordered list
+- description: <p>Use a standard <code><ul></code> HTML tag to build an unordered list. Control its style with the <code>listStyle</code> prop. It supports 2 styles:</p><li><code>checkmark</code></li><li><code>circle</code></li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text listStyle="checkmark">
+    The list below is built using standard "ul" and "li" HTML tags.
+    <ul>
+      <li>First statement</li>
+      <li>
+        Second statement
+        <ul>
+          <li>Subitem</li>
+          <li>Subitem</li>
+        </ul>
+      </li>
+      <li>Third statement</li>
+    </ul>
+  </Text>
+  <Text listStyle="circle">
+    The list below is built using standard "ul" and "li" HTML tags.
+    <ul>
+      <li>First statement</li>
+      <li>
+        Second statement
+        <ul>
+          <li>Subitem</li>
+          <li>Subitem</li>
+        </ul>
+      </li>
+      <li>Third statement</li>
+    </ul>
+  </Text>
+</StorybookComponents.Stack>;
+```
+
+### Ordered list
+- description: <p>Use a standard <code><ol></code> HTML tag to build an ordered list. It accepts all default HTML <a href="https://www.w3schools.com/html/html_lists_ordered.asp">types</a>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Text>
+    The list below is built using standard "ol" and "li" HTML tags.
+    <ol type="1">
+      <li>First statement</li>
+      <li>
+        Second statement
+        <ol type="1">
+          <li>Subitem</li>
+          <li>Subitem</li>
+        </ol>
+      </li>
+      <li>Third statement</li>
+    </ol>
+  </Text>
+  <Text>
+    The list below is built using standard "ol" and "li" HTML tags.
+    <ol type="A">
+      <li>First statement</li>
+      <li>
+        Second statement
+        <ol type="a">
+          <li>Subitem</li>
+          <li>Subitem</li>
+        </ol>
+      </li>
+      <li>Third statement</li>
+    </ol>
+  </Text>
+  <Text>
+    The list below is built using standard "ol" and "li" HTML tags.
+    <ol type="I">
+      <li>First statement</li>
+      <li>
+        Second statement
+        <ol type="i">
+          <li>Subitem</li>
+          <li>Subitem</li>
+        </ol>
+      </li>
+      <li>Third statement</li>
+    </ol>
+  </Text>
+</StorybookComponents.Stack>;
+```
+
+### Text overflow
+- description: <p>Handle text overflow by wrapping text, truncating it or doing both.</p><p></p><p>By default, text wraps into any number of lines. With <code>ellipsis</code> enabled, it will truncate to fit the width of the parent container. Specify <code>maxLines</code> to truncate text after a specified number of rows.</p><p></p><p>Always provide full text content to view:</p><li>The most accessible pattern is to add a 'Show more' button which expands the full text.</li><li>Show full text on mouse hover with <code>showTooltip</code> prop. Control tooltip style by passing all default <code><Tooltip/></code> properties via <code>tooltipProps</code>.</li>
+- example: 
+```jsx 
+() => {
+  const [open, setOpen] = React.useState(false);
+  const suffixIcon = open ? <Icons.ChevronUp /> : <Icons.ChevronDown />;
+
+  return (
+    <StorybookComponents.Stack flexDirection="column" width="50%">
+      <Text>Text that wraps forever. It doesn't show any ellipsis.</Text>
+      <Box direction="vertical">
+        <Text maxLines={open ? 4 : 2} ellipsis>
+          Text that is truncated but has an accessible alternative to provide
+          its full content. Click 'Show more' to expand full text. Full text is
+          then revealed in the main layout.
+        </Text>
+        <TextButton onClick={() => setOpen(!open)} suffixIcon={suffixIcon}>
+          {open ? 'Show less' : 'Show more'}
+        </TextButton>
+      </Box>
+      <Text ellipsis maxLines={2}>
+        Text with ellipsis. It can wrap until a specified number of lines. When
+        the limit is reached it displays the 3 dot ellipsis. Full text is
+        revealed on hover.
+      </Text>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Custom tag
+- description: <p>Render text as a custom HTML tag by using the <code>tagName</code> prop.</p>
+- example: 
+```jsx 
+<Text tagName="div">This text will be rendered as a "div" element.</Text>;
+```
+
+### Inline link
+- description: <p>Use a default <code><a></code> HTML tag to add an inline link to a sentence.</p>
+- example: 
+```jsx 
+<Text>
+  Use a standard HTML 'a' tag to add <a>a text link</a> within the line.
+</Text>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Inline button
+- description: <p>Use inline <code><Box/></code> to place buttons or other elements inline to text.</p>
+- example: 
+```jsx 
+<Text>
+  Set up subscriptions, memberships or package plans to sell on your site.
+  <Box inline paddingLeft="SP1">
+    <TextButton underline="always">Learn more about Pricing Plans</TextButton>
+  </Box>
+</Text>;
+
+```
+
+### Show more
+- description: <p>Toggle <code>maxLines</code> prop value to recreate 'Show more / Show less' behavior for text paragraphs.</p><p></p><p>This is a more accessible way to handle text overflow than using a tooltip only, since keyboard users can't access the complete text inside the tooltip.</p>
+- example: 
+```jsx 
+() => {
+  const [open, setOpen] = React.useState(false);
+  const suffixIcon = open ? <Icons.ChevronUp /> : <Icons.ChevronDown />;
+
+  return (
+    <Box width="50%" direction="vertical">
+      <Text maxLines={open ? 4 : 1} ellipsis>
+        Click 'Show more' to display more than a single line of text. Toggling
+        maxLines allows to recreate expand / collapse behaviour.
+      </Text>
+      <TextButton onClick={() => setOpen(!open)} suffixIcon={suffixIcon}>
+        {open ? 'Show less' : 'Show more'}
+      </TextButton>
+    </Box>
+  );
+};
+```
+
+

package/dist/docs/components/ThemeProviderExamples.md

@@ -0,0 +1,17 @@
+
+## Feature Examples
+
+
+### No examples available
+- description: No examples available
+- example: 
+```jsx 
+No examples available
+```
+
+
+
+
+    
+
+