@indico-data/design-system 2.45.3 → 2.45.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.45.3",
+  "version": "2.45.5",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.stories.tsx

@@ -126,8 +126,9 @@ const meta: Meta = {
         category: 'State Props',
       },
       defaultValue: { summary: false },
-      description:
-        'Disables the button and shows a load spinner on the left hand side of the button children',
+      description: `Disables the button and shows a load spinner on the left hand side of the button children by default.
+        If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
+        If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.`,
     },
     isDisabled: {
       control: 'boolean',
@@ -416,8 +417,18 @@ export const Loading: Story = {
         </Button>
       </Col>
       <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconRight="thumbs-up">
+          Icon Right
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <span className="mr-2">Icon Only (Left)</span>
         <Button {...args} variant="action" iconLeft="thumbs-up" />
       </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <span className="mr-2">Icon Only (Right)</span>
+        <Button {...args} variant="action" iconRight="thumbs-up" />
+      </Col>
     </Row>
   ),
 };

package/src/components/button/Button.tsx

@@ -59,19 +59,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       onKeyDown={onKeyDown}
       {...rest}
     >
-      {/* Loading Icon */}
-      {isLoading && (
+      {/* Loading Icon on the left (default) */}
+      {isLoading && !iconRight && (
         <Icon
           name="indico-o"
           style={{ animation: 'spin 1s linear infinite' }}
-          className="mr-2"
+          className={children ? 'mr-2' : ''}
           ariaLabel="Loading..."
           size={size}
         />
       )}
 
       {/* Left Icon */}
-      {iconLeft && (
+      {iconLeft && !isLoading && (
         <Icon
           name={iconLeft}
           className={children ? 'mr-2' : ''}
@@ -84,7 +84,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       {children}
 
       {/* Right Icon */}
-      {iconRight && (
+      {iconRight && !isLoading && (
         <Icon
           name={iconRight}
           className={children ? 'ml-2' : ''}
@@ -92,6 +92,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           size={size}
         />
       )}
+
+      {/* Loading Icon on the right */}
+      {isLoading && iconRight && (
+        <Icon
+          name="indico-o"
+          style={{ animation: 'spin 1s linear infinite' }}
+          className={children ? 'ml-2' : ''}
+          ariaLabel="Loading..."
+          size={size}
+        />
+      )}
     </button>
   );
 });

package/src/components/button/__tests__/Button.test.tsx

@@ -45,7 +45,7 @@ describe('Button', () => {
       expect(button).toHaveClass('btn--pill');
     });
 
-    it('loads the corresponding loading class and shows loading icon', () => {
+    it('loads the corresponding loading class and shows loading icon when isLoading is true', () => {
       render(
         <Button isLoading onClick={onClick} ariaLabel="btn">
           Button
@@ -60,6 +60,43 @@ describe('Button', () => {
       expect(loadingIcon).toHaveClass('mr-2');
     });
 
+    it('displays the loading icon on the left when isLoading and iconLeft exists and hides the iconLeft', () => {
+      render(
+        <Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const loadingIcon = screen.getByLabelText('Loading...');
+      const iconLeft = screen.queryByLabelText('check Icon');
+
+      expect(loadingIcon).toHaveClass('mr-2');
+      expect(iconLeft).not.toBeInTheDocument();
+    });
+
+    it('displays the loading icon on the right when isLoading and iconRight exists and hides the iconRight', () => {
+      render(
+        <Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const loadingIcon = screen.getByLabelText('Loading...');
+      const iconRight = screen.queryByLabelText('check Icon');
+
+      expect(loadingIcon).toHaveClass('ml-2');
+      expect(iconRight).not.toBeInTheDocument();
+    });
+
+    it('does not apply a margin to the loading icon when no children are present', () => {
+      render(<Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn" />);
+      const loadingIcon = screen.getByLabelText('Loading...');
+      expect(loadingIcon).not.toHaveClass('mr-2');
+      expect(loadingIcon).not.toHaveClass('ml-2');
+
+      render(<Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn" />);
+      expect(loadingIcon).not.toHaveClass('mr-2');
+      expect(loadingIcon).not.toHaveClass('ml-2');
+    });
+
     it('does not apply the loading class when not loading', () => {
       render(
         <Button isLoading={false} onClick={onClick} ariaLabel="btn">

package/src/components/icons/Icon.tsx

@@ -15,19 +15,19 @@ export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: Icon
   );
 
   const faIconName = name.split('fa-')[1];
-  const faIcon =
-    faIconName &&
-    findIconDefinition({
-      prefix: 'fas',
-      iconName: faIconName as FAIconName,
-    });
-  const icon =
-    faIcon ||
-    findIconDefinition({
-      prefix: 'fak',
-      // @ts-ignore
-      iconName: name,
-    });
+
+  // If the icon name starts with 'fa-', it's a Font Awesome icon
+  // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
+  const icon = faIconName
+    ? findIconDefinition({
+        prefix: 'fas',
+        iconName: faIconName as FAIconName,
+      })
+    : findIconDefinition({
+        prefix: 'fak',
+        // @ts-ignore
+        iconName: name,
+      });
 
   if (!icon) {
     console.error(

package/src/components/icons/indicons.tsx

@@ -753,8 +753,8 @@ const indicons = {
     </svg>
   ),
   url: (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 50 50">
-      <path d="M22 33.1h-8q-3.85 0-6.475-2.625T4.9 24t2.625-6.475T14 14.9h8v2.3h-8q-2.9 0-4.85 1.95T7.2 24t1.95 4.85T14 30.8h8zm-5.3-7.95v-2.3h14.65v2.3zM26 33.1v-2.3h8q2.9 0 4.85-1.95T40.8 24t-1.95-4.85T34 17.2h-8v-2.3h8q3.85 0 6.475 2.625T43.1 24t-2.625 6.475T34 33.1z" />
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 100 100">
+      <path d="M 44.2376 70.4481 h -20.8177 q -10.0185 0 -16.8493 -6.8308 T -0.2602 46.768 t 6.8308 -16.8493 T 23.4199 23.0879 h 20.8177 v 5.9851 h -20.8177 q -7.5464 0 -12.6207 5.0743 T 5.7249 46.768 t 5.0743 12.6207 T 23.4199 64.4631 h 20.8177 z m -13.7917 -20.6876 v -5.9851 h 38.1224 v 5.9851 z M 54.6465 70.4481 v -5.9851 h 20.8177 q 7.5464 0 12.6207 -5.0743 T 93.1592 46.768 t -5.0743 -12.6207 T 75.4642 29.073 h -20.8177 v -5.9851 h 20.8177 q 10.0185 0 16.8493 6.8308 T 99.1443 46.768 t -6.8308 16.8493 T 75.4642 70.4481 z" />
     </svg>
   ),
   user: (