Merge pull request #3703 from clairep94/pr05_finals_migrateCommonIcons

Pr05 Typescript Migration #19: `client/common/icons`

Author: raclim

client/common/icons.jsx renamed to client/common/icons.tsx

@@ -26,13 +26,25 @@ import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
 import Copy from '../images/copy.svg';
 
+export interface IconColors {
+  default?: string;
+  hover?: string;
+}
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  'aria-label'?: string;
+  Icon?: IconColors;
+}
+
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
 
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
-function withLabel(SvgComponent) {
-  const StyledIcon = styled(SvgComponent)`
+function withLabel(
+  SvgComponent: React.ComponentType<React.SVGProps<SVGSVGElement>>
+) {
+  const StyledIcon = styled(SvgComponent)<IconProps>`
     &&& {
       color: ${(props) => props.Icon?.default};
       & g,
@@ -53,27 +65,27 @@ function withLabel(SvgComponent) {
     }
   `;
 
-  const Icon = (props) => {
-    const { 'aria-label': ariaLabel } = props;
+  // Necessary because styled components inject a different type for the ref prop
+  type StyledIconProps = Omit<
+    React.ComponentProps<typeof StyledIcon>,
+    'ref'
+  > & {
+    ref?: React.Ref<SVGSVGElement>;
+  };
+
+  const Icon = (props: StyledIconProps) => {
+    const { 'aria-label': ariaLabel, ...rest } = props;
     if (ariaLabel) {
       return (
         <StyledIcon
-          {...props}
+          {...rest}
           aria-label={ariaLabel}
           role="img"
           focusable="false"
         />
       );
     }
-    return <StyledIcon {...props} aria-hidden focusable="false" />;
-  };
-
-  Icon.propTypes = {
-    'aria-label': PropTypes.string
-  };
-
-  Icon.defaultProps = {
-    'aria-label': null
+    return <StyledIcon {...rest} aria-hidden focusable="false" />;
   };
 
   return Icon;

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -367,7 +367,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>
@@ -971,7 +971,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+              classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
               focusable="false"
             />
           </button>
@@ -987,7 +987,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
+            classname="icons__StyledIcon-sc-1rmv3zl-0 bKwKVB"
             focusable="false"
           />
         </button>