@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,392 @@
+---
+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.
+date: 24 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Switch - Off to On state
+
+<br/>
+
+<img src='./images/switch-1.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+##### Knob
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Margin-left',
+        Initial: '2 px',
+        Final: '-',
+      },
+      {
+        Property: 'Margin-right',
+        Initial: '-',
+        Final: '2px',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Initial} />;
+        },
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Final} />;
+        },
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 0.3, 1)',
+        Duration: '80ms',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Curve',
+        width: '50%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Curve} />;
+        },
+      },
+      {
+        name: 'Duration',
+        displayName: 'Duration',
+        width: '50%',
+        sorting: false,
+        separator: true
+        
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+##### Background
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Color (left to right)',
+        Initial: '$Stone-Light',
+        Final: '$Jal-Default',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Initial} />;
+        },
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Final} />;
+        },
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 0.3, 1)',
+        Duration: '80ms',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Curve',
+        width: '50%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Curve} />;
+        },
+      },
+      {
+        name: 'Duration',
+        displayName: 'Duration',
+        width: '50%',
+        sorting: false,
+        separator: true
+        
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+#### Switch - On to Off state
+
+<br/>
+
+<img src='./images/switch-2.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+##### Knob
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Margin-left',
+        Initial: '-',
+        Final: '2px',
+      },
+      {
+        Property: 'Margin-right',
+        Initial: '2px',
+        Final: '-',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Initial} />;
+        },
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Final} />;
+        },
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 1)',
+        Duration: '80ms',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Curve',
+        width: '50%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Curve} />;
+        },
+      },
+      {
+        name: 'Duration',
+        displayName: 'Duration',
+        width: '50%',
+        sorting: false,
+        separator: true
+        
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+##### Background
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Color (right to left)',
+        Initial: '$Jal-Default',
+        Final: '$Stone-Light',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Initial} />;
+        },
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Final} />;
+        },
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 1)',
+        Duration: '80ms',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Curve',
+        width: '50%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Curve} />;
+        },
+      },
+      {
+        name: 'Duration',
+        displayName: 'Duration',
+        width: '50%',
+        sorting: false,
+        separator: true
+        
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>

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

@@ -0,0 +1,114 @@
+---
+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.
+date: 24 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Structure
+
+<Preview name='switch-default-switch' />
+
+#### Sizes
+
+Switches come in 2 sizes based on height and width - **Regular** and **Tiny**.
+
+<Preview name='switch-variants-size' />
+
+#### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Color - ON state',
+        Value: '#0070DD (primary)',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Color - OFF state',
+        Value: '#E5E5E5 (stone-light)',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Oval shadow',
+        Value: 'Shadow 20',
+        Configurable: '❌',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Value',
+        displayName: 'Value',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Value} />;
+        },
+      },
+      {
+        name: 'Configurable',
+        displayName: 'Configurable?',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+#### Usage
+
+<br/>
+
+##### 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
+
+<br/>
+
+<ul>
+<li> Tapping a switch is a two-step action: selection and execution. </li>
+<li> Whereas checkbox is just a selection of an option(s) and its execution requires another control, usually a button. </li>
+</ul>
+
+###### Instant response
+
+The options that require an instant response are best selected using a switch.
+
+*image pending*
+
+###### 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
+
+Checkboxes are preferred when an explicit action is required to confirm settings.
+*image pending*
+
+

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

@@ -0,0 +1,14 @@
+---
+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
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='table-async' />
+
+<PreviewWithPropTable name='table-async' />

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

@@ -0,0 +1,97 @@
+---
+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
+---
+
+#### Hover
+
+<br/>
+
+##### 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.
+
+![Hover on resource vs hover on option](./images/table-22.png)
+
+<br/>
+Hover state doesn’t apply to a data table or a description list.
+
+<br/>
+<br/>
+
+##### 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.
+
+*Note: Never use the primary button for this type of use case.*
+
+![Hover on list item](./images/table-23.png)
+
+<br/>
+
+##### 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. 
+
+![Hover on author](./images/table-24.png)
+![Hover on hidden author](./images/table-25.png)
+
+<br/>
+
+##### Exception
+
+A Popover is used to show additional information about an exception.
+
+![Exception](./images/table-26.png)
+
+<br/>
+<br/>
+
+#### States
+
+<br/>
+
+##### Active state
+
+<br/>
+
+![Active state](./images/table-27.png)
+
+<br/>
+
+##### Selected state 
+
+<br/>
+
+![Selected state](./images/table-28.png)
+
+<br/>
+
+##### Focused state
+
+<br/>
+
+![Active state](./images/table-29.png)
+
+<br/>
+
+##### Disabled state
+
+Disable items individually except the action icon button. 
+*Not yet available in components.*
+
+![Active state](./images/table-30.png)
+
+<br/>
+<br/>
+
+
+
+
+
+
+