@innovaccer/design-system 2.13.0 → 2.13.2

package/docs/package.json

@@ -8,7 +8,7 @@
     "dev": "./tools/develop.sh",
     "build": "./tools/build.sh",
     "serve": "gatsby serve",
-    "deploy": "gatsby-plugin-s3 deploy --yes && aws cloudfront create-invalidation --distribution-id d2p21c4y3psve4 --paths \"/*\"",
+    "deploy": "gatsby-plugin-s3 deploy --yes && aws cloudfront create-invalidation --distribution-id E2FYU8KR1XGDBZ --paths \"/*\"",
     "clean": "gatsby clean",
     "extract:dev": "export STORYBOOK_HOST='http://localhost:5000/iframe.html?id=components-avatargroup-all--all&args=&viewMode=story' && node ./tools/extract.js",
     "extract": "node ./tools/extract.js"

package/docs/src/data/components/index.js

@@ -128,6 +128,18 @@ export const data = [
         imgStyle={imgStyle}
       />)
   },
+  {
+    link: 'helpText/usage',
+    name: 'Help text',
+    design: "Available",
+    code: "Unavailable",
+    image: () => (
+      <StaticImage
+        src="./images/Helptext2.png"
+        alt="Help text"
+        imgStyle={imgStyle}
+      />)
+  },
   {
     link: 'icons/usage',
     name: 'Icons',

package/docs/src/data/components/mobile.js

@@ -68,6 +68,18 @@ export const data = [
         imgStyle={imgStyle}
       />)
   },
+  {
+    link: 'checkbox/usage',
+    design: 'Available',
+    name: 'Checkbox',
+    code: 'Available',
+    image: () => (
+      <StaticImage
+        src="./images/mobile/Checkbox.png"
+        alt="Checkbox"
+        imgStyle={imgStyle}
+      />)
+  },
   {
     link: 'chips/usage',
     design: 'Available',

package/docs/src/data/nav/components.yaml

@@ -39,7 +39,6 @@ menus:
 
   - label: Checkbox
     link: /components/checkbox/usage/
-    hideInMobile: true
 
   - label: Chips
     link: /components/chips/usage/

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

@@ -56,5 +56,11 @@ Input chips are used inside inputs to behave as removable entries or tags.
 ### Usage
 <br/>
 
-##### Selection chip vs radio/checkbox
+#### Selection chip vs radio/checkbox
 Selection chips should be used when an immediate change/result is expected on selection. Radio/checkbox should be used when an explicit action is needed to submit the selection, e.g. in a form.
+
+
+![Selection chip vs radio/checkbox](./images/chips-1.png)
+
+<br/>
+<br/>

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

@@ -0,0 +1,74 @@
+---
+title: Help text
+description: Help text provides a brief description accompanying a component.
+tabs: ['Usage']
+showMobile: true
+---
+
+Help text is used to provide additional information accompanying a component such as checkbox, dropdown, input, etc.
+
+### Structure
+
+<br/>
+
+![Structure of Help text](./images/helpText-1.png)
+<br/>
+<br/>
+
+### Properties
+
+<br/>
+
+<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>Width</td>
+      <td>Spans the width of the related component</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Spacing between help text and the component</td>
+      <td>4px</td>
+      <td>4px</td>
+    </tr>
+  </tbody>
+</table>
+
+<br/>
+
+<br/>
+
+### Usage
+
+#### When to use help text
+
+Help text should only be used to provide a brief description related to the component. It should not be used for headings, main content, or long paragraphs.
+
+![When to use help text](./images/helpText-2.png)
+<br/>
+
+![When to use help text](./images/helpText-3.png)
+<br/>
+<br/>
+
+#### Help text vs Inline message
+
+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. inputs, dropdowns, etc.
+
+![Help text vs Inline message](./images/helpText-4.png)
+<br/>
+<br/>
+
+#### Position and width of the help text component
+
+Help text always appears just below the accompanying component and spans across its width.
+
+![Position and width of the help text component](./images/helpText-5.png)
+<br/>
+<br/>
+<br/>

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

@@ -30,6 +30,9 @@ A pill comes in 9 appearances.
 <Preview name='components-pills-variants-appearance--appearance'/>
 
 ### Properties
+
+<br/>
+
 <table style="width: 100%">
   <tbody>
     <tr>
@@ -91,4 +94,7 @@ A pill comes in 9 appearances.
 
 Pills are used to display count of entities while badges are used for tagging entities.
 
-*image pending*
+![Pills vs Badges](./images/pills-1.png)
+
+<br/>
+<br/>

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

@@ -105,5 +105,11 @@ Radio buttons are recommended to use when there are fewer than 5 options as it i
 
 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*
+
+![Radio vs Dropdown](./images/radio-1.png)
+
+<br/>
+<br/>
+
+
 

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

@@ -61,16 +61,23 @@ The size of the switch depends on the other components appearing around it. If o
 
 The options that require an instant response are best selected using a switch.
 
-*image pending*
+![Instant response](./images/switch-4.png)
+
+<br/>
 
 ##### Multiple choices
 
 Checkboxes are preferred over switches when multiple options are available and the user has to select one or more options from them. Clicking multiple switches one by one and waiting to see results after each click takes extra time.
-*image pending*
+
+![Multiple choices](./images/switch-5.png)
+
+<br/>
 
 ##### Confirmation
 
 Checkboxes are preferred when an explicit action is required to confirm settings.
-*image pending*
 
+![Confirmation](./images/switch-6.png)
 
+<br/>
+<br/>

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

@@ -259,4 +259,7 @@ A page takes people to a whole new space detaching them from the parent flow, wh
 
 Bottom sheets should not have complex flows in them. For complex and multi-step flows consider using pages. 
 
-*Do Don't iamge*
+![Bottom Sheet vs Page](./images/bottomsheet-8.png)
+
+<br/>
+<br/>

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

@@ -0,0 +1,122 @@
+---
+title: Checkbox
+description: A checkbox lets users select one or more values from a list of options. 
+tabs: ['Usage']
+showMobile: true
+---
+
+A checkbox lets users select one or more values from a list of options. Options are not mutually exclusive here so the selection of any option won’t affect the other.
+
+### Variants
+
+#### Default
+
+The default variant comes with a label along with the checkbox control. This entire combination of checkbox control and label is tappable to change the checkbox selection.
+
+![Default checkbox](./images/checkbox-1.png)
+
+<br/>
+
+#### With help text
+
+The checkbox can have a help text below the label to provide additional information about that particular option. The help text will always be aligned with the label. 
+
+Tapping over the help text does not change the state of the checkbox.
+
+![Checkbox with help text](./images/checkbox-2.png)
+
+<br/>
+<br/>
+
+### States
+
+Checkboxes can be checked, unchecked, or indeterminate. Each of the selections has default, active and disabled states. 
+
+![Checkbox states](./images/checkbox-3.png)
+
+<br/>
+
+### Properties
+
+
+
+### Usage
+
+#### Checkbox group
+
+The checkbox 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: Minimum spacing between multiple options as well as the 1st option and group label should be 0px.
+
+<br/>
+
+![Checkbox group](./images/checkbox-4.png)
+
+<br/>
+
+#### Options alignment
+
+The options in a radio group can be aligned either vertically or horizontally. 
+
+##### Vertical 
+
+For vertical alignment, all the options of the checkbox group align vertically with one option in a line. This type of arrangement should be preferred over the horizontal arrangement for easier reading and scanning.
+
+![Vertical alignment of checkboxes](./images/checkbox-5.png)
+
+<br/>
+
+##### Horizontal
+
+For horizontal alignment, all the options of the checkbox group align horizontally in a single line. Make sure to space the options appropriately so that it is clear which control goes with which label. 
+
+If there are too many options it is not advisable to go for this type of arrangement because of less horizontal space available.
+
+![Horizontal alignment of checkboxes](./images/checkbox-6.png)
+
+<br/>
+
+#### Nesting
+
+Checkboxes can be nested in case of a list having sub-sections. The parent remains unchecked if no child is checked. 
+
+The indeterminate state of the parent shows a partially checked state when there is a nested relationship. The parent checkbox will remain indeterminate until all of its child checkboxes are checked.
+
+![Nesting of checkboxes](./images/checkbox-7.png)
+
+<br/>
+
+#### Overflow behavior
+
+If the label or the help text with the checkbox component overflows, wrap it to the next line but make sure that the control and the label are top aligned.
+
+![Overflow behavior](./images/checkbox-8.png)
+
+<br/>
+
+#### Checkbox vs radio
+
+Checkboxes allow users to select multiple options whereas radio allows only one selection from a list of mutually exclusive options.
+
+![Checkbox vs radio](./images/checkbox-9.png)
+
+<br/>
+
+#### Checkbox vs Switch
+
+Consider using a checkbox instead of a switch when a confirmation action is required to apply the changes. For example in forms etc. 
+
+![Checkbox vs Switch](./images/checkbox-10.png)
+
+<br/>
+
+#### Checkbox vs dropdown
+
+The checkbox is recommended to use when there are fewer than 5-7 options as it is easier for users to compare and select the appropriate option and save an additional tap. 
+
+However, if the number of options exceeds 5-7 or if the space is limited and the options can be collapsed then it is recommended to use dropdowns to utilize the space.
+
+![Checkbox vs dropdown](./images/checkbox-11.png)
+
+<br/>
+<br/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovaccer/design-system",
-  "version": "2.13.0",
+  "version": "2.13.2",
   "description": "React components library project for Innovaccer Design System",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",