@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/pages/mobile/components/metaList/usage.mdx

@@ -0,0 +1,71 @@
+---
+title: Meta list
+description: Meta list is a short horizontal list of meta/secondary information.
+tabs: ['Usage']
+showMobile: true
+---
+
+Meta list is a short horizontal list that helps in displaying secondary or meta-information separated by dots.
+
+### Variants
+#### Default
+The default variant includes just text.
+
+![Default meta list](./images/metaList-1.png)
+<br/>
+
+#### With icon
+This variant comes with an icon in the left preceding the text to provide additional cues regarding the meta/secondary information.
+
+![Meta list with icon in the left](./images/metaList-2.png)
+<br/>
+<br/>
+
+### Sizes
+Meta list comes in two sizes - regular and small.
+
+![Meta list sizes](./images/metaList-3.png)
+
+### Properties
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Property</th>
+      <th style="width:33%; text-align: left;">Value(s)</th>
+      <th style="width:33%; text-align: left;">Default value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Size</td>
+      <td>
+          <ul>
+              <li>Regular</li>
+              <li>Small</li>
+          </ul>
+      </td>
+      <td>Regular</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Icon left<br/><em>(optional)</em></td>
+      <td>&#60;icon name&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Separator</td>
+      <td>
+          <ul>
+              <li>True</li>
+              <li>False</li>
+          </ul>
+      </td>
+      <td>True</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+#### In list item
+List items can use meta list to display secondary/meta information.
+
+![Meta list in the page header](./images/metaList-4.png)
+<br/>

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

@@ -0,0 +1,83 @@
+---
+title: Slider
+description: A slider lets user select a value (or range) from a given range of values.
+tabs: ['Usage']
+showMobile: true
+---
+
+### Types
+
+Based on usage, 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.
+
+![Default slider](./images/slider-1.png)
+
+#### Range slider
+
+Range slider is used if the user wants to select a range instead of a single value.
+
+![Range slider](./images/slider-2.png)
+
+### Variants
+
+Based on selection, sliders have two variants -
+
+#### 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.
+
+![Discrete slider](./images/slider-3.png)
+
+#### 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.
+
+![Free slider](./images/slider-4.png)
+
+### Properties
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Property</th>
+      <th style="width:33%; text-align: left;">Value(s)</th>
+      <th style="width:33%; text-align: left;">Default value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Label<br/><em>(optional)</em></td>
+      <td>&#60;label&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Ticks</td>
+      <td>&#60;ticks&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Numbers<br/><em>(optional)</em></td>
+      <td>&#60;numbers&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Step size</td>
+      <td>&#60;size&#62;</td>
+      <td>1</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+
+#### Pairing with metric inputs
+
+Use slider with metric inputs for better accessibility in the case where **choosing a specific value** is important. 
+
+![Slider paired with metric inputs](./images/slider-5.png)
+
+<br/>
+<br/>

package/docs/src/pages/mobile/components/statusHint/usage.mdx

@@ -0,0 +1,108 @@
+---
+title: Status hint
+description: Status hint is used to highlight the status of an item.
+tabs: ['Usage']
+showMobile: true
+---
+
+Status hints are used to indicate the status of an entity.
+
+### Appearance
+
+Status hint comes in 5 Appearances -
+
+#### Info
+
+<br/>
+<br/>
+
+
+![Info variant](./images/statushint-1.png)
+
+<br/>
+
+#### Warning 
+
+<br/>
+<br/>
+
+![Warning variant](./images/statushint-2.png)
+
+<br/>
+
+#### Success
+
+<br/>
+<br/>
+
+![Success variant](./images/statushint-3.png)
+
+#### Alert
+
+<br/>
+<br/>
+
+![Alert variant](./images/statushint-4.png)
+
+<br/>
+
+#### Default
+
+<br/>
+<br/>
+
+![Default variant](./images/statushint-5.png)
+
+<br/>
+
+### Properties
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Property</th>
+      <th style="width:33%; text-align: left;">Value(s)</th>
+      <th style="width:33%; text-align: left;">Default value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Appearance</td>
+      <td>
+        <ul>
+            <li>Default</li>
+            <li>Info</li>
+            <li>Success</li>
+            <li>Warning</li>
+            <li>Alert</li>
+        </ul>
+      </td>
+      <td>Default</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Label</td>
+      <td>&#60;label&#62;</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage 
+
+<br/>
+
+#### Overflow behavior
+
+When the label is too long to fit the horizontal space available, it wraps to form another line.
+
+![Label overflow in status hint](./images/statushint-6.png)
+
+<br/>
+<br/>
+
+#### Status hint vs. Badge
+
+A status hint is used to indicate the status of an entity whereas a badge is used to tag the entities. 
+
+![Status hint vs Badge in page headers](./images/statushint-7.png)
+
+<br/>
+<br/>

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

@@ -0,0 +1,111 @@
+---
+title: Steppers
+description: Steppers are used to help users keep track in a multi-step workflow
+tabs: ['Usage']
+showMobile: true
+---
+
+Stepper is 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 a stepper to help users keep track of their progress while completing a task.
+
+<br/>
+
+### Structure
+
+![Skipping a step](./images/stepper-1.png)
+
+<br/>
+
+### Properties
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Property</th>
+      <th style="width:33%; text-align: left;">Value(s)</th>
+      <th style="width:33%; text-align: left;">Default value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Height (of a stepper item)</td>
+      <td>4px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Width</td>
+      <td>&#60;width&#62;</td>
+      <td>343px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner radius (of the active stepper item)</td>
+      <td>4px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Spacing between stepper items</td>
+      <td>0px</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+
+<br/>
+
+#### Actions placement
+
+<br/>
+
+##### Back and Next actions
+
+Back and Next actions are placed at the bottom of the screen.
+
+##### Cancel action
+
+To cancel or close the entire process, the close button is present in the header.
+
+
+##### Skip action
+
+To skip a specific step, a label button is used in the header.
+
+![Standalone steppers](./images/stepper-2.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 step” gets added in the header.
+
+![Skipping a step](./images/stepper-3.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-4.png)
+
+<br/>
+<br/>
+
+#### Mandatory vs. Optional step
+
+In case of a mandatory step, the 'Next' button is disabled until and unless all the required fields are completed.
+
+In case of an optional step, the entire step can be skipped using the **"Skip step"** button in top right. But if the users want to fill that step, the **'Next'** button becomes enabled when at least 1 field is completed.
+
+**Note:** If a conditional workflow is triggered in an optional step that has some required fields, the 'Next' button remains disabled until all such fields are completed.
+
+![Skipping a step](./images/stepper-5.png)
+
+#### Closing the process
+
+An action sheet can be used to present additional closing actions such as 'Save as draft' before closing the process using the stepper.
+
+![Skipping a step](./images/stepper-6.png)

package/docs/src/pages/mobile/foundations/layout/index.mdx

@@ -47,4 +47,6 @@ While designing the app interfaces, it's recommended to make the touch targets f
 Along with the size, make sure that the touch targets are separated well enough so that the users don't end up clicking on the wrong component.
 
 ### Background color
-To keep the experience uniform across all the devices, the background color on a mobile app is the same as web i.e. Stone Lightest (#F4F4F4). Sheets and modals have a white background (#FFFFFF).
+To keep the experience uniform across all the devices, the background color on a mobile app is the same as web i.e. Stone Lightest (#F4F4F4). Sheets and modals have a white background (#FFFFFF).
+
+![Safe area in iPhone](./images/layout-2.png)

package/docs/src/pages/mobile/foundations/page-types/index.mdx

@@ -110,217 +110,3 @@ The **Back button (←)** present at the top left is used to navigate back throu
 
 <img style="width: 100%" src="/images/pageTypes-3.gif" alt="Stacking of non-modal pages" />
 <br/>
-
-### Modal Pages
-Modal pages are those which the users can dismiss or cancel. Hence, they are suitable for end-to-end self-contained transactions* such as creating, editing, deleting an entity.
-
-For the limited time frame of these transactions, a modal page takes the users out of the general user flow, lets them focus on the action, and then takes them back to where they started. The data edited or changed through such screens generally requires an action to either save or discard the changes.
-
-The **Cancel button ( X )** present at the top left is used to return to the main flow.
-
-**Note:** Self-contained transactions are those which have a clear start and endpoint such as creating an entity, editing an entity, etc.
-
-##### Properties
-<table style="width: 100%">
-  <tbody>
-    <tr>
-      <th style="width:33%; text-align: left;">Property</th>
-      <th style="width:33%; text-align: left;">Value(s)</th>
-      <th style="width:33%; text-align: left;">Default value</th>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Action</td>
-      <td>Close button (Back button from 2nd step onwards)</td>
-      <td>-</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Background color</td>
-      <td>namak</td>
-      <td>-</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Page transition</td>
-      <td>Slide-up(bottom to top) (Slide-in from 2nd step onwards)</td>
-      <td>-</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-##### Single step
-These are the most basic type of modal pages, where there is only one step in the flow.
-
-**Transitions**
-
-**Opening the modal**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Move-in(bottom to top)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Entrance easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0,0,0.3,1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-**Closing the modal**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Move-out(top to bottom)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Exit easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0.4, 0.14, 1, 1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-<img style="width: 100%" src="/images/pageTypes-4.gif" alt="A modal page" />
-<br/>
-
-##### Multi-step
-For cases where the transactions such as creating an entity take more than one step, stacking of the subpages is done. The users can navigate back through the steps using the Back button which takes place of the Cancel button from the 2nd step onwards.
-
-**Transitions**
-
-**Opening the modal**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Move-in(bottom to top)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Entrance easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0,0,0.3,1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-**Navigating to the next steps**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Slide-in(right to left)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Entrance easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0,0,0.3,1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-**Navigating back to the previous steps**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Slide-out(left to right)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Exit easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0.4, 0.14, 1, 1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-**Closing the modal**
-<table style="width: 100%">
-  <tbody>
-    <tr style="vertical-align: top">
-      <td>Interaction</td>
-      <td>Move-out(top to bottom)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Style of motion</td>
-      <td>Expressive motion</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Easing</td>
-      <td>Exit easing</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Curve</td>
-      <td>cubic-bezier(0.4, 0.14, 1, 1)</td>
-    </tr>
-    <tr style="vertical-align: top">
-      <td>Duration</td>
-      <td>240ms</td>
-    </tr>
-  </tbody>
-</table>
-<br/>
-
-<img style="width: 100%" src="/images/pageTypes-5.gif" alt="Multiple steps in a modal page" />
-<br/>

package/docs/src/pages/mobile/foundations/spacing/index.mdx

@@ -16,6 +16,11 @@ The scale has a difference of 4px for values under 24px after which the scale ha
       <th style="width:33%; text-align: left;">Value</th>
       <th style="width:33%; text-align: left;"></th>
     </tr>
+    <tr style="vertical-align: top">
+      <td>spacing-0_25</td>
+      <td>1px</td>
+      <td>Outlier</td>
+    </tr>
     <tr style="vertical-align: top">
       <td>spacing-0_5</td>
       <td>2px</td>

package/docs/src/pages/mobile/foundations/typography.mdx

@@ -39,7 +39,7 @@ showMobile: true
       <td>28px</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Title 2</td>
+      <td>Title 3</td>
       <td>SF Pro Display</td>
       <td>20px</td>
       <td>500</td>