@innovaccer/design-system 2.9.0 → 2.10.0

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

@@ -0,0 +1,237 @@
+---
+title: Modals
+description: Modals are used to present information, critical alerts, and confirmations to the users.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Modals are used to present information, critical alerts, and confirmations to the users. Occasionally they can contain short forms to input data from users. 
+They are presented on top of a translucent overlay to maintain context with the background content and hence preventing users from interacting with the background.
+
+If the information or interactions are more complex, consider using a side sheet.
+
+### Types
+<br/>
+
+#### Standard modal
+Standard modals appear in the center of the screen along with an overlay which prevents users from interacting with the background.
+<Preview name="fullscreenmodal-customized" />
+
+#### Full screen modal
+Full screen modals cover the entire screen. They are used when you want the complete undivided attention of users. The prime use case is when the users create a new entity because in such cases the context with the content behind the modal is typically not required.
+
+They should not be used for confirmations, critical alerts or to present information.
+<Preview name="fullscreenmodal-customized" />
+
+### Variants
+#### Standard modal
+##### Dialogs
+Dialogs are used to convey information to users where interaction with that information is not required.
+<Preview name="fullscreenmodal-customized" />
+
+##### Alerts
+Alerts are used to convey critical information before taking a destructive action such as delete, discard, deactivate, etc.
+<Preview name="fullscreenmodal-customized" />
+
+##### Confirmations
+Confirmation dialogs are used to take confirmation from users before taking any important action.
+<Preview name="fullscreenmodal-customized" />
+
+##### Input modals
+Input modals are used to present forms to users such as input fields, dropdowns, etc. 
+<Preview name="fullscreenmodal-customized" />
+
+### Sizes
+#### Standard modal
+Standard modal comes in **3 sizes** basis on the breakpoints -
+<table style="width: 100%">
+    <thead>
+        <tr>
+            <th align="left">Size</th>
+            <th align="left">Breakpoint &#60; = small</th>
+            <th align="left">Breakpoint = medium</th>
+            <th align="left">Breakpoint = &#62; large</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Small</td>
+            <td>10 columns</td>
+            <td>4 columns</td>
+            <td>3 columns</td>
+        </tr>
+        <tr>
+            <td>Medium</td>
+            <td>10 columns</td>
+            <td>6 columns</td>
+            <td>4 columns</td>
+        </tr>
+        <tr>
+            <td>Medium</td>
+            <td>10 columns</td>
+            <td>8 columns</td>
+            <td>6 columns</td>
+        </tr>
+    </tbody>
+</table>
+<br/>
+
+**Note**: While designing, only design as per the large breakpoint case (width >= 992 pixels).
+
+##### Small
+<br/>
+
+![Small size modal](./images/modals-1.png)
+<br/>
+<br/>
+
+##### Medium
+<br/>
+
+![Medium size modal](./images/modals-2.png)
+<br/>
+<br/>
+
+##### Large
+<br/>
+
+![Large size modal](./images/modals-3.png)
+<br/>
+<br/>
+
+#### Full screen modal
+The content of a full screen modal comes in **2 sizes** basis on the breakpoints -
+<table style="width: 100%">
+    <thead>
+        <tr>
+            <th align="left">Size</th>
+            <th align="left">Breakpoint &#60; = small</th>
+            <th align="left">Breakpoint = medium</th>
+            <th align="left">Breakpoint = &#62; large</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Default</td>
+            <td>12 columns</td>
+            <td>6 columns</td>
+            <td>4 columns</td>
+        </tr>
+        <tr>
+            <td>Large</td>
+            <td>12 columns</td>
+            <td>8 columns</td>
+            <td>6 columns</td>
+        </tr>
+    </tbody>
+</table>
+<br/>
+
+**Note**: Content here refers to the section appearing in the center of the full screen modal.
+
+##### Default
+<br/>
+
+![Default size full screen modal](./images/modals-4.jpg)
+<br/>
+<br/>
+
+##### Large
+<br/>
+
+![Large size full screen modal](./images/modals-5.jpg)
+<br/>
+<br/>
+
+
+### Usage
+<br/>
+
+#### Positioning and scaling of modals
+Modals are vertically center-aligned. They scale vertically in case the content is long enough, until reaching 64px from the screen’s top and bottom edge. In those cases, a scroll is introduced as well.
+
+> A top and bottom margin of 64px allows to best utilize the space on the viewport and maximize the content area of the modal.
+
+![Positioning and scaling of modals](./images/modals-6.png)
+<br/>
+<br/>
+
+#### Default focus on secondary action
+By default, the **secondary** action should be in its focused state when the modal appears. This helps to avoid the trigger of primary action (especially the delete action) by accidental pressing of Enter key.
+
+![Default focus on secondary action](./images/modals-7.png)
+<br/>
+<br/>
+
+#### The order of the action buttons
+The primary and secondary actions appear at the bottom right in a modal. However, the order in which they appear has to be the same regardless of the nature of the primary action (create, delete, etc.). Listing primary actions last improves the flow, because the modal then [“ends” with its conclusion](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/). Also, keeping the order the same makes the position of actions predictable.
+
+![Order of the action buttons](./images/modals-8.png)
+<br/>
+<br/>
+
+#### Using in conjunction with the message component
+Message component can be used in the body of the modal in case the need arises. It should always **appear at the top** in the body section.
+
+For example, this can be helpful when you want -
+1. The users to be aware of the consequences their actions can have
+2. To show a critical error, etc.
+
+![Message component in modals](./images/modals-2.png)
+<br/>
+<br/>
+
+#### Dividers
+The dividers in the header and the footer should **only** be shown when the content is scrollable.
+
+![Without dividers](./images/modals-9.png)
+<br/>
+
+![With dividers](./images/modals-10.png)
+<br/>
+<br/>
+
+#### Scrollable content
+You should avoid adding scrollable content in a modal as they are meant to be used to convey concise information, alerts, and confirmations. But there can be cases when scrolling is unavoidable. 
+
+Few points to keep in mind then -
+* Scrolling becomes active only when the content overflows the modal i.e. the max height of the modal is achieved. Max height of a modal is the height of the screen with a margin of 64px from top and bottom.
+* To indicate that the content can be scrolled, use a scrollbar and show the dividers in both the header and the footer component. This helps to convey that the header and the footer are fixed.
+<Preview name="fullscreenmodal-customized" />
+
+#### Closing the modal
+Clicking outside the modal should **not** cancel the current process and close the modal by default. However, this behavior is configurable and can be turned **on** for dialogs only since they just present information and any sort of user interaction is not required there. Pressing **ESC** key on the keyboard does the same.
+<br/>
+
+#### Using forms
+Forms with simple inputs can be used inside a modal. For more complex forms and interactions, **side sheets** should be considered.
+<br/>
+
+#### Steppers
+Steppers can also be used in a modal as long as the content is concise and short. The rule of thumb is to use side sheets when the content is large and complex.
+
+![Steppers in a modal](./images/modals-11.png)
+<br/>
+<br/>
+
+#### Full screen modals
+<br/>
+
+##### Lifetime of a full screen modal
+Full screen modal is initialized and displayed when a user clicks on a “Create …” entity button. It is de-initialized and closed as soon as that entity is created.
+**DO NOT** use full screen modals for workflows involving multiple steps.
+
+##### Two steps workflow - Back button
+To maintain simplicity, full screen modals are only supposed to have 1 step. But even then, there can be cases when a two steps workflow is required in order to create an entity. In that case, the header of the full screen modal can be updated to include a back button.
+<Preview name="fullscreenmodal-customized" />
+
+##### Action buttons
+Just like the default modals, the action buttons appear at the bottom right and follows the same order rules.
+
+![Action buttons in a full screen modal](./images/modals-12.jpg)
+<br/>
+<br/>
+
+#### Scrolling behavior
+Unlike default modals, the header and footer are **not fixed** in the full screen modals. So the content goes beneath the fold like this -
+<Preview name="fullscreenmodal-customized" />

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

@@ -0,0 +1,5 @@
+### Live Demo
+
+<Preview name='horizontalnav-default-horizontal-navigation'/>
+
+<PreviewWithPropTable name='horizontalnav-default-horizontal-navigation'/>

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

@@ -0,0 +1 @@
+*to be added*

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

@@ -0,0 +1,132 @@
+---
+title: Navigation - Horizontal
+description: Horizontal navigation helps the users to quickly move among different pages in a module.
+tabs: ['Usage', 'Code', 'Interactions']
+showMobile: true
+---
+
+Horizontal navigation helps the users to quickly move among different pages in a module. It is typically found at the top of a section/page e.g. in the page header.
+
+### Variants
+<br/>
+
+#### Default
+
+This variant consists only of a label.
+
+<Preview name='horizontalnav-default-horizontal-navigation'/>
+
+#### With Icon
+
+This variant consists of an icon and a label.
+
+<Preview name='horizontalnav-horizontal-navigation-with-icon'/>
+
+#### With Count
+
+This variant consists of the pill component and a label. The pill component helps display the count involved in a navigation item.
+
+<Preview name='horizontalnav-horizontal-navigation-with-count'/>
+
+### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Height of a nav item',
+        Value: '32px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Corner radius of the item',
+        Value: '16px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Margin for the item (top, right, bottom, left)',
+        Value: '0px, 1px, 0px, 1px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Spacing between nav items',
+        Value: '0px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Maximum no. of nav items',
+        Value: '4',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Maximum value of count',
+        Value: '99+',
+        Configurable: '❌',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Value',
+        displayName: 'Value',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Configurable',
+        displayName: 'Configurable?',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+### Usage
+
+<br/>
+
+#### Alignment
+
+Horizontal navigation at the top of a section or page can have one of the following two alignment options:
+
+-   Center Aligned
+-   Left Aligned
+
+<br/>
+
+##### Center Aligned
+
+Use this type of alignment when there are no space constraints.
+
+![Center aligned](./images/navigationhoriz-1.png)
+
+<br/>
+<br/>
+
+##### Left Aligned
+
+Use this type of alignment when there is a space constraint. Often times there is not much space available in a component e.g. in modals, side sheets, etc. In such cases, horizontal navigation comes just below the header.
+
+<Preview name='horizontalnav-left-aligned-navigation-tabs'/>
+
+![Left aligned](./images/navigationhoriz-2.png)
+
+<br/>
+<br/>

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

@@ -0,0 +1,5 @@
+### Live Demo
+
+<Preview name='verticalnav-child-items-with-icons'/>
+
+<PreviewWithPropTable name='verticalnav-child-items-with-icons'/>

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

@@ -0,0 +1 @@
+*To be added*

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

@@ -0,0 +1,259 @@
+---
+title: Navigation - Vertical
+description: Vertical navigation helps the users to quickly move among different pages in a module.
+tabs: ['Usage', 'Code', 'Interactions']
+showMobile: true
+---
+
+Vertical navigation helps the users to quickly move among different pages in a module just like the horizontal navigation. The key difference here is that the navigation items are laid out vertically and hence there is virtually no limit on the number of navigation items to be displayed.
+
+### Types
+
+<br/>
+
+#### Flat
+
+<Preview name='components-verticalnav-flat-edged-vertical-navigation'/>
+
+#### Rounded
+
+Rounded variant comes handy when the navigation is not at the extreme left. Hence the left part of the selected navigation item is rounded and not flat.
+
+<Preview name='components-verticalnav-round-edged-vertical-navigation'/>
+
+### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Panel width',
+        Value: '256px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Height of a nav item',
+        Value: '36px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Width of a nav item',
+        Value: 'auto',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Panel collapse/expand action icon',
+        Value: 'keyboard_arrow_left/keyboard_arrow_right icon',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Section',
+        Value: '<Label> + Divider',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Icons in panel',
+        Value: '<Icons>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Icon size',
+        Value: '16x16px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Count (in parent)*',
+        Value: '<Count>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Count (in child)',
+        Value: '<Count>',
+        Configurable: 'Optional',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Value',
+        displayName: 'Value',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Configurable',
+        displayName: 'Configurable?',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Note**: Count in parent item is supported only when it does not have children.
+
+<br/>
+<br/>
+
+### Usage
+
+<br/>
+
+#### Maximum levels
+
+To reduce the unnecessary visual clutter, a maximum of two levels are supported in the vertical navigation. If more than two levels are needed, one can use tabs, horizontal navigation, or secondary navigation inside the page.
+
+<br/>
+
+#### Collapsing a panel
+
+<br/>
+
+##### Parent Item - Without Icons
+
+The panel cannot be collapsed when the parent items do not have icons.
+
+![Parent Item - Without Icons](./images/navigationvertical-1.png)
+
+<br/>
+<br/>
+
+##### Parent Item - With Icons
+
+<br/>
+
+![Parent Item - With Icons](./images/navigationvertical-2.png)
+
+<br/>
+<br/>
+
+##### Child Item - Without Icons
+
+In this case, the panel will collapse to the icons of the parent items. In the collapsed view, the parent having the selected child will be shown as active.
+
+![Child Item - Without Icons](./images/navigationvertical-3.png)
+
+<br/>
+<br/>
+
+##### Child Item - With Icons
+
+The icons of children will be visible in the collapsed panel only if the parent was initially expanded.
+
+![Child Item - With Icons](./images/navigationvertical-4.png)
+
+<br/>
+<br/>
+
+#### Hover on collapsed panel
+
+Hovering over the collapsed panel expands it in overlay mode.
+
+<Preview name='verticalnav-hoverable-vertical-navigation'/>
+
+#### Scrolling when the nav overflows
+
+The toggle panel button is differentiated with a shadow and a divider if the content inside the nav panel becomes scrollable.
+
+![Scrolling when the nav overflows](./images/navigationvertical-6.png)
+
+<br/>
+<br/>
+
+#### Grouping
+
+It is possible to group navigation items into categories. Grouping is restricted to the parent level, to keep the navigation simple.
+
+##### Parent Item - Without Icons
+
+**Example 1:**
+
+As the parent items do not have icons, the panel will be non-collapsible.
+
+![Parent Item - Without Icons](./images/navigationvertical-7.png)
+
+<br/>
+
+**Example 2:**
+
+As the parent items do not have icons, the panel will be non-collapsible.
+
+![Parent Item - Without Icons](./images/navigationvertical-8.png)
+
+<br/>
+<br/>
+
+##### Parent Item - With Icons
+
+In this case, the section title and the subsequent divider will disappear when the panel is collapsed.
+
+![Parent Item - With Icons](./images/navigationvertical-9.png)
+
+<br/>
+<br/>
+
+#### Secondary nav panel
+
+The width of the nav items here will be decided on the basis of the grid that the particular screen size supports.
+
+Just like the primary navigation panel, the secondary navigation panel also supports up to two levels of navigation.
+
+The secondary panel will be non-collapsible for all the cases.
+
+<br/>
+
+##### Inside a Card
+
+If the secondary navigation panel is used inside a card, the nav items used will be having a flat left edge.
+<Preview name='verticalnav-secondary-vertical-navigation'/>
+
+##### Floating Panel
+
+If the secondary navigation panel is floating, the nav items used will be having rounded edges.
+<Preview name='verticalnav-round-edged-vertical-navigation'/>
+
+**Note:** The width of nav items here is derived based on the grid.
+
+<br/>
+
+####  Expand/Collapse Parent Item
+
+Clicking over the collapsed parent item for the first time will expand the particular parent item. Clicking again will collapse the parent item.
+
+![Collapsing the parent item](./images/navigationvertical-12.png)
+![Expanding the parent item](./images/navigationvertical-13.png)
+
+**Note**: If a parent item having an active child is collapsed then after collapsing, the parent will be in the active state.
+
+<br/>
+
+#### Custom Panel
+
+The navigation panel can be customized to accommodate content other than the navigation items. In case of collapsing such panel, only the collapsed navigation items will be shown.
+
+![Custom panel](./images/navigationvertical-14.png)
+
+<br/>
+<br/>
+
+#### Dynamically adding a new item
+
+Navigation items can be added dynamically to the panel on the go. Add item component always appears in the bottom.
+
+<br/>
+<br/>