@innovaccer/design-system 2.9.1 → 3.0.0-2

package/docs/src/pages/404.js

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

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

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

@@ -1,52 +0,0 @@
----
-title: Avatars
-description: Avatars are used to identify users through display pictures or their initials.
-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

@@ -1,14 +0,0 @@
----
-title: Badges
-description: Badges are used to tag entities with concise and relevant information.
-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

@@ -1,42 +0,0 @@
----
-title: Badges
-description: Badges are used to tag entities with concise and relevant information.
-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

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

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

@@ -1,29 +0,0 @@
----
-title: Breadcrumbs
-description: Breadcrumbs indicate the path of a record and help the users to navigate back to the parent record.
-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

@@ -1,17 +0,0 @@
----
-title: Button
-description: Buttons initiate actions and indicate what will happen after interacting with them.
-tabs: ['Usage', 'Code', 'Content']
-showMobile: true
----
-
-#### Live Demo
-<br/>
-
-<Preview name='primary-button' />
-
-#### Accessibility
-<A11yBlock name='primary-button' />
-
-#### Props
-<PreviewWithPropTable name='primary-button' />