@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/ListItemActionExamples.md

@@ -0,0 +1,300 @@
+
+## Feature Examples
+
+
+### Affix
+- description: <p>Add text, icons or a button at the beginning or end of a text field using prefixIcon and suffix.</p>
+- example: 
+```jsx 
+<div
+  style={{
+    width: '284px',
+    height: '120px',
+  }}
+>
+  <DropdownLayout
+    visible
+    options={[
+      listItemActionBuilder({
+        id: 0,
+        prefixIcon: <Icons.Edit />,
+        title: 'option 1',
+        suffix: 'Suffix',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        prefixIcon: <Icons.Edit />,
+        title: 'option 2',
+        suffix: 'Suffix',
+      }),
+      listItemActionBuilder({
+        id: 2,
+        prefixIcon: <Icons.Edit />,
+        title: 'option 3',
+        suffix: 'Suffix',
+      }),
+    ]}
+  />
+</div>;
+```
+
+### Skin
+- description: <p>List item supports three skins:</p><li><code>standard</code> </li><li><code>destructive</code></li><li><code>premium</code></li>
+- example: 
+```jsx 
+<div
+  style={{
+    width: '284px',
+    height: '120px',
+  }}
+>
+  <DropdownLayout
+    visible
+    options={[
+      listItemActionBuilder({
+        id: 0,
+        title: 'standard',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        skin: 'destructive',
+        title: 'destructive',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        skin: 'premium',
+        title: 'premium',
+      }),
+    ]}
+  />
+</div>;
+```
+
+### Disabled
+- description: <p>Supports disabled state.</p><p></p><p>Optionally, tooltips on hover are available to explain disabled states with <code>disabledDescription</code></p>
+- example: 
+```jsx 
+<div
+  style={{
+    width: '284px',
+    height: '120px',
+  }}
+>
+  <DropdownLayout
+    visible
+    options={[
+      listItemActionBuilder({
+        id: 0,
+        title: 'Disabled with Tooltip',
+        prefixIcon: <Icons.Edit />,
+        disabled: true,
+        disabledDescription: 'You can’t edit this item right now',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        title: 'Disabled with Tooltip',
+        prefixIcon: <Icons.Edit />,
+        disabled: true,
+        disabledDescription: 'Editing is restricted for this option',
+      }),
+      listItemActionBuilder({
+        id: 2,
+        title: 'Disabled without tooltip',
+        prefixIcon: <Icons.Edit />,
+        disabled: true,
+      }),
+    ]}
+  />
+</div>
+```
+
+### Text ellipsis
+- description: <p>Text can be set to be ellipsed on tight container width.</p><p></p><p>Tooltips on truncated text will be overridden if the component is disabled. In that case, it will show <code>disabledDescription</code> first.</p>
+- example: 
+```jsx 
+<div style={{ height: '240px' }}>
+  <Layout>
+    <Cell span={6}>
+      <div
+        style={{
+          width: '200px',
+          height: '120px',
+        }}
+      >
+        <DropdownLayout
+          visible
+          options={[
+            listItemActionBuilder({
+              id: 0,
+              as: 'button',
+              title: 'very long message very very',
+              ellipsis: true,
+            }),
+            listItemActionBuilder({
+              id: 1,
+              as: 'button',
+              title: 'very long message very very',
+              ellipsis: true,
+            }),
+            listItemActionBuilder({
+              id: 2,
+              as: 'button',
+              disabled: true,
+              disabledDescription: 'This is disabled',
+              title: 'very long message very very',
+              ellipsis: true,
+            }),
+          ]}
+        />
+      </div>
+    </Cell>
+    <Cell span={6}>
+      <div
+        style={{
+          width: '200px',
+          height: '120px',
+        }}
+      >
+        <DropdownLayout
+          visible
+          options={[
+            listItemActionBuilder({
+              id: 0,
+              as: 'button',
+              title: 'very long message very',
+            }),
+            listItemActionBuilder({
+              id: 1,
+              as: 'button',
+              title: 'very long message very',
+            }),
+            listItemActionBuilder({
+              id: 2,
+              as: 'button',
+              title: 'very long message very',
+            }),
+          ]}
+        />
+      </div>
+    </Cell>
+  </Layout>
+</div>;
+```
+
+### Subtitle
+- description: <p>A subtitle text can be set with <code>subtitle</code></p>
+- example: 
+```jsx 
+<div
+  style={{
+    width: '284px',
+    height: '240px',
+  }}
+>
+  <DropdownLayout
+    visible
+    options={[
+      listItemActionBuilder({
+        id: 0,
+        title: 'option 1',
+        prefixIcon: <Icons.Edit />,
+        subtitle: 'option 1 subtitle',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        title: 'option 2',
+        prefixIcon: <Icons.Edit />,
+        subtitle:
+          'option 2 subtitle - with a very long text that will eventually be wrapped',
+      }),
+      listItemActionBuilder({
+        id: 2,
+        ellipsis: true,
+        title: 'option 3',
+        prefixIcon: <Icons.Edit />,
+        subtitle:
+          'option 3 subtitle - with a very long text that will eventually be truncated by ellipsis',
+      }),
+    ]}
+  />
+</div>;
+```
+
+### Advanced example
+- description: <p>All properties work together and can be combined in various ways. It can be rendered as standalone or as part of dropdown.</p>
+- example: 
+```jsx 
+<Box height="500px">
+  <DropdownLayout
+    visible
+    selectedId={2}
+    maxHeightPixels={720}
+    options={[
+      listItemActionBuilder({
+        id: 0,
+        title: 'Edit profile',
+        prefixIcon: <Icons.Edit />,
+        subtitle: 'Update name or contact info',
+      }),
+      listItemActionBuilder({
+        id: 1,
+        skin: 'destructive',
+        title: 'Delete account',
+        prefixIcon: <Icons.Delete />,
+        subtitle: 'This action can’t be undone',
+      }),
+      listItemActionBuilder({
+        id: 2,
+        disabled: true,
+        title: 'Change email',
+        prefixIcon: <Icons.Email />,
+        subtitle: 'Requires admin approval',
+        suffix: <Icons.LockLocked />,
+        disabledDescription: 'You don’t have permission to change your email',
+      }),
+      { id: 'divider-1', value: '-' },
+      listItemActionBuilder({
+        id: 4,
+        title: 'Manage subscriptions',
+        prefixIcon: <Icons.Pages />,
+        subtitle: 'Includes long text that will wrap if needed',
+      }),
+      listItemActionBuilder({
+        id: 5,
+        ellipsis: true,
+        title: 'View activity log',
+        prefixIcon: <Icons.Activity />,
+        subtitle: 'See login and update history for this account',
+      }),
+      { id: 'divider-2', value: '-' },
+      listItemActionBuilder({
+        id: 6,
+        title: 'Invite to team',
+        prefixIcon: <Icons.Users />,
+        subtitle: 'Send an invitation email',
+        suffix: <Icons.Facebook />,
+      }),
+      listItemActionBuilder({
+        id: 7,
+        title: 'View permissions',
+        prefixIcon: <Icons.LockUnlocked />,
+        subtitle: 'See current role and access level',
+      }),
+      { id: 'divider-3', value: '-' },
+      listItemActionBuilder({
+        id: 8,
+        size: 'small',
+        title: 'Account overview',
+        subtitle: 'Summary of account details',
+      }),
+    ]}
+  />
+</Box>;
+```
+
+
+
+
+    
+
+

package/dist/docs/components/ListItemEditableExamples.md

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

package/dist/docs/components/ListItemSectionExamples.md

@@ -0,0 +1,83 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>A list item section consists of title and suffix areas.</p>
+- example: 
+```jsx 
+<ListItemSection
+  title="title"
+  suffix={
+    <StorybookComponents.Placeholder height="24px">
+      suffix
+    </StorybookComponents.Placeholder>
+  }
+/>;
+
+```
+
+### Types
+- description: <p>Component divides lists by 4 types:</p><li><code>title</code> - acts as a title for list items.</li><li><code>subheader</code> - acts as separator between list items for differentiation</li><li><code>whitespace</code> - adds some padding between list items.</li><li><code>divider</code>  - same as whitespace, but with a line.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <ListItemSection title="Section title" />
+  <ListItemSection type="subheader" title="Subheader title" />
+  <ListItemSection type="divider" />
+  <ListItemSection type="whitespace" />
+</StorybookComponents.Stack>
+```
+
+### Suffix
+- description: <p>Add text, icons or a button at the  end using suffix.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <ListItemSection suffix="Suffix Action" />
+  <ListItemSection suffix={<InfoIcon content="Tooltip content!" />} />
+</StorybookComponents.Stack>
+
+```
+
+### Text overflow
+- description: <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. </p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <ListItemSection
+    ellipsis
+    title="This is a very very very very long text that will be cropped by ellipsis at some point. This is a very very very very long text that will be cropped by ellipsis at some point."
+  />
+  <ListItemSection title="This is a very very very very long text that will *not* be cropped by ellipsis at some point" />
+</StorybookComponents.Stack>
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Grouping
+- description: <p>Use it to group options into categories.</p>
+- example: 
+```jsx 
+<Box direction="vertical">
+  <ListItemSection type="subheader" title="Most popular" />
+  <ListItemSelect title="Wix Stores" />
+  <ListItemSelect title="Wix Bookings" />
+  <ListItemSelect title="Wix Blog" />
+  <ListItemSection type="subheader" title="Other" />
+  <ListItemSection title="Wix Events" />
+  <ListItemSelect title="Wix Forum" />
+  <ListItemSelect title="Wix Restaurants" />
+</Box>
+
+```
+
+

package/dist/docs/components/ListItemSelectExamples.md

@@ -0,0 +1,237 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Component supports two sizes - <code>small</code> and <code>medium</code></p>
+- example: 
+```jsx 
+<Layout cols={1}>
+  <ListItemSelect title="Medium size" />
+  <ListItemSelect size="small" title="Small size" />
+</Layout>;
+```
+
+### Checkbox
+- description: <p>Item can be configured for multi select components by enabling <code>checkbox</code>.</p>
+- example: 
+```jsx 
+<Layout cols={1}>
+  <ListItemSelect title="For single selection" />
+  <ListItemSelect checkbox title="For multi selection" />
+</Layout>;
+```
+
+### Affix
+- description: <p>Component has <code>prefix</code> and <code>suffix</code> areas. If plain text or icon is inserted, component automatically inverts the color when selected.</p>
+- example: 
+```jsx 
+<Layout cols={1}>
+  <ListItemSelect
+    prefix={
+      <Box>
+        <Icons.Toolbox />
+      </Box>
+    }
+    title="Title area"
+    suffix="Suffix area"
+  />
+  <ListItemSelect
+    prefix={<Avatar size="size24" />}
+    title="Title area"
+    suffix={
+      <Box>
+        <Badge size="small" skin="success">
+          Badge
+        </Badge>
+      </Box>
+    }
+  />
+  <ListItemSelect
+    selected
+    prefix={
+      <Box>
+        <Icons.Toolbox />
+      </Box>
+    }
+    title="Title area"
+    suffix="Suffix area"
+  />
+  <ListItemSelect
+    selected
+    prefix={<Avatar size="size24" />}
+    title="Title area"
+    suffix={
+      <Box>
+        <Badge size="small" skin="success">
+          Badge
+        </Badge>
+      </Box>
+    }
+  />
+</Layout>;
+```
+
+### Subtitle
+- description: <p>Additional information, like user email or address can be inserted to subtitle area.</p>
+- example: 
+```jsx 
+<ListItemSelect title="Title area" subtitle="subtitle area" />;
+```
+
+### Disabled
+- description: <p>Component can be disabled, it automatically changes color of all areas if used as text or icon.</p><p></p><p>Tooltip can be added to explain why the component is disabled with <code>disabledDescription</code></p>
+- example: 
+```jsx 
+() => {
+  const listItemSelectOptions = [
+    listItemSelectBuilder({
+      id: 0,
+      title: 'Disabled Action',
+      disabled: true,
+    }),
+  ];
+
+  return (
+    <StorybookComponents.Stack spacing="24px" flexDirection="column">
+      <ListItemSelect
+        disabled
+        prefix={<Icons.Toolbox />}
+        width="400px"
+        title="Disabled without tooltip"
+        subtitle="Subtitle area"
+        suffix="Suffix area"
+        id={0}
+      />
+
+      <ListItemSelect
+        disabled
+        checkbox
+        prefix={<Icons.Toolbox />}
+        width="400px"
+        title="Disabled with tooltip"
+        subtitle="Subtitle area"
+        suffix="Suffix area"
+        id={0}
+        disabledDescription="This action is disabled"
+      />
+    </StorybookComponents.Stack>
+  );
+};
+
+```
+
+### Text cropping
+- description: <p>By default component wraps the text. If needed it can be configured to show ellipsis and display full value on hover.</p><p></p><p>Tooltips on truncated text will be overridden if the component is disabled. In that case, it will show <code>disabledDescription</code> first.</p>
+- example: 
+```jsx 
+<Layout cols={1}>
+ <ListItemSelect
+    ellipsis
+    titleMaxLines={2}
+    subtitleMaxLines={2}
+    title="This is a very very very very very very very very long text that will wrap to 2 lines"
+    suffix="Nice long long long long long Suffix"
+  />
+  <ListItemSelect
+    ellipsis
+    title="This is a very very very very long text that will be cropped by ellipsis at some point"
+    suffix="Nice long long long long long Suffix"
+  />
+  <ListItemSelect
+        disabled
+        ellipsis
+        title="This is a very very very very long text that will be cropped by ellipsis at some point"
+        suffix="Nice long long long long long Suffix"
+        disabledDescription="This is disabled"
+      />
+  
+</Layout>;
+```
+
+### Advanced example
+- description: <p>All properties work together and can be combined in various ways. It can be rendered as standalone or as part of dropdown.</p>
+- example: 
+```jsx 
+<Box height="230px">
+  <DropdownLayout
+    visible
+    selectedId={2}
+    options={[
+      listItemSelectBuilder({
+        id: 0,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Carmel Lloyd',
+        subtitle: 'Kaplan 41',
+        suffix: '31 Dec 2017',
+      }),
+      listItemSelectBuilder({
+        id: 1,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Gracie-May Marsden',
+        subtitle: 'Sderot Ben Gurion 75',
+        suffix: '20 Jan 2000',
+      }),
+      listItemSelectBuilder({
+        id: 2,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Keisha Decker',
+        subtitle: 'Aminadav 18',
+        suffix: '4 Nov 2010',
+      }),
+      listItemSelectBuilder({
+        id: 3,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Ruairidh Fitzgerald',
+        subtitle: 'HaYarkon 228',
+        suffix: '7 Apr 2009',
+        disabled: true,
+        disabledDescription: 'User has unsubscribed and cannot be selected',
+      }),
+      listItemSelectBuilder({
+        id: 4,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Sheldon Chavez',
+        subtitle: 'Pinkas 2',
+        suffix: '2 Dec 2019',
+      }),
+      listItemSelectBuilder({
+        id: 5,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Brandan Gibbs',
+        subtitle: 'Frishman 38',
+        suffix: '1 Feb 2003',
+      }),
+      listItemSelectBuilder({
+        id: 6,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Gordon Holmes',
+        subtitle: 'HaShalom road 66',
+        suffix: '19 Aug 2016',
+      }),
+      listItemSelectBuilder({
+        id: 7,
+        checkbox: true,
+        prefix: <Avatar size="size30" />,
+        title: 'Aaisha Rios',
+        subtitle: 'Arlozorov 101',
+        suffix: '22 Jul 2018',
+      }),
+    ]}
+  />
+</Box>
+```
+
+
+
+
+    
+
+

package/dist/docs/components/ListItemSelectIconExamples.md

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