@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,100 @@
+---
+title: Button
+description: Buttons initiate actions and indicate what will happen after interacting with them.
+date: 15 June 2021
+tabs: ['Usage', 'Code', 'Content']
+showMobile: true
+---
+
+Buttons are one of the most crucial elements of a user interface. They are used to initiate actions and indicate what will happen after interacting with them. They can have varying looks basis on the prominence.
+<br/>
+
+#### Types
+Buttons come in a lot of styles basis on the intent and prominence.
+
+##### Basic button
+
+Basic button is the simplest and the default style of the button. It is used the most across products. It provides a lightweight button style while still maintaining affordability. Use other styles if less or more visual weight is required.
+<Preview name='basic-button' />
+
+##### Primary button
+Primary button is used to draw attention towards the primary action on a page. It is recommneded to have just a single instance of primary button per page. If you think more than one primary action is needed, try to re-evaluate the priority of actions.
+<Preview name='primary-button' />
+
+##### Alert button
+Alert button indicates destructive actions that cannot be undone typically such as delete, discard, etc.
+<Preview name='alert-button' />
+
+##### Transparent button
+Transparent button indicates actions that are less important or less frequent.
+<Preview name='transparent-button' />
+
+##### Expanded button
+Expanded button is used when the width of the button needs to match the parent. Use it sparingly as it takes a lot of space and attention.
+<Preview name='expanded-button' />
+
+##### Icon with label button
+Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it.
+
+**Icon in Left**
+<Preview name='icon-left-button' />
+
+**Icon in Right**
+<Preview name='icon-right-button' />
+
+##### Icon button
+Icon button only uses icons to indicate what the action would be. They come handy when there is a space constraint and the icon meaning is universal i.e. easy to understand such as print, edit, delete, etc.
+
+It is recommneded to show tooltip on hover so as to provide clarity on what the action would be.
+<Preview name='icon-button' />
+<br/>
+
+#### Appearances
+
+Buttons come in **4 appearances** basis on their intent - basic, primary, alert and transparent. The only exception is the expanded button which does not support the 'transparent' appearance.
+<Preview name='basic-button' />
+<br/>
+
+#### Sizes
+
+Buttons come in **3 sizes** - regular, tiny and large.
+<Preview name='basic-button' />
+<br/>
+
+#### States
+
+Buttons come in **6 states** - default, hover, active, focus, disabled and loading. Buttons with basic and transparent appearance come with an additional **selected** state to mimic toggle behavior.
+<Preview name='basic-button' />
+<br/>
+
+#### Usage
+<br/>
+
+##### Loading state inside a button
+Buttons come with a loading state which can be used to indicate that the action clicked is in progress.
+<Preview name='loader-in-button' />
+
+##### Tooltip on an icon button
+Always use tooltip with icon buttons. It provides an additional way to indicate the meaning of the button. Keep the tooltip label concise.
+
+![Show tooltip on an icon button](./images/buttons-1.png)
+<br/>
+
+##### Split button
+Basic and icon buttons can be combined to create a split button. The split button provides a way to attach multiple options to an action. The spacing between the two buttons is 2px.
+<Preview name='basic-button' />
+
+##### Toggle behavior
+As mentioned earlier, in addition to the common 6 states, basic and transparent appearances also supports an additional **selected** state which can be used to mimic toggle behavior.
+
+![Bold icon button in selected state](./images/buttons-2.png)
+<br/>
+
+##### Button groups
+Multiple buttons of same type can be grouped in proximity to indicate related actions.
+
+**Basic button group**
+<Preview name='label-button-group' />
+
+**Icon button group**
+<Preview name='icon-button-group' />

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

@@ -0,0 +1,15 @@
+---
+title: Calendar
+description: Calendar lets users select a date.
+component: card
+tabs: ['Usage', 'Code']
+showMobile: false
+---
+
+#### Live Demo
+<br/>
+
+<Preview name="calendar-all" />
+
+#### Props
+<PreviewWithPropTable name="calendar-all" />

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

@@ -0,0 +1,9 @@
+---
+title: Calendar
+description: Calendar lets users select a date.
+date: 15 June 2021
+tabs: ["Usage", "Code"]
+showMobile: false
+---
+
+Calendar lets users select a date. The dates are arranged in a grid visually for familiarity and easy scanning.

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

@@ -0,0 +1,15 @@
+---
+title: Cards
+description: Cards act as containers to group related information together.
+component: card
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name="default-card" />
+
+#### Props
+<PreviewWithPropTable name="default-card" />

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

@@ -0,0 +1,54 @@
+---
+title: Cards
+description: Cards act as containers to group related information together.
+date: 15 June 2021
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Cards make it easy to scan for relevant and actionable information by grouping them. Elements, like text and images, should be placed inside them in a way that clearly indicates hierarchy. This way multiple different sections can be created within a page.
+
+Cards can be arranged vertically, horizontally or in a grid.
+<br/>
+
+#### Types
+<br/>
+
+##### Default
+
+Default card is the most used type of card. It consists of a shadow, `Shadow 10` by default.
+<Preview name='default-card' />
+
+##### Subdued
+
+Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (top, right, bottom, left) and not somewhere in between.
+<Preview name='card-subdued' />
+
+##### Flat
+
+Flat card is used to create sections within a default card i.e. card inside a card.
+<Preview name='card-flat' />
+<br/>
+
+#### Usage
+<br/>
+
+##### Scrolling inside a card
+To indicate that the content is scrollable within a card, use a scrollbar. The dividers in the header and the footer should only be shown when the content is scrollable.
+
+<Preview name="default-card" />
+
+##### Highlighting a section
+Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (bottom, right, etc.) and not somewhere in between.
+
+<Preview name="card-subdued" />
+
+##### Card within a default card
+Flat card is used when there is a need to create sections within a default card i.e. card inside a card.
+
+<Preview name="card-card-within-a-card" />
+
+##### Empty card
+When data is not available, the card remains empty. In that case, an illustration and/or an error message is displayed.
+
+<Preview name="default-card" />

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

@@ -0,0 +1,16 @@
+---
+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.
+component: Checkbox
+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

@@ -0,0 +1,49 @@
+---
+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.
+component: Checkbox
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Types
+
+<br/>
+
+##### Default
+
+<Preview name="checkbox-default" />
+
+##### 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.
+
+<Preview name="checkbox-with-help-text" />
+
+#### Usage
+<br/>
+
+##### Checkbox Group
+
+Checkbox group is a list of multiple standalone checkboxes with a group label on the top. 
+
+*Note: Multiple checkboxes should have a minimum of 8px spacing in between.
+
+<Preview name="checkbox-checkbox-group" />
+
+##### 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 all of its child checkboxes are checked.
+
+<Preview name="checkbox-nested" />
+
+##### 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" />

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

@@ -0,0 +1,15 @@
+---
+title: Chips
+description: Chips are compact group components used for quick selection, actions, and filtering.
+component: chip
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name="chip-all" />
+
+#### Props
+<PreviewWithPropTable name="chip-all" />

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

@@ -0,0 +1,34 @@
+---
+title: Chips
+description: Chips are compact group components used for quick selection, actions, and filtering.
+component: chip
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+Chips are compact components that appear in a group. Since they appear in a group, they are compact in size and come to the rescue when regular components are either too overwhelming (e.g. buttons for selection) or too underwhelming (e.g. dropdowns for applied filters).
+<br/>
+
+#### Types
+<br/>
+
+##### Selection chips
+Selection chips are used to let the users select one or many options from a group and the effect is immediate. For example - applying filters on a page. In that case, as soon as a filter chip is clicked, the filtered results are shown.
+<Preview name="chip-selection" />
+<br/>
+
+##### Action chips
+Action chips are used when there is a group of related actions to perform. These actions are contextual and dynamic. Buttons can't be used in this case as they should be used for persistent and consistent actions only.
+<Preview name="chip-selection" />
+<br/>
+
+##### Input chips
+Input chips are used inside inputs to behave as removable entries or tags.
+<Preview name="chip-selection" />
+<br/>
+
+#### Usage
+<br/>
+
+##### 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.

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

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

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

@@ -0,0 +1,58 @@
+---
+title: Date picker
+description: Date picker is used for selecting or entering a date value.
+tabs: ['Usage', 'Code']
+---
+
+Date picker lets users select or directly enter date values. It can either be a single date or a date range.
+
+### Structure
+Date picker is built up using calendar and popover components. Unlike calendar, which can be displayed upfront, a trigger is always needed for the date picker such as inputs.
+<Preview name="datepicker-variants-with-input"/>
+
+### Types
+Date picker comes in two types - one for selecting single date value called date picker and another for selecting a date range aptly called date range picker.
+
+#### Date picker
+For selecting single date value.
+
+![Date picker](./images/datePicker-1.png)
+<br/>
+
+#### Date range picker
+For selecting a date range.
+
+![Date range picker](./images/datePicker-2.png)
+<br/>
+<br/>
+
+### Usage
+<br/>
+
+#### Triggers
+One obvious expectation from a date picker is the ability to input values using a keyboard e.g. when a user has to enter the date of birth. Getting the desired date is much quicker this way as users do not have to go through the calendar select the desired value. Therefore, use **inputs** to trigger the date picker.
+<Preview name="datepicker-variants-with-input"/>
+
+#### Using preset values
+Use selection chips to give quick selection of preset date/date-range values.
+
+![Using preset values](./images/datePicker-3.png)
+<br/>
+
+If there is a space crunch, you can have these preset values in the popover itself. But this defeats the purpose of quick selection since the users will have to open the popover to access them. Hence, make sure to use this only when there is no option left.
+
+![Preset values inside popover](./images/datePicker-4.png)
+<br/>
+
+#### Using single input for a date range
+If there is a space crunch, you can have a single input for entering/selecting a date range.
+<Preview name="daterangepicker-variants-with-single-input"/>
+
+#### Using date and time picker together
+As soon as a date or date range is selected, time picker dropdown should be triggered so that users can select the time without any additional click.
+
+![Date and time picker together](./images/datePicker-5.png)
+<br/>
+ 
+
+

package/docs/src/pages/components/index.mdx

@@ -0,0 +1,7 @@
+---
+description: Components Page
+date: 15 June 2021
+showMobile: true
+---
+
+# Component Page

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

@@ -0,0 +1,16 @@
+---
+title: Message
+description: Message is used to provide collective feedback to the user about an action or a state.
+component: Message
+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

@@ -0,0 +1,26 @@
+---
+title: Message
+description: Message is used to provide collective feedback to the user about an action or a state.
+component: Message
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Types
+<br/>
+
+##### Info
+
+<Preview name='message-info' />
+
+##### Warning
+
+<Preview name='message-warning' />
+
+##### Alert
+
+<Preview name='message-alert' />
+
+##### Success
+
+<Preview name='message-success' />

package/docs/src/pages/components/overview/index.mdx

@@ -0,0 +1,6 @@
+---
+title: Components
+description: Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
+tabs: ['All components', 'Status']
+showMobile: true
+---

package/docs/src/pages/components/overview/tabs/Overview.js

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { Card, CardBody, Row, Column, Heading, Input, } from '@innovaccer/design-system';
+import { Link } from 'gatsby';
+
+import './overview.css';
+import { debounce } from '../../../../util/Helpers';
+import { data } from '../../../../data/components/index.js';
+
+function Overview() {
+
+  const [previewList, setPreviewList] = useState(data);
+
+  const onSearchHandler = debounce((target) => {
+    const searchList = data
+      .filter((item) => item.name.toLowerCase().match(target.value.toLowerCase()));
+    setPreviewList(searchList);
+  });
+
+  return (
+    <div>
+      <Input
+        className="w-50 my-7"
+        icon="search"
+        name="input"
+        placeholder="Search components"
+        onChange={({ target }) => onSearchHandler(target)}
+      />
+
+      <Row>
+        {
+          previewList.length > 0 ?
+            previewList.map(({ image = () => (<img alt='' />), name, link = '' }) => {
+
+
+              return (
+                <Column
+                  size={4}
+                  key={name}
+                  className="pr-6 pb-6"
+                >
+
+                  <Link className='card-link' disabled={!link.length} to={`/components/${(link).toLowerCase()}`}>
+                    <Card
+                      shadow='none'
+                      className='w-100 overflow-hidden overview-card pb-5'
+                    >
+                      <CardBody>
+                        <div className='py-5'>
+                          <div className='d-flex justify-content-center align-items-center' style={{ overflow: 'hidden', height: '136px' }}>
+                            {React.createElement(image)}
+                          </div>
+                        </div>
+                        <Heading size="s">
+                          {name}
+                        </Heading>
+                      </CardBody>
+                    </Card>
+                  </Link>
+
+                </Column>
+              )
+            }) :
+            <Heading size="s" className="mb-5">
+              No result found :(
+            </Heading>
+        }
+      </Row>
+    </div>
+  )
+}
+
+export default Overview;

package/docs/src/pages/components/overview/tabs/all-components.mdx

@@ -0,0 +1,10 @@
+---
+title: Components
+description: Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
+tabs: ["All components", "Status"]
+showMobile: true
+---
+
+import Overview from './Overview.js';
+
+<Overview />

package/docs/src/pages/components/overview/tabs/overview.css

@@ -0,0 +1,30 @@
+.overview-cardBody {
+  height: 134px;
+  opacity: 0.6;
+}
+
+.overview-cardBody:hover {
+  opacity: 1;
+}
+
+.overview-card:hover {
+  box-shadow: var(--shadow-s);
+}
+
+.min-width-100 {
+  min-width: 100% !important;
+}
+
+.scrollbar {
+  width: var(--spacing-l);
+  border-radius: var(--spacing);
+  height: var(--spacing-6);
+}
+
+.card-link, .card-link:hover {
+  text-decoration: none !important;
+}
+
+.card-link[disabled], .card-link[disabled] * {
+  pointer-events: none;
+}

package/docs/src/pages/components/overview/tabs/status.mdx

@@ -0,0 +1,22 @@
+---
+title: Components
+description: Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
+tabs: ["All components", "Status"]
+showMobile: true
+---
+
+import { navigate } from 'gatsby';
+import { data, schema } from "../../../../data/components/index.js";
+
+<Card shadow="none">
+  <Table
+    showMenu={false}
+    type="resource"
+    onRowClick={(props) => {
+      navigate(`/components/${props.link.toLowerCase()}`);
+    }}
+    data={data}
+    schema={schema}
+    withPagination={false}
+  />
+</Card>

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

@@ -0,0 +1,17 @@
+---
+title: Radio
+description:
+  Radio button lets users select one value from a list 
+  of mutually exclusive choices. Whenever a user makes a new selection, 
+  the previously selected option is deselected. If multi-select is required use checkboxes instead of radio.
+component: radio
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='default-radio'/>
+
+<PreviewWithPropTable name='default-radio' />