@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,126 @@
+---
+title: Radio
+description:
+  Radio button lets users select one value from a list 
+  of mutually exclusive choices. Whenever a user makes a new selection, 
+  the previously selected option is deselected. If multi-select is required use checkboxes instead of radio. 
+date: 13 Jan 2022
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Types
+
+<br />
+
+##### Basic
+
+<Preview name='default-radio'/>
+
+##### With help text
+
+The radio button can have a help text below the label to provide some extra information about the particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of radio. 
+
+<Preview name='radio-with-help-text'/>
+
+#### Sizes
+
+Radio comes in two sizes: Regular and Tiny.
+
+<Preview name='radio-variants-size'/>
+<br/>
+
+#### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Label',
+        Value: '<Label>',
+        Configurable: 'Optional',
+      },
+      {
+        Property: 'Margin between the control and the label',
+        Value: '8px',
+        Configurable: '❌',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Property',
+        width: '50',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'Value',
+        displayName: 'Value',
+        width: '25%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Configurable',
+        displayName: 'Configurable?',
+        width: '25%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+<br/>
+
+#### Usage
+<br/>
+
+##### Radio group
+
+Radio group consists of a list of multiple options, with a label on the top. The label should clearly state the grouping category or the action to perform. 
+
+*Note: Multiple radio buttons should have a minimum of ***8px*** spacing in between.*
+
+<Preview name='radio-radio-group'/>
+
+##### Alignment
+
+The radio buttons in a group can be aligned either vertically or horizontally. However, it is advisable to stack the radio buttons vertically with one option in a line for easier reading and scanning. If you need to use them horizontally, make sure to space the options appropriately so that it is clear which control goes with which label. 
+
+<Preview name='alignment-of-radio-group'/>
+
+##### Overflow Behaviour 
+
+If the label or the help text with the radio component overflows, wrap it to the next line but make sure that the control and the label are top aligned.
+
+<Preview name='overflow-content'/>
+
+##### Default Selection
+
+<ul>
+  <li>If a radio group is optional to fill, no option from the list should be selected by default. </li>
+  <li>Even if the radio group is mandatory to fill, it is recommended not to have a default option selected in order to avoid submitting that option by mistake. However, if the need arises you have the choice to make an option selected by default. In that case, make sure to select the safest and most likely option. </li>
+</ul>
+<br/>
+
+##### Radio vs Checkbox
+
+Checkboxes allow users to select multiple options whereas radio buttons allow only one selection from a list of mutually exclusive options.
+<br/>
+
+##### Radio vs Dropdown
+
+Radio buttons are recommended to use when there are fewer than 5 options as it is easier for users to scan and select the appropriate option and save an additional click. 
+
+However, if the number of options exceeds 5 or if the space is limited then it is recommended to use dropdowns to better utilize the space.
+
+*image to be made later*
+

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

@@ -0,0 +1,8 @@
+---
+title: Side sheet
+description:
+  Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
+component: sidesheet
+tabs: ['Usage','Interactions', 'Code']
+showMobile: true
+---

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

@@ -0,0 +1,8 @@
+---
+title: Side sheet
+description:
+  Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
+component: sidesheet
+tabs: ['Usage','Interactions', 'Code']
+showMobile: true
+---

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

@@ -0,0 +1,25 @@
+---
+title: Side sheet
+description:
+  Side sheets are used to present a great amount of information as a part of users' primary task while maintaining the context with the background content.
+component: sidesheet
+tabs: ['Usage','Interactions', 'Code']
+showMobile: true
+---
+
+Side sheets are significantly larger than the Modals and hence they can accommodate complex informations and interactions. This way a side sheet works as a sub page in itself while maintaining the context.
+
+### Structure
+
+<Preview name='sidesheet-all'/>
+
+
+
+### Sizes
+
+
+
+### Properties
+
+### Usage
+

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

@@ -0,0 +1,15 @@
+---
+title: Slider
+description:
+  A slider lets user select a value (or range) from a given range of values.
+component: toast
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+### Live Demo
+<br/>
+
+<Preview name='slider-variants-free-slider'/>
+
+<PreviewWithPropTable name='slider-variants-free-slider' />

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

@@ -0,0 +1,49 @@
+---
+title: Slider
+description:
+  A slider lets user select a value (or range) from a given range of values.
+component: toast
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+### Types
+<br/>
+
+#### Based on Usage
+
+Based on the way sliders are used, they are of two types -
+
+##### Discrete slider
+
+In the case of discrete slier, while dragging slider knob will snap from one tick mark to the other.
+No values between two tick marks can be selected.
+
+
+<Preview name='components-slider-variants-disctere-slider'/>
+
+##### Free slider
+
+In the case of free slider, while dragging slider knob can move to each and every intermediate value possible. 
+Values between tick marks can also be selected.
+
+<Preview name='components-slider-variants-free-slider'/>
+
+#### Based on selection
+
+Based on the selection, sliders are of two types -
+
+##### Default slider
+
+The default slider can be used whenever selection of a single value is required out of a range.
+
+
+##### Range slider
+
+Range slider is used if the user wants to select a range instead of a single value.
+
+### Properties
+
+
+### Usage
+

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

@@ -0,0 +1,15 @@
+---
+title: Status hint
+description:
+  Status hint is used to highlight the status of an item
+component: statushint
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+### Live Demo
+<br/>
+
+<Preview name='default-status-hi'/>
+
+<PreviewWithPropTable name='default-status-hi' />

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

@@ -0,0 +1,19 @@
+---
+title: Status hint
+description:
+  Status hint is used to highlight the status of an item
+component: statushint
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+As the name suggests, Status Hints can be used to highlight the status of a resource in tables, lists, headers, etc.
+
+### Appearance
+
+Status hint comes in 5 Appearances -
+
+<Preview name='statushint-variants-appearance'/>
+
+
+

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

@@ -0,0 +1,16 @@
+---
+title: Steppers
+description:
+  Steppers are used to help users keep track in a multi-step workflow
+date: 25 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+### Live Demo
+
+<br/>
+
+<Preview name='stepper-all'/>
+
+<PreviewWithPropTable name='stepper-all' />

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

@@ -0,0 +1,28 @@
+---
+title: Steppers
+description:
+  Steppers are used to help users keep track in a multi-step workflow
+date: 25 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+### Moving to next step
+
+#### Source stepper
+
+#### Destination stepper
+
+#### Source body
+
+#### Destination body
+
+### Moving to the previous step
+
+#### Source stepper
+
+#### Destination stepper
+
+#### Source body
+
+#### Destination body

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

@@ -0,0 +1,201 @@
+---
+title: Steppers
+description:
+  Steppers are used to help users keep track in a multi-step workflow
+date: 25 Jan 2022
+tabs: ['Usage', 'Interactions', 'Code']
+showMobile: true
+---
+
+Steppers are used to help users keep track of their progress in a multi-step workflow. It is recommended to break down a long process into multiple steps using steppers to help users keep track of their progress while completing a task.
+
+<br/>
+
+### Structure
+
+The stepper can be used at different places to serve different purposes. The stepper component is a subset of the Horizontal Navigation component with its icons fixed.
+
+<Preview name='stepper-all' />
+
+### Properties
+
+<br/>
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Height of a stepper item',
+        Value: '32px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Corner radius of the active stepper item',
+        Value: '16px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Margin for the item (top, right, bottom, left)',
+        Value: '0px, 1px, 0px, 1px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Spacing between two stepper items',
+        Value: '0px',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Leading Icon',
+        Value: 'Depending upon the state of a step, the icon can take any one of the following values: check_circle OR radio_button_unchecked',
+        Configurable: '❌',
+      },
+      {
+        Property: 'Label',
+        Value: '<Label>',
+        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/>
+
+#### Navigating through steps
+
+Users cannot visit any upcoming steps however they can visit any previous steps given the step was done or skipped.
+
+<img src='./images/stepper-1.gif' width='100%' height='auto'/>
+
+<br/>
+<br/>
+<br/>
+
+#### Placement
+
+<br/>
+
+##### In Page Headers
+
+Steppers are commonly used in page headers. Any action which is used collectively for the whole process e.g. Finish Later etc. should be accommodated in the header while the step related actions such as Next, Skip, etc. should be accommodated in the body.
+
+![Steppers in level 1 page header](./images/stepper-2.png)
+
+<br/>
+<br/>
+
+##### Standalone
+
+Steppers can also be used separately without the page header. The actions will be at the bottom of the layout. This variant is commonly used for onboarding.
+
+![Standalone steppers](./images/stepper-3.png)
+
+<br/>
+<br/>
+
+#### Actions Placement
+
+The actions specific to any step will be located at the bottom of the content of that step, while if there is any action that is for the whole process it will be accommodated in the page header itself. 
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        Property: 'Step specific action',
+        Value: 'Next, Cancel, Previous, or Skip',
+        Configurable: 'in Body',
+      },
+      {
+        Property: 'Collective action',
+        Value: 'Finish later, Save as draft',
+        Configurable: 'in Page Header',
+      },
+    ]}
+    schema={[
+      {
+        name: 'Property',
+        displayName: 'Action',
+        width: '34%',
+        sorting: false,
+        separator: true,
+        cellType: 'DEFAULT'
+      },
+      {
+        name: 'Value',
+        displayName: 'Examples',
+        width: '33%',
+        sorting: false,
+        separator: true
+        
+      },
+      {
+        name: 'Configurable',
+        displayName: 'Position',
+        width: '33%',
+        sorting: false,
+        separator: true
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+<br/>
+
+![Actions placement](./images/stepper-4.png)
+
+<br/>
+<br/>
+
+#### Skipping a step
+
+A stepper can also have a skippable/optional step. Users can skip the step for the time being and can navigate back to it, to fill it again before completing the progress. 
+
+In case of an optional step, an additional step-specific action "Skip" gets added on the left of the primary action. 
+
+![Skipping a step](./images/stepper-5.png)
+
+<br/>
+<br/>
+
+##### Skipping the last step
+
+In case the last step is supposed to be optional, relabel the Skip button to **Skip** and **Finish**.
+
+![When the last step of the row is skippable](./images/stepper-6.png)
+
+<br/>
+<br/>
+

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

@@ -0,0 +1,16 @@
+---
+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
+---
+
+#### Live demo
+
+<br/>
+
+<Preview name='switch-default-switch' />
+
+<PreviewWithPropTable name='switch-default-switch' />