@wix/design-system 1.193.0 → 1.194.0

package/dist/docs/components/TableListHeaderExamples.md

@@ -0,0 +1,422 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>Table list headers can have any number of columns. The default column value is text, but it can be replaced with other component.</p><p></p><p></p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <TableListHeader
+    options={[
+      { value: <StorybookComponents.Placeholder height="30px"/>},
+      { value: <StorybookComponents.Placeholder height="30px"/> },
+      { value: <StorybookComponents.Placeholder height="30px"/> },
+      { value: <StorybookComponents.Placeholder height="30px"/> },
+    ]}
+  />
+  <TableListHeader
+    options={[
+      { value: 'Name'},
+      { value: 'Email' },
+      { value: 'Phone' },
+      { value: 'Company' },
+    ]}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Number of columns
+- description: <p>To define the required number of columns in a table, use the <code>options</code> array.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <TableListHeader options={[{ value: 'Name', width: '1fr' }]} />
+  <TableListHeader
+    options={[
+      { value: 'Name', width: '1fr' },
+      { value: 'Email', width: '3fr' },
+    ]}
+  />
+  <TableListHeader
+    options={[
+      { value: 'Name', width: '1fr' },
+      { value: 'Email', width: '1fr' },
+      { value: 'Phone', width: '2fr' },
+    ]}
+  />
+  <TableListHeader
+    options={[
+      { value: 'Name', width: '1fr' },
+      { value: 'Email', width: '1fr' },
+      { value: 'Phone', width: '1fr' },
+      { value: 'Company', width: '1fr' },
+    ]}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Column width
+- description: <p>Specify the width of each column in pixels, percentages or frames with the <code>width</code> prop. If not specified, columns will be sized equally.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <TableListHeader
+    options={[
+      { value: 'Name', width: '25%' },
+      { value: 'Email', width: '25%' },
+    ]}
+  />
+  <TableListHeader
+    options={[
+      { value: 'Name', width: '1fr' },
+      { value: 'Email', width: '1fr' },
+    ]}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Column alignment
+- description: <p>Control content alignment in a column with the <code>align</code> prop. It supports 3 options:</p><li><code>left</code> (default)</li><li><code>center</code></li><li><code>right</code></li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <TableListHeader
+    options={[{ value: 'Align:' }, { value: 'Left', align: 'left' }]}
+  />
+  <TableListHeader
+    options={[{ value: 'Align:' }, { value: 'Center', align: 'center' }]}
+  />
+  <TableListHeader
+    options={[{ value: 'Align:' }, { value: 'Right', align: 'right' }]}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Column info
+- description: <p>Include additional info to explain data in a specific column by adding an info icon next to titles. Use <code>infoTooltipProps</code> to show a message that will be displayed in a tooltip on hover.</p>
+- example: 
+```jsx 
+<TableListHeader
+  options={[
+    {
+      value: 'Name',
+      infoTooltipProps: {
+        content: 'Add additional info to explain this column value here',
+      },
+    },
+    {
+      value: 'Email',
+      infoTooltipProps: {
+        content: 'Add additional info to explain this column value here',
+      },
+    },
+    { value: 'Phone' },
+    {
+      value: 'Company',
+      infoTooltipProps: {
+        content: 'Add additional info to explain this column value here',
+      },
+    },
+  ]}
+/>;
+```
+
+### Selectable
+- description: <p>Add a checkbox that allows users to select all the items below the header with the <code>checkboxState</code> prop. It supports 6 values:</p><p></p><li><code>hidden</code> (default)</li><li><code>normal</code></li><li><code>checked</code></li><li><code>indeterminate</code></li><li><code>hasError</code></li><li><code>disabled</code></li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <TableListHeader
+    options={[{ value: 'Hidden (default)' }]}
+    checkboxState="hidden"
+  />
+  <TableListHeader
+    options={[{ value: 'Normal' }]}
+    checkboxState="normal"
+    onCheckboxChange={() => {}}
+  />
+  <TableListHeader
+    options={[{ value: 'Checked' }]}
+    checkboxState="checked"
+    onCheckboxChange={() => {}}
+  />
+  <TableListHeader
+    options={[{ value: 'Indeterminate' }]}
+    checkboxState="indeterminate"
+    onCheckboxChange={() => {}}
+  />
+  <TableListHeader
+    options={[{ value: 'Has error' }]}
+    checkboxState="hasError"
+    onCheckboxChange={() => {}}
+  />
+  <TableListHeader options={[{ value: 'Disabled' }]} checkboxState="disabled" />
+</StorybookComponents.Stack>;
+```
+
+### Sortable
+- description: <p>Allow users to sort data displayed below the header by clicking on column titles with the <code>sortable</code> prop. </p><p></p><li><code>sortDescending</code>for setting which arrow displays next to a column title.</li><li><code>onSortChange</code> is for defining behavior each time a user clicks on a title.</li>
+- example: 
+```jsx 
+<TableListHeader
+  onSortChange={() => {}}
+  options={[
+    { value: 'Name', sortable: true, sortDescending: true },
+    { value: 'Email', sortable: true },
+    { value: 'Phone', sortable: true },
+    { value: 'Company', sortable: true },
+  ]}
+/>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Table with sections
+- description: <p>Table list headers can be used to build custom table layouts, for example, a table that's divided into sections but still allows sorting and filter data.  </p>
+- example: 
+```jsx 
+() => {
+  const indexToColumn = {
+    0: 'fieldName',
+    1: 'type',
+    2: 'appliesTo',
+  };
+
+  const [headerOptions, setHeaderOptions] = React.useState([
+    {
+      value: 'Field name',
+      width: '3fr',
+      sortable: true,
+      sortDescending: true,
+    },
+    {
+      value: 'Type',
+      width: '3fr',
+      sortable: true,
+      sortDescending: true,
+    },
+    {
+      value: 'Applies to',
+      width: '2fr',
+      sortable: true,
+      sortDescending: true,
+    },
+  ]);
+
+  const [items, setItems] = React.useState([
+    { id: 0, text: 'Display info', isHeading: true },
+    {
+      id: 1,
+      fieldName: 'Title',
+      type: 'Public',
+      appliesTo: 'All members',
+    },
+    {
+      id: 2,
+      text: 'Account',
+      isHeading: true,
+    },
+    {
+      id: 3,
+      fieldName: 'First name',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 4,
+      fieldName: 'Last name',
+      type: 'Public',
+      appliesTo: 'All members',
+    },
+    {
+      id: 5,
+      fieldName: 'Email',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 6,
+      fieldName: 'Phone',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 7,
+      fieldName: 'Company',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 8,
+      text: 'Address',
+      isHeading: true,
+    },
+    {
+      id: 9,
+      fieldName: 'Street',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 10,
+      fieldName: 'City',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 11,
+      fieldName: 'Zip code',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+    {
+      id: 12,
+      fieldName: 'Country',
+      type: 'Private',
+      appliesTo: 'All members',
+    },
+  ]);
+
+  const itemStyleProps = {
+    common: {
+      boxSizing: 'border-box',
+      width: '100%',
+      height: '50px',
+      backgroundColor: 'WHITE',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'B20',
+      borderRadius: '6px',
+      verticalAlign: 'middle',
+      paddingLeft: '12px',
+      marginBottom: '0px',
+    },
+    placeholder: {
+      borderStyle: 'none',
+      backgroundColor: 'B50',
+    },
+  };
+
+  const handleDrop = ({ removedIndex, addedIndex }) => {
+    const nextItems = [...items];
+    nextItems.splice(addedIndex, 0, ...nextItems.splice(removedIndex, 1));
+    setItems(nextItems);
+  };
+
+  const renderItem = ({ isPlaceholder, isPreview, item }) => {
+    return (
+      <div>
+        {item.isHeading && (
+          <Card.Subheader
+            title=<Text size="small">{item.text}</Text>
+            skin="neutral"
+          />
+        )}
+        {!item.isHeading && isPlaceholder && (
+          <Box {...itemStyleProps.common} {...itemStyleProps.placeholder}></Box>
+        )}
+        {!item.isHeading && !isPlaceholder && (
+          <TableListItem
+            draggable
+            showDivider
+            onClick={() => {}}
+            options={[
+              { value: <Text>{item.fieldName}</Text>, width: '3fr' },
+              {
+                value: (
+                  <Box gap="SP1" color="D30">
+                    <Icons.LockLockedSmall />
+                    <Text secondary size="small">
+                      {item.type}
+                    </Text>
+                  </Box>
+                ),
+                width: '3fr',
+              },
+              {
+                value: (
+                  <Text secondary skin="primary" size="small">
+                    {item.appliesTo}
+                  </Text>
+                ),
+                width: '2fr',
+              },
+            ]}
+          />
+        )}
+      </div>
+    );
+  };
+
+  const canDrag = ({ item }) => {
+    return !item.isHeading;
+  };
+
+  const sortItems = (index, sortDescending) => {
+    const sortedItems = items
+      .reduce((array, currentItem) => {
+        if (currentItem.isHeading || array[array.length - 1][0].isHeading) {
+          array.push([currentItem]);
+        } else {
+          array[array.length - 1].push(currentItem);
+        }
+
+        return array;
+      }, [])
+      .map(itemsArray => {
+        const returnValueWhenPreviousBigger = sortDescending ? 1 : -1;
+        return itemsArray.sort((a, b) => {
+          if (a[indexToColumn[index]] < b[indexToColumn[index]]) {
+            return -returnValueWhenPreviousBigger;
+          }
+
+          if (a[indexToColumn[index]] > b[indexToColumn[index]]) {
+            return returnValueWhenPreviousBigger;
+          }
+
+          return 0;
+        });
+      })
+      .flat();
+
+    setItems(sortedItems);
+  };
+
+  const handleSort = index => {
+    const sortDescending = headerOptions[index].sortDescending;
+    const nextHeaderOptions = [...headerOptions];
+    nextHeaderOptions[index].sortDescending = !sortDescending;
+    setHeaderOptions(nextHeaderOptions);
+
+    sortItems(index, !sortDescending);
+  };
+
+  return (
+    <Card hideOverflow>
+      <Card.Header
+        title="Customize form"
+        subtitle="Set up fields and decide what info appears on public profile pages"
+      />
+      <Box direction="vertical">
+        <TableListHeader onSortChange={handleSort} options={headerOptions} />
+        <SortableListBase
+          items={items}
+          renderItem={renderItem}
+          onDrop={handleDrop}
+          canDrag={canDrag}
+        />
+      </Box>
+    </Card>
+  );
+};
+```
+
+