Merge pull request #2415 from innovaccer/develop

Develop
innovaccer · Nov 18, 2024 · cabb6fe · cabb6fe
2 parents f062399 + 70d5685
commit cabb6fe
Show file tree

Hide file tree

Showing 45 changed files with 46,780 additions and 55,246 deletions.
diff --git a/.github/workflows/jira.yml b/.github/workflows/jira.yml
diff --git a/core/components/atoms/button/Button.tsx b/core/components/atoms/button/Button.tsx
@@ -140,6 +140,8 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [`Button-regularIcon--${iconAlign}`]: children && iconAlign && size === 'regular' && !expanded,
   });
 
+  const spinnerSize = size === 'large' && children ? 'small' : 'xsmall';
+
   return (
     <button
       data-test="DesignSystem-Button"
@@ -153,7 +155,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
       {loading ? (
         <>
           <Spinner
-            size="small"
+            size={spinnerSize}
             appearance={appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white'}
             data-test="DesignSystem-Button--Spinner"
             className="Button-spinner"

diff --git a/core/components/atoms/button/__stories__/Loading.story.jsx b/core/components/atoms/button/__stories__/Loading.story.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '@/index';
 
-export const LoaderInButton = () => <Button appearance="primary" loading={true} aria-label="loading" />;
+export const LoaderInButton = () => <Button loading={true} aria-label="loading" />;
 
 export default {
   title: 'Components/Button/Button/Loader In Button',

diff --git a/core/components/atoms/button/__tests__/Button.test.tsx b/core/components/atoms/button/__tests__/Button.test.tsx
@@ -221,6 +221,43 @@ describe('Button component with icon', () => {
       expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Button-spinner');
     });
 
+    it('Should have Spinner--xsmall class when loading state for button size=tiny', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="tiny">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for button size=regular', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="regular">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--small class when loading state for button size=large', () => {
+      const { getByTestId } = render(
+        <Button loading={true} size="large">
+          Button
+        </Button>
+      );
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--small');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for icon button', () => {
+      const { getByTestId } = render(<Button loading={true} icon="places" />);
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
+    it('Should have Spinner--xsmall class when loading state for large icon button', () => {
+      const { getByTestId } = render(<Button loading={true} icon="places" size="large" />);
+      expect(getByTestId('DesignSystem-Button--Spinner')).toHaveClass('Spinner--xsmall');
+    });
+
     it('Should have no Button-spinner class when no loading state', () => {
       const { getByTestId } = render(<Button loading={false}>Button</Button>);
       expect(getByTestId('DesignSystem-Button')).not.toHaveClass('Button-spinner');

diff --git a/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap b/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -84,7 +84,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -191,7 +191,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -202,7 +202,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -309,7 +309,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -320,7 +320,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -427,7 +427,7 @@ exports[`Button component
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -438,7 +438,7 @@ exports[`Button component
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -904,7 +904,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -915,7 +915,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -939,7 +939,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -950,7 +950,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -974,7 +974,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -985,7 +985,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span
@@ -1009,7 +1009,7 @@ exports[`Button component with no children
       tabindex="0"
     >
       <svg
-        class="Spinner Spinner--small Button-spinner"
+        class="Spinner Spinner--xsmall Button-spinner"
         data-test="DesignSystem-Button--Spinner"
         viewBox="0 0 50 50"
       >
@@ -1020,7 +1020,7 @@ exports[`Button component with no children
           fill="none"
           r="20"
           stroke-miterlimit="10"
-          stroke-width="4"
+          stroke-width="8"
         />
       </svg>
       <span

diff --git a/core/components/atoms/progressRing/ProgressRing.tsx b/core/components/atoms/progressRing/ProgressRing.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type ProgressRingSize = 'small' | 'regular';
+export type ProgressRingSize = 'small' | 'regular' | 'large';
 
 export interface ProgressRingProps extends BaseProps {
   /**

diff --git a/core/components/atoms/progressRing/__stories__/Size.story.jsx b/core/components/atoms/progressRing/__stories__/Size.story.jsx
@@ -3,7 +3,7 @@ import { ProgressRing, Text } from '@/index';
 
 // CSF format story
 export const size = () => {
-  const sizes = ['small', 'regular'];
+  const sizes = ['small', 'regular', 'large'];
   return (
     <div className="d-flex">
       {sizes.map((ProgressRingSize, ind) => {

diff --git a/core/components/atoms/progressRing/__tests__/ProgressRing.test.tsx b/core/components/atoms/progressRing/__tests__/ProgressRing.test.tsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import ProgressRing, { ProgressRingProps as Props } from '../ProgressRing';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const size = ['small', 'regular'];
+const size = ['small', 'regular', 'large'];
 
 describe('ProgressRing component', () => {
   const mapper = {
@@ -45,9 +45,14 @@ describe('ProgressRing component', () => {
       expect(getByTestId('DesignSystem-ProgressRing')).toHaveClass('Ring Ring--regular');
     });
 
-    it('ProgressRing component should have the Ring--regular class when size={small}', () => {
+    it('ProgressRing component should have the Ring--small class when size={small}', () => {
       const { getByTestId } = render(<ProgressRing value={50} max={100} size="small" />);
       expect(getByTestId('DesignSystem-ProgressRing')).toHaveClass('Ring Ring--small');
     });
+
+    it('ProgressRing component should have the Ring--large class when size={large}', () => {
+      const { getByTestId } = render(<ProgressRing value={50} max={100} size="large" />);
+      expect(getByTestId('DesignSystem-ProgressRing')).toHaveClass('Ring Ring--large');
+    });
   });
 });
diff --git a/core/components/atoms/progressRing/__tests__/__snapshots__/ProgressRing.test.tsx.snap b/core/components/atoms/progressRing/__tests__/__snapshots__/ProgressRing.test.tsx.snap
@@ -1,5 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ProgressRing component 
+  value: 30, size: "large"
+ 1`] = `
+<body>
+  <div>
+    <svg
+      class="Ring Ring--large"
+      data-test="DesignSystem-ProgressRing"
+      viewBox="0 0 50 50"
+    >
+      <circle
+        class="Ring-background"
+        cx="25"
+        cy="25"
+        fill="none"
+        r="20"
+        stroke-dasharray="125.66370614359172 125.66370614359172"
+        stroke-width="8"
+      />
+      <circle
+        class="Ring-indicator"
+        cx="25"
+        cy="25"
+        data-test="DesignSystem-ProgressRing--Circle"
+        fill="none"
+        r="20"
+        stroke-dasharray="125.66370614359172 125.66370614359172"
+        stroke-dashoffset="87.96459430051421"
+        stroke-width="8"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
 exports[`ProgressRing component 
   value: 30, size: "regular"
  1`] = `

diff --git a/core/components/atoms/spinner/Spinner.tsx b/core/components/atoms/spinner/Spinner.tsx
@@ -3,13 +3,11 @@ import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 export type SpinnerAppearance = 'primary' | 'secondary' | 'white';
-export type SpinnerSize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface SpinnerProps extends BaseProps {
   /**
    * Color of `Spinner`
-   *
-   * **`secondary` & `white` appearances has been deprecated and all `secondary` & `white` appearances will now be changed to `primary` appearance automatically**
    */
   appearance: SpinnerAppearance;
   /**
@@ -30,6 +28,7 @@ export const Spinner = (props: SpinnerProps) => {
     },
     className
   );
+
   const circleClasses = classNames({
     Circle: true,
     [`Circle--${appearance}`]: appearance,
@@ -38,13 +37,21 @@ export const Spinner = (props: SpinnerProps) => {
   const svgProps = {
     viewBox: '0 0 50 50',
   };
+
+  const strokeWidthMapping = {
+    xsmall: 8,
+    small: 6,
+    medium: 4,
+    large: 4,
+  };
+
   const circleProps = {
     cx: 25,
     cy: 25,
     r: 20,
     fill: 'none',
     strokeMiterlimit: '10',
-    strokeWidth: '4',
+    strokeWidth: strokeWidthMapping[size],
   };
 
   return (