@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,12 @@
+---
+title: avatar
+description: Avatar Prop Table
+component: avatar
+tabs: ['Usage', 'Code', 'Content']
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<PreviewWithPropTable name='default-avatar' />

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

@@ -0,0 +1,20 @@
+---
+title: avatar
+description: Avatar Usage
+date: 15 June 2021
+component: avatar
+tabs: ['Usage', 'Code', 'Content']
+showMobile: true
+---
+
+#### Types
+
+##### Default
+
+Default Avatar is used the most across products.
+
+<Preview name='default-avatar' />
+
+##### All
+
+<Preview name='size' />

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

@@ -0,0 +1,16 @@
+---
+title: Badges
+description: Badges contain short labels that help in 'tagging' entities. The container of a badge is rounded at the corners.
+component: badges
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='badge--solid' />
+
+#### Props
+
+<PreviewWithPropTable name='badge--solid' />

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

@@ -0,0 +1,23 @@
+---
+title: Badges
+description: Badges contain short labels that help in 'tagging' entities. The container of a badge is rounded at the corners.
+component: badges
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Types
+
+<br />
+
+##### Solid
+
+Solid Badges should be used to highlight important information on the page so that they can be recognized easily.
+
+<Preview name='badge--solid' />
+
+##### Subtle
+
+Subtle Badges should be used when many badges are required to differentiate content. In that case, using solid badges become a bit overwhelming. For example tags in a list.
+
+<Preview name='badge-subtle-alert' />

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

@@ -0,0 +1,16 @@
+---
+title: Breadcrumbs
+description: Breadcrumbs are used to note the path of a record and help the user to navigate back to the parent.
+component: Breadcrumbs
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name="breadcrumbs" />
+
+#### Props
+
+<PreviewWithPropTable name="breadcrumbs" />

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

@@ -0,0 +1,34 @@
+---
+title: Breadcrumbs
+description: Breadcrumbs are used to note the path of a record and help the user to navigate back to the parent.
+component: Breadcrumbs
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+Breadcrumbs help users become aware of their current location with respect to the rest of the website or application.
+By using the page hierarchy, breadcrumbs are easily understood by users, take up very little space on the page,
+and facilitate discovery. As helpful as they are, breadcrumbs should never replace the main navigation on a page.
+
+Breadcrumbs show the hierarchical progress from the highest entity level to the lowest, one step at a time.
+This typically starts with the product landing page and goes to the current page or content.
+
+<br/>
+
+#### Types
+<br/>
+
+##### Default
+
+The default variants come for use up to 4 levels of hierarchy. There is always a trailing slash.
+
+- The max-width of the label is 160px, beyond that the text will truncate with … The user can see the entire label on a tooltip on hover.
+- Since the breadcrumb component is made up of the Subtle Link button, you can change its state as per the requirement. Available states are - Default, Hover, Active, Focused, Disabled.
+
+<Preview name="breadcrumbs" />
+
+##### More than 4 levels
+
+If it ever comes down to using breadcrumbs for more than 4 levels, use the component **More than 4 levels**.
+It has a tiny transparent icon button in the middle to show the truncation.
+Users can click on this button to get a menu that will display the truncated levels. 

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

@@ -0,0 +1,12 @@
+#### Live Demo
+<br/>
+
+<Preview name='primary-button' />
+
+#### Accessibility
+
+<A11yBlock name='primary-button' />
+
+#### Props
+
+<PreviewWithPropTable name='primary-button' />

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

@@ -0,0 +1 @@
+# Do's and Don't content WIP

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

@@ -0,0 +1,55 @@
+---
+title: Button
+description:
+  Buttons are one of the crucial elements of a user
+  interface. They are used to initiate actions and can have
+  varying importance based on the need.
+date: 15 June 2021
+tabs: ['Usage', 'Code', 'Content']
+showMobile: true
+---
+
+#### Types
+
+<br />
+
+##### Basic
+
+Basic button is used the most across products. It provides a lightweight button style while still maintaining affordability.
+
+<Preview name='basic-button' />
+
+##### Primary
+
+Primary button highlights the primary action on a page. Preferably have only one primary action 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
+
+Alert button indicates destructive actions on a page, in dialogs, or in settings.
+
+<Preview name='alert-button' />
+
+##### Transparent
+
+Transparent button indicates actions that are less important or less frequent.
+
+<Preview name='transparent-button' />
+
+##### Expanded
+
+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
+
+Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it.
+
+<Preview name='icon-left-button' />
+
+##### Icon in Right
+<br/>
+
+<Preview name='icon-right-button' />

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

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

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

@@ -0,0 +1,23 @@
+---
+title: Card
+description: Cards act as containers to group related information and actions together.
+date: 15 June 2021
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Types
+
+<br />
+
+##### Default
+
+<Preview name='default-card' />
+
+##### Subdued
+
+<Preview name='card-subdued' />
+
+##### Flat
+
+<Preview name='card-flat' />

package/docs/src/pages/mobile/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/mobile/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/mobile/components/index.mdx

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

package/docs/src/pages/mobile/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/mobile/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/mobile/components/overview/index.mdx

@@ -0,0 +1,8 @@
+---
+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
+---
+
+#### Mobile page for components overview

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

@@ -0,0 +1,8 @@
+---
+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
+---
+
+All Component in WIP

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

@@ -0,0 +1,115 @@
+---
+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
+---
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    type='resource'
+    withHeader={false}
+    onRowClick={(props) => {
+      if (props.name === 'Buttons') {
+        window.open('/components/button/usage/', '_blank');
+      }
+    }}
+    data={[
+      {
+        name: 'Avatar',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Badges',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Breadcrumb',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Buttons',
+        design: 'Available',
+        code: 'Available',
+      },
+      {
+        name: 'Card',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Checkbox',
+        design: 'Beta',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Chips',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Date and Time picker',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+      {
+        name: 'Dropdown',
+        design: 'Unavailable',
+        code: 'Unavailable',
+      },
+    ]}
+    schema={[
+      {
+        name: 'name',
+        displayName: 'Component Name',
+        width: '40%',
+        sorting: false,
+        cellRenderer: ({ data }) => {
+          return <Text appearance='link'>{data.name}</Text>;
+        },
+      },
+      {
+        name: 'design',
+        displayName: 'Design',
+        width: '30%',
+        cellType: 'STATUS_HINT',
+        sorting: false,
+        translate: (a) => {
+          const design = a.design;
+          return {
+            title: design,
+            statusAppearance:
+              design === 'Available'
+                ? 'success'
+                : design === 'Unavailable'
+                ? 'alert'
+                : 'info',
+          };
+        },
+      },
+      {
+        name: 'code',
+        displayName: 'Code',
+        width: '30%',
+        cellType: 'STATUS_HINT',
+        sorting: false,
+        translate: (a) => {
+          const code = a.code;
+          return {
+            title: code,
+            statusAppearance:
+              code === 'Available'
+                ? 'success'
+                : code === 'Unavailable'
+                ? 'alert'
+                : 'info',
+          };
+        },
+      },
+    ]}
+  />
+</Card>

package/docs/src/pages/mobile/foundations/colors.mdx

@@ -0,0 +1,149 @@
+---
+title: Colors
+description: Maintaining consistent and engaging digital interfaces, whether applications or experiences, demands extended guidance around color usage
+date: 15 June 2021
+showMobile: true
+---
+
+export const PRIMARY_COLORS = [
+  {
+    name: 'Jal - Darker',
+    backgroundColor: 'var(--primary-darker)',
+    hexCode: '#003365',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Dark',
+    backgroundColor: 'var(--primary-dark)',
+    hexCode: '#00509F',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Default',
+    backgroundColor: 'var(--primary)',
+    hexCode: '#0070DD',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Light',
+    backgroundColor: 'var(--primary-light)',
+    hexCode: '#4F9DE7',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lighter',
+    backgroundColor: 'var(--primary-lighter)',
+    hexCode: '#97C5F0',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lightest',
+    backgroundColor: 'var(--primary-lightest)',
+    hexCode: '#DCECF9',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+export const ALERT_COLORS = [
+  {
+    name: 'Jal - Darker',
+    backgroundColor: 'var(--alert-darker)',
+    hexCode: '#631919',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Dark',
+    backgroundColor: 'var(--alert-dark)',
+    hexCode: '#9C2828',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Default',
+    backgroundColor: 'var(--alert)',
+    hexCode: '#D93737',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Light',
+    backgroundColor: 'var(--alert-light)',
+    hexCode: '#EB776C',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lighter',
+    backgroundColor: 'var(--alert-lighter)',
+    hexCode: '#F7ADA5',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Jal - Lightest',
+    backgroundColor: 'var(--alert-lightest)',
+    hexCode: '#F9E2E2',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+export const WARNING_COLORS = [
+  {
+    name: 'Haldi - Darker',
+    backgroundColor: 'var(--warning-darker)',
+    hexCode: '#6B4A06',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Dark',
+    backgroundColor: 'var(--warning-dark)',
+    hexCode: '#B78707',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Default',
+    backgroundColor: 'var(--warning)',
+    hexCode: '#FFC208',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Light',
+    backgroundColor: 'var(--warning-light)',
+    hexCode: '#FFD462',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Lighter',
+    backgroundColor: 'var(--warning-lighter)',
+    hexCode: '#FFE597',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+  {
+    name: 'Haldi - Lightest',
+    backgroundColor: 'var(--warning-lightest)',
+    hexCode: '#FFF5C7',
+    colorCode: 'rgb(0, 51, 101)',
+  },
+];
+
+#### Primary color
+
+<br />
+
+##### Jal
+
+<Row className='mb-10'>
+  <Colors colorData={PRIMARY_COLORS} />
+</Row>
+
+#### Secondary colors
+
+<br />
+
+##### Mirch
+
+<Row className='mb-10'>
+  <Colors colorData={ALERT_COLORS} />
+</Row>
+
+##### Haldi
+
+<Row>
+  <Colors colorData={WARNING_COLORS} />
+</Row>