@innovaccer/design-system 2.9.1 → 3.0.0-2

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

@@ -1,12 +0,0 @@
----
-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

@@ -1,20 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,23 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,34 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
-#### 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

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

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

@@ -1,55 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,23 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -1,49 +0,0 @@
----
-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

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

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

@@ -1,16 +0,0 @@
----
-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

@@ -1,26 +0,0 @@
----
-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

@@ -1,8 +0,0 @@
----
-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

@@ -1,8 +0,0 @@
----
-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

@@ -1,115 +0,0 @@
----
-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

@@ -1,149 +0,0 @@
----
-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>