@innovaccer/design-system 2.9.0 → 2.10.0

package/docs/src/pages/mobile/components/dialogs/interactions.mdx

@@ -0,0 +1,1250 @@
+### Basic Dialog
+
+<br/>
+
+#### Opening a Modal Bottom sheet
+
+<br/>
+
+<img src='./images/dialogs-10.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+**Dialog**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Relative Position Y',
+        Initial: '+20px',
+        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,
+      },
+      {
+        name: 'Final',
+        displayName: 'Final state',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Entrance Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0, 0, 0.3, 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/>
+
+
+**Overlay**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        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/>
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Entrance Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0, 0, 0.3, 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/>
+
+
+#### Closing a Bottom sheet
+
+<br/>
+
+##### When the action takes the users back
+
+<br/>
+
+<img src='./images/dialogs-11.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+**Dialog**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Relative Position Y',
+        Initial: '0px',
+        Final: '+20px',
+      },
+      {
+        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/>
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<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/>
+
+
+**Overlay**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        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/>
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<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/>
+
+##### When the action takes the users forward
+
+<br/>
+
+<img src='./images/dialogs-12.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+**Dialog**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Relative Position Y',
+        Initial: '0px',
+        Final: '-20px',
+      },
+      {
+        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/>
+
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<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/>
+
+**Overlay**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        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/>
+
+
+**Motion**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '50%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '50%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+**Curve**
+
+<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/>
+<br/>
+
+### Full-Screen Dialog
+
+<br/>
+
+#### Single step
+
+<br/>
+
+<img src='./images/dialogs-13.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+##### Opening the dialog
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Move-in (↑)',
+        Curve: 'Expressive Motion',
+        Duration: 'Entrance Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<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 dialog
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Move-out (↓)',
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 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/>
+
+#### Multi-step
+
+<br/>
+
+<img src='./images/dialogs-14.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+
+##### Opening the dialog
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Move-in (↑)',
+        Curve: 'Expressive Motion',
+        Duration: 'Entrance Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<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/>
+
+##### Navigating to the next steps 
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Slide-in (←)',
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<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/>
+
+##### Navigating back to the previous steps
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Slide-out (→)',
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 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 dialog
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Interaction: 'Move-out (↓)',
+        Curve: 'Expressive Motion',
+        Duration: 'Exit Easing',
+      }
+    ]}
+    schema={[
+      {
+        name: 'Interaction',
+        displayName: 'Type of Interaction',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Curve',
+        displayName: 'Style of Motion',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Duration',
+        displayName: 'Easing',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+
+**Curve**
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Curve: 'cubic-bezier(0.4, 0.14, 1, 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/>
+<br/>