@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/pages/404.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Homepage from '../components/templates/Homepage';
+import {
+  Heading,
+  Button,
+  Paragraph,
+} from '@innovaccer/design-system';
+import { navigate } from 'gatsby';
+
+const PageNotFound = () => {
+  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
+          icon='arrow_backward'
+          iconAlign='left'
+          onClick={() => navigate(-1)}
+        >
+          Go Back
+        </Button>
+      </div>
+    </Homepage>
+  );
+};
+
+export default PageNotFound;

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

@@ -0,0 +1,14 @@
+---
+title: Avatar
+description: Avatars are used to identify users through display images or their initials.
+component: avatar
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='default-avatar'/>
+
+<PreviewWithPropTable name='default-avatar' />

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

@@ -0,0 +1,53 @@
+---
+title: Avatars
+description: Avatars are used to identify users through display pictures or their initials.
+component: avatar
+tabs: ['Usage', 'Code']
+showMobile: true
+---
+
+An avatar consists of the display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can't be fetched, a fallback glyph is used.
+<br/>
+
+#### Types
+<br/>
+
+##### Appearances
+Avatar comes in 9 Appearances -
+<Preview name='avatar-variants-appearance' />
+
+##### Sizes
+Avatar comes in 2 sizes -
+<Preview name='size' />
+<br/>
+
+#### Usage
+<br/>
+
+##### Color Assignment
+The background colors to be used in the avatars should be generated dynamically such that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.
+
+For example, an avatar generated for a user - Franklin Clinton, can look like following and it will look the same wherever it is used.
+![](./images/avatar-1.png)
+<br/>
+
+##### Displaying Name
+Since avatars can only show images or initials, there should be an option to show the full name of an entity. This can be achieved by **hovering** over on an avatar which displays a tooltip containing the full name.
+![](./images/avatar-2.png)
+
+<br/>
+
+##### Number of avatars
+Avatars can be used individually or as a group if required. For example - If an activity is being done by 4 users, you would want to use the avatar group for the same.
+
+To be specific, an avatar can be used in 3 ways as -
+1. Single entity
+![](./images/avatar-1.png)
+
+2. Two entities
+![](./images/avatar-3.png)
+
+3. More than 2 entities
+![](./images/avatar-4.png)
+In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on click.
+![](./images/avatar-5.png)

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

@@ -0,0 +1,15 @@
+---
+title: Badges
+description: Badges are used to tag entities with concise and relevant information.
+component: badges
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='badge--solid' />
+
+#### Props
+<PreviewWithPropTable name='badge--solid' />

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

@@ -0,0 +1,43 @@
+---
+title: Badges
+description: Badges are used to tag entities with concise and relevant information.
+component: badges
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+Badges contain short labels that help in 'tagging' entities. The container of a badge is rounded at the corners.
+<br/>
+
+#### Types
+<br />
+
+##### Solid
+
+Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page.
+<Preview name='badge-solid-warning' />
+
+##### Subtle
+
+Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors.
+<Preview name='badge-subtle-warning' />
+<br/>
+
+#### Appearances
+A badge comes in 9 appearances.
+<Preview name='appearance' />
+<br/>
+
+#### Usage
+<br/>
+
+##### Spacing between badges
+Badges should maintain a **minimum spacing of 8px** from the content on either side.
+
+![Spacing between badges](./images/badges-1.png)
+<br/>
+
+##### Badges vs Pills
+Badges are used for tagging entities while pills are used to display count of entities.
+
+![When to use badges vs pills](./images/badges-2.png)

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

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

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

@@ -0,0 +1,30 @@
+---
+title: Breadcrumbs
+description: Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.
+component: Breadcrumbs
+tabs: ["Usage", "Code"]
+showMobile: true
+---
+
+Breadcrumbs help users become aware of their current location with respect to the rest of the product/application. Breadcrumbs show the hierarchical progress from the highest entity level to the lowest.
+
+As helpful as they are, breadcrumbs should never replace the main navigation on a page.
+<br/>
+
+#### Structure
+
+* Breadcrumbs are made up of subtle link component. In addition to the label, there is always a trailing forward slash.
+* The max-width of the label is 160px, beyond that the text will truncate with '…'. The users can see the entire label on hover inside a tooltip.
+* Since the breadcrumb component is made up of the subtle link, you can change its state as per the requirement. Available states are - Default, Hover, Active, Focused, Disabled.
+<br/>
+
+<Preview name="breadcrumbs" />
+<br/>
+
+#### Usage
+<br/>
+
+##### Showing more than 4 levels
+By default, breadcrumbs can show upto 4 levels of hierarchy. For cases where there are more than 4 levels, only first and last breadcrumb is shown. The rest levels can be seen on clicking the menu button present in the middle.
+
+<Preview name="breadcrumbs-variants-more-than-4-levels" />

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

@@ -0,0 +1,18 @@
+---
+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
+---
+
+#### Live Demo
+<br/>
+
+<Preview name='primary-button' />
+
+#### Accessibility
+<A11yBlock name='primary-button' />
+
+#### Props
+<PreviewWithPropTable name='primary-button' />