@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/SidebarBackButtonExamples.md

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

package/dist/docs/components/SidebarDividerExamples.md

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

package/dist/docs/components/SidebarDividerNextExamples.md

@@ -0,0 +1,53 @@
+
+## Feature Examples
+
+
+### Width
+- description: <p>Control divider's width with <code>fullWidth</code> prop. Default value is <code>false</code>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SidebarDividerNext />
+  <SidebarDividerNext fullWidth />
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Navigation split into groups
+- description: <p>Split actions into the groups using <code>SidebarDividerNext</code>.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('2');
+
+  return (
+    <Box height="170px">
+      <SidebarNext isLoading={false} selectedKey={selectedKey}>
+        <SidebarItemNext itemKey="1" onClick={() => setSelectedKey('1')}>
+          Home
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="2" onClick={() => setSelectedKey('2')}>
+          Stores
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="3" onClick={() => setSelectedKey('3')}>
+          Contacts
+        </SidebarItemNext>
+        <SidebarDividerNext />{' '}
+        <SidebarItemNext itemKey="4" onClick={() => setSelectedKey('4')}>
+          Settings
+        </SidebarItemNext>
+      </SidebarNext>
+    </Box>
+  );
+};
+```
+
+

package/dist/docs/components/SidebarExamples.md

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

package/dist/docs/components/SidebarHeaderExamples.md

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

package/dist/docs/components/SidebarHeaderNextExamples.md

@@ -0,0 +1,84 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>Provides three containers <code>title</code>, <code>subtitle</code> and <code>children</code></p><p></p><p>Title and subtitle allow only single line text, if overflows shows ellipsis.</p>
+- example: 
+```jsx 
+<SidebarHeaderNext title="Title" subtitle="Subtitle">
+  <StorybookComponents.Placeholder skin="light">
+    Children
+  </StorybookComponents.Placeholder>
+</SidebarHeaderNext>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Overriding header content
+- description: <p>Sidebar header allows to display other components within if it's the most valuable information for the user navigating the sidebar. </p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('2');
+
+  return (
+    <Box height="400px">
+      <SidebarNext
+        skin="light"
+        isLoading={false}
+        selectedKey={selectedKey}
+        header={
+          <SidebarHeaderNext>
+            <TextButton
+              prefixIcon={<Icons.ArrowLeft />}
+              size="tiny"
+              skin="dark"
+              weight="normal"
+            >
+              Back to Site Dashboard
+            </TextButton>
+            <Box direction="vertical" align="center" marginTop={3}>
+              <Avatar size="size60" />
+              <Box direction="vertical" align="center" marginTop={2}>
+                <Text size="small" weight="bold" secondary>
+                  Jon Doe
+                </Text>
+                <Text size="tiny" secondary light>
+                  jond@mail.com
+                </Text>
+              </Box>
+            </Box>
+          </SidebarHeaderNext>
+        }
+      >
+        <SidebarItemNext itemKey="1" onClick={() => setSelectedKey('1')}>
+          Account settings
+        </SidebarItemNext>
+        <SidebarDividerNext />
+        <SidebarItemNext itemKey="2" onClick={() => setSelectedKey('2')}>
+          Domains
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="3" onClick={() => setSelectedKey('3')}>
+          Business email
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="4" onClick={() => setSelectedKey('4')}>
+          Vouchers
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="5" onClick={() => setSelectedKey('5')}>
+          Billing history
+        </SidebarItemNext>
+      </SidebarNext>
+    </Box>
+  );
+};
+```
+
+

package/dist/docs/components/SidebarItemNextExamples.md

@@ -0,0 +1,82 @@
+
+## Feature Examples
+
+
+### Suffix
+- description: <p>Add a counter badge or other indication after the item's label using <code>suffix</code> prop.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <SidebarItemNext suffix={<CounterBadge>1</CounterBadge>}>
+    Label
+  </SidebarItemNext>
+  <SidebarItemNext suffix={<Badge skin="warning">New</Badge>}>
+    Label
+  </SidebarItemNext>
+</StorybookComponents.Stack>;
+```
+
+### Disabled
+- description: <p>Control item's interaction with <code>disabled</code> prop. Disable item when it's unavailable, but has to remain visible.</p>
+- example: 
+```jsx 
+<SidebarItemNext disabled>Disabled</SidebarItemNext>;
+```
+
+
+
+
+## Developer Examples
+
+
+### Custom HTML tag
+- description: <p>Render action as any given HTML tag with <code>as</code> prop. For example it can be rendered as:</p><p></p><p><code><a></code> - use when attributes like href, target, etc., are needed.</p><p></p><p><code><Link></code> - use this react router item to have props like to, replace, etc.</p><p></p><p>All attributes will be passed to the rendered element.</p>
+- example: 
+```jsx 
+<SidebarItemNext as="a" href="https://www.wix.com">
+  Wix.com homepage
+</SidebarItemNext>;
+```
+
+### Setup selection with sidebar
+- description: <p>Control item selection from Sidebar component referring to <code>itemKey</code> set value.</p><p></p><p>Truncate children item's text with <code>isInQuickNavigation</code> prop.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('1-1');
+
+  return (
+    <Box height="200px">
+      <SidebarNext isLoading={false} selectedKey={selectedKey}>
+        <SidebarSubMenuNext
+          title="Parent item"
+          itemKey="1"
+          onClick={() => setSelectedKey('1-1')}
+        >
+          <SidebarItemNext
+            itemKey="1-1"
+            onClick={() => {
+              setSelectedKey('1-1');
+            }}
+          >
+            Child item that's setup incorrectly, it allows text wrapping{' '}
+          </SidebarItemNext>
+          <SidebarItemNext
+            itemKey="1-2"
+            onClick={() => setSelectedKey('1-2')}
+            isInQuickNavigation
+          >
+            Child item using isInQuickNavigation property preveting from text
+            being wrapped
+          </SidebarItemNext>
+        </SidebarSubMenuNext>
+      </SidebarNext>
+    </Box>
+  );
+};
+```
+
+
+    
+
+

package/dist/docs/components/SidebarNextExamples.md

@@ -0,0 +1,266 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>This component consists of 3 containers:</p><p>- <code>header</code> - use it to display application name or to reflect application setup progress.</p><p>- <code>children</code> - use it to list all navigation elements linking to all major application pages.</p><p>- <code>footer</code> - use it for a special call to action.</p><p></p><p>Header and footer containers are always sticky.</p>
+- example: 
+```jsx 
+() => {
+  const placeholder = (children, height) => (
+    <StorybookComponents.Placeholder width="100%" height={height} skin="light">
+      {children}
+    </StorybookComponents.Placeholder>
+  );
+
+  return (
+    <StorybookComponents.Stack height="204px">
+      <SidebarNext
+        header={placeholder('Header', '42px')}
+        footer={placeholder('Footer', '42px')}
+        isLoading={false}
+      >
+        {placeholder('Children', '120px')}
+      </SidebarNext>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Skin
+- description: <p>Control the sidebar's style with <code>skin</code> prop:</p><p>- <code>dark</code> (default) - used in <em>Business Manager</em> application.</p><p>- <code>light</code> - used in <em>My Account</em> application.</p><p>- <code>neutral</code> - used in <em>Media Manager</em>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack height="90px">
+  <SidebarNext skin="dark" selectedKey="1-2" isLoading={false}>
+    <SidebarItemNext itemKey="1-1">Dark option 1</SidebarItemNext>
+    <SidebarItemNext itemKey="1-2">Dark option 2</SidebarItemNext>
+  </SidebarNext>
+  <SidebarNext skin="light" selectedKey="1-2" isLoading={false}>
+    <SidebarItemNext itemKey="1-1">Light option 1</SidebarItemNext>
+    <SidebarItemNext itemKey="1-2">Light option 2</SidebarItemNext>
+  </SidebarNext>
+  <SidebarNext skin="neutral" selectedKey="1-2" isLoading={false}>
+    <SidebarItemNext itemKey="1-1">Neutral option 1</SidebarItemNext>
+    <SidebarItemNext itemKey="1-2">Neutral option 2</SidebarItemNext>
+  </SidebarNext>
+</StorybookComponents.Stack>;
+```
+
+### Skeleton
+- description: <p>Toggle component's loading state with <code>isLoading</code> prop. Prop's default value is <code>true</code>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack height="270px">
+  <SidebarNext
+    isLoading={true}
+    header={
+      <StorybookComponents.Placeholder width="100%" height="42px" skin="light">
+        Header
+      </StorybookComponents.Placeholder>
+    }
+    footer={
+      <StorybookComponents.Placeholder width="100%" height="42px" skin="light">
+        Footer
+      </StorybookComponents.Placeholder>
+    }
+  />
+</StorybookComponents.Stack>;
+```
+
+
+
+
+## Developer Examples
+
+
+### Control selected state
+- description: <p>Control which sidebar option is selected by passing a key number with <code>selectedKey</code> prop in <code><SidebarNext/></code> component.</p><p></p><p>Specify each sidebar option's key number with <code>itemKey</code> prop in <code><SidebarItemNext/></code> component.</p><p></p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('2');
+
+  return (
+    <Box height="120px">
+      <SidebarNext isLoading={false} selectedKey={selectedKey}>
+        <SidebarItemNext itemKey="1" onClick={() => setSelectedKey('1')}>
+          Option 1
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="2" onClick={() => setSelectedKey('2')}>
+          Option 2
+        </SidebarItemNext>
+        <SidebarItemNext itemKey="3" onClick={() => setSelectedKey('3')}>
+          Option 3
+        </SidebarItemNext>
+      </SidebarNext>
+    </Box>
+  );
+}
+```
+
+### Toggle sidebar&#39;s visibility
+- description: <p>Set the sidebar as visible or hidden using <code>hidden</code> prop.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('1');
+  const [hidden, setHidden] = React.useState(false);
+
+  return (
+    <Box overflow="hidden">
+      <StorybookComponents.Stack height="264px">
+        <SidebarNext
+          selectedKey={selectedKey}
+          isLoading={false}
+          hidden={hidden}
+        >
+          <StorybookComponents.Placeholder skin="light" height="240px">
+            Children
+          </StorybookComponents.Placeholder>
+        </SidebarNext>
+        <Button onClick={() => setHidden(!hidden)}>Toggle Sidebar</Button>
+      </StorybookComponents.Stack>
+    </Box>
+  );
+};
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Sidebar in composer application
+- description: <p>Some applications like many Wix composers require a lot of horizontal space to make the app effective.</p><p></p><p>Therefore it's allowed to add an additional action in the composer header allowing to toggle sidebar's visibility.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedKey, setSelectedKey] = React.useState('5')
+  const [hidden, setHidden] = React.useState(false)
+
+  return (
+    <Box overflow="hidden" height="500px">
+      <Box>
+        <SidebarNext
+          selectedKey={selectedKey}
+          isLoading={false}
+          hidden={hidden}
+          header={
+            <SidebarHeaderNext
+              title="Let's setup the site"
+              subtitle={
+                <TextButton
+                  skin="light"
+                  size="tiny"
+                  suffixIcon={
+                    <Box
+                      height="15px"
+                      width="18px"
+                      marginTop="2px"
+                      verticalAlign="middle"
+                    >
+                      <Icons.ChevronRightSmall />
+                    </Box>
+                  }
+                >
+                  View all steps
+                </TextButton>
+              }
+            ></SidebarHeaderNext>
+          }
+          footer={
+            <Box width="100%" align="center" padding="18px 0px">
+              <TextButton
+                size="small"
+                skin="light"
+                prefixIcon={<Icons.QuickAccessSmall />}
+              >
+                Quick Access
+              </TextButton>
+            </Box>
+          }
+        >
+          <SidebarItemNext itemKey="1" onClick={() => setSelectedKey('1')}>
+            Home
+          </SidebarItemNext>
+          <SidebarItemNext itemKey="2" onClick={() => setSelectedKey('2')}>
+            Activity
+          </SidebarItemNext>
+          <SidebarDividerNext />
+          <SidebarSubMenuNext
+            title="Contacts"
+            itemKey="3"
+            onClick={() => setSelectedKey('3-1')}
+          >
+            <SidebarItemNext
+              itemKey="3-1"
+              onClick={() => setSelectedKey('3-1')}
+            >
+              Contacts
+            </SidebarItemNext>
+            <SidebarItemNext
+              itemKey="3-2"
+              onClick={() => setSelectedKey('3-2')}
+            >
+              Segments
+            </SidebarItemNext>
+            <SidebarItemNext
+              itemKey="3-3"
+              onClick={() => setSelectedKey('3-3')}
+            >
+              Site Members
+            </SidebarItemNext>
+            <SidebarItemNext
+              itemKey="3-4"
+              onClick={() => setSelectedKey('3-4')}
+            >
+              Workflows
+            </SidebarItemNext>
+          </SidebarSubMenuNext>
+          <SidebarItemNext itemKey="4" onClick={() => setSelectedKey('4')}>
+            Communications
+          </SidebarItemNext>
+          <SidebarItemNext itemKey="5" onClick={() => setSelectedKey('5')}>
+            Automations
+          </SidebarItemNext>
+          <SidebarDividerNext />
+          <SidebarItemNext itemKey="6" onClick={() => setSelectedKey('6')}>
+            Settings
+          </SidebarItemNext>
+        </SidebarNext>
+      </Box>
+      <Box direction="vertical" width="100%">
+        <ComposerHeader>
+          <ComposerHeader.Actions>
+            <TextButton
+              skin="dark"
+              size="small"
+              prefixIcon={
+                !hidden ? (
+                  <Icons.HideSidebarSmall />
+                ) : (
+                  <Icons.ShowSidebarSmall />
+                )
+              }
+              onClick={() => setHidden(!hidden)}
+            >
+              {!hidden ? 'Hide sidebar' : 'Show sidebar'}
+            </TextButton>
+          </ComposerHeader.Actions>
+        </ComposerHeader>
+        <Box margin="6px 6px 0px 6px" height="100%">
+          <StorybookComponents.Placeholder>
+            Page content
+          </StorybookComponents.Placeholder>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+```
+
+

package/dist/docs/components/SidebarSectionItemExamples.md

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

package/dist/docs/components/SidebarSectionTitleExamples.md

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