@innovaccer/design-system 2.9.0 → 2.10.0

package/docs/src/pages/404.js

@@ -1,28 +1,36 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Homepage from '../components/templates/Homepage';
 import {
-  Heading,
   Button,
-  Paragraph,
+  EmptyState
 } from '@innovaccer/design-system';
 import { navigate } from 'gatsby';
+import notFoundImage from './home/404.png'
+
 
 const PageNotFound = () => {
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.location.pathname.includes('/components')) {
+      navigate('/components/overview/tabs/all-components/');
+    }
+  }, []);
+
   return (
     <Homepage relativePagePath={'/404'} is404={true}>
-      <div className='m-auto w-50 mt-10'>
-        <Heading size='xl'>Page not found</Heading>
-        <Paragraph className='my-8'>
-          Oops! The page you are looking for has been
-          removed or relocated.
-        </Paragraph>
-        <Button
+      <div className="d-flex justify-content-center" style={{ transform: "translate(0,50%)" }}>
+        <EmptyState description="Sorry, the page you are lookikng for does not exist. Let's get you back"
+          imageSrc={notFoundImage}
+          size="small" title="Oh no! There's no masala"
+        >
+          <Button
           icon='arrow_backward'
           iconAlign='left'
-          onClick={() => navigate(-1)}
-        >
+          onClick={() => navigate('/')}
+          >
           Go Back
-        </Button>
+          </Button>
+        </EmptyState>
       </div>
     </Homepage>
   );

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

@@ -1,10 +1,3 @@
----
-title: Avatar
-description: Avatars are used to identify users through display images or their initials.
-tabs: ['Usage', 'Code']
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

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

@@ -1,10 +1,3 @@
----
-title: Badges
-description: Badges are used to tag entities with concise and relevant information.
-tabs: ["Usage", "Code"]
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

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

@@ -1,10 +1,3 @@
----
-title: Breadcrumbs
-description: Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.
-tabs: ["Usage", "Code"]
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

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

@@ -1,10 +1,3 @@
----
-title: Button
-description: Buttons initiate actions and indicate what will happen after interacting with them.
-tabs: ['Usage', 'Code', 'Content']
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

package/docs/src/pages/components/button/content.mdx

@@ -1,10 +1,3 @@
----
-title: Button
-description: Buttons initiate actions and indicate what will happen after interacting with them.
-tabs: ['Usage', 'Code', 'Content']
-showMobile: true
----
-
 #### Take the right actions
 Take the right actions in order to move towards the goal. Use them to make your labels predictable and consequential.
 

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

@@ -1,10 +1,3 @@
----
-title: Calendar
-description: Calendar lets users select a date.
-tabs: ['Usage', 'Code']
-showMobile: false
----
-
 #### Live Demo
 <br/>
 

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

@@ -2,7 +2,34 @@
 title: Calendar
 description: Calendar lets users select a date.
 tabs: ["Usage", "Code"]
-showMobile: false
+showMobile: true
 ---
 
-Calendar lets users select a date. The dates are arranged in a grid visually for familiarity and easy scanning.
+Calendar lets users select a date. The dates are arranged in a grid visually for familiarity and easy scanning. 
+
+### Structure
+A calendar is always visible upfront on screen when used i.e. a date can be selected directly unlike a date picker where a date can be selected only after interacting with a trigger.
+<Preview name="calendar-all" />
+
+### Sizes
+Calendar comes in **2 sizes** - regular and tiny.
+<Preview name="calendar-variants-size" />
+
+### States
+A time entity in calendar (date, month, year) can come in different states -
+
+![States of a date in calendar](./images/calendar-1.png)
+<br/>
+<br/>
+
+### Usage
+#### Calendar vs. Date picker
+Date picker is nothing but a calendar inside a popover and hence a trigger is always required to open it e.g. an input box. On the other hand, calendar is used as an inline component to show a view without additional triggers.
+
+![Calendar is used inline](./images/calendar-2.png)
+<br/>
+<br/>
+
+#### Date with an event
+Specific date can be highlighted to show that there is an event on that particular day.
+<Preview name="calendar-variants-with-events" />

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

@@ -1,10 +1,3 @@
----
-title: Cards
-description: Cards act as containers to group related information together.
-tabs: ["Usage", "Code"]
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

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

@@ -1,15 +1,7 @@
----
-title: Checkbox
-description: 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.
-tabs: ['Usage', 'Code']
-showMobile: true
----
-
 #### Live Demo
 <br/>
 
 <Preview name="checkbox-default" />
 
 #### Props
-
 <PreviewWithPropTable name='checkbox-default' />

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

@@ -1,48 +1,79 @@
 ---
 title: Checkbox
-description:
-  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.
+description: Checkbox lets users select one or more values.
 tabs: ["Usage", "Code"]
 showMobile: true
 ---
 
-#### Types
+Checkboxes 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
 <br/>
 
-##### Default
-
+#### Default
+The default variant comes with a checkbox control and a label, to cater most of the use cases. This entire combination of checkbox control and label is clickable to change the checkbox selection.
 <Preview name="checkbox-default" />
 
-##### With Help Text
+#### With help text
+A checkbox can have a help text below the label to provide additional information about that particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of checkbox.
+<Preview name="checkbox-with-help-text" />
 
-The checkbox can have a help text below the label to provide some extra information about the particular option.
-The help text will always be aligned to the label. Clicking over the help text will not change the state of checkbox.
+### Sizes
+Checkbox comes in two sizes - regular and tiny.
+<Preview name="components-checkbox-variants-size"/>
 
-<Preview name="checkbox-with-help-text" />
+### States
+<br/>
+
+#### Selection States
+Checkbox has three selection states - checked, unchecked and indeterminate.
 
-#### Usage
+![Selection states of a checkbox](./images/checkbox-1.png)
 <br/>
 
-##### Checkbox Group
+#### Interactive States
+Checkbox has five interactive states - default, hover, active, focus and disabled.
 
-Checkbox group is a list of multiple standalone checkboxes with a group label on the top. 
+![Interactive states of a checkbox](./images/checkbox-2.png)
+<br/>
+<br/>
 
-*Note: Multiple checkboxes should have a minimum of 8px spacing in between.
+### Usage
+<br/>
 
-<Preview name="checkbox-checkbox-group" />
+#### Checkbox Group
+Checkbox group is a list of multiple standalone checkboxes with a group label on the top.
 
-##### Nesting
+**Note**: Multiple checkboxes should have a minimum of 8px spacing in between.
+<Preview name="checkbox-checkbox-group"/>
 
-Checkboxes can be nested in case of a list having sub-sections. The parent remains unchecked if no child is checked. 
+#### 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="checkbox-checkbox-group"/>
 
-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
+Checkboxes can be nested in case of a list having sub-sections. The parent remains unchecked if no child is checked. 
 
+Indeterminate state of the parent shows a partially checked state when there is a nested relationship. The parent checkbox will remain indeterminate until some of its children checkboxes are checked.
 <Preview name="checkbox-nested" />
 
-##### Overflow Behavior
-
+#### Overflow Behavior
 If the label or the help text with the checkbox overflows, wrap it to the next line but make sure that the control and the label are top aligned.
-
 <Preview name="checkbox-overflow" />
+
+#### Checkbox vs. Radio
+Radio buttons allow only one selection from a list of mutually exclusive options whereas checkboxes allow users to select multiple options.
+
+#### Checkbox vs. Switch
+Checkbox should be considered instead of a switch when a confirmation action is required to apply the changes. For example in forms etc.
+
+![Checkbox vs. switch](./images/checkbox-3.png)
+<br/>
+
+#### Checkbox vs. Dropdown
+Checkboxes should be used when there are fewer than 5 options as they are easy to scan and save an additional click of opening a dropdown.
+
+However, if the number of options exceeds 5 or if the space is limited then it is recommended to use dropdowns.
+
+![Checkbox vs. dropdown](./images/checkbox-4.png)
+<br/>

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

@@ -1,10 +1,3 @@
----
-title: Chips
-description: Chips are compact group components used for quick selection, actions, and filtering.
-tabs: ['Usage', 'Code']
-showMobile: true
----
-
 #### Live Demo
 <br/>
 

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

@@ -2,6 +2,7 @@
 title: Date picker
 description: Date picker is used for selecting or entering a date value.
 tabs: ['Usage', 'Code']
+showMobile: true
 ---
 
 Date picker lets users select or directly enter date values. It can either be a single date or a date range.

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

@@ -0,0 +1,7 @@
+#### Live Demo
+<br/>
+
+<Preview name="components-divider-variants-horizontal-divider" />
+
+#### Props
+<PreviewWithPropTable name="components-divider-variants-horizontal-divider" />

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

@@ -0,0 +1,89 @@
+---
+title: Dividers
+description: Dividers are used to separate content into different sections.
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Dividers can help separate the content into different sections within a page but if used abundantly can make the interface cluttered.
+
+### Types
+<br/>
+
+#### Horizontal
+The horizontal divider divides the content vertically. It divides the whole layout into sections & typically spans the full width of the layout. Such dividers are useful for separating different rows of a table, sections inside a card, headers and footers from body, etc.
+<Preview name="components-divider-basic-divider-in-card"/>
+
+#### Vertical
+The vertical divider divides the content horizontally.
+<Preview name="components-divider-vertical-divider"/>
+
+### Appearances
+<br/>
+
+#### Basic
+Basic appearance is the default appearance of the dividers and the most used one.
+
+![Basic appearance of horizontal dividers in a table](./images/dividers-1.png)
+<br/>
+
+![Basic appearance of a vertical divider](./images/dividers-2.png)
+<br/>
+
+#### Header
+Header appearance is typically used in headers and footers to differentiate these sections from the body. It is slightly darker from the default variant. The slightly darker color and the position of this divider help in differentiating it from the basic dividers which might be present in the body.
+
+For example, if a user is scrolling the content of the body, any basic divider present there can be distinguished from this divider because of its color and position.
+
+![Header appearance of horizontal divider in a page header](./images/dividers-3.png)
+<br/>
+
+![Header appearance of horizontal divider in a card](./images/dividers-4.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Indentation
+Horizontal dividers with basic appearance can be slightly spaced from the left (12px or 16 px). This way they can separate related list-type content. They should be aligned with anchoring elements in the left such as icons, avatars, etc.
+<Preview name="components-divider-indented-divider"/>
+
+> Table is the only exception here where we do not use the indented divider in rows because table can have vertical dividers as well which then make it appear like the familiar Excel like structure. Having an indented divider doesn't work in that case.
+<br/>
+
+In most of the cases, the content inside cards/containers already has a padding of 16px and thus the divider(s) should start in such a way that it is aligned with the content (be it text or an anchor point like an icon, avatar, etc.).
+
+![Default list type content vs List with anchor point](./images/dividers-5.png)
+<br/>
+
+For cases where the available width is not enough to accommodate content with 16px padding, indentation of **12px** should be used.
+
+![Due to the space crunch, padding inside cards is 12px instead of the regular 16px & hence 12px indentation is being used here](./images/dividers-6.png)
+<br/>
+
+#### Being aware of default padding/margin
+A lot of the times there is a default padding/margin present in a component e.g. in the body of a sidesheet. Hence, in such cases the dividers do not span till the edge(s). Be aware of padding/margin in such cases.
+
+![Dividers here are within the confinement of body (after applied padding)](./images/dividers-7.png)
+<br/>
+
+#### Dividers with scrollable content
+In modals, sheets, and cards with scrollable content, the header appearance of divider should be used in the header and footer. The slightly darker color of this divider and its position help in differentiating it from the basic appearance that might be present in the body.
+
+![Header divider in both header & footer](./images/dividers-8.png)
+<br/>
+
+#### Nesting of Dividers
+Sometimes multiple dividers may be needed within a section. In such cases, the dividers should be used in a way so that the hierarchy of information is preserved.
+
+![Multiple dividers being used to maintain the hierarchy](./images/dividers-9.png)
+<br/>
+
+#### Dividers in Horizontal Layout
+In horizontal forms or layout, dividers can help users keep track of the row that is being viewed/edited at the moment.
+![Dividers in a horizontal layout form](./images/dividers-10.png)
+<br/>
+
+#### Overuse of Dividers
+Dividers should only be used if the elements cannot be separated enough using white space. Overuse of dividers would only result in visual clutter. 

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

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

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

@@ -0,0 +1,151 @@
+---
+title: Dropdowns
+description: Dropdowns offer multiple choices in a compact way.
+tabs: ['Usage', 'Code']
+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 **popover** which acts as a container for the options.
+
+![Dropdown structure](./images/dropdowns-1.png)
+<br/>
+<br/>
+
+### Types
+Dropdowns can be categorized into **2 types** basis on their uses -
+
+#### Standard
+This is the typical custom button + popover combination of dropdowns.
+<Preview name="dropdown-all"/>
+
+#### Menu
+This is the icon button + popover combination of dropdowns which is used only for menu commands e.g. edit, export, delete, etc. This is **not used** for selecting options. The menu can open in either direction i.e towards left or towards the right.
+<Preview name="dropdown-dropdown-as-menu"/>
+
+### 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.
+<Preview name="dropdown-standard-dropdown"/>
+
+##### With icon
+This variant comes with an icon in the left preceding the text to provide additional cues regarding the type of the options.
+<Preview name="dropdown-dropdown-with-icon"/>
+
+##### 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="dropdown-label-position-in-dropdown"/>
+
+#### Options variants
+The options in a dropdown can be single select or multi-select. They come with a few variants -
+
+##### Standard
+This variant comes with just text.
+<Preview name="dropdown-standard-dropdown"/>
+
+##### With icon
+This variant comes with an icon preceding the text.
+<Preview name="dropdown-dropdown-items-with-icon"/>
+
+##### With sub info
+This variant comes with sub-info beneath the text.
+<Preview name="dropdown-dropdown-items-with-icon"/>
+
+##### With checkbox
+This variant comes with the support of checkboxes to select single or multiple options. The options here can also have sub info just like the previous variant.
+<Preview name="dropdown-dropdown-items-with-checkbox"/>
+
+### Sizes
+Dropdowns come in **2 sizes** - regular and tiny.
+<Preview name="dropdown-variants-size"/>
+
+### States
+<br/>
+
+#### Button states
+The custom button comes in **5 states** - default, hover, focus, active and disabled.
+
+![States of the custom dropdown button](./images/dropdowns-2.png)
+<br/>
+<br/>
+
+#### Options states
+The options come in **3 states** - default, hover and selected. Users can also use the up/down arrow key to traverse the options. In that case, the highlighted option has the same state as hover.
+
+![States of options](./images/dropdowns-3.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Search
+Dropdown can be offered with a search functionality. In that case, the search input appears at the top.
+<Preview name="dropdown-search-in-dropdown"/>
+
+#### Multi select
+The multi-select behavior in a dropdown is divided into **2 categories** as following.
+
+##### For options less than or equal to a threshold
+<Preview name="dropdown-dropdown-options-less-than-50"/>
+
+![Multi-select behavior of dropdown for options less than or equal to a threshold](./images/dropdowns-4.png)
+<br/>
+<br/>
+
+##### For options more than the threshold
+<Preview name="dropdown-dropdown-options-more-than-50"/>
+
+![Multi-select behavior of dropdown for options more than the threshold](./images/dropdowns-5.png)
+<br/>
+<br/>
+
+50 is the default threshold and it can be changed to any number between 50 to 100.
+<br/>
+
+#### Grouping options
+Dropdown options can be grouped under a section using a sub header, if needed.
+
+![Grouping options under a sub heading](./images/dropdowns-6.png)
+<br/>
+<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.
+<Preview name="dropdown-label-position-in-dropdown"/>
+
+#### Help text
+Help text can be provided beneath a dropdown to add context regarding the type of input required just like the input fields.
+<Preview name="dropdown-dropdown-with-caption"/>
+
+#### Actions in footer
+Using network resources on each checkbox selection in a dropdown can be quite expensive. To avoid sending api calls at every selection, the dropdown with multi-select comes with an option of having actions in the footer. This helps in sending the api call just once i.e. on click of Add/Apply button.
+<Preview name="dropdown-dropdown-with-action-buttons"/>
+
+#### Custom trigger
+Dropdowns can also be triggered by other components, primarily by buttons and icon buttons. The basic behavior of the dropdown remains the same.
+
+![Custom triggers to open a dropdown](./images/dropdowns-7.png)
+<br/>
+<br/>
+
+#### Dropdown vs. 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. Radios should be used if the options are fewer than 5 and there are no space restrictions.
+
+![Dropdown vs. radio](./images/dropdowns-8.png)
+<br/>
+<br/>
+
+#### Dropdown vs. Checkbox
+It is recommended to use dropdowns if the number of multi-select options exceeds 5 or if the space is limited, to better utilize the space. Checkboxes should be used if the options are fewer than 5 and there are no space restrictions.
+
+![Dropdown vs. checkbox](./images/dropdowns-9.png)
+<br/>
+<br/>

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

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