@indico-data/design-system 2.45.1 → 2.45.3

package/package.json

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

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

@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Button, Col, Row } from '@/components';
 import { iconNames } from '@/storybook/iconNames';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { indiconDefinitions } from '@/components/icons/indicons';
+
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
 const meta: Meta = {
   title: 'Components/Button',

package/src/components/icons/Icon.mdx

@@ -6,7 +6,7 @@ import { Col, Row } from '@/components';
 
 # Icon
 
-The `Icon` component provides unified rendering of both custom SVG icons (Indicons) and FontAwesome icons.
+The `Icon` component provides unified rendering of both custom SVG icons (Indicons) and Font Awesome icons.
 
 <Canvas
   of={IconStories.DefaultIcon}
@@ -31,17 +31,38 @@ You can use the `className` prop to apply custom styles to the icons.
 
 <Story of={IconStories.CustomStyledIcon} />
 ```tsx // .tsx
-<Icon name="fa-mountain-sun" className="color-primary-600" />
+<Icon name="fa-mountain-sun" size="xl" className="color-primary-600" />
+```
+
+### Duotone Icons
+
+Some icons are duotone, meaning they have two non-overlapping layers that can be styled differently. By default, the secondary (top) layer is differentiated by an opacity of 40% (while the primary layer has an opacity of 100%). To apply different styles to the primary and secondary layers, use the `--fa-primary-` and `--fa-secondary-` prefixes to set the `color` and `opacity` styles.
+
+<Story of={IconStories.DuotoneIconStory} />
+```tsx // .tsx
+<Icon
+  name="warning-stroke"
+  size="xl"
+  // in a real scenario, these should be set via CSS rather than inline
+  style={{
+    '--fa-primary-color': 'gold',
+    '--fa-secondary-color': 'black',
+    '--fa-secondary-opacity': '1.0',
+  }}
+/>
 ```
 
 ## Indicons (Custom Icons)
 
-Indicons are custom SVG icons created specifically for our design system. Below is a list of all available custom icons.
+Indicons are custom SVG icons created specifically for our design system. The complete icon set is registered and available by default, unlike Font Awesome icons.
+
+Below is a list of all available custom icons.
 
 <Story of={IconStories.Indicons} />
+
 ## Font Awesome Icons
 
-All FontAwesome icon names are prefixed with `fa-`. For a FontAwesome icon to be available, it must be registered globally via `registerFontAwesomeIcons`.
+All Font Awesome icon names are prefixed with `fa-`. For a Font Awesome icon to be available, it must be registered globally via `registerFontAwesomeIcons`.
 
 For example:
 
@@ -66,7 +87,7 @@ import { registerFontAwesomeIcons } from '@indico-data/design-system';
 registerFontAwesomeIcons(...Object.values(fas));
 ```
 
-Below is a list of FontAwesome icons available in our design system. Use the search bar to find specific icons, and navigate
+Below is a list of Font Awesome icons available in our design system. Use the search bar to find specific icons, and navigate
 through the pages to explore all icons.
 
 <Story of={IconStories.FontAwesomeIcons} />

package/src/components/icons/Icon.stories.tsx

@@ -5,8 +5,9 @@ import { IconName, IconProps, IconSizes } from './types';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { registerFontAwesomeIcons } from '@/index';
 import { fontAwesomeIconNames, iconNames, indiconIconNames } from '@/storybook/iconNames';
+import { indiconDefinitions } from './indicons';
 
-registerFontAwesomeIcons(...Object.values(fas));
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
 const meta: Meta = {
   title: 'Components/Icon',
@@ -105,7 +106,24 @@ export const IconStates: Story = {
 
 export const CustomStyledIcon: Story = {
   render: () => {
-    return <Icon name="fa-mountain-sun" className="color-primary-600" />;
+    return <Icon name="fa-mountain-sun" size="xl" className="color-primary-600" />;
+  },
+};
+
+export const DuotoneIconStory: Story = {
+  render: () => {
+    return (
+      <Icon
+        name="warning-stroke"
+        size="xl"
+        style={{
+          // @ts-ignore
+          '--fa-primary-color': 'gold',
+          '--fa-secondary-color': 'black',
+          '--fa-secondary-opacity': '1.0',
+        }}
+      />
+    );
   },
 };
 
@@ -164,7 +182,7 @@ export const FontAwesomeIcons: Story = {
     const [searchQuery, setSearchQuery] = useState('');
     const iconsPerPage = 60;
 
-    // Filter FontAwesome icons based on the search query
+    // Filter Font Awesome icons based on the search query
     const filteredIcons = fontAwesomeIconNames.filter((icon) =>
       icon.toLowerCase().includes(searchQuery.toLowerCase()),
     );

package/src/components/icons/Icon.tsx

@@ -1,9 +1,7 @@
-import { ReactElement, cloneElement } from 'react';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconProps } from './types';
-import { indicons } from './indicons';
 
 export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: IconProps) => {
   const label = ariaLabel || `${name} Icon`;
@@ -16,7 +14,6 @@ export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: Icon
     className,
   );
 
-  const customIcon = indicons[name as keyof typeof indicons];
   const faIconName = name.split('fa-')[1];
   const faIcon =
     faIconName &&
@@ -24,21 +21,20 @@ export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: Icon
       prefix: 'fas',
       iconName: faIconName as FAIconName,
     });
+  const icon =
+    faIcon ||
+    findIconDefinition({
+      prefix: 'fak',
+      // @ts-ignore
+      iconName: name,
+    });
 
-  if (!faIcon && !customIcon) {
+  if (!icon) {
     console.error(
-      `Icon '${name}' not found. Did you remember to register it? See the [Permafrost Icon Documentation](https://ds.indico-dev.indico.io/iframe.html?viewMode=docs&id=components-icon--icon#font-awesome-icons) for more.`,
+      `Icon '${name}' not found. Is it entered correctly, and did you remember to register it? See the [Permafrost Icon Documentation](https://ds.indico-dev.indico.io/iframe.html?viewMode=docs&id=components-icon--icon#font-awesome-icons) for more.`,
     );
     return null;
   }
 
-  return faIcon ? (
-    <FontAwesomeIcon icon={faIcon} className={iconClasses} aria-label={label} {...props} />
-  ) : (
-    cloneElement(customIcon as ReactElement, {
-      className: iconClasses,
-      'aria-label': label,
-      ...props,
-    })
-  );
+  return <FontAwesomeIcon icon={icon} className={iconClasses} aria-label={label} {...props} />;
 };

package/src/components/icons/__tests__/Icon.test.tsx

@@ -3,48 +3,48 @@ import userEvent from '@testing-library/user-event';
 import { Icon } from '@/components/icons/Icon';
 
 describe('Icon Component', () => {
-  describe('FontAwesome Icons', () => {
+  describe('Font Awesome Icons', () => {
     const faIconName = 'fa-arrow-down';
     const labelText = `${faIconName} Icon`;
 
-    test('renders FontAwesome icon', () => {
+    test('renders Font Awesome icon', () => {
       render(<Icon name={faIconName} />);
       const icon = screen.getByLabelText(labelText);
       expect(icon).toBeInTheDocument();
       expect(icon).toHaveClass(faIconName);
     });
 
-    test('applies size class to FontAwesome icon', () => {
+    test('applies size class to Font Awesome icon', () => {
       render(<Icon name={faIconName} size="lg" />);
       const icon = screen.getByLabelText(labelText);
       expect(icon).toHaveClass('icon--lg');
     });
 
-    test('applies custom className to FontAwesome icon', () => {
+    test('applies custom className to Font Awesome icon', () => {
       render(<Icon name={faIconName} className="custom-class" />);
       const icon = screen.getByLabelText(labelText);
       expect(icon).toHaveClass('custom-class');
     });
 
-    test('applies style to FontAwesome icon', () => {
+    test('applies style to Font Awesome icon', () => {
       render(<Icon name={faIconName} style={{ color: 'red' }} />);
       const icon = screen.getByLabelText(labelText);
       expect(icon).toHaveStyle('color: red');
     });
 
-    test('uses ariaLabel prop for FontAwesome icon', () => {
+    test('uses ariaLabel prop for Font Awesome icon', () => {
       render(<Icon name={faIconName} ariaLabel="custom label" />);
       const icon = screen.getByLabelText('custom label');
       expect(icon).toBeInTheDocument();
     });
 
-    test('applies id to FontAwesome icon', () => {
+    test('applies id to Font Awesome icon', () => {
       render(<Icon name={faIconName} id="test-id" />);
       const icon = screen.getByLabelText(labelText);
       expect(icon).toHaveAttribute('id', 'test-id');
     });
 
-    test('handles onClick event for FontAwesome icon', async () => {
+    test('handles onClick event for Font Awesome icon', async () => {
       const handleClick = jest.fn();
       render(<Icon name={faIconName} onClick={handleClick} />);
       const icon = screen.getByLabelText(labelText);