@innovaccer/design-system 2.7.0 → 2.9.0-0

package/.github/workflows/chromatic.yml

@@ -11,7 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
       
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/docs_pull_request.yml

@@ -0,0 +1,20 @@
+name: Pull request
+
+on: pull_request
+
+jobs:
+  lint_test_build:
+    name: lint, test and build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: yarn install
+        run: cd docs && yarn install
+
+      - name: build
+        run: cd docs && yarn build

package/.github/workflows/main.yml

@@ -10,7 +10,7 @@ jobs:
     name: Release tag
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       
       - name: Check for release commit
         id: 'is_release_commit'

package/.github/workflows/manual.yml

@@ -13,7 +13,7 @@ jobs:
     name: Release tag
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/pull_request.yml

@@ -7,7 +7,7 @@ jobs:
     name: lint, test and build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
             
       - uses: actions/setup-node@v1
         with:

package/.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
     name: Test for coverage
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
             
       - uses: actions/setup-node@v1
         with:

package/CHANGELOG.md

@@ -1,6 +1,74 @@
 
+## 2.9.0-0  (2022-02-01)
+### Highlights
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+
+### Fixes
+* fix(verticalnav): fix verticalnav active hover state shadow (1b341516)
+* fix(button): fix button hover background color (1e696743)
+* fix(button): fix button hover and focus style (795ae48b)
+* fix(dropdown): fix dropdown items closing animation (dc8c6102)
+* fix(tabs): fix tabs conflict in selected focused state style (fa4ff904)
+* fix(toast): add message to  discription story (1cac895d)
+* fix(button): props table not showing (70ac3e39)
+* fix(leftNav): fix left navbar highlighting on tab changes (d836a42e)
+* fix(table): add border in table for mdx and fix overflow behaviour (233293ed)
+* fix(table): make scrollbar width consistent (af5da8f6)
+* fix(table): fix table data issue when rows are more than 27 (b33aafc1)
 
+### Improvements
+NA
 
+### Documentation
+* Adds documentations for components.
+
+-------------------
+
+## 2.8.0-0  (2022-01-12)
+### Highlights
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+* Fix chip inline alignment problem (253ba672)
+* Fix progressbar background color (938be99b)
+* Fix disabled  slider knob shadow (aff1ddb6)
+* Fix broken alignment due to inlineLabel in Dropdown (d7b51053)
+* Resolve tooltip close issue on disabled button (cc0c693d)
+
+### Improvements
+* Add popover transitions (f1873f65)
+* Add support for three characters in Avatar component (ba6bc35b)
+
+### Documentation
+NA
+
+-------------------
 
 ## 2.7.0  (2021-12-23)
 ### Highlights

package/README.md

@@ -126,6 +126,12 @@ For css variables to work on IE we use a polyfill at runtime to achieve dynamic
 </script>
 ```
 
+## :card_file_box: Repos
+Here are the supporting repositories.
+- **[MDS Rich Text Editor](https://github.com/innovaccer/mds-rich-text-editor)** - Feature-rich WYSIWYG (What You See Is What You Get) HTML editor and WYSIWYG Markdown editor. It is used to create blogs, notes sections, comment sections etc. It has a variety of tools to edit and format rich content.
+- **[MDS Docs](https://github.com/innovaccer/mds-docs)** - Documentation site for Masala design system.
+- **[MDS Helpers](https://github.com/innovaccer/mds-helpers)** - Alert Service.
+
 ## :books: Documentation
 
 - [🌶 Masala Design System](http://design.innovaccer.com)

package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -34,7 +34,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -62,7 +62,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -90,7 +90,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -118,7 +118,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -155,7 +155,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -192,7 +192,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i
@@ -229,7 +229,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="undefined"
+      class="Chip-wrapper undefined"
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
     >
       <i

package/core/components/atoms/_chip/index.tsx

@@ -57,7 +57,7 @@ export const GenericChip = (props: GenericChipProps) => {
     <div
       data-test="DesignSystem-GenericChip--GenericChipWrapper"
       {...baseProps}
-      className={`${className}`}
+      className={`Chip-wrapper ${className}`}
       onClick={onClickHandler}
     >
       {icon && (

package/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -7,6 +7,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -25,6 +26,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -102,6 +104,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -120,6 +123,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -197,6 +201,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -215,6 +220,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -292,6 +298,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -310,6 +317,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -387,6 +395,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -405,6 +414,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -482,6 +492,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -500,6 +511,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -577,6 +589,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -595,6 +608,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -672,6 +686,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -690,6 +705,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -767,6 +783,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -785,6 +802,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >
@@ -862,6 +880,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger flex-grow-0"
       >
@@ -880,6 +899,7 @@ Object {
     </div>
   </body>,
   "container": <div>
+    <style />
     <div
       class="OutsideClick PopperWrapper-trigger flex-grow-0"
     >

package/core/components/atoms/avatarGroup/AvatarCount.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Text } from '@/index';
+
+const AvatarCount = (props: any) => {
+  const { hiddenAvatarCount, avatarStyle } = props;
+
+  const ContentClass = classNames({
+    [`Avatar-content--secondary`]: true,
+  });
+
+  const AvatarVariantsClass = classNames({
+    Avatar: true,
+    [`Avatar--regular`]: true,
+    [`Avatar--secondary`]: true,
+    ['Avatar--disabled']: true,
+  });
+  return (
+    <div data-test="DesignSystem-AvatarGroup--TriggerAvatar" style={avatarStyle}>
+      <span className={AvatarVariantsClass}>
+        <Text appearance={'white'} className={ContentClass}>
+          {`+${hiddenAvatarCount}`}
+        </Text>
+      </span>
+    </div>
+  );
+};
+
+export default AvatarCount;

package/core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-import { Avatar, Popover, Text } from '@/index';
+import { Popover } from '@/index';
 import { AvatarProps, PopoverProps } from '@/index.type';
+import AvatarCount from './AvatarCount';
+import Avatars from './Avatars';
+import AvatarPopperBody from './AvatarPopperBody';
 
 interface AvatarData extends Record<string, any> {
   firstName?: string;
@@ -10,7 +13,7 @@ interface AvatarData extends Record<string, any> {
   appearance?: AvatarProps['appearance'];
 }
 
-interface AvatarPopperProps {
+interface AvatarPopoverProps {
   popperRenderer?: (names: AvatarData[]) => JSX.Element;
   appendToBody?: PopoverProps['appendToBody'];
   dark?: PopoverProps['dark'];
@@ -46,7 +49,7 @@ export interface AvatarGroupProps extends BaseProps {
    * **Popover for +x avatar**
    *
    * <pre className="DocPage-codeBlock">
-   * AvatarPopperProps: {
+   * AvatarPopoverProps: {
    *   popperRenderer?: (names: AvatarData[]) => JSX.Element;
    *   appendToBody?: boolean;
    *   dark?: boolean;
@@ -68,7 +71,7 @@ export interface AvatarGroupProps extends BaseProps {
    * </pre>
    *
    */
-  popoverOptions: AvatarPopperProps;
+  popoverOptions: AvatarPopoverProps;
   /**
    * Position to place the tooltip on `Avatars` shown before +x
    */
@@ -90,7 +93,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
 
   const baseProps = extractBaseProps(props);
 
-  const extraAvatars = list.length > max ? (list.length - max > 9 ? 9 : list.length - max) : 0;
+  const hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
 
   const style = {
     borderRadius: '50%',
@@ -113,74 +116,25 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
     popperClassName
   );
 
-  const trigger = (
-    <div data-test="DesignSystem-AvatarGroup--TriggerAvatar" style={style}>
-      <Avatar appearance="secondary" firstName="+" lastName={`${extraAvatars}`} withTooltip={false} />
-    </div>
-  );
-
-  const renderPopper = () => {
-    const extraAvatarsList = list.slice(max, list.length);
-
-    if (popperRenderer && typeof renderPopper === 'function') {
-      return popperRenderer(extraAvatarsList);
-    }
-
-    return (
-      <div className="py-6 pr-4 pl-6">
-        <div className="AvatarGroup-TextWrapper" style={{ maxHeight }}>
-          {extraAvatarsList.map((item, ind) => {
-            const { firstName = '', lastName = '' } = item;
-            const name = `${firstName} ${lastName}`;
-
-            return (
-              <Text
-                key={ind}
-                appearance={dark ? 'white' : 'default'}
-                className={ind < extraAvatars - 1 ? 'mb-5' : ''}
-                data-test="DesignSystem-AvatarGroup--Text"
-              >
-                {name}
-              </Text>
-            );
-          })}
-        </div>
-      </div>
-    );
-  };
-
-  const renderAvatars = () => {
-    const avatars = list.slice(0, max).map((item, index) => {
-      const { appearance, firstName, lastName } = item;
-      return (
-        <div data-test="DesignSystem-AvatarGroup--Avatar" className="AvatarGroup-item" style={style} key={index}>
-          <Avatar
-            appearance={appearance}
-            firstName={firstName}
-            lastName={lastName}
-            withTooltip={true}
-            tooltipPosition={tooltipPosition}
-          />
-        </div>
-      );
-    });
-    return avatars;
-  };
-
   return (
     <div data-test="DesignSystem-AvatarGroup" {...baseProps} className={`${AvatarGroupClass} d-inline-flex`}>
-      {renderAvatars()}
+      <Avatars avatarList={list.slice(0, max)} avatarStyle={style} tooltipPosition={tooltipPosition} />
       {list.length - max > 0 && (
         <Popover
           on={on}
           dark={dark}
-          trigger={trigger}
+          trigger={<AvatarCount hiddenAvatarCount={hiddenAvatarCount} avatarStyle={style} />}
           position={position}
           appendToBody={appendToBody}
           className={popperClass}
           offset="medium"
         >
-          {renderPopper()}
+          <AvatarPopperBody
+            hiddenAvatarList={list.slice(max, list.length)}
+            popperRenderer={popperRenderer}
+            maxHeight={maxHeight}
+            dark={dark}
+          />
         </Popover>
       )}
     </div>

package/core/components/atoms/avatarGroup/AvatarPopperBody.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import classNames from 'classnames';
+
+const AvatarPopperBody = (props: any) => {
+  const { hiddenAvatarList, popperRenderer, maxHeight, dark } = props;
+
+  if (popperRenderer) {
+    return popperRenderer(hiddenAvatarList);
+  }
+
+  return (
+    <div className="py-6 pr-4 pl-6">
+      <div className="AvatarGroup-TextWrapper" style={{ maxHeight }}>
+        {hiddenAvatarList.map((item: any, ind: any) => {
+          const { firstName = '', lastName = '' } = item;
+          const name = `${firstName} ${lastName}`;
+          const AvatarTextClass = classNames({
+            [`mb-5`]: ind < hiddenAvatarList.length - 1,
+          });
+          return (
+            <Text
+              key={ind}
+              appearance={dark ? 'white' : 'default'}
+              className={AvatarTextClass}
+              data-test="DesignSystem-AvatarGroup--Text"
+            >
+              {name}
+            </Text>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AvatarPopperBody;

package/core/components/atoms/avatarGroup/Avatars.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Avatar } from '@/index';
+
+const Avatars = (props: any) => {
+  const { avatarList, avatarStyle, tooltipPosition } = props;
+  const avatars = avatarList.map((item: any, index: any) => {
+    const { appearance, firstName, lastName } = item;
+    return (
+      <div data-test="DesignSystem-AvatarGroup--Avatar" className="AvatarGroup-item" style={avatarStyle} key={index}>
+        <Avatar
+          appearance={appearance}
+          firstName={firstName}
+          lastName={lastName}
+          withTooltip={true}
+          tooltipPosition={tooltipPosition}
+        />
+      </div>
+    );
+  });
+  return avatars;
+};
+
+export default Avatars;

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

@@ -29,7 +29,48 @@ export const all = () => {
   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/__tests__/AvatarGroup.test.tsx

@@ -135,7 +135,7 @@ describe('AvatarGroup Component with prop: popoverOptions', () => {
   it('renders avatars with prop: popperRenderer', () => {
     const max = 3;
     const popperList = list.slice(max, list.length);
-    const popperRenderer = jest.fn();
+    const popperRenderer = jest.fn(() => <div>Avatar</div>);
 
     const { getByTestId } = render(
       <AvatarGroup list={list} max={max} popoverOptions={{ popperRenderer, on: 'click', dark: false }} />