npm - @innovaccer/design-system - Versions diffs - 2.7.0 → 2.8.0-0 - Mend

@innovaccer/design-system 2.7.0 → 2.8.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/.github/workflows/chromatic.yml CHANGED Viewed

@@ -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/main.yml CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,34 @@
+## 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/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 }} />

package/core/components/atoms/avatarGroup/__tests__/__snapshots__/AvatarGroup.test.tsx.snap CHANGED Viewed

@@ -16,6 +16,7 @@ Object {
           data-test="DesignSystem-AvatarGroup--Avatar"
           style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger flex-grow-0"
           >
@@ -37,6 +38,7 @@ Object {
           data-test="DesignSystem-AvatarGroup--Avatar"
           style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger flex-grow-0"
           >
@@ -53,6 +55,7 @@ Object {
             </span>
           </div>
         </div>
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger"
         >
@@ -62,10 +65,9 @@ Object {
           >
             <span
               class="Avatar Avatar--regular Avatar--secondary Avatar--disabled"
-              data-test="DesignSystem-Avatar"
             >
               <span
-                class="Text Text--white Text--medium Text--regular Avatar-content--regular Avatar-content--secondary"
+                class="Text Text--white Text--regular Avatar-content--secondary"
                 data-test="DesignSystem-Text"
               >
                 +4
@@ -86,6 +88,7 @@ Object {
         data-test="DesignSystem-AvatarGroup--Avatar"
         style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
       >
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger flex-grow-0"
         >
@@ -107,6 +110,7 @@ Object {
         data-test="DesignSystem-AvatarGroup--Avatar"
         style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
       >
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger flex-grow-0"
         >
@@ -123,6 +127,7 @@ Object {
           </span>
         </div>
       </div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger"
       >
@@ -132,10 +137,9 @@ Object {
         >
           <span
             class="Avatar Avatar--regular Avatar--secondary Avatar--disabled"
-            data-test="DesignSystem-Avatar"
           >
             <span
-              class="Text Text--white Text--medium Text--regular Avatar-content--regular Avatar-content--secondary"
+              class="Text Text--white Text--regular Avatar-content--secondary"
               data-test="DesignSystem-Text"
             >
               +4