@innovaccer/design-system 2.9.0 → 2.10.0

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

@@ -0,0 +1,101 @@
+---
+title: Icons
+description: Icons convey meaning to actions and other interface elements.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Icons are used to add additional visual cues on a page, hence helping to communicate a clearer meaning.
+
+### Structure
+Icons are based on Google’s Material Design and rendered using icon fonts. As of now, only rounded theme is supported. An icon component in the UI follows a simple structure. It has a font size of 16px which renders the icon in a 16 x 16px bounding box.
+
+![A 16x16 icon](./images/icons-1.png)
+<br/>
+<br/>
+
+### Appearances
+Based on the color palette that we follow, icons are offered in the following appearances. Barring the night and light variants, each appearance has **3 shades** - Default, Dark and Lighter.
+
+#### Night
+![All shades of icons in night color](./images/icons-2.png)
+<br/>
+
+#### Light
+![All shades of icons in namak color](./images/icons-3.png)
+
+**Note:** Added a dark background here just to show the color of the icon.
+<br/>
+
+#### Primary
+![All shades of icons in jal color](./images/icons-4.png)
+<br/>
+
+#### Mirch
+![All shades of icons in mirch color](./images/icons-5.png)
+<br/>
+
+#### Haldi
+![All shades of icons in haldi color](./images/icons-6.png)
+<br/>
+
+#### Neem
+![All shades of icons in neem color](./images/icons-7.png)
+<br/>
+
+#### Nimbu
+![All shades of icons in nimbu color](./images/icons-8.png)
+<br/>
+
+#### Tawak
+![All shades of icons in tawak color](./images/icons-9.png)
+<br/>
+
+#### Neel
+![All shades of icons in neel color](./images/icons-10.png)
+<br/>
+
+#### Jamun
+![All shades of icons in jamun color](./images/icons-11.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Different sizes
+Icons can also be resized to account for various use cases.
+
+##### Large
+Typically > `48px`
+
+![Large sized icon](./images/icons-12.png)
+<br/>
+
+##### Small
+Smaller than `16px`
+
+![Small sized icon](./images/icons-13.png)
+<br/>
+
+#### With label
+Icons can come really handy when showing key-value pairs.
+
+![Icons appearing with labe](./images/icons-14.png)
+<br/>
+<br/>
+
+#### With background
+
+![Icons with background containers](./images/icons-15.png)
+<br/>
+<br/>
+
+#### Hover
+Icons, though being non-interactive, can also have tooltips/popovers to provide additional information on hover.
+
+![Hover on an icon](./images/icons-16.png)
+<br/>
+<br/>
+
+

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="editableinput-all" />
+
+#### Props
+<PreviewWithPropTable name="editableinput-all" />

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

@@ -0,0 +1,65 @@
+---
+title: Inline editable fields
+description: Inline editable fields help users to directly jump from read mode to edit mode.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Inline editable fields enables users to edit the data right where they see it. They come handy when editing a form can be quite frequent and the users want to maintain the context.
+
+### Types
+<br/>
+
+#### Basic input
+Inline editable input comes with two tiny action buttons to confirm or discard the changes.
+<Preview name="editableinput-all" />
+
+#### Input with chips
+Chips can be used as tags in inputs. **Enter/return** key is used to input the tags.
+<Preview name="editablechipinput-all" />
+
+#### Dropdown
+Dropdown type does not require explicit save/discard actions, as the result is saved immediately.
+<Preview name="editabledropdown-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.
+<Preview name="editableinput-variants-size" />
+
+### States
+<br/>
+
+#### Basic input
+
+![States of inline editable input](./images/inlineEditableFields-1.png)
+<br/>
+
+#### Input with chips
+
+![States of inline editable input with chips](./images/inlineEditableFields-2.png)
+<br/>
+
+#### Dropdown
+
+![States of inline editable dropdown](./images/inlineEditableFields-3.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Saving changes
+There are two options to save the changes made -
+1. The primary check button
+2. The return key on the keyboard
+
+#### Discarding changes
+There are two options to discard the changes made -
+1. The secondary clear button
+2. The escape key on the keyboard
+
+#### Showing error
+Errors are shown using popovers alongside the input field.
+
+![Errors in inline editable input](./images/inlineEditableFields-4.png)
+<br/>

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="input-basic-input" />
+
+#### Props
+<PreviewWithPropTable name="input-basic-input" />

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

@@ -0,0 +1,104 @@
+---
+title: Inputs
+description: Inputs allow users to type in a value.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Inputs allow users to type in a value. They can be used anywhere, though they mostly appear in conjunction with other input components to create a form.
+
+### Types
+<br/>
+
+#### Basic input
+Basic input contains the input box, value or placeholder text, and an optional icon on the right.
+<Preview name="input-basic-input" />
+
+#### Metric input
+Metric input takes numerical data as input. It can either have a **prefix** e.g. currency symbols such as $, €, ₹, etc., or **suffix** e.g.units such as kg, mm, in, etc. to provide additional information about the data being input. 
+<Preview name="metricinput-all" />
+
+#### Verification code input
+Verification code input allows users to enter the code sent to their systems to verify themselves. These codes can be either 4 or 6 digits long.
+<Preview name="verificationcodeinput-with-four-fields" />
+
+#### Free text area
+Free text area lets users enter data much longer than a basic input. It can have a scrollbar and a resize action at the bottom right. Just like the basic input, it can also have help text beneath it.
+<Preview name="textarea-default-textarea" />
+
+### Variants
+<br/>
+
+#### With icon
+Basic inputs can have an icon on the left of text in the input box along with an optional icon on the right. This variant comes in 2 sizes i.e. regular and large as accomodating such icons is not possible in the tiny size.
+<Preview name="input-icon-left-input" />
+
+#### Prefix/Suffix
+Metric inputs can have prefix or suffix to provide additional information about the data being input.
+
+![Metric input with prefix and suffix](./images/inputs-1.png)
+<br/>
+
+### Sizes
+Inputs come in **3 sizes** - regular, tiny and large with a few exceptions. Basic input with icon in the left, metric input and verification code input do not support the tiny size. Free text area comes in a single default size as it is resizeable.
+<Preview name="input-variants-size" />
+
+### States
+Inputs come in **5 states** - default, hover, focused, error and disabled.
+
+![Input states](./images/inputs-2.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Label
+Labels help users understand what sort of information is required. Labels should be short and to the point. Effective labeling improves usability.
+The label comes with an optional required indicator (*).
+<Preview name="input-input-with-label" />
+
+#### Label position
+Label can be placed either on the top of the input field or at the left of it. It is not advised to place label on the left until there are some height constraints, as this type of placement causes a lot of eye movement. Top labels are responsive and also maintain the vertical rhythm in case of long forms.
+<Preview name="input-label-position" />
+
+#### Help text
+Help text can be added beneath the input box to provide additional information. In case of an error that needs to be explained, inline message is used at the same place.
+<Preview name="input-input-with-caption" />
+
+#### Required vs. Optional
+Inputs can be marked as optional or required depending upon the context. To avoid unnecessary clutter, mark only the minority fields as optional or required.
+
+**When no. of required fields < no. of optional fields**
+
+![Number of required fields < number of optional fields](./images/inputs-3.png)
+<br/>
+
+**When no. of required fields > no. of optional fields**
+
+![Number of required fields < no. of optional fields](./images/inputs-4.png)
+<br/>
+
+It is recommended to keep the notations of required and optional fields consistent throughout the app as different notations can confuse users.
+
+#### Input masking
+Input masks are helpful for the data fields that have a specific input format, as they provide the formatting cues to help users know the format in which the data is expected for the field.
+<Preview name="inputmask-phone-number" />
+
+#### Input with chips
+Inputs can also be used to create filters in the field values by using input chips. To embed a chip, press **enter** after typing. To remove all the chips at once, click on the clear icon of the input box.
+
+![Input with chips](./images/inputs-5.png)
+<br/>
+
+![Multi line behavior in input with chips](./images/inputs-6.png)
+<br/>
+<br/>
+
+#### Verification code input behaviour
+<br/>
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FYOxwh18LLa34NQIahcozOz%2FVerification-Code-Input-Expected-Flow%3Fkind%3D%26node-id%3D122%253A0%26page-id%3D0%253A1%26scaling%3Dscale-down-width%26viewport%3D163%252C286%252C0.05311004817485809&hide-ui=1" allowfullscreen></iframe>
+ 
+
+

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="link-all" />
+
+#### Props
+<PreviewWithPropTable name="link-all" />

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

@@ -0,0 +1,41 @@
+---
+title: Links
+description: Links are used to navigate to a destination.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Links are used to navigate to a destination which can be on the same page or a different one.
+
+### Structure
+A link consist of just a text. It does not contain any padding.
+<Preview name="link-all" />
+
+### Sizes
+Links come in **2 sizes** - regular and tiny.
+<Preview name="link-variants-size" />
+
+### Appearances
+Links come in **2 appearances** - primary and subtle.
+<Preview name="link-variants-appearance" />
+
+### States
+Links come in **5 states** - default, hover, active, focus and disabled.
+
+![States of a link](./images/links-1.png)
+<br/>
+<br/>
+
+### Usage
+#### Standard vs. Subtle link
+##### Standard Link
+It is the default link component and comes in the primary color. It is used to draw attention and hence it is not recommended to have many links on a single page.
+
+![‘Forgot password?’ as primary link, being used for navigating to a new screen](./images/links-2.png)
+<br/>
+
+##### Subtle Link
+This is the subtle variant of link and hence uses a lighter color. It is primarily used in the breadcrumb component. Use it sparingly such as times when the default link can be too overwhelming to use (too much primary color on the screen).
+
+![Breadcrumbs as subtle link being used for navigating to previous screens](./images/links-3.png)
+<br/>

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

@@ -1,15 +1,7 @@
----
-title: Message
-description: Message is used to provide collective feedback to the user about an action or a state.
-tabs: ['Usage', 'Code']
-showMobile: true
----
-
 #### Live Demo
 <br/>
 
 <Preview name='message-info' />
 
 #### Props
-
 <PreviewWithPropTable name='message-info' />

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

@@ -1,25 +1,79 @@
 ---
-title: Message
-description: Message is used to provide collective feedback to the user about an action or a state.
+title: Messages
+description: Messages are used to provide collective feedback an action or a state.
 tabs: ['Usage', 'Code']
 showMobile: true
 ---
 
-#### Types
+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/>
 
-##### Info
+#### Standard
+This is the default variant when it comes to messages. It has a significant visual loudness and should be used with caution.
+<Preview name="message-info-message" />
+
+#### Inline message
+It is the less attention-grabbing counterpart and hence can be used in between components or patterns.
+<Preview name="inlinemessage-variants-info-message" />
+
+### 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.
+<Preview name="message-message-with-title" />
+
+#### With actions
+Actions can be a part of messages and are typically used to directly or indirectly dismiss them.
+<Preview name="message-message-with-actions" />
+
+### 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.
+<Preview name="message-info-message" />
+<Preview name="inlinemessage-variants-info-message" />
+
+#### Warning
+The warning appearance is used when the message needs to notify a warning that might need users' attention.
+<Preview name="message-warning-message" />
+<Preview name="inlinemessage-variants-warning-message" />
 
-<Preview name='message-info' />
+#### Alert
+The alert appearance is used when the message needs to provide an error or failure information that requires immediate attention.
+<Preview name="message-alert-message" />
+<Preview name="inlinemessage-variants-alert-message" />
 
-##### Warning
+#### Success
+The success variant is used when the inline message needs to notify the successful completion of a task or action.
+<Preview name="message-success-message" />
+<Preview name="inlinemessage-variants-success-message" />
 
-<Preview name='message-warning' />
+### Usage
+<br/>
+
+#### Non-dismissive
+Messages are non-dismissive in nature. They appear with the rest of the components and cannot be dismissed directly.
+
+#### 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-1.png)
+<br/>
+<br/>
 
-##### Alert
+#### Position & width
+##### 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 or as per the content appearing below it.
 
-<Preview name='message-alert' />
+![Position & width of the standard message component](./images/messages-2.png)
+<br/>
 
-##### Success
+##### Inline message
+Inline message component appears below the component it is related to, with a 4px margin at top and spans the width of the component.
 
-<Preview name='message-success' />
+![Position & width of the inline message component](./images/messages-3.png)
+<br/>

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="metalist-all" />
+
+#### Props
+<PreviewWithPropTable name="metalist-all" />

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

@@ -0,0 +1,38 @@
+---
+title: Meta list
+description: Meta list is a short horizontal list of meta/secondary information.
+tabs: ['Usage', 'Code']
+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 tiny.
+<Preview name="metalist-all" />
+
+### Usage
+#### In the page header
+Page headers use meta list to provide secondary/meta information just below the title.
+
+![Meta list in the page header](./images/metaList-3.png)
+<br/>
+
+#### In a table cell
+There is a cell variant in the table which uses meta list to show secondary/meta information.
+
+![Meta list in a table](./images/metaList-4.png)

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="modal-confirmations" />
+
+#### Props
+<PreviewWithPropTable name="modal-confirmations" />