@innovaccer/design-system 2.9.1 → 3.0.0-2

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

@@ -1,217 +0,0 @@
----
-title: Toast
-description:
-  Toasts are used to show alerts and give feedback to the users about an action they took.
-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

@@ -1,155 +0,0 @@
----
-title: Toast
-description:
-  Toasts are used to show alerts and give feedback to the users about an action they took.
-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

@@ -1,15 +0,0 @@
----
-title: Tooltip
-description:
-  Toasts are used to show alerts and give feedback to the users about an action they took.
-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

@@ -1,218 +0,0 @@
----
-title: Tooltip
-description:
-  Toasts are used to show alerts and give feedback to the users about an action they took.
-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

@@ -1,79 +0,0 @@
----
-title: Tooltip
-description:
-  Toasts are used to show alerts and give feedback to the users about an action they took.
-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

@@ -1,7 +0,0 @@
----
-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.