fix(icons): allow SVG icons to receive arbitrary props (#9106)

These arbitrary props will allow to handle
native React element events among other things.

Refs #9094

src/core/plugins/auth/components/lock-auth-icon.jsx

@@ -0,0 +1,27 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import omit from "lodash/omit"
+
+class LockAuthIcon extends React.Component {
+  mapStateToProps(state, props) {
+    const ownProps = omit(props, Object.keys(props.getSystem()))
+    return { state, ownProps }
+  }
+
+  render() {
+    const { getComponent, ownProps } = this.props
+    const LockIcon = getComponent("LockIcon")
+
+    return <LockIcon {...ownProps} />
+  }
+}
+
+LockAuthIcon.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  ownProps: PropTypes.shape({}).isRequired,
+}
+
+export default LockAuthIcon

src/core/plugins/auth/components/unlock-auth-icon.jsx

@@ -0,0 +1,27 @@
+/**
+ * @prettier
+ */
+import React from "react"
+import PropTypes from "prop-types"
+import omit from "lodash/omit"
+
+class UnlockAuthIcon extends React.Component {
+  mapStateToProps(state, props) {
+    const ownProps = omit(props, Object.keys(props.getSystem()))
+    return { state, ownProps }
+  }
+
+  render() {
+    const { getComponent, ownProps } = this.props
+    const UnlockIcon = getComponent("UnlockIcon")
+
+    return <UnlockIcon {...ownProps} />
+  }
+}
+
+UnlockAuthIcon.propTypes = {
+  getComponent: PropTypes.func.isRequired,
+  ownProps: PropTypes.shape({}).isRequired,
+}
+
+export default UnlockAuthIcon

src/core/plugins/auth/index.js

@@ -5,10 +5,8 @@ import { execute as wrappedExecuteAction } from "./spec-extensions/wrap-actions"
 import { loaded as wrappedLoadedAction } from "./configs-extensions/wrap-actions"
 import { authorize as wrappedAuthorizeAction, logout as wrappedLogoutAction } from "./wrap-actions"
 
-import LockAuthIcon from "./components/lock-auth"
-import UnlockAuthIcon from "./components/unlock-auth"
-import LockAuthOperationIcon from "./components/lock-auth-operation"
-import UnlockAuthOperationIcon from "./components/unlock-auth-operation"
+import LockAuthIcon from "./components/lock-auth-icon"
+import UnlockAuthIcon from "./components/unlock-auth-icon"
 
 export default function() {
   return {
@@ -21,8 +19,8 @@ export default function() {
     components: {
       LockAuthIcon: LockAuthIcon,
       UnlockAuthIcon: UnlockAuthIcon,
-      LockAuthOperationIcon: LockAuthOperationIcon,
-      UnlockAuthOperationIcon: UnlockAuthOperationIcon,
+      LockAuthOperationIcon: LockAuthIcon,
+      UnlockAuthOperationIcon: UnlockAuthIcon,
     },
     statePlugins: {
       auth: {

src/core/plugins/icons/components/arrow-down.jsx

@@ -4,7 +4,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const ArrowDown = ({ className, width, height }) => (
+const ArrowDown = ({ className, width, height, ...rest }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const ArrowDown = ({ className, width, height }) => (
     height={height}
     aria-hidden="true"
     focusable="false"
+    {...rest}
   >
-    <path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
+    <path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z" />
   </svg>
 )
 
@@ -30,4 +31,4 @@ ArrowDown.defaultProps = {
   height: 20,
 }
 
-export default ArrowDown
+export default ArrowDown

src/core/plugins/icons/components/arrow-up.jsx

@@ -4,7 +4,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const ArrowUp = ({ className, width, height }) => (
+const ArrowUp = ({ className, width, height, ...rest }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const ArrowUp = ({ className, width, height }) => (
     height={height}
     aria-hidden="true"
     focusable="false"
+    {...rest}
   >
-    <path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z"/>
+    <path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z" />
   </svg>
 )
 
@@ -30,4 +31,4 @@ ArrowUp.defaultProps = {
   height: 20,
 }
 
-export default ArrowUp
+export default ArrowUp

src/core/plugins/icons/components/arrow.jsx

@@ -4,7 +4,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Arrow = ({ className, width, height }) => (
+const Arrow = ({ className, width, height, ...rest }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const Arrow = ({ className, width, height }) => (
     height={height}
     aria-hidden="true"
     focusable="false"
+    {...rest}
   >
-    <path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
+    <path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z" />
   </svg>
 )
 
@@ -30,4 +31,4 @@ Arrow.defaultProps = {
   height: 20,
 }
 
-export default Arrow
+export default Arrow

src/core/plugins/icons/components/close.jsx

@@ -4,30 +4,31 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Close = ({ className, width, height }) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        className={className}
-        width={width}
-        height={height}
-        aria-hidden="true"
-        focusable="false"
-    >
-        <path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z" />
-    </svg>
+const Close = ({ className, width, height, ...rest }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    className={className}
+    width={width}
+    height={height}
+    aria-hidden="true"
+    focusable="false"
+    {...rest}
+  >
+    <path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z" />
+  </svg>
 )
 
 Close.propTypes = {
-    className: PropTypes.string,
-    width: PropTypes.string,
-    height: PropTypes.string,
+  className: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 }
 
 Close.defaultProps = {
-    className: null,
-    width: 20,
-    height: 20,
+  className: null,
+  width: 20,
+  height: 20,
 }
 
-export default Close
+export default Close

src/core/plugins/icons/components/copy.jsx

@@ -4,35 +4,37 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-const Copy = ({ className, width, height }) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 15 16"
-        className={className}
-        width={width}
-        height={height}
-        aria-hidden="true"
-        focusable="false"
-    >
-        <g transform='translate(2, -1)'>
-            <path 
-                fill='#ffffff'
-                fillRule='evenodd'
-                d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path>
-        </g>
-    </svg>
+const Copy = ({ className, width, height, ...rest }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 16"
+    className={className}
+    width={width}
+    height={height}
+    aria-hidden="true"
+    focusable="false"
+    {...rest}
+  >
+    <g transform="translate(2, -1)">
+      <path
+        fill="#ffffff"
+        fillRule="evenodd"
+        d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"
+      ></path>
+    </g>
+  </svg>
 )
 
 Copy.propTypes = {
-    className: PropTypes.string,
-    width: PropTypes.string,
-    height: PropTypes.string,
+  className: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 }
 
 Copy.defaultProps = {
-    className: null,
-    width: 15,
-    height: 16,
+  className: null,
+  width: 15,
+  height: 16,
 }
 
-export default Copy
+export default Copy