Merge branch 'improvement/add-custom-icon-for-remote-user' into q/1.0

scality · Jul 30, 2024 · 4f6e2ec · 4f6e2ec
2 parents c0201eb + 3cea4a1
commit 4f6e2ec
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 97 deletions.
diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx
@@ -137,6 +137,45 @@ export const iconTable = {
   News: 'fas faBullhorn',
 };
 
+export const customIcons = {
+  'Remote-user': ({ ariaLabel, color, size }) => (
+    <svg
+      viewBox="0 0 19 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
+        fill={color || 'currentcolor'}
+      />
+      <path
+        d="M9.18043 7.97631C8.0165 7.97631 7.08207 7.01268 7.08207 5.81237C7.08207 4.62897 8.0165 3.64844 9.18043 3.64844C10.328 3.64844 11.2788 4.62897 11.2788 5.81237C11.2788 7.01268 10.328 7.97631 9.18043 7.97631ZM10.6394 8.51729C11.8526 8.51729 12.8526 9.54854 12.8526 10.7996V11.4927C12.8526 11.9492 12.4919 12.3042 12.0657 12.3042H6.29519C5.85256 12.3042 5.5083 11.9492 5.5083 11.4927V10.7996C5.5083 9.54854 6.49191 8.51729 7.70502 8.51729H7.98371C8.34437 8.70325 8.7542 8.78778 9.18043 8.78778C9.60666 8.78778 10.0001 8.70325 10.3608 8.51729H10.6394Z"
+        fill={color || 'currentcolor'}
+      />
+    </svg>
+  ),
+  'Remote-group': ({ ariaLabel, color, size }) => (
+    <svg
+      viewBox="0 0 19 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M16.5902 0.5C17.4071 0.5 18.0984 1.1875 18.0984 2V12C18.0984 12.8438 17.4071 13.5 16.5902 13.5H10.5574L11.0601 15H13.3224C13.7309 15 14.0765 15.3438 14.0765 15.75C14.0765 16.1875 13.7309 16.5 13.3224 16.5H4.77596C4.33607 16.5 4.02186 16.1875 4.02186 15.75C4.02186 15.3438 4.33607 15 4.77596 15H7.03825L7.54098 13.5H1.5082C0.659836 13.5 0 12.8438 0 12V2C0 1.1875 0.659836 0.5 1.5082 0.5H16.5902ZM16.0874 11.5V2.5H2.01093V11.5H16.0874Z"
+        fill={color || 'currentcolor'}
+      />
+      <path
+        d="M4.8 7.85714C4.125 7.85714 3.6 7.29464 3.6 6.57143C3.6 5.8683 4.125 5.28571 4.8 5.28571C5.45625 5.28571 6 5.8683 6 6.57143C6 7.29464 5.45625 7.85714 4.8 7.85714ZM13.2 7.85714C12.525 7.85714 12 7.29464 12 6.57143C12 5.8683 12.525 5.28571 13.2 5.28571C13.8563 5.28571 14.4 5.8683 14.4 6.57143C14.4 7.29464 13.8563 7.85714 13.2 7.85714ZM13.8 8.5C14.4563 8.5 15 9.08259 15 9.78571V10.4286C15 10.7902 14.7188 11.0714 14.4 11.0714H13.1625C13.0313 10.1272 12.5063 9.32366 11.7375 8.8817C11.9625 8.66071 12.2625 8.5 12.6 8.5H13.8ZM9 8.5C7.8375 8.5 6.9 7.49554 6.9 6.25C6.9 5.02455 7.8375 4 9 4C10.1438 4 11.1 5.02455 11.1 6.25C11.1 7.49554 10.1438 8.5 9 8.5ZM10.425 9.14286C11.625 9.14286 12.6 10.1875 12.6 11.4732V12.0357C12.6 12.5781 12.1875 13 11.7 13H6.3C5.79375 13 5.4 12.5781 5.4 12.0357V11.4732C5.4 10.1875 6.35625 9.14286 7.55625 9.14286H7.70625C8.1 9.34375 8.53125 9.46429 9 9.46429C9.45 9.46429 9.88125 9.34375 10.275 9.14286H10.425ZM6.24375 8.8817C5.475 9.32366 4.95 10.1272 4.81875 11.0714H3.6C3.2625 11.0714 3 10.7902 3 10.4286V9.78571C3 9.08259 3.525 8.5 4.2 8.5H5.4C5.71875 8.5 6.01875 8.66071 6.24375 8.8817Z"
+        fill={color || 'currentcolor'}
+      />
+    </svg>
+  ),
+};
+
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {
     const theme = props.theme;
@@ -148,7 +187,7 @@ const IconStyled = styled(FontAwesomeIcon)`
   }}
 `;
 
-export type IconName = keyof typeof iconTable;
+export type IconName = keyof typeof iconTable | keyof typeof customIcons;
 export type IconColor = keyof CoreUITheme;
 type Props = {
   name: IconName;
@@ -215,12 +254,17 @@ function NonWrappedIcon({
   ariaLabel = '',
   ...rest
 }: Omit<Props, 'withWrapper'>) {
-  const iconInfo = iconTable[name];
+  const iconInfo = iconTable[name] || customIcons[name];
   if (!iconInfo) throw new Error(`${name}: is not a valid icon.`);
 
   const { data, status } = useQuery({
     queryKey: ['icon', name],
     queryFn: async () => {
+      if (customIcons[name]) {
+        return {
+          default: customIcons[name],
+        };
+      }
       const [iconType, iconClass] = iconInfo.split(' ');
       try {
         const fontAwesomeType =

diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx
@@ -3,6 +3,7 @@ import {
   Icon,
   iconTable,
   IconName,
+  customIcons,
 } from '../src/lib/components/icon/Icon.component';
 import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 
@@ -132,14 +133,16 @@ export const AllIcons = {
         <td>Name</td>
       </thead>
       <tbody>
-        {(Object.keys(iconTable) as IconName[]).map((key, index) => (
-          <tr key={key}>
-            <td style={{ paddingRight: '2rem' }}>
-              <Icon key={index} name={key} size={'2x'} />
-            </td>
-            <td>{key}</td>
-          </tr>
-        ))}
+        {(Object.keys({ ...iconTable, ...customIcons }) as IconName[]).map(
+          (key, index) => (
+            <tr key={key}>
+              <td style={{ paddingRight: '2rem' }}>
+                <Icon key={index} name={key} size={'2x'} />
+              </td>
+              <td>{key}</td>
+            </tr>
+          ),
+        )}
       </tbody>
     </table>
   ),