@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,218 @@
+---
+title: Toast
+description:
+  Toasts are used to show alerts and give feedback to the users about an action they took.
+date: 17 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Showing the toast
+
+*Interaction has been slowed down for display purpose only*
+
+<!-- ![](./images/toast-2.gif) -->
+<img src='./images/toast-2.gif' width='100%' height='auto'/>
+<br/>
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Margin - Left',
+        Initial: 'Outside the frame',
+        Final: '32 px',
+      },
+      {
+        Property: 'Margin - Bottom',
+        Initial: '32 px',
+        Final: '32 px',
+      },
+      {
+        Property: 'Opacity',
+        Initial: '0',
+        Final: '100',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+**Curve**
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0, 0, 0.3, 1)',
+        Duration: '240ms',
+      }
+    ]}
+    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/>
+
+#### Closing the toast
+
+*Interaction has been slowed down for display purpose only*
+
+<!-- ![](./images/toast-3.gif) -->
+<img src='./images/toast-3.gif' width='100%' height='auto'/>
+<br/>
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Margin - Left',
+        Initial: '32px',
+        Final: 'Outside the frame',
+      },
+      {
+        Property: 'Opacity',
+        Initial: '100',
+        Final: '0',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Initial',
+        displayName: 'Initial state',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+**Curve**
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 1)',
+        Duration: '120ms',
+      }
+    ]}
+    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/>
+
+#### Multiple toasts
+
+![](./images/toast-4.png)
+
+<br/>
+
+Only one toast is displayed at a time. Subsequent toasts get stacked with a **margin of 16px** with the latest one on top.
+
+<!-- ![](./images/toast-5.gif) -->
+<img src='./images/toast-5.gif' width='100%' height='auto'/>
+<br/>
+<br/>

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

@@ -0,0 +1,156 @@
+---
+title: Toast
+description:
+  Toasts are used to show alerts and give feedback to the users about an action they took.
+date: 17 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Types
+
+<br />
+
+##### Alert
+
+Alert variant is used to convey an error state or failure which blocks a process. The error may be generic like - ‘User not found', ‘Mobile number already registered’, or failure of a process like - ‘Could not create users’, ‘File items could not be uploaded’, and more.
+
+<Preview name='alert-toast' />
+
+##### Info
+
+Info variant is used to convey information to the users. Information may be generic like - ‘New updates available’, ‘Your consent was recorded’ or convey an in-between state of a process like - ‘Export is in process’, ‘Uploading file items’, and more.
+
+<Preview name='info-toast' />
+
+##### Success
+
+Success variant is used to convey success state of a task/process. Successful completion may be in the form of - ‘Mail sent’, ‘User deleted’, ‘Mobile number verified’, ‘Meeting scheduled’, and more.
+
+<Preview name='success-toast' />
+
+##### Warning
+
+Warning variant is used to convey an interrupted state which delays or prevents a process from completion. Interruption may be in the form - ‘2 permissions denied to Joy Lawson’, ‘1 file could not be downloaded’, and more.
+
+<Preview name='warning-toast' />
+
+<br/>
+
+#### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Icon',
+        Value: 'Icons based on Alert Info Success Warning',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Title',
+        Value: '<Title>',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Description',
+        Value: '<Description>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Action 1',
+        Value: '<Action 1>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Action 2',
+        Value: '<Action 2>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Width',
+        Value: '360px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Margin from left',
+        Value: '32px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Margin from left',
+        Value: '32px',
+        Configurable: '❌',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        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/>
+
+##### Positioning of toast
+
+They appear at the bottom left of the screen and overlay any content. 
+
+![Positioning of toast](./images/toast-1.png)
+<br/>
+<br/>
+
+##### Timeout
+
+Toasts will close when the close button is clicked, or after a timeout – the default is 5 seconds.
+<br/>
+
+##### Toast with actions
+
+Use toast with actions when you want the users to take an action after reading the message.
+
+<Preview name='toast-with-actions' />
+
+##### Toast without description
+
+<Preview name='toast-with-description' />
+
+##### Multiple Toasts
+
+Only one toast is displayed at a time. Subsequent toasts get stacked with a **margin of 16px** with the latest one on top.
+
+<!-- ![](./images/toast-6.gif) -->
+
+<img src='./images/toast-6.gif' width='100%' height='auto'/>
+
+<br/>

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

@@ -0,0 +1,16 @@
+---
+title: Tooltip
+description:
+  Toasts are used to show alerts and give feedback to the users about an action they took.
+date: 24 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Live demo
+
+<br/>
+
+<Preview name='tooltip-all' />
+
+<PreviewWithPropTable name='tooltip-all' />

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

@@ -0,0 +1,219 @@
+---
+title: Tooltip
+description:
+  Toasts are used to show alerts and give feedback to the users about an action they took.
+date: 24 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Showing the tooltip
+
+<br/>
+
+<img src='./images/tooltip-2.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Relative Position X/Y',
+        Initial: '+/- 8px',
+        Final: '0px',
+      },
+      {
+        Property: 'Opacity',
+        Initial: '0',
+        Final: '100',
+      },
+    ]}
+    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, 0, 0.3, 1)',
+        Duration: '120ms',
+        Delay: '400ms'
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Curve',
+        width: '33%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.Curve} />;
+        },
+      },
+      {
+        name: 'Duration',
+        displayName: 'Duration',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Delay',
+        displayName: 'Initial Delay',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+#### Hiding the tooltip
+
+<br/>
+
+<img src='./images/tooltip-3.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Relative Position X/Y',
+        Initial: '0px',
+        Final: '+/- 8px',
+      },
+      {
+        Property: 'Opacity',
+        Initial: '100',
+        Final: '0',
+      },
+    ]}
+    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/tooltip/usage.mdx

@@ -0,0 +1,80 @@
+---
+title: Tooltip
+description:
+  Toasts are used to show alerts and give feedback to the users about an action they took.
+date: 24 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+#### Structure
+
+<Preview name='button-icon-button' />
+
+#### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Maximum width',
+        Value: '256px, after which the text wraps',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Padding from trigger',
+        Value: '4px',
+        Configurable: '❌',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        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/>
+
+##### Positioning
+
+<Preview name='tooltip-variants-position' />
+
+
+##### Default position
+
+The preferred and default side of tooltip is the bottom of the trigger.
+
+![Default position](./images/Tooltip-1.png)
+<br/>
+<br/>

package/docs/src/pages/content/button-guidelines/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Button guidelines
+description: Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.
+tabs: ['Confusing buttons', 'Button glossary']
+---
+
+Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.