@innovaccer/design-system 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -1,4 +1,73 @@
 
+## 2.10.0-0  (2022-03-30)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* (docs): add design for no results in components search (5594cb28)
+* (docs): add design for 404 page (4dfef4de)
+* (docs) : add copy to clipboard for codeblocks and headings (78cb4501)
+
+### Fixes
+* (DateRangePicker): popover not closing on range selection (b5597056)
+* (doc): fix tooltip message while copying code on introduction page (58a7c313)
+* (docs): fix page layout overflow scroll to auto (93176391)
+* (chips): fix input chips hover and selection and active  chips border (e64d8e85)
+* (docs) fix actionsheet navigation issue (1ab2ed4f)
+* (toast): fix toast close button width (ee95e19f)
+* (docs): fix description in container (9f826bcc)
+* (docs): fix font family for react tab in show code (3933bb9f)
+* (docs): fix scroll jump in right nav bar (549ce214)
+* (input): update input icon appearance (1b1e1e1a)
+* (docs): add separate navigation for mobile and web components (97632861)
+* (docs): fix leftnav highlight on tab changes (4bee0cfb)
+
+### Improvements
+NA
+
+### Documentation
+* (docs): updated images in web overview (7292d892)
+* (docs): update front-matter for components and patterns (24fabc67)
+* (docs): add content for lists in mobile (7952a33b)
+* (docs): add documentation for dialogs in mobile (addeef3e)
+* (docs): add documentation for inputs in mobile (d7267f29)
+* (docs): add content for page headers in mobile (4a1e4898)
+* (docs): add documentation for chips in mobile (dc6deb57)
+* (docs): add documentation for cards in mobile (de6766c4)
+* (docs): add content for radio in mobile (067fd7b7)
+* (docs): add content for switch in mobile (02e91667)
+* (docs): add content for tabs in mobile (c5b7ab5b)
+* (docs): add content for toast in mobile (6e756ddd)
+* (docs): update empty state for description (9fffbe8a)
+* (docs): update email-guidlines md files (a358874e)
+* (docs) add documentation for bottom sheet in mobile (8ad96de9)
+* (docs): update error-messages md file (3b77abe1)
+* (docs): update placeholder-text md file (25f8dbbb)
+* (docs): add content for layouts (285bb162)
+* (docs): add alt text in an image in forms (d01d33a8)
+* (docs):Added content for Patterns - Forms (22077e0c)
+* (docs): add content for page headers (d9ffab58)
+* (docs): Added content for UI states (4344340d)
+* (docs) add documentation for buttons in mobile (59bbfea1)
+* (docs) add documentation of action sheet (6587a47e)
+* (docs): update email guidelines content (c6220015)
+* (docs): update error messages  content (b2dd0586)
+* (docs): update empty states content (2b7156d4)
+* (docs): add documentation for navigation, meta list, pagination (2a9cb91f)
+* (docs): added content for file uploader (ec8ffca3)
+
+-------------------
+
 ## 2.9.0-0  (2022-02-01)
 ### Highlights
 * feat: adds docs site (44ab33d3)

package/core/components/atoms/avatar/__stories__/index.story.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Avatar from '../Avatar';
+
+// CSF format story
+export const all = () => {
+  const appearance = 'primary';
+  const size = 'tiny';
+  const withTooltip = true;
+  const children = '';
+  const firstName = 'John';
+  const lastName = 'Doe';
+
+  const options = {
+    appearance,
+    withTooltip,
+    size,
+    firstName,
+    lastName,
+  };
+
+  return <Avatar {...options}>{children}</Avatar>;
+};
+
+export default {
+  title: 'Components/Avatar/All',
+  component: Avatar,
+};

package/core/components/atoms/avatar/__stories__/variants/Appearance.story.jsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Avatar from '../../Avatar';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const appearance = () => {
+  const weight = 'strong';
+
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+            <br />
+            <br />
+            <Avatar firstName="John" lastName="Doe" appearance={appear} />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Avatar/Variants/Appearance',
+  component: Avatar,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Avatar',
+      },
+    },
+  },
+};

package/core/components/atoms/avatarGroup/__stories__/index.story.jsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { AvatarGroup } from '../AvatarGroup';
+import { list } from './AvatarList';
+
+export const all = () => {
+  const position = 'bottom-end';
+  const on = 'hover';
+  const dark = true;
+  const max = 2;
+  const options = {
+    max,
+    popoverOptions: {
+      on,
+      position,
+      dark,
+    },
+    list: list.slice(0, 4),
+  };
+
+  return <AvatarGroup {...options} />;
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler'
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller'
+    },
+    {
+      firstName: 'Arya',
+      lastName: 'Stark',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler'
+    },
+  ];
+  return <AvatarGroup list={list} popoverOptions={{ dark: true, on: 'hover', position: 'bottom'}}/>;
+}`;
+
+export default {
+  title: 'Components/AvatarGroup/All',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/atoms/avatarGroup/__stories__/variants/CustomPopper.story.jsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { AvatarGroup, Avatar, Text } from '@/index';
+import { list } from '../AvatarList';
+
+export const customPopper = () => {
+  const popperRenderer = (names) => {
+    const AvatarList = names.map((avatar, index) => {
+      const { firstName, lastName, appearance } = avatar;
+
+      return (
+        <div className="d-flex align-items-center mr-4 mb-4" key={index}>
+          <Avatar
+            firstName={firstName}
+            lastName={lastName}
+            appearance={appearance}
+            className="mr-4"
+            withTooltip={false}
+          />
+          <Text>{`${firstName} ${lastName}`}</Text>
+        </div>
+      );
+    });
+
+    return (
+      <div className="overflow-auto py-4 px-6" style={{ maxHeight: '150px' }}>
+        {AvatarList}
+      </div>
+    );
+  };
+
+  return <AvatarGroup list={list} popoverOptions={{ popperRenderer, dark: false, on: 'click' }} />;
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler'
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller'
+    },
+    {
+      firstName: 'Arya',
+      lastName: 'Stark',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler'
+    },
+  ];
+
+  const popperRenderer = (list) => {
+    const AvatarList = list.map((avatar, index) => {
+      const { firstName, lastName, appearance } = avatar;
+
+      return (
+        <div className="d-flex align-items-center mr-4 mb-4" key={index}>
+          <Avatar
+            firstName={firstName}
+            lastName={lastName}
+            appearance={appearance}
+            className="mr-4"
+            withTooltip={false}
+          />
+          <Text>{\`\${firstName} \${lastName}\`}</Text>
+        </div>
+      )
+    });
+
+    return (
+      <div className="overflow-auto py-4 px-6" style={{ maxHeight: '150px' }}>
+        {AvatarList}
+      </div>
+    )
+  };
+
+  return (
+    <AvatarGroup
+      list={list}
+      popoverOptions={{ dark: false, on: 'click', popperRenderer }}
+    />
+  );
+}`;
+
+export default {
+  title: 'Components/AvatarGroup/Variants/Custom Popper',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/atoms/backdrop/__stories__/index.story.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Backdrop from '../Backdrop';
+import { Paragraph } from '@/index';
+
+export const all = () => {
+  const open = true;
+
+  const options = {
+    open,
+  };
+
+  return (
+    <div>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+        <br />
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        <br />
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        <br />
+      </Paragraph>
+      <Backdrop {...options} />
+    </div>
+  );
+};
+
+const customCode = `() => (
+  <div>
+    <Paragraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br />
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br />
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br />
+    </Paragraph>
+    <Backdrop open={false} />
+  </div>
+)`;
+
+export default {
+  title: 'Components/Backdrop/All',
+  component: Backdrop,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        noHtml: true,
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/index.story.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Badge from '../Badge';
+
+// CSF format story
+export const all = () => {
+  const appearance = 'primary';
+  const subtle = false;
+  const children = 'Badge';
+
+  return (
+    <Badge appearance={appearance} subtle={subtle}>
+      {children}
+    </Badge>
+  );
+};
+
+export default {
+  title: 'Components/Badge/All',
+  component: Badge,
+};

package/core/components/atoms/badge/_stories_/variants/Appearance.story.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Badge from '../../Badge';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const appearance = () => {
+  const subtle = false;
+  const weight = 'strong';
+  const children = 'Badge';
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge appearance={appear} subtle={subtle}>
+              {children}
+            </Badge>
+            <br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Badge/Variants/Appearance',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/badge/_stories_/variants/Subtle.story.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Badge from '../../Badge';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const subtle = () => {
+  const ButtonSubtle = true;
+  const weight = 'strong';
+  const children = 'Badge';
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge appearance={appear} subtle={ButtonSubtle}>
+              {children}
+            </Badge>
+            <br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Badge/Variants/Subtle',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+      },
+    },
+  },
+};

package/core/components/atoms/breadcrumbs/__stories__/variants/lessThan4Levels.story.jsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Breadcrumbs } from '@/index';
+import { action } from '@/utils/action';
+
+// CSF format story
+export const lessThan4Levels = () => {
+  const list = [
+    {
+      label: 'Level 0',
+      link: '/level0',
+    },
+    {
+      label: 'Level 1',
+      link: '/level1',
+    },
+    {
+      label: 'Level 2',
+      link: '/level2',
+    },
+    {
+      label: 'Level 3',
+      link: '/level3',
+    },
+  ];
+
+  return (
+    <div style={{ background: 'var(--secondary-lightest)' }}>
+      <Breadcrumbs list={list} onClick={(link) => action(`on-click: ${link}`)()} />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      label: 'Level 0',
+      link: '/level0'
+    },
+    {
+      label: 'Level 1',
+      link: '/level1'
+    },
+    {
+      label: 'Level 2',
+      link: '/level2'
+    },
+    {
+      label: 'Level 3',
+      link: '/level3'
+    }
+  ];
+
+  return (
+    <div style={{ background: 'var(--secondary-lightest)' }}>
+      <Breadcrumbs
+        list={list}
+        onClick={link => console.log(\`on-click: \${link}\`)}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Breadcrumbs/Variants/Less Than 4 Levels',
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/atoms/breadcrumbs/__stories__/variants/moreThan4Levels.story.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Breadcrumbs } from '@/index';
+import { action } from '@/utils/action';
+
+// CSF format story
+export const moreThan4Levels = () => {
+  const list = [
+    {
+      label: 'Level 0',
+      link: '/level0',
+    },
+    {
+      label: 'Level 1',
+      link: '/level1',
+    },
+    {
+      label: 'Level 2',
+      link: '/level2',
+    },
+    {
+      label: 'Level 3',
+      link: '/level3',
+    },
+    {
+      label: 'Level 4',
+      link: '/level4',
+    },
+  ];
+
+  return (
+    <div style={{ background: 'var(--secondary-lightest)' }}>
+      <Breadcrumbs list={list} onClick={(link) => action(`on-click: ${link}`)()} />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const list = [
+    {
+      label: 'Level 0',
+      link: '/level0'
+    },
+    {
+      label: 'Level 1',
+      link: '/level1'
+    },
+    {
+      label: 'Level 2',
+      link: '/level2'
+    },
+    {
+      label: 'Level 3',
+      link: '/level3'
+    },
+    {
+      label: 'Level 4',
+      link: '/level4'
+    },
+  ];
+
+  return (
+    <div style={{ background: 'var(--secondary-lightest)' }}>
+      <Breadcrumbs
+        list={list}
+        onClick={link => console.log(\`on-click: \${link}\`)}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Breadcrumbs/Variants/More Than 4 Levels',
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};