@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/pages/components/table/usage.mdx

@@ -0,0 +1,364 @@
+---
+title: Table
+description: Tables are used for arranging information in a tabular format by laying out resource items, displaying data heavily based on numbers, or a list of homogenous items in their simplest form.
+component: Table
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Types
+
+<br/>
+
+##### Resource table
+
+A table of resources where **a resource is an object in itself and has a detailed view linked to it.** 
+
+Usually, there is only one resource table on a page. Think of a resource as - a campaign, a measure, a workspace, etc.
+
+To reduce noise, a resource table doesn’t have column dividers.
+<Preview name='resource-table' />
+
+##### Data table
+
+A data table is only meant for information consumption. It can occasionally contain minor actions such as copy, edit, remove, etc. Since the data can be dense, it can also have column dividers for subtle distinctions among columns. This way a data table also resembles spreadsheet-like tools which users are already familiar with.
+
+If in some rare cases the data in a cell needs to be edited, it is recommended to use inline editable fields in those cases.
+
+<Preview name='data-table' />
+
+##### Table as a list
+
+The table component can also be used to generate a list that has a simple structure than a table. A list is a subset of a table in a way that it does not contain the header row (and hence no columns). It comes in two options -
+
+###### Option list
+
+A list of options where an option is an entity that a user can select/pick.
+
+<Preview name='table-as-option-list' />
+
+###### Description list
+
+A list of items containing simple information which is meant for consumption only.
+
+It can occasionally contain minor actions such as copy, edit, remove, etc.
+
+<Preview name='table-as-description-list' />
+
+#### Sizes 
+
+There are 3 types of sizes available for use which only differ in the vertical padding and header row height -
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        type: 'Standard',
+        header: '40px',
+        bodyv: '12px',
+        bodyh:'12px',
+      },
+      {
+        type: 'Compressed',
+        header: '32px',
+        bodyv: '8px',
+        bodyh:'12px',
+      },
+      {
+        type: 'Tight',
+        header: '32px',
+        bodyv: '4px',
+        bodyh:'12px',
+      },
+    ]}
+    schema={[
+      {
+        name: 'type',
+        displayName: 'Type',
+        width: '20%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'header',
+        displayName: 'Header row height',
+        width: '20%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'bodyv',
+        displayName: 'Body row padding (vertical)',
+        width: '30%',
+        sorting: false,
+        separator: true
+      },
+      {
+        name: 'bodyh',
+        displayName: 'Body row padding (horizontal)',
+        width: '30%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+##### Standard table
+
+<br/>
+
+<Preview name='standard-table' />
+
+##### Compressed table
+
+<br/>
+
+<Preview name='compressed-table' />
+
+##### Tight table
+
+This size is typically suited for information-dense data tables.
+
+<Preview name='tight-table' />
+
+<br/>
+
+#### Usage
+
+<br/>
+
+##### Table background
+
+###### Default Card
+
+The table is typically laid out on the default card, which helps in differentiating it from the background gray color.
+
+![Table on a default card](./images/table-1.png)
+
+###### Flat card
+
+There can be cases when the table has to be used on a side sheet or a full-screen modal where the background is white. In that case, flat card is used instead of the default card.
+
+![Table on a flat card](./images/table-2.png)
+
+##### Nested table
+
+###### With column extension
+
+<Preview name='nested-rows' />
+
+###### With nested card
+
+<Preview name='nested-table-with-nested-cards' />
+
+##### Table header
+
+The position of the header is fixed at the top so that the rows scroll between the header and footer.
+
+###### Resource and Data table
+
+The headers for these tables have a ‘Showing x items’ label and optional ‘Search’ input, filtering options.
+
+![Resource and data table](./images/table-3.png)
+
+###### Table as a list
+
+Checkbox precedes the 'Showing x items' label in the header row when using the table as a list since it doesn't have the column header row.
+As there are no columns, hence there is no option to Sort. In that case, use the Search + Sort variant of the header where there is a dropdown for sorting following the search input.
+
+![Table as a list](./images/table-4.png)
+
+##### Exception in a row
+
+An exception may be added to a specific row such as a failure or a warning. In that case, use the **Subtle badge component** and resize the list to have **8px** padding from the bottom. 
+
+This behavior is not available out of the box and hence a custom cell should be used to design and build this.
+
+![Exception in a row](./images/table-5.png)
+
+##### Custom cell
+
+Standard table cells cover the most frequent use cases. For the other use cases, a custom cell can be created by using the **Emply Cell component**. Minimum padding of **12px** from either side of the empty cell is maintained.
+
+![Custom cell](./images/table-6.png)
+
+##### Alignment in table cells
+
+###### Center aligned
+
+Content in table cells should be aligned to the center of the row in cases where the **height of content is similar** in cells across the same row. 
+
+![Center aligned](./images/table-7.png)
+
+###### Top aligned
+
+Content in table cells should be aligned to the top of the row in cases where the **height of content is different** in cells across the same row. 
+
+![Top aligned](./images/table-8.png)
+
+<br/>
+
+##### Column actions
+
+###### Show/Hide columns
+
+This action appears in the extreme right just above the header row.
+
+![Show/Hide columns](./images/table-9.png)
+
+###### Sorting a column
+
+![Sorting a column](./images/table-10.png)
+
+Another way to offer column sorting is by clicking on the column name.
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        click: 'On 1st click',
+        sort: 'sort ascending',
+      },
+      {
+        click: 'On 2nd click',
+        sort: 'sort descending',
+      },
+      {
+        click: 'On 3rd click',
+        sort: 'reset sorting',
+      },
+    ]}
+    schema={[
+      {
+        name: 'click',
+        displayName: 'Number of clicks',
+        width: '50%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'sort',
+        displayName: 'Sorting behaviour',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+<img src='./images/table-11.gif' width='100%' height='auto'/>
+
+<br/>
+
+###### Filtering a column
+
+Although filters in a table are applied using dropdowns, there is a provision to apply filters in a specific column.
+
+![Filtering a column](./images/table-12.png)
+
+<br/>
+
+###### Reordering a column
+
+The cursor changes to Pointing Hand when hovering on a header cell indicating that the column can be picked and moved.
+
+![Reordering a column](./images/table-13.png)
+
+<br/>
+
+##### Pinned Column(s)
+
+**Pinned Column Divider** is used to pin columns to the left so that they get fixed and do not scroll along with the rest of the columns. It is quite handy when the no. of columns is too many and all of them are not visible without scrolling. In that case, the pinning can help freeze the crucial columns in order to maintain the context.
+
+<Preview name='pinned-columns' />
+
+##### Selection
+
+On selection - Sort, Filters, and other actions disappear in lieu of Bulk Action(s). There can be different states and behaviors after selection is triggered -
+
+###### No items selected - the default state
+
+![No items selected](./images/table-14.png)
+
+<br/>
+
+###### A few items selected
+
+When a selection is triggered, there is an option to provide actions related to the selection at the top right.
+
+![A few items selected](./images/table-15.png)
+
+<br/>
+
+###### All items on the page selected
+
+An option to select all the items across all pages is presented in the header.
+
+![All items on the page selected](./images/table-16.png)
+
+<br/>
+
+###### All items selected
+
+An option to clear selection is presented in the header.
+
+![All items selected](./images/table-17.png)
+
+<br/>
+
+##### Sorting
+
+Table header remains fixed when scrolling so as to maintain the connection of the values in the cells with the column headers which helps easy understanding of data.
+
+![All items selected](./images/table-18.png)
+
+<br/>
+
+##### Pagination vs Infinite Scroll
+
+Use pagination over infinite scroll so that the user can navigate to an item’s detail page and return back to the same page. Retaining the scroll position in a long list of items can be resource-intensive and hence infinite scroll is avoided and Pagination is used.
+
+##### Filtering
+
+###### 1. When filters are frequently used
+
+Since the filters are frequently used, there is a dedicated fixed section alongside the table to apply those filters. The applied filters are added as chips just below the search bar to quickly enable/disable an already applied filter.
+Please note that there is no filtering option in the table itself.
+
+![When filters are frequently used](./images/table-19.png)
+
+<br/>
+
+###### 2. When filters are sparingly used
+
+In the case of 4 or fewer filters, all the filters are available in the table card for quick access.
+
+![When filters are sparingly used](./images/table-20.png)
+
+<br/>
+
+In case the need arises to use more than 3 filters, the top 3 filters are available inside the table card as they should be. There is an additional button to add more filters. When clicked, a side panel appears in the right just like the case where filters are frequently used.
+
+The only difference is that this panel can be closed/opened on demand unlike case 1.
+
+![Panel can be closed in this case](./images/table-21.png)
+
+<br/>
+<br/>

package/docs/src/pages/components/tabs/code.mdx

@@ -0,0 +1,15 @@
+---
+title: Tabs
+description:
+  Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
+date: 23 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='tabs-all'/>
+
+<PreviewWithPropTable name='tabs-all' />