@innovaccer/design-system 2.13.3 → 2.13.4-2

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

@@ -0,0 +1,100 @@
+---
+title: Badges
+description: Badges are used to tag entities with concise and relevant information.
+component: badge
+tabs: ["Usage"]
+showMobile: true
+---
+
+Badges contain short labels that help in 'tagging' entities. The container of a badge is rounded at the corners.
+<br/>
+
+### Types
+<br />
+
+#### Solid
+
+Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page.
+
+![Solid badge](./images/badge-1.png)
+
+#### Subtle
+
+Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors.
+
+![Subtle badge](./images/badge-2.png)
+<br/>
+
+### Appearances
+A badge comes in 9 appearances.
+
+![Appearances of badge](./images/badge-3.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>Jal</li>
+              <li>Stone</li>
+              <li>Neem</li>
+              <li>Haldi</li>
+              <li>Mirch</li>
+              <li>Tawak</li>
+              <li>Nimbu</li>
+              <li>Neel</li>
+              <li>Jamun</li>
+          </ul>
+      </td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Subtle<br/><em>(optional)</em></td>
+      <td>
+          <ul>
+              <li>True</li>
+              <li>False</li>
+          </ul>
+      </td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Max width</td>
+      <td>160px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner radius</td>
+      <td>3px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Padding<br/><em>(top, right, bottom, left)</em></td>
+      <td>2px, 4px, 2px, 4px</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+<br/>
+
+#### Badges vs. Pills
+Badges are used for tagging entities while pills are very specifically used to display the count of entities.
+
+![When to use badges vs pills](./images/badge-4.png)
+<br/>
+
+#### Badge vs. Status hint
+A badge is used to tag the entities whereas a status hint is used to indicate the status of an entity. 
+
+![When to use badges vs status hint](./images/badge-5.png)

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

@@ -7,12 +7,25 @@ showMobile: true
 
 Cards act as containers to group related information and actions together. Elements like text and images should be placed inside cards in a way that clearly indicates hierarchy.
 
-### Structure
+### Types
 
 <br/>
 
+#### Default card
+Default card is the most used type of card. It consists of a shadow, Shadow 10 by default.
+
 ![Default card](./images/mcard-1.png)
 
+#### Flat card
+Flat card is used to either create sections within a default card i.e. card inside a card or use cards on screens with white background.
+
+![Default card](./images/mcard-2.png)
+
+#### High shadow
+High shadow cards are recommended to use when the screen consists of only card type entities. It consists of a shadow, Shadow 40. 
+
+![Default card](./images/mcard-3.png)
+
 <br/>
 <br/>
 
@@ -20,70 +33,32 @@ Cards act as containers to group related information and actions together. Eleme
 
 <br/>
 
-<Card shadow='none'>
-  <Table
-    showMenu={false}
-    separator={true}
-    data={[
-      {
-        Property: 'Width',
-        Value: '<Width>',
-        Configurable: '-',
-      },
-      {
-        Property: 'Height',
-        Value: '<Height>',
-        Configurable: '-',
-      },
-      {
-        Property: 'Shadow',
-        Value: 'A card is restricted to one of the following shadows, basis on its type: "Shadow 0 (Flat Card)" or "Shadow 10"',
-        Configurable: '-',
-      },
-      {
-        Property: 'Background color',
-        Value: 'Namak',
-        Configurable: '❌',
-      },
-      {
-        Property: 'Corner Radius',
-        Value: '4px',
-        Configurable: '❌',
-      },
-      {
-        Property: 'Border',
-        Value: '0px for Default Card, 1px for Flat Card',
-        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>
+<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>Style</td>
+      <td>
+        <ul>
+          <li>Shadow 0 (Flat card)</li>
+          <li>Shadow 10 (Default shadow)</li>
+          <li>Shadow 40 (High shadow)</li>
+        </ul>
+      </td>
+      <td>Shadow 10 (Default shadow)</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner Radius</td>
+      <td>8px</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+
 <br/>
 <br/>
 
@@ -96,7 +71,7 @@ Cards act as containers to group related information and actions together. Eleme
 The umbrella view of the card consists of a **header** at the top, the **body**, and the **footer** at the bottom. 
 These elements are not always mandatory and can be customized according to the requirements.
 
-![Card structure](./images/mcard-2.png)
+![Card structure](./images/mcard-4.png)
 
 <br/>
 
@@ -112,7 +87,19 @@ All the elements(except the card header) are optional and can be omitted accordi
 A card can have multiple sections to show related but distinct information. 
 A divider can be used to separate different sections in a card.
 
-![Card with sections](./images/mcard-3.png)
+![Card with sections](./images/mcard-5.png)
 
 <br/>
+<br/>
+
+#### Usage of high shadow cards
+
+High shadow cards are recommended to use when the screen consists of only card type entities. 
+
+For screens where the content is the combination of cards, lists, etc it is not recommended to use the high shadow cards to avoid the inconsistency in the actual and the visual hierarchies of the entities. 
+
+**Note:** In the example below, the image on the left has only cards hence is a use case for High shadow cards. Whereas in the image on right, using high shadow cards convey a different visual hierarchy for both, the list and the card, even though they are on the same level of information hierarchy. 
+
+![Card with sections](./images/mcard-6.png)
+
 <br/>

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

@@ -36,9 +36,33 @@ Checkboxes can be checked, unchecked, or indeterminate. Each of the selections h
 
 <br/>
 
-### Properties
-
 
+### 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>Tappable area</td>
+      <td>44x44px</td>
+      <td>-</td>
+    </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>Help text<br/><em>(optional)</em></td>
+      <td>&#60;help text&#62;</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
 
 ### Usage
 

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

@@ -0,0 +1,88 @@
+---
+title: Dropdowns
+description: Dropdowns offer multiple choices in a compact way.
+tabs: ['Usage', 'Code', 'Interactions']
+showMobile: true
+---
+
+Dropdowns display a list of options for users to choose from. They provide the option to let users select a single option or multiple.
+
+### Structure
+Dropdown is made up of 2 key components - a custom **button** which acts as a trigger and a platform-native **picker** which acts as a container for the options.
+
+![Dropdown structure](./images/dropdown-1.png)
+<br/>
+<br/>
+
+### Variants
+<br/>
+
+#### Button variants
+The custom button for dropdowns comes with a few variants -
+
+##### Standard
+The standard variant consists of just text which changes its state when one or more options are selected.
+
+![Standard button variant](./images/dropdown-2.png)
+
+
+##### With icon
+This variant comes with an icon in the left preceding the text to provide additional cues regarding the type of the options.
+
+![With icon button variant](./images/dropdown-3.png)
+
+
+##### Inline label
+This variant comes with a label preceding the text and can be used at places where there is a space crunch.
+
+![Inline label button variant](./images/dropdown-4.png)
+
+
+### Sizes
+Dropdowns come in **2 sizes** - regular and small.
+
+![Dropdown sizes](./images/dropdown-5.png)
+
+### States
+<br/>
+
+#### Button states
+The custom button comes in **3 states** - default, active and disabled.
+
+![States of the dropdown button](./images/dropdown-6.png)
+<br/>
+<br/>
+
+
+### Usage
+<br/>
+
+#### Label position
+The label provides a better understanding of what kind of selection is expected. Labels can be placed either on the top of the dropdown or can be placed inline with the value or placeholder of the dropdown.
+
+![[Left] Label on top, [Right] Inline label](./images/dropdown-7.png)
+
+#### Help text
+Help text can be provided beneath a dropdown to add context regarding the type of input required just like the input fields.
+
+![Dropdown with help text](./images/dropdown-8.png)
+
+
+#### For multi-select
+Native picker supports single-select from a list of options. To provide multi-select, use a list in a bottom sheet or a full screen dialog.
+
+![Use lists for multi-select](./images/dropdown-9.png)
+<br/>
+
+
+#### Dropdown vs. Checkbox/Radio
+It is recommended to use dropdowns if the number of single-select options exceeds 5 or if the space is limited, to better utilize the space. Checkbox/Radios should be used if the options are fewer than 5 and there are no space restrictions.
+
+![[Left] Checkbox vs. [Right] Dropdown](./images/dropdown-11.png)
+<br/>
+<br/>
+
+#### Picker vs. Lists
+For long lists of values which typically load after an API call, display a list in a bottom sheet or a full screen dialog. Include search if needed, for example, a list of cities, organizations, medicines, etc. 
+
+![[Left] List vs. [Right] Picker](./images/dropdown-10.png)

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

@@ -0,0 +1,170 @@
+---
+title: Messages
+description: Messages are used to provide collective feedback an action or a state.
+tabs: ['Usage']
+showMobile: true
+---
+
+Messages are used to provide collective feedback to the users about an action or a state. They have a significant visual loudness to draw users’ attention.
+
+### Types
+<br/>
+
+#### Standard
+This is the default variant when it comes to messages. It has a significant visual loudness and should be used with caution.
+
+![Standard message](./images/messages-1.png)
+
+#### Inline message
+It is the less attention-grabbing counterpart and hence can be used in between components or patterns.
+
+![Inline message](./images/messages-2.png)
+
+### Variants
+
+Standard message comes with a few variants -
+#### With title
+A title can be shown at the top of the messages. It is typically used to summarize the description in case it's long.
+
+![Standard message with title](./images/messages-3.png)
+
+#### With actions
+Actions can be a part of messages and are typically used to directly or indirectly dismiss them.
+
+![Standard message with actions](./images/messages-4.png)
+
+### Appearances
+Messages come in **4 appearances** basis on the intent -
+
+#### Info
+The info appearance is used when the message needs to provide information that requires some attention from the users.
+
+![Info message](./images/messages-5.png)
+
+
+#### Warning
+The warning appearance is used when the message needs to notify a warning that might need users' attention.
+
+![Warning message](./images/messages-6.png)
+
+
+#### Alert
+The alert appearance is used when the message needs to provide an error or failure information that requires immediate attention.
+
+![Alert message](./images/messages-7.png)
+
+
+#### Success
+The success variant is used when the inline message needs to notify the successful completion of a task or action.
+
+![Success message](./images/messages-8.png)
+
+
+### Properties
+#### Standard message
+<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>Info</li>
+              <li>Success</li>
+              <li>Warning</li>
+              <li>Alert</li>
+          </ul>
+      </td>
+      <td>Info</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Title<br/><em>(optional)</em></td>
+      <td>&#60;title&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Description</td>
+      <td>&#60;description&#62;</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Actions<br/><em>(optional)</em></td>
+      <td>
+          <ul>
+              <li>Action 1</li>
+              <li>Action 2</li>
+          </ul>
+      </td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+#### Inline message
+<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>Info</li>
+              <li>Success</li>
+              <li>Warning</li>
+              <li>Alert</li>
+          </ul>
+      </td>
+      <td>Info</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Description</td>
+      <td>&#60;description&#62;</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+<br/>
+
+#### Non-dismissive
+Messages are non-dismissive in nature. They appear with the rest of the components and cannot be dismissed directly.
+
+#### Position & width of the message component
+
+##### Standard
+Message component always appears at the top of a section but just below the header. The width of the message component always spans the width of its container (leaving the appropriate padding) or as per the content appearing below it.
+
+![Position of standard message](./images/messages-9.png)
+<br/>
+
+##### Inline message
+Inline message component appears inline or below the component it is related to, with a 4px margin at the top and spans the width of the component.
+
+![Position of inline message](./images/messages-10.png)
+
+<br/>
+<br/>
+
+#### Standard vs. Inline message
+Inline message variant should be used when feedback relative to some specific content has to be provided to the users. Whereas, the standard message variant should be used when collective feedback for a section or an entire page has to be provided to the users.
+
+![Standard vs. inline message](./images/messages-11.png)
+<br/>
+<br/>
+
+#### Inline message vs Help text
+Inline message is used to provide inline feedback regarding a state or action and hence it is reactive (only appears after something has happened, to provide feedback). Whereas help text is used to provide additional information typically appearing just below a component e.g. input, dropdown, etc.
+
+![Inline message vs. help text](./images/messages-12.png)
+