@innovaccer/design-system 2.13.3 → 2.13.4-2

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

@@ -1,21 +1,19 @@
 ---
-title: Avatars
-description: Avatars are used to identify users through display pictures or their initials.
+title: Avatar
+description: Avatar is used to identify users through display pictures or their initials.
 tabs: ['Usage', 'Code']
 showMobile: true
 ---
 
-An avatar consists of the display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can't be fetched, a fallback glyph is used.
-<br/>
+An avatar consists of a display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can't be fetched, a fallback glyph is used.
 
 ### Appearances
-Avatar comes in 9 Appearances -
+Avatar comes in 9 appearances -
 <Preview name='components-avatar-variants-appearance--appearance' />
 
 ### Sizes
 Avatar comes in 2 sizes -
 <Preview name='components-avatar-variants-size--size' />
-<br/>
 
 ### Properties
 <table style="width: 100%">
@@ -69,35 +67,41 @@ Avatar comes in 2 sizes -
 ### Usage
 <br/>
 
-#### Color Assignment
-The background colors to be used in the avatars should be generated dynamically such that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.
+#### Color assignment
+The background color of an avatar should be generated dynamically in such a way that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.
 
-For example, an avatar generated for a user - Franklin Clinton, can look like following and it will look the same wherever it is used.
+For example, an avatar generated for a user - Franklin Clinton, can look like following and it should look the same wherever it is used.
 
-![Color Assignment](./images/avatar-1.png)
+![Color assignment](./images/avatar-1.png)
+<Caption>Color assignment</Caption>
 <br/>
 
 #### Displaying Name
-Since avatars can only show images or initials, there should be an option to show the full name of an entity. This can be achieved by **hovering** over on an avatar which displays a tooltip containing the full name.
+Since an avatar can only show an image or the initials, there should be an option to show the full name of the entity. This is achieved by **hovering** over on the avatar to display a tooltip containing the full name.
 
 ![Displaying Name](./images/avatar-2.png)
-
+<Caption>Hovering on an avatar</Caption>
 <br/>
 
 #### Number of avatars
-Avatars can be used individually or as a group if required. For example - If an activity is being done by 4 users, you would want to use the avatar group for the same.
+Avatars can be used individually or as a group if required. For example - if an activity is being performed by 4 users, an avatar group should be used to represent them.
 
 To be specific, an avatar can be used in 3 ways as -
-1. Single entity
+##### Single entity
 
 ![Single entity](./images/avatar-1.png)
+<Caption>Single avatar</Caption>
 
-2. Two entities
-
+##### Two entities
 ![Two entities](./images/avatar-3.png)
+<Caption>Two avatars</Caption>
 
-3. More than 2 entities
+##### More than 2 entities
 ![More than 2 entities](./images/avatar-4.png)
-In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on click.
+<Caption>More than 2 avatars</Caption>
+
+In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on hover.
 
-![Showing list of full names](./images/avatar-5.png)
+![Showing list of full names](./images/avatar-5.png)
+<Caption>Showing list of names in an avatar group</Caption>
+<br/>

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

@@ -12,7 +12,7 @@ A calendar is always visible upfront on screen when used i.e. a date can be sele
 <Preview name="components-calendar-all--all" />
 
 ### Sizes
-Calendar comes in **2 sizes** - regular and tiny.
+Calendar comes in **2 sizes** - regular and small.
 <Preview name="components-calendar-variants-size--size" />
 
 ### States
@@ -45,11 +45,11 @@ A time entity in calendar (date, month, year) can come in different states -
       <td>Size</td>
       <td>
           <ul>
-              <li>Large</li>
+              <li>Regular</li>
               <li>Small</li>
           </ul>
       </td>
-      <td>Large</td>
+      <td>Regular</td>
     </tr>
   </tbody>
 </table>

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

@@ -86,7 +86,7 @@ Checkbox group is a list of multiple standalone checkboxes with a group label on
 
 #### Alignment
 A group of checkboxes can be aligned either **vertically** or **horizontally**. However, it is advisable to stack the checkboxes 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="components-checkbox-checkbox-group--checkbox-group"/>
+<Preview name="components-checkbox-alignment-of-checkbox-group--alignment-of-checkbox-group"/>
 
 #### Nesting
 Checkboxes can be nested in case of a list having sub-sections. The parent remains unchecked if no child is checked. 

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

@@ -26,6 +26,28 @@ Input chips are used inside inputs to behave as removable entries or tags.
 <Preview name="components-chip-input--input" />
 <br/>
 
+### States
+<br/>
+
+#### Selection chip
+Selection chips has seven states - default, hover, active, focus, disabled, selection and selection - disabled.
+
+![Interactive states of selection chip](./images/selectionchip-state.png)
+<br/>
+
+#### Action chip
+Action chips has seven states - default, hover, active, focus and disabled.
+
+![Interactive states of action chip](./images/actionchip-state.png)
+<br/>
+
+#### Input chip
+Input chips has seven states - default, hover, focus and disabled.
+
+![Selection states of input chip](./images/inputchips-state.png)
+<br/>
+<br/>
+
 ### Properties
 <table style="width: 100%">
   <tbody>
@@ -40,14 +62,14 @@ Input chips are used inside inputs to behave as removable entries or tags.
       <td>-</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Clear button<br/><em>(optional)</em></td>
+      <td>Clear button</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>True</td>
     </tr>
   </tbody>
 </table>

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

@@ -50,11 +50,11 @@ For selecting a date range.
       <td>Size</td>
       <td>
           <ul>
-              <li>Large</li>
+              <li>Regular</li>
               <li>Small</li>
           </ul>
       </td>
-      <td>Large</td>
+      <td>Regular</td>
     </tr>
   </tbody>
 </table>
@@ -87,6 +87,13 @@ As soon as a date or date range is selected, time picker dropdown should be trig
 
 ![Date and time picker together](./images/datePicker-5.png)
 <br/>
+
+#### Selecting day of the week or time of day
+Use selection chips for selecting day of the week or time of day.
+
+![Date and time picker together](./images/datePicker-6.png)
+
+
  
 
 

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

@@ -41,7 +41,7 @@ This variant comes with an icon in the left preceding the text to provide additi
 
 ##### Inline label
 This variant comes with a label preceding the text and can be used at places where there is a space crunch.
-<Preview name="components-dropdown-label-position-in-dropdown--label-position-in-dropdown"/>
+<Preview name="components-dropdown-label-inline--label-inline"/>
 
 #### Options variants
 The options in a dropdown can be single select or multi-select. They come with a few variants -

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

@@ -11,7 +11,7 @@ Inline editable fields enables users to edit the data right where they see it. T
 <br/>
 
 #### Basic input
-Inline editable input comes with two tiny action buttons to confirm or discard the changes.
+Inline editable input comes with two small action buttons to confirm or discard the changes.
 <Preview name="components-editableinput-all--all" />
 
 #### Input with chips
@@ -23,7 +23,7 @@ Dropdown type does not require explicit save/discard actions, as the result is s
 <Preview name="components-editabledropdown-all--all" />
 
 ### Sizes
-Inline editable input comes in **2 sizes** - regular and tiny. On the other hand, inline editable dropdown comes just in the regular size.
+Inline editable input comes in **2 sizes** - regular and small. On the other hand, inline editable dropdown comes just in the regular size.
 <Preview name="components-editableinput-variants-size--size" />
 
 ### States
@@ -36,12 +36,12 @@ Inline editable input comes in **2 sizes** - regular and tiny. On the other hand
 
 #### Input with chips
 
-![States of inline editable input with chips](./images/inlineEditableFields-2.png)
+![States of inline editable input with chips](./images/inlineEditableField-2.png)
 <br/>
 
 #### Dropdown
 
-![States of inline editable dropdown](./images/inlineEditableFields-3.png)
+![States of inline editable dropdown](./images/inlineEditableField-3.png)
 <br/>
 <br/>
 

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

@@ -44,7 +44,7 @@ Inputs come in **3 sizes** - regular, tiny and large with a few exceptions. Basi
 <Preview name="components-input-variants-size--size" />
 
 ### States
-Inputs come in **5 states** - default, hover, focused, error and disabled.
+Inputs come in **5 states** - default, hover, focus, error and disabled.
 
 ![Input states](./images/inputs-2.png)
 <br/>
@@ -98,34 +98,34 @@ Inputs come in **5 states** - default, hover, focused, error and disabled.
       <th style="width:33%; text-align: left;">Default value</th>
     </tr>
     <tr style="vertical-align: top">
-      <td>Required<br/><em>(optional)</em></td>
+      <td>Required</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Optional<br/><em>(optional)</em></td>
+      <td>Optional</td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
     <tr style="vertical-align: top">
-      <td>Info<br/><em>(optional)</em></td>
+      <td>Info<br/></td>
       <td>
           <ul>
               <li>True</li>
               <li>False</li>
           </ul>
       </td>
-      <td>-</td>
+      <td>False</td>
     </tr>
   </tbody>
 </table>