@innovaccer/design-system 2.9.0 → 2.10.0

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

@@ -1,22 +1,21 @@
 ---
 title: Switch
-description:
-  Switches are used to toggle between two states in a user interface - ON and OFF, hence resembling the real-life switches used to turn something ON or OFF.
-tabs: ['Usage', 'Interactions', 'Code']
+description: Switches are used to toggle between two states in a user interface - ON and OFF, hence resembling the real-life switches used to turn something ON or OFF.
+tabs: ['Usage', 'Code', 'Interactions']
 showMobile: true
 ---
 
-#### Structure
+### Structure
 
 <Preview name='switch-default-switch' />
 
-#### Sizes
+### Sizes
 
 Switches come in 2 sizes based on height and width - **Regular** and **Tiny**.
 
 <Preview name='switch-variants-size' />
 
-#### Properties
+### Properties
 
 <br/>
 
@@ -74,18 +73,18 @@ Switches come in 2 sizes based on height and width - **Regular** and **Tiny**.
 <br/>
 <br/>
 
-#### Usage
+### Usage
 
 <br/>
 
-##### Switch size
+#### Switch size
 
 The size of the switch depends on the other components appearing around it. If other components are regular in size, then the regular variant of switch should be used. The same goes for the tiny variant.
 
 ![Switch size](./images/switch-3.png)
 <br/>
 
-##### Switch vs Checkbox
+#### Switch vs Checkbox
 
 <br/>
 
@@ -94,18 +93,18 @@ The size of the switch depends on the other components appearing around it. If o
 <li> Whereas checkbox is just a selection of an option(s) and its execution requires another control, usually a button. </li>
 </ul>
 
-###### Instant response
+##### Instant response
 
 The options that require an instant response are best selected using a switch.
 
 *image pending*
 
-###### Multiple choices
+##### Multiple choices
 
 Checkboxes are preferred over switches when multiple options are available and the user has to select one or more options from them. Clicking multiple switches one by one and waiting to see results after each click takes extra time.
 *image pending*
 
-###### Confirmation
+##### Confirmation
 
 Checkboxes are preferred when an explicit action is required to confirm settings.
 *image pending*

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

@@ -1,12 +1,4 @@
----
-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.
-tabs: ['Usage', 'Interactions', 'Code']
-showMobile: true
----
-
-#### Live Demo
-<br/>
+### Live Demo
 
 <Preview name='table-async' />
 

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

@@ -1,15 +1,8 @@
----
-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.
-tabs: ['Usage', 'Interactions', 'Code']
-showMobile: true
----
-
-#### Hover
+### Hover
 
 <br/>
 
-##### Resource vs Option
+#### Resource vs Option
 
 For Resource Table, since it opens the detail page of the item, on hover changes the text to Primary color along with the change in background.
 While for the Options List, the text color remains the same.
@@ -22,7 +15,7 @@ Hover state doesn’t apply to a data table or a description list.
 <br/>
 <br/>
 
-##### List item
+#### List item
 
 There can be instances when you want to show a specific action on hover when the table is used as a list. In that case, a button can be shown at the end.
 
@@ -32,7 +25,7 @@ There can be instances when you want to show a specific action on hover when the
 
 <br/>
 
-##### Author
+#### Author
 
 The name of an author is shown using a tooltip. This is the default behavior of an Avatar and already taken care of in that component. 
 
@@ -41,7 +34,7 @@ The name of an author is shown using a tooltip. This is the default behavior of
 
 <br/>
 
-##### Exception
+#### Exception
 
 A Popover is used to show additional information about an exception.
 
@@ -50,11 +43,11 @@ A Popover is used to show additional information about an exception.
 <br/>
 <br/>
 
-#### States
+### States
 
 <br/>
 
-##### Active state
+#### Active state
 
 <br/>
 
@@ -62,7 +55,7 @@ A Popover is used to show additional information about an exception.
 
 <br/>
 
-##### Selected state 
+#### Selected state 
 
 <br/>
 
@@ -70,7 +63,7 @@ A Popover is used to show additional information about an exception.
 
 <br/>
 
-##### Focused state
+#### Focused state
 
 <br/>
 
@@ -78,7 +71,7 @@ A Popover is used to show additional information about an exception.
 
 <br/>
 
-##### Disabled state
+#### Disabled state
 
 Disable items individually except the action icon button. 
 *Not yet available in components.*

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

@@ -1,15 +1,15 @@
 ---
 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.
-tabs: ['Usage', 'Interactions', 'Code']
+tabs: ['Usage', 'Code', 'Interactions']
 showMobile: true
 ---
 
-#### Types
+### Types
 
 <br/>
 
-##### Resource table
+#### Resource table
 
 A table of resources where **a resource is an object in itself and has a detailed view linked to it.** 
 
@@ -18,7 +18,7 @@ Usually, there is only one resource table on a page. Think of a resource as - a
 To reduce noise, a resource table doesn’t have column dividers.
 <Preview name='resource-table' />
 
-##### Data 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.
 
@@ -26,17 +26,17 @@ If in some rare cases the data in a cell needs to be edited, it is recommended t
 
 <Preview name='data-table' />
 
-##### Table as a list
+#### 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
+##### 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
+##### Description list
 
 A list of items containing simple information which is meant for consumption only.
 
@@ -44,7 +44,7 @@ It can occasionally contain minor actions such as copy, edit, remove, etc.
 
 <Preview name='table-as-description-list' />
 
-#### Sizes 
+### Sizes 
 
 There are 3 types of sizes available for use which only differ in the vertical padding and header row height -
 
@@ -112,19 +112,19 @@ There are 3 types of sizes available for use which only differ in the vertical p
 <br/>
 <br/>
 
-##### Standard table
+#### Standard table
 
 <br/>
 
 <Preview name='standard-table' />
 
-##### Compressed table
+#### Compressed table
 
 <br/>
 
 <Preview name='compressed-table' />
 
-##### Tight table
+#### Tight table
 
 This size is typically suited for information-dense data tables.
 
@@ -132,52 +132,62 @@ This size is typically suited for information-dense data tables.
 
 <br/>
 
-#### Usage
+### Usage
 
 <br/>
 
-##### Table background
+#### Table background
+
+<br/>
 
-###### Default Card
+##### 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
+<br/>
+
+##### 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
+<br/>
+
+#### Nested table
 
-###### With column extension
+##### With column extension
 
 <Preview name='nested-rows' />
 
-###### With nested card
+##### With nested card
 
 <Preview name='nested-table-with-nested-cards' />
 
-##### Table header
+#### 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
+##### 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
+<br/>
+
+##### 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
+<br/>
+
+#### 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. 
 
@@ -185,21 +195,27 @@ This behavior is not available out of the box and hence a custom cell should be
 
 ![Exception in a row](./images/table-5.png)
 
-##### Custom cell
+<br/>
+
+#### 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
+<br/>
+
+#### Alignment in table cells
 
-###### Center aligned
+##### 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
+<br/>
+
+##### 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. 
 
@@ -207,15 +223,17 @@ Content in table cells should be aligned to the top of the row in cases where th
 
 <br/>
 
-##### Column actions
+#### Column actions
 
-###### Show/Hide columns
+##### 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
+<br/>
+
+##### Sorting a column
 
 ![Sorting a column](./images/table-10.png)
 
@@ -265,8 +283,8 @@ Another way to offer column sorting is by clicking on the column name.
 <img src='./images/table-11.gif' width='100%' height='auto'/>
 
 <br/>
-
-###### Filtering a column
+<br/>
+##### Filtering a column
 
 Although filters in a table are applied using dropdowns, there is a provision to apply filters in a specific column.
 
@@ -274,7 +292,7 @@ Although filters in a table are applied using dropdowns, there is a provision to
 
 <br/>
 
-###### Reordering a column
+##### Reordering a column
 
 The cursor changes to Pointing Hand when hovering on a header cell indicating that the column can be picked and moved.
 
@@ -282,23 +300,24 @@ The cursor changes to Pointing Hand when hovering on a header cell indicating th
 
 <br/>
 
-##### Pinned Column(s)
+#### 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
+#### 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 - the default state
+<br/>
 
 ![No items selected](./images/table-14.png)
 
 <br/>
 
-###### A few items selected
+##### A few items selected
 
 When a selection is triggered, there is an option to provide actions related to the selection at the top right.
 
@@ -306,7 +325,7 @@ When a selection is triggered, there is an option to provide actions related to
 
 <br/>
 
-###### All items on the page selected
+##### All items on the page selected
 
 An option to select all the items across all pages is presented in the header.
 
@@ -314,7 +333,7 @@ An option to select all the items across all pages is presented in the header.
 
 <br/>
 
-###### All items selected
+##### All items selected
 
 An option to clear selection is presented in the header.
 
@@ -322,7 +341,7 @@ An option to clear selection is presented in the header.
 
 <br/>
 
-##### Sorting
+#### 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.
 
@@ -330,13 +349,15 @@ Table header remains fixed when scrolling so as to maintain the connection of th
 
 <br/>
 
-##### Pagination vs Infinite Scroll
+#### 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
+#### Filtering
+
+<br/>
 
-###### 1. When filters are frequently used
+##### 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.
@@ -345,7 +366,7 @@ Please note that there is no filtering option in the table itself.
 
 <br/>
 
-###### 2. When filters are sparingly used
+##### 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.
 

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

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

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

@@ -1,16 +1,8 @@
----
-title: Tabs
-description:
-  Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
-tabs: ['Usage', 'Interactions', 'Code']
-showMobile: true
----
-
-#### Navigating to another tab
+### Navigating to another tab
 
 <br/>
 
-##### Source tab
+#### Source tab
 
 <br/>
 
@@ -99,7 +91,7 @@ showMobile: true
 <br/>
 <br/>
 
-##### Active indicator
+#### Active indicator
 
 <br/>
 
@@ -197,7 +189,7 @@ showMobile: true
 <br/>
 <br/>
 
-##### Destination tab
+#### Destination tab
 
 <br/>
 
@@ -295,7 +287,7 @@ showMobile: true
 <br/>
 <br/>
 
-##### Current content
+#### Current content
 
 <br/>
 
@@ -385,7 +377,7 @@ showMobile: true
 <br/>
 
 
-##### Next content
+#### Next content
 
 <br/>
 

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

@@ -1,28 +1,27 @@
 ---
 title: Tabs
-description:
-  Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
-tabs: ['Usage', 'Interactions', 'Code']
+description: Tabs segregate similar kind of content and allow users to navigate between them without switching the context.
+tabs: ['Usage', 'Code', 'Interactions']
 showMobile: true
 ---
 
-#### Types
+### Variants
 
 <br />
 
-##### Basic tabs
+#### Basic tabs
 
 This variation consists of only a label. 
 
 <Preview name='basic-tabs'/>
 
-##### Tabs with Count
+#### Tabs with Count
 
 This variation uses the Pill component to display the count along with the label.
 
 <Preview name='tabs-tabs-with-count'/>
 
-##### Tabs with Icon
+#### Tabs with Icon
 
 This variant consists of an icon along with the label. Icons should only be used when they add additional value to the label. 
 
@@ -30,7 +29,7 @@ For example, with the help of icons, one can easily see the status without actua
 
 <Preview name='tabs-tabs-with-icon'/>
 
-##### Dismissible Tabs
+#### Dismissible Tabs
 
 This variant consists of a Close Icon Button along with the label. It supports the dismissal of the tabs. These tabs can be triggered through an action button. In case the tab is already open on the screen, the action to re-open the tab should be known to the user.
 
@@ -39,7 +38,7 @@ This variant consists of a Close Icon Button along with the label. It supports t
 <br/>
 <br/>
 
-#### Properties
+### Properties
 
 <br/>
 
@@ -110,11 +109,11 @@ This variant consists of a Close Icon Button along with the label. It supports t
 <br/>
 <br/>
 
-#### Usage
+### Usage
 
 <br/>
 
-##### Tabs vs Navigation
+#### Tabs vs Navigation
 
 Tabs have similar kind of content and act as filters. Don’t use tabs to group content that is dissimilar.
 
@@ -134,7 +133,7 @@ If **navigation items and tabs** are used on the same page make sure to use them
 
 <br/>
 
-##### Tabs within other components
+#### Tabs within other components
 
 Tabs are usually paired with components like headers or nested in components like cards, modals, and sidesheets.
 
@@ -150,11 +149,11 @@ Tabs are usually paired with components like headers or nested in components lik
 
 <br/>
 
-##### Tab Label
+#### Tab Label
 
 Tabs should have short and scannable labels, generally limited to a single word. 
 
-##### Maximum Tabs
+#### Maximum Tabs
 
 Too many tabs can unnecessarily clutter the UI. Hence it is recommended **not to use more than 5 tabs** at once.
 

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

@@ -0,0 +1,5 @@
+### Live Demo
+
+<Preview name='components-timepicker-all'/>
+
+<PreviewWithPropTable name='components-timepicker-all'/>

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

@@ -0,0 +1,35 @@
+---
+title: Time picker
+description: Time picker is used for selecting or entering a time value.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Time picker is used for selecting/entering value for time input. It can either be a dropdown from where you can select preset time values or a specialized input where the user can enter the time using keyboard.
+
+### Types
+
+<br/>
+
+#### Using Dropdown
+
+<Preview name='datepicker-date-and-time-picker'/>
+
+#### Using Input
+
+This way users can directly enter the time they want. This method does not limit the time values to specific intervals (15 minutes, 30 minutes, etc.). The colon appears itself.
+
+<Preview name='components-timepicker-all'/>
+
+### Usage
+
+<br/>
+
+#### Using date and time picker together
+
+As soon as a date or date range is selected, time picker dropdown should be triggered so that users can select the time without any additional click.
+
+![Using date and time picker together](./images/timepicker-1.png)
+
+<br/>
+<br/>