@wix/design-system 1.193.0 → 1.195.0

package/dist/docs/components/BrowserPreviewWidgetExamples.md

@@ -0,0 +1,259 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>Component consists of preview content area and a browser bar:</p><li>Preview content area displays any type of content, like an image, text, or video. Add it inside the component as its <code>children</code>.</li><li>A styled browser bar is added at the top by default.</li>
+- example: 
+```jsx 
+<BrowserPreviewWidget>
+  <StorybookComponents.Placeholder width="320px" height="120px">
+    <Box verticalAlign="middle" align="center" height="100%">
+      <Text>Preview content area</Text>
+    </Box>
+  </StorybookComponents.Placeholder>
+</BrowserPreviewWidget>;
+```
+
+### Skin
+- description: <p>Change the background style with <code>skin</code> prop:</p><li>Use <code>neutral</code> (default) in all common cases.</li><li>Use <code>gradient</code> for larger preview areas.</li><li>Use <code>custom</code> to set the <code>backgroundColor</code> to any color using design system color tokens, RGB or HEX formats.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <BrowserPreviewWidget skin="neutral">
+    <StorybookComponents.Placeholder width="320px" height="120px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Neutral</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget skin="gradient">
+    <StorybookComponents.Placeholder width="320px" height="120px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Gradient</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget skin="custom" backgroundColor="B40">
+    <StorybookComponents.Placeholder width="320px" height="120px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Custom background</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+</StorybookComponents.Stack>;
+```
+
+### Browser bar size
+- description: <p>Control the height of the browser bar with <code>browserBarSize</code> prop, depending on the preview area width:</p><li>Use <code>size9</code>  when preview's width is <312 px.</li><li>Use <code>size12</code>  (default) when width is 312–443 px.</li><li>Use <code>size18</code>  when width is 444–660 px.</li><li>Use <code>size24</code>  when width is >660 px.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <BrowserPreviewWidget browserBarSize="size9">
+    <StorybookComponents.Placeholder width="240px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Shorter than 312 px</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget browserBarSize="size12">
+    <StorybookComponents.Placeholder width="320px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>312–443 px wide</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget browserBarSize="size18">
+    <StorybookComponents.Placeholder width="520px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>444–660 px wide</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget browserBarSize="size24">
+    <StorybookComponents.Placeholder width="720px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Wider than 660 px</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+</StorybookComponents.Stack>;
+```
+
+### Width and height
+- description: <p>Control dimensions of the component by setting <code>width</code> and <code>height</code> props to custom % or px.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <BrowserPreviewWidget width="50%">
+    <StorybookComponents.Placeholder width="240px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Custom width</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+  <BrowserPreviewWidget height="240px">
+    <StorybookComponents.Placeholder width="240px" height="60px">
+      <Box verticalAlign="middle" align="center" height="100%">
+        <Text>Custom height</Text>
+      </Box>
+    </StorybookComponents.Placeholder>
+  </BrowserPreviewWidget>
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Site previews
+- description: <p>Use browser preview widget to showcase a design prepared by or suggested for the user.</p><p></p><p>It is often used together with <code><MobilePreviewWidget/></code> preview.</p>
+- example: 
+```jsx 
+() => {
+  const VIEW_TYPE = {
+    desktopView: 'desktopView',
+    mobileView: 'mobileView',
+  };
+  const [viewType, setViewType] = React.useState(VIEW_TYPE.desktopView);
+
+  const changeViewType = (_, value) => setViewType(value);
+
+  const desktopView = () => (
+    <BrowserPreviewWidget skin="gradient" height="718px">
+      <Image
+        width="360px"
+        height="180px"
+        borderRadius="0"
+        src="browserPreview.png"
+      />
+    </BrowserPreviewWidget>
+  );
+
+  const mobileView = () => (
+    <MobilePreviewWidget skin="gradient" height="718px">
+      <Image height="476px" borderRadius="0" src="browserPreviewMobile.png" />
+    </MobilePreviewWidget>
+  );
+
+  return (
+    <CustomModalLayout
+      height="720px"
+      onCloseButtonClick={() => {}}
+      removeContentPadding
+      content={
+        <Layout gap="0px">
+          <Cell span={6}>
+            {viewType === VIEW_TYPE.desktopView ? desktopView() : mobileView()}
+          </Cell>
+          <Cell span={6}>
+            <Box
+              direction="vertical"
+              paddingLeft="24px"
+              paddingRight="24px"
+              gap="24px"
+              verticalAlign="middle"
+              height="100%"
+            >
+              <Box>
+                <SegmentedToggle selected={viewType} onClick={changeViewType}>
+                  <SegmentedToggle.Icon
+                    value={VIEW_TYPE.desktopView}
+                    tooltipText="Desktop"
+                  >
+                    <Icons.Desktop />
+                  </SegmentedToggle.Icon>
+                  <SegmentedToggle.Icon
+                    value={VIEW_TYPE.mobileView}
+                    tooltipText="Mobile"
+                  >
+                    <Icons.Mobile />
+                  </SegmentedToggle.Icon>
+                </SegmentedToggle>
+              </Box>
+              <Heading size="large">Your campaign is live!</Heading>
+              <Box direction="vertical" gap="12px">
+                <Text>
+                  Be proud. Get the word out about the amazing things you're
+                  doing.
+                </Text>
+                <TextButton prefixIcon={<Icons.Link />}>
+                  Share your Campaign
+                </TextButton>
+              </Box>
+              <Box width="100%" align="right">
+                <Button priority="secondary">Done</Button>
+              </Box>
+            </Box>
+          </Cell>
+        </Layout>
+      }
+    />
+  );
+};
+```
+
+### Selected page validation
+- description: <p>Use browser preview widget to validate if the selected site is the one the user wants to proceed with.</p>
+- example: 
+```jsx 
+() => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <CustomModalLayout
+      primaryButtonText="Import Posts"
+      secondaryButtonText="Cancel"
+      onCloseButtonClick={() => {}}
+      title="Import posts to your blog"
+      content={
+        <Box direction="vertical" gap="12px">
+          <Text>Is this your blog?</Text>
+          <Layout gap="0px">
+            <Cell span={6}>
+              <BrowserPreviewWidget
+                skin="custom"
+                backgroundColor="D80"
+                browserBarSize="size9"
+              >
+                <Image
+                  width="240px"
+                  height="140px"
+                  borderRadius="0"
+                  src="browserPreview.png"
+                />
+              </BrowserPreviewWidget>
+            </Cell>
+            <Cell span={6}>
+              <Box
+                direction="vertical"
+                gap="3x"
+                height="100%"
+                verticalAlign="middle"
+              >
+                <Text>Home | Wix Design System</Text>
+                <TextButton>wixdesignsystem.com</TextButton>
+              </Box>
+            </Cell>
+          </Layout>
+          <Checkbox
+            checked={checked}
+            onChange={() => setChecked(!checked)}
+            vAlign="top"
+          >
+            By checking the box you allow Wix to import this content, confirm
+            you own or are licenced to use it and assume liability for this use
+          </Checkbox>
+        </Box>
+      }
+    />
+  );
+};
+```
+
+

package/dist/docs/components/ButtonExamples.md

@@ -0,0 +1,262 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control button size with <code>size</code> prop:</p><li><code>large</code> is best for calls to action that require more emphasis. </li><li><code>medium</code> is for main page actions and common use cases.</li><li><code>small</code> fits into smaller UI elements like cards and widgets.</li><li><code>tiny</code> is used for dense layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Button size="large">Large</Button>
+  <Button size="medium">Medium</Button>
+  <Button size="small">Small</Button>
+  <Button size="tiny">Tiny</Button>
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Change the appearance of a button with a <code>skin</code> prop.  </p><li><code>standard</code> is for general primary actions.</li><li><code>light</code> is for primary actions that are on dark backgrounds. </li><li><code>destructive</code> is only for actions that have a destructive effect on user data, like delete.</li><li><code>premium</code> is for actions that prompt users to upgrade their plans to premium subscription.</li><li><code>premium-light</code> is best for upgrade actions that appear on dark backgrounds.</li><li><code>dark</code> should be used with buttons on backgrounds with colors.  </li><li><code>transparent</code> is for general actions on backgrounds with vivid colors or images.</li><li><code>ai</code> should be used with AI based features.</li><p></p><p>Each action can be <code>primary</code> or <code>secondary</code>. 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" gap="40px">
+  <Box gap="20px">
+    <Button>Standard Primary</Button>
+    <Button priority="secondary">Standard Secondary</Button>
+  </Box>
+  <Box gap="20px" backgroundColor="#000" padding="6px">
+    <Button skin="light">Light Primary</Button>
+    <Button skin="light" priority="secondary">
+      Light Secondary
+    </Button>
+  </Box>
+  <Box gap="20px">
+    <Button skin="destructive">Destructive Primary</Button>
+    <Button skin="destructive" priority="secondary">
+      Destructive Secondary
+    </Button>
+  </Box>
+  <Box gap="20px">
+    <Button skin="premium">Premium Primary</Button>
+    <Button skin="premium" priority="secondary">
+      Premium Secondary
+    </Button>
+  </Box>
+  <Box gap="20px" backgroundColor="#000" padding="6px">
+    <Button skin="premium-light">Premium Light Primary</Button>
+    <Button skin="premium-light" priority="secondary">
+      Premium Light Secondary
+    </Button>
+  </Box>
+  <Box gap="20px">
+    <Button skin="dark">Dark Primary</Button>
+    <Button skin="dark" priority="secondary">
+      Dark Secondary
+    </Button>
+  </Box>
+  <Box gap="20px" backgroundColor="#3899EB" padding="6px">
+    <Button skin="transparent">Transparent Primary</Button>
+    <Button skin="transparent" priority="secondary">
+      Transparent Secondary
+    </Button>
+  </Box>
+  <Box gap="20px">
+    <Button skin="ai">Ai Primary</Button>
+    <Button skin="ai" priority="secondary">
+      Ai Secondary
+    </Button>
+  </Box>
+</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="line">
+  <StorybookComponents.Stack flexDirection="column">
+    <StorybookComponents.Stack>
+      <Button size="large" prefixIcon={<Icons.Add />}>
+        Prefix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="medium" prefixIcon={<Icons.Add />}>
+        Prefix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="small" prefixIcon={<Icons.AddSmall />}>
+        Prefix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="tiny" prefixIcon={<Icons.AddSmall />}>
+        Prefix
+      </Button>
+    </StorybookComponents.Stack>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column">
+    <StorybookComponents.Stack>
+      <Button size="large" suffixIcon={<Icons.ChevronDown />}>
+        Suffix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="medium" suffixIcon={<Icons.ChevronDown />}>
+        Suffix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="small" suffixIcon={<Icons.ChevronDownSmall />}>
+        Suffix
+      </Button>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack>
+      <Button size="tiny" suffixIcon={<Icons.ChevronDownSmall />}>
+        Suffix
+      </Button>
+    </StorybookComponents.Stack>
+  </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 
+<Button disabled>Disabled</Button>
+```
+
+### Text overflow
+- description: <p>Use the <code>ellipsis</code> prop for overflow text. The full text will be displayed in a <code><Tooltip/></code> when a user hovers over the button. Control the style of the tooltip using the <code>tooltipProps</code>.</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 max three for specific use cases.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" width="180px">
+  <Button ellipsis>
+    This label exceeds available space and is shown in a tooltip
+  </Button>
+</StorybookComponents.Stack>;
+```
+
+### Full width
+- description: <p>When working on mobile designs, use the <code>fullWidth</code> prop to fill the button to 100% of the parent container.</p>
+- example: 
+```jsx 
+<Button fullWidth>Full width</Button>
+```
+
+
+
+
+## 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 href, target, etc., are needed. </li><li><code><Link></code> when props like to, replace, 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>
+      <Button as="a" href="https://www.wix.com" target="_blank">
+        {'Native <a/> tag'}
+      </Button>
+      <Button as={ReactRouterLink} skin="premium" to="/home">
+        {'React Router <Link/> tag'}
+      </Button>
+      <Button as="button" onClick={() => alert('yay')}>
+        {'Native <button/> tag'}
+      </Button>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Loading state
+- description: <p>When an action is delayed and still loading, use <code><Loader/></code> <a href="https://www.wix-style-react.com/storybook/?path=/story/components-feedback--loader&previewId=22f5352e-1f78-4f97-8edc-1a1d5a42ff77&storyName=Button"></a>instead of a label on the button.</p>
+- example: 
+```jsx 
+<CustomModalLayout
+  primaryButtonText={<Loader size="tiny" />}
+  secondaryButtonText="Cancel"
+  onCloseButtonClick={() => {}}
+  title="Add menu"
+>
+  <Layout>
+    <Cell>
+      <FormField label="Name">
+        <Input value="Brunch Menu" />
+      </FormField>
+    </Cell>
+    <Cell>
+      <FormField label="Description">
+        <InputArea value="Brunch includes pastries, fruits, omelettes, coffee, and more." />
+      </FormField>
+    </Cell>
+    <Cell>
+      <Box>
+        <FormField label="Visible to customers" labelPlacement="right" stretchContent={false}>
+          <ToggleSwitch checked />
+        </FormField>
+      </Box>
+    </Cell>
+  </Layout>
+</CustomModalLayout>;
+```
+
+### Main action of a panel
+- description: <p>Place the primary CTA button in the <code><SidePanel.Footer/></code> to make sure it is always clearly visible to the user. </p>
+- example: 
+```jsx 
+<SidePanel
+  onCloseButtonClick={() => {}}
+  skin="floating"
+  width="288px"
+  height="576px"
+>
+  <SidePanel.Header title="Manage Accordion" />
+  <SidePanel.Content noPadding>
+    <NestableList
+      withBottomBorder
+      items={[
+        {
+          id: 1,
+          options: [{ value: <Text size="small">Color</Text> }],
+          dragHandleSize: 'small',
+        },
+        {
+          id: 2,
+          options: [{ value: <Text size="small">Price</Text> }],
+          dragHandleSize: 'small',
+        },
+        {
+          id: 3,
+          options: [{ value: <Text size="small">Size</Text> }],
+          dragHandleSize: 'small',
+        },
+        {
+          id: 4,
+          options: [{ value: <Text size="small">Collections</Text> }],
+          dragHandleSize: 'small',
+        },
+      ]}
+      onChange={() => {}}
+    />
+  </SidePanel.Content>
+  <SidePanel.Footer>
+    <Box direction="vertical" align="center">
+      <Button size="small">Add Item</Button>
+    </Box>
+  </SidePanel.Footer>
+</SidePanel>;
+```
+
+

package/dist/docs/components/CalendarExamples.md

@@ -0,0 +1,80 @@
+
+## Feature Examples
+
+
+### Layout
+- description: Change calendar’s layout using `numOfMonths` prop. It can display 1 or 2 months.
+- example: 
+```jsx 
+
+```
+
+### Size
+- description: Adjust the component `size` using size prop. It supports 2 sizes:<br/>
+      &emsp;-  `medium` (default) - use it in all common cases.<br/>
+      &emsp;- `small` - use it in dense layouts like Bookings Calendar to save vertical and horizontal space.
+- example: 
+```jsx 
+
+```
+
+### Date Indication
+- description: Mark important dates with `dateIndication` prop. It’s helpful when the calendar needs to highlight the dates with happening events.
+- example: 
+```jsx 
+
+```
+
+### Selection Mode
+- description: Enable select the range of dates with `selectionMode` prop. It supports 2 values:<br/>
+      &emsp;- `day` (default) - lets to select 1 day.<br/>
+      &emsp;- `range` - lets to select any range of dates.
+- example: 
+```jsx 
+
+```
+
+### Excluding Dates
+- description: Control what dates the user can select with 2 props:<br/>
+      &emsp;- `filterDate` - define what dates will be selectable.<br/>
+      &emsp;- `excludePastDates` - allow selecting only today and future dates.
+      
+- example: 
+```jsx 
+
+```
+
+### Select  Month and Year
+- description: Let the user quickly change the month and year values with props::<br/>
+      &emsp;- `showMonthDropdown ` - enables month dropdown.<br/>
+      &emsp;- `showYearDropdown` - enables year dropdown.
+      
+- example: 
+```jsx 
+
+```
+
+### Localization
+- description: Change the language using `locale` prop. Some languages will change the start of the week day and order of month and year. First Day of the week can be controlled manually with `firstDayOfWeek` prop.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Event scheduling
+- description: Use a calendar with time picker to let our users set the appointment date or article publish date.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/CalendarPanelExamples.md

@@ -0,0 +1,84 @@
+
+## Feature Examples
+
+
+### Presets
+- description: Empower the user to quickly select a predefined range or date using `presets` prop.
+- example: 
+```jsx 
+
+```
+
+### Footer
+- description: Make the date selection secure by using `footer` prop which adds summarized date selection and confirmation actions.
+- example: 
+```jsx 
+
+```
+
+### Number of Months
+- description: Specify a number of months visible inside of a panel with `numOfMonths` prop.<br/>
+        <br/>
+        By default panel displays 2 months at once. Display a single month only when presets are available.
+- example: 
+```jsx 
+
+```
+
+### Selection Mode
+- description: Enable users to select the range of dates with `selectionMode` prop. It supports 2 values:<br/>
+        &emsp;- `day` (default) - lets to select 1 day.<br/>
+        &emsp;- `range` - lets to select any range of dates.
+- example: 
+```jsx 
+
+```
+
+### Month and Year Selection
+- description: Let the user quickly change the month and year values with:<br/>
+        &emsp;- `showMonthDropdown` (default) - enables month selection dropdown.<br/>
+        &emsp;- `showYearDropdown` - enables year selection dropdown.
+- example: 
+```jsx 
+
+```
+
+### Excluding Dates
+- description: Control what dates the user can select with 2 props:<br/>
+        &emsp;- `filterDate` (default) - define what dates will be selectable.<br/>
+        &emsp;- `excludePastDates` - allow selecting only today and future dates.
+- example: 
+```jsx 
+
+```
+
+### Localization
+- description: Change the language using `locale` prop. Some languages will change the start of the week day and order of month and year.
+        First Day of the week can be controlled manually with `firstDayOfWeek` prop.<br/>
+        <br/>
+        Presets and footer actions aren’t controlled by this and have to be translated manually.<br/>
+        <br/>
+        When using `Yoshi 5` with `BM Flow` there's no need to use `locale` prop anymore. It is handled automatically.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Trigger
+- description: Call it out from any action component such as `<IconButton/>`, `<TextButton/>`, `<Button/>`, etc.
+        Use it to filter data and content.
+- example: 
+```jsx 
+
+```
+
+