@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/pages/foundations/interactions.mdx

@@ -0,0 +1,192 @@
+---
+title: Interactions
+description: Motion can bring the screen to life, guide users through complex experiences, and help move them forward—from here to there, now to next, start to finish—and make progress.
+date: 15 June 2021
+showMobile: true
+---
+
+Motion helps in conveying action and hierarchy. It can bring the screen to life, guide users through complex experiences, and help move them forward—from now to next and start to finish. These guidelines are based on the Carbon Design System
+
+<br />
+<br />
+
+#### Style
+
+Productivity and expression are both essential to an interface. Reserve expressive motion for occasional, important moments, to better capture the user’s attention and offer a rhythmic break to the productive experience.
+Hence there are two styles of motion - Productive motion and Expressive motion.
+
+<br />
+
+##### Productive motion
+
+Productive motion is appropriate for moments when the user needs to focus on completing tasks. Micro-interactions such as button states, dropdowns, revealing additional information, or rendering data tables and visualisations can be designed with productive motion.
+
+<br />
+
+##### Expressive motion
+
+Expressive motion is appropriate for moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion.
+
+<br />
+<br />
+
+#### Easing
+
+Elements on the screen should speed up quickly and slow down smoothly, obeying the physics of a light-weight material. “Easing curves” describe the precise amount of accelerations in motion. There are three types of easing curves -
+
+<br />
+
+##### Standard easing
+
+Use <Rectangle name={'standard-easing'} /> when an element is visible from the beginning to the end of a motion. Expanding card and the sorting of table rows are good examples.
+
+<br />
+
+##### Entrance easing
+
+With this style, an element quickly appears and slows down to a stop. Use <Rectangle name={'entrance-ease'} /> when adding elements to the view, such as a modal or toast appearing. Elements moving in response to the user’s input, such as a dropdown opening or toggle switching should also use this style.
+
+<br />
+
+##### Exit easing
+
+Use <Rectangle name={'exit-easing'} /> when removing elements from view, such as closing a modal or toaster. The element speeds up as it exits from view, implying that its departure from the screen is permanent.
+
+An exception to exits: if an element leaves the view but stays nearby, ready to reappear upon user action, use standard easing instead. A good example of this is a reveal. The reveal leaves the view, but slows down as it exits, implying that it would come to rest just outside the view, and ready to be recalled.
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        curve: 'Standard easing',
+        productive: 'cubic-bezier(0.2, 0, 0.38, 0.9)',
+        expressive: 'cubic-bezier(0.4, 0.14, 0.3, 1)s',
+      },
+      {
+        curve: 'Entrance easing',
+        productive: 'cubic-bezier(0, 0, 0.38, 0.9)',
+        expressive: 'cubic-bezier(0, 0, 0.3, 1)',
+      },
+      {
+        curve: 'Exit easing',
+        productive: 'cubic-bezier(0.2, 0, 1, 0.9)',
+        expressive: 'cubic-bezier(0.4, 0.14, 1, 1)',
+      },
+    ]}
+    schema={[
+      {
+        name: 'curve',
+        displayName: 'Curve',
+        width: '20%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'productive',
+        displayName: 'Productive',
+        width: '40%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.productive} />;
+        },
+      },
+      {
+        name: 'expressive',
+        displayName: 'Expressive',
+        width: '40%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.expressive} />;
+        },
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+
+<br />
+<br />
+<br />
+
+#### Duration
+
+Duration is calculated based on the style and size of the motion. Among the two motion styles, productive motion is significantly faster than expressive motion. Motion’s duration should be dynamic based on the size of the animation; the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.
+
+<br />
+
+##### Duration values
+
+<br />
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        tokens: 'duration--fast-01',
+        usage:
+          'Micro-interactions such as button and toggle',
+        value: '80ms',
+      },
+      {
+        tokens: 'duration--fast-02',
+        usage: 'Micro-interactions such as fade',
+        value: '120ms',
+      },
+      {
+        tokens: 'duration--moderate-01',
+        usage:
+          'Micro-interactions, small expansion, short distance movements',
+        value: '160ms',
+      },
+      {
+        tokens: 'duration--moderate-02',
+        usage: 'Expansion, system communication, toast',
+        value: '240ms',
+      },
+      {
+        tokens: 'duration--slow-01',
+        usage:
+          'Large expansion, important system notifications',
+        value: '4000ms',
+      },
+      {
+        tokens: 'duration--slow-02',
+        usage: 'Background dimming',
+        value: '720ms',
+      },
+    ]}
+    schema={[
+      {
+        name: 'tokens',
+        displayName: 'Tokens',
+        width: '25%',
+        sorting: false,
+        separator: true,
+        cellRenderer: ({ data }) => {
+          return <Rectangle name={data.tokens} />;
+        },
+      },
+      {
+        name: 'usage',
+        displayName: 'Usage',
+        width: '45%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'value',
+        displayName: 'Value',
+        width: '30%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>

package/docs/src/pages/foundations/layout/index.mdx

@@ -0,0 +1,151 @@
+---
+title: Layout
+description: Instructions for using Innovaccer Design System layout. We use 8px as the base unit for our spacial system.
+date: 15 June 2021
+showMobile: true
+---
+
+#### Spacing
+
+We use 8px as the base unit for our spacial system. The spacing system has been roughly generated by multiplying eight with even numbers.
+
+<Message
+  appearance='info'
+  description='12px is an outlier to the rule. This special padding amount allows for better alignment of stacked items while giving elements enough room to breathe.'
+/>
+
+<br />
+
+![](./images/spacing.png)
+
+<br />
+<br />
+<br />
+
+#### Grid
+
+Using a baseline grid creates a consistent rhythm between the components and typography. We use a 12-columns grid.
+
+<br />
+
+##### Types
+
+###### Regular Grid
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    data={[
+      {
+        property: 'Left Padding',
+        value: '8px',
+      },
+      {
+        property: 'Right Padding',
+        value: '8px',
+      },
+      {
+        property: 'Gutter',
+        value: '16px',
+      },
+    ]}
+    schema={[
+      {
+        name: 'property',
+        displayName: 'Property',
+        width: '40%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'value',
+        displayName: 'Value',
+        width: '30%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+
+<br />
+
+![](./images/grid-layout.jpeg)
+
+<br />
+
+###### Grid with margin
+
+For the outermost grid, this component is used. This can
+also be nested subsequently if a 16px padding is required
+on both sides.
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    data={[
+      {
+        property: 'Left Padding',
+        value: '8 + 8px',
+      },
+      {
+        property: 'Right Padding',
+        value: '8 + 8px',
+      },
+      {
+        property: 'Gutter',
+        value: '16px',
+      },
+    ]}
+    schema={[
+      {
+        name: 'property',
+        displayName: 'Property',
+        width: '40%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'value',
+        displayName: 'Value',
+        width: '30%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+
+<br />
+
+![](./images/grid-margin.jpeg)
+
+<br />
+<br />
+
+##### Columns
+
+The column includes the padding at the inside, 8 px each side. This way the gutter becomes 16px for adjacent columns.
+
+![](./images/grid-column.jpeg)
+
+<br />
+<br />
+
+##### Components
+
+We use a 8px baseline grid. All UI components including paddings and margins are created in multiples of eight so that everything aligns to the pixel grid.
+When text is used within a UI element, set the line-height to be consistent with the baseline grid.
+
+![](./images/baseline-grid.png)
+
+<br />
+<br />
+
+##### Typography
+
+All typography aligns to a 4px baseline grid. This allows for readable line heights at all sizes.
+
+![](./images/typography.png)

package/docs/src/pages/foundations/logos.mdx

@@ -0,0 +1,88 @@
+---
+title: Logos
+description: Logos are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
+date: 15 June 2021
+showMobile: true
+logos:
+  [
+    'dap',
+    'default',
+    'inacademy',
+    'inapi',
+    'incare',
+    'inconnect',
+    'indata',
+    'ingraph',
+    'innote',
+    'inoffice',
+    'inreport',
+    'P360',
+    'withoutType',
+  ]
+---
+
+export const ORGANIZATION_LOGOS = [
+  {
+    imgName: 'default',
+    name: 'Default',
+  },
+  {
+    imgName: 'withoutType',
+    name: 'Without Type',
+  },
+];
+
+export const PRODUCTS_LOGOS = [
+  {
+    imgName: 'incare',
+    name: 'InCare',
+  },
+  {
+    imgName: 'innote',
+    name: 'InNote',
+  },
+  {
+    imgName: 'ingraph',
+    name: 'InGraph',
+  },
+  {
+    imgName: 'inconnect',
+    name: 'InConnect',
+  },
+  {
+    imgName: 'indata',
+    name: 'InData',
+  },
+  {
+    imgName: 'inapi',
+    name: 'InApi',
+  },
+  {
+    imgName: 'inreport',
+    name: 'InReport',
+  },
+  {
+    imgName: 'dap',
+    name: 'Data Activation Platform',
+  },
+  {
+    imgName: 'inacademy',
+    name: 'InAcademy',
+  },
+  {
+    imgName: 'P360',
+    name: 'Patient 360',
+  },
+];
+
+#### Organization
+
+<Row className='mb-10'>
+  <Logos logoData={ORGANIZATION_LOGOS} />
+</Row>
+
+#### Products
+
+<Row>
+  <Logos logoData={PRODUCTS_LOGOS} />
+</Row>

package/docs/src/pages/foundations/principles.mdx

@@ -0,0 +1,60 @@
+---
+title: Principles
+description: Design principles we use in aur Design System.
+showMobile: true
+---
+
+#### Our values
+
+Values are like fingerprints, sticking to them will help us make better design decisions.
+
+<br />
+
+<Heading size='s'> Purposeful</Heading>
+
+Biased for less. Every button, icon, or copy should have a purpose. Each step in a workflow.
+
+<br />
+
+<Heading size='s'> Data-Driven </Heading>
+
+Personalized for users. Pre-fill options. Design for practices you want to promote.
+
+<br />
+
+<Heading size='s'>Friendly</Heading>
+
+Approachable and friendly communication.
+
+<br />
+
+<Heading size='s'>Convention over Configuration</Heading>
+
+Design for choices that are well thought out and based on best practices. Avoid unnecessary configuration. Avoid configuration to support fragile workflows.
+
+<br />
+<br />
+
+#### Design principles
+
+Our design principles constantly help us remain authentic, relevant, and original.
+
+<br />
+
+<Heading size='s'>
+  Design for Repeatability and Reuse
+</Heading>
+
+We try to create our design elements as modules. This makes it easy for us to reuse them in combination with other elements.
+
+<br />
+
+<Heading size='s'>Create WOW Moments </Heading>
+
+People love surprises. If you can make them smile, they are hooked.
+
+<br />
+
+<Heading size='s'>Keep it Attractive</Heading>
+
+We believe people perceive attractive products as more usable (<Text appearance="link">The Aesthetic-Usability Effect</Text> ). So, we make sure our products look sharp.

package/docs/src/pages/foundations/response-time.mdx

@@ -0,0 +1,124 @@
+---
+title: Response times
+description: Instructions for Response Time. 0.1s to 1s is about the limit to keep it snappy.
+date: 15 June 2021
+showMobile: true
+---
+
+0.1s to 1s is about the limit to keep it snappy.
+
+<br />
+
+#### Free navigation
+
+**1.0 second** is the limit for having the user feel that the system is **reacting instantaneously**, meaning that no special feedback is necessary except to display the result.
+
+For example, this is the limit from the time the user selects a row in a table until that row should highlight or otherwise give feedback that it's selected.
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        good: '[0, 100ms]',
+        needs_improvement: '(100ms, 300ms]',
+        poor: 'over 300ms',
+      },
+    ]}
+    schema={[
+      {
+        name: 'good',
+        displayName: 'Good',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'needs_improvement',
+        displayName: 'Needs Improvement',
+        width: '33%',
+        sorting: false,
+        cellType: 'WITH_META_LIST',
+        separator: true,
+      },
+      {
+        name: 'poor',
+        displayName: 'Poor',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+
+<br />
+<br />
+
+#### Data manipulation
+
+**1.0 second** is about the limit for the **user's flow of thought
+to stay** uninterrupted, even though the user will notice the delay.
+Normally, no special feedback is necessary during delays of more
+than 0.1 but less than 1.0 second, but the user does lose the
+feeling of operating directly on the data.
+
+For example, if sorting a table according to the selected column can't be done in 0.1 seconds, it certainly has to be done in 1 second, or users will feel that the UI is sluggish and will lose the sense of "flow" in performing their task. For delays of more than 1 second, indicate to the user that the computer is working on the problem, for example by changing the shape of the cursor.
+
+<Card shadow='none'>
+  <Table
+    showMenu={false}
+    separator={true}
+    data={[
+      {
+        good: '[0, 100ms]',
+        needs_improvement: '(100ms, 300ms]',
+        poor: 'over 300ms',
+      },
+    ]}
+    schema={[
+      {
+        name: 'good',
+        displayName: 'Good',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'needs_improvement',
+        displayName: 'Needs Improvement',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+      {
+        name: 'poor',
+        displayName: 'Poor',
+        width: '33%',
+        sorting: false,
+        separator: true,
+      },
+    ]}
+    withHeader={false}
+  />
+</Card>
+
+<br />
+<br />
+
+#### Exports and processes
+
+**10 seconds** is the limit for **keeping the user's attention focused** on the dialogue. Anything slower than 10 seconds needs a percent-done indicator as well as a clearly signposted way for the user to interrupt the operation. Assume that users will need to reorient themselves when they return to the UI after a delay of more than 10 seconds.
+
+For example, exporting a report as PDF should happen under 10 seconds. A percent-done indicator should preferably be shown while the export is being created.
+
+<br />
+<br />
+
+#### Long activities (or background tasks)
+
+For longer delays, users should be able to perform other tasks while waiting for the process to finish, so they should be given feedback indicating when it's expected to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.
+
+Delays longer than 10 seconds are only acceptable during natural breaks in the user's work, for example when switching tasks.

package/docs/src/pages/foundations/typography.mdx

@@ -0,0 +1,8 @@
+---
+title: Typography
+description: Typography can help create clear hierarchies, organize information, and guide users through a product or experience.
+date: 15 June 2021
+showMobile: true
+---
+
+The design system has many built in tokens to easily solve most common use cases surrounding text and its formatting.

package/docs/src/pages/getting-started/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Getting started
+description: Quick start guide for Masala design system.
+---
+
+Innovaccer's Masala Design System is a set of guidelines, components, and patterns to speed up product design and development.
+It aims to bring a consistent experience across the products built by us and our partners. The system aims to be the source of truth for every component present in our products.
+
+<Message appearance="info" description="You can use components in MDX." />

package/docs/src/pages/guides/MDX.mdx

@@ -0,0 +1,17 @@
+---
+title: MDX
+description: guide for working with MDX
+date: 15 June 2021
+---
+
+Markdown for the component era
+MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast 🚀.
+
+Try it
+
+Below is an example of JSX embedded in Markdown. <br /> **Try and change
+the background color!**
+
+<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
+  <h3>This is JSX</h3>
+</div>

package/docs/src/pages/home/homepage.css

@@ -0,0 +1,23 @@
+.home-menu {
+  background-color: var(--primary-darker);
+}
+
+.border-radius--rounded {
+  border-radius: 50%;
+}
+
+.font-weight--normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.home-text-color {
+  color: #151414;
+}
+
+.sticky-bottom {
+  bottom: var(--spacing-2);
+}
+
+.gatsby-image-wrapper [data-placeholder-image] {
+  background-color: var(--white) !important;
+}