icon storybook document

benefit-finder/src/shared/components/Button/index.jsx

@@ -1,17 +1,20 @@
 import { useEffect, useState } from 'react'
 import { useHandleClassName } from '../../hooks'
+import { Icon } from '../index'
+import Colors from '../../styles/colors/_index.js'
 import PropTypes from 'prop-types'
 import './_index.scss'
-
 /**
  * a functional component that renders a reactive button
  * @component
  * @param {React.ReactNode} children - inherited children
  * @param {string} className - inherited class(es)
+ * @param {function} onClick - an inherited function, triggered on a click event
  * @param {boolean} secondary - alternative display styles
  * @param {boolean} disabled - disabled state
  * @param {boolean} unstyled - appear as a link
- * @param {function} onClick - an inherited function, triggered on a click event
+ * @param {string} type - 'button', 'reset', 'download'
+ * @param {string} icon - indicates which icon to include
  * @return {html} returns a semantic html button element
  */
 
@@ -23,10 +26,27 @@ function Button({
   disabled,
   unstyled,
   type,
+  icon,
 }) {
   const [defaultClasses, setDefaultClasses] = useState(null)
   const style =
     secondary === true ? 'secondary' : unstyled === true ? 'unstyled' : null
+  /**
+   * a state hook that contains that handles the synthetic hover value
+   * @return {boolean} current state of mouseOver/mouseLeave
+   */
+  const [isHovered, setIsHovered] = useState(false)
+  /**
+   * a state hook that contains that handles the fill of our svg icons
+   * @return {string} current hex value
+   */
+  const [hoverColor, setHoverColor] = useState()
+
+  useEffect(() => {
+    ;(isHovered && secondary) || (isHovered && unstyled)
+      ? setHoverColor(Colors.marine)
+      : setHoverColor(Colors.popBlue)
+  }, [isHovered])
 
   useEffect(() => {
     switch (style) {
@@ -61,7 +81,10 @@ function Button({
         className,
         defaultClasses,
       })}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
+      {icon && <Icon type={icon} color={hoverColor} />}
       {children}
     </button>
   )
@@ -70,11 +93,12 @@ function Button({
 Button.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
   secondary: PropTypes.bool,
+  disabled: PropTypes.bool,
   unstyled: PropTypes.bool,
-  onClick: PropTypes.func,
   type: PropTypes.oneOf(['button', 'reset', 'download']),
+  icon: PropTypes.string,
 }
 
 export default Button

benefit-finder/src/shared/components/EmailButton/__tests__/__snapshots__/index.spec.jsx.snap

@@ -6,6 +6,24 @@ exports[`Email > renders a match to the previous snapshot 1`] = `
     class="bf-email-button bf-usa-button usa-button bf-usa-button--outline usa-button--outline"
     type="button"
   >
+    <i
+      aria-hidden="true"
+    >
+      <svg
+        fill="none"
+        height="16"
+        viewBox="0 0 20 16"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M18 0.000244141H2C0.9 0.000244141 0.00999999 0.900244 0.00999999 2.00024L0 14.0002C0 15.1002 0.9 16.0002 2 16.0002H18C19.1 16.0002 20 15.1002 20 14.0002V2.00024C20 0.900244 19.1 0.000244141 18 0.000244141ZM18 14.0002H2V4.00024L10 9.00024L18 4.00024V14.0002ZM10 7.00024L2 2.00024H18L10 7.00024Z"
+          fill="#005ea2"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </i>
     Email
   </button>
 </DocumentFragment>

benefit-finder/src/shared/components/EmailButton/index.jsx

@@ -28,7 +28,12 @@ const EmailButton = ({ ui, data }) => {
   }
 
   return (
-    <Button className="bf-email-button" secondary onClick={handleClick}>
+    <Button
+      className="bf-email-button"
+      secondary
+      onClick={handleClick}
+      icon="email"
+    >
       {ui?.emailButton || 'Email'}
     </Button>
   )

benefit-finder/src/shared/components/Icon/index.jsx

@@ -18,28 +18,34 @@ const Icon = ({ type, color, ...props }) => {
       icon = <Icons.CarrotSmall color={color} />
       break
     case 'carrot-big':
-      icon = <Icons.CarrotBig />
+      icon = <Icons.CarrotBig color={color} />
       break
     case 'death':
-      icon = <Icons.Death />
+      icon = <Icons.Death color={color} />
+      break
+    case 'email':
+      icon = <Icons.Email color={color} />
       break
     case 'disability':
-      icon = <Icons.Disability />
+      icon = <Icons.Disability color={color} />
       break
     case 'close':
-      icon = <Icons.Close />
+      icon = <Icons.Close color={color} />
       break
     case 'green-check':
-      icon = <Icons.GreenCheck />
+      icon = <Icons.GreenCheck color={color} />
       break
     case 'open':
-      icon = <Icons.Open />
+      icon = <Icons.Open color={color} />
       break
     case 'modal-close':
-      icon = <Icons.ModalClose />
+      icon = <Icons.ModalClose color={color} />
       break
     case 'retirement':
-      icon = <Icons.Retirement />
+      icon = <Icons.Retirement color={color} />
+      break
+    case 'share':
+      icon = <Icons.Share color={color} />
       break
     default:
       icon = null

benefit-finder/src/shared/components/Icon/index.stories.jsx

@@ -3,6 +3,7 @@ import Icon from './index.jsx'
 export default {
   component: Icon,
   tags: ['autodocs'],
+  args: { type: 'retirement' },
 }
 
 export const Primary = {}

benefit-finder/src/shared/components/Icon/index_icons.jsx

@@ -1,20 +1,6 @@
 import Colors from '../../styles/colors/_index.js'
 
 // export svg components in alpha order
-// carrot-small
-export const CarrotSmall = ({ color }) => (
-  <svg
-    className="bf-carrot-small"
-    xmlns="http://www.w3.org/2000/svg"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    fill={color || Colors.white}
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 10l5 5 5-5z" />
-  </svg>
-)
 
 // carrot-big
 export const CarrotBig = ({ color }) => (
@@ -35,6 +21,21 @@ export const CarrotBig = ({ color }) => (
   </svg>
 )
 
+// carrot-small
+export const CarrotSmall = ({ color }) => (
+  <svg
+    className="bf-carrot-small"
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    fill={color || Colors.white}
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 10l5 5 5-5z" />
+  </svg>
+)
+
 // close
 export const Close = ({ color }) => (
   <svg
@@ -50,35 +51,20 @@ export const Close = ({ color }) => (
 )
 
 // death
-export const Death = () => (
+export const Death = ({ color }) => (
   <svg
-    className="bf-death"
-    width="223"
-    height="268"
-    viewBox="0 0 223 268"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="49"
+    height="60"
+    viewBox="0 0 49 60"
+    fill="none"
   >
-    <rect width="223" height="268" fill="url(#pattern0)" />
-    <defs>
-      <pattern
-        id="pattern0"
-        patternContentUnits="objectBoundingBox"
-        width="1"
-        height="1"
-      >
-        <use
-          xlinkHref="#image0_2519_15995"
-          transform="scale(0.0044843 0.00373134)"
-        />
-      </pattern>
-      <image
-        id="image0_2519_15995"
-        width="223"
-        height="268"
-        xlinkHref="data:image/png;base64,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"
-      />
-    </defs>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.5995 7.05571C19.5995 10.6762 16.6742 13.6109 13.066 13.6109C9.45779 13.6109 6.53305 10.6762 6.53305 7.05571C6.53305 3.43523 9.45779 0.5 13.066 0.5C16.6742 0.5 19.5995 3.43523 19.5995 7.05571ZM3.26573 16.889H22.4163L23.3247 17.6484L32.2164 25.0832H45.7335L49 44.7498H44.1V59.4997H37.5665V39.8332H40.8335L39.8541 33.937L39.5101 31.6389H39.4724L39.2 29.9999H27.7665L20.0507 23.4442H9.48934L8.50934 33.2774H11.4335V59.5H4.9V39.8334H0L3.26573 16.889ZM21.2333 33.2769H14.6998V59.4994H21.2333V33.2769ZM27.7663 33.2769H34.2998V59.4994H27.7663V33.2769ZM42.4663 15.2496C42.4663 18.8701 39.5416 21.8054 35.9333 21.8054C32.3251 21.8054 29.3998 18.8701 29.3998 15.2496C29.3998 11.6292 32.3251 8.69393 35.9333 8.69393C39.5416 8.69393 42.4663 11.6292 42.4663 15.2496Z"
+      fill={color || Colors.marine}
+    />
   </svg>
 )
 
@@ -103,29 +89,28 @@ export const Email = ({ color }) => (
 // disability
 export const Disability = ({ color }) => (
   <svg
-    className="bf-disability"
-    width="45"
-    height="58"
-    viewBox="0 0 45 58"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    width="34"
+    height="44"
+    viewBox="0 0 34 44"
+    fill="none"
   >
     <mask
-      id="mask0_2881_3177"
+      id="mask0_3578_3079"
       maskUnits="userSpaceOnUse"
       x="0"
       y="0"
-      width="45"
-      height="58"
+      width="34"
+      height="44"
     >
       <path
-        d="M15.2503 27.9979V33.8312C10.4378 33.8312 6.50033 37.7688 6.50033 42.5813C6.50033 47.3938 10.4378 51.3312 15.2503 51.3312C20.0628 51.3312 24.0003 47.3938 24.0003 42.5813H29.8337C29.8337 50.6313 23.3003 57.1646 15.2503 57.1646C7.20033 57.1646 0.666992 50.6313 0.666992 42.5813C0.666992 34.5312 7.20033 27.9979 15.2503 27.9979ZM32.6337 13.4146C36.9503 13.4146 39.8087 17.7896 38.0295 21.6688L33.1587 32.3729H38.5837C41.792 32.3729 44.417 34.9979 44.417 38.2062V54.2479H38.5837V39.6646H24.0587C19.8003 39.6646 16.9128 35.0854 18.6628 31.2063L24.0003 19.2479H17.5545L15.6587 23.7104L10.0587 22.1646L12.0128 16.9146C12.9753 14.7854 15.1045 13.4146 17.467 13.4146H32.6337ZM38.5837 0.40625C41.8053 0.40625 44.417 3.01792 44.417 6.23958C44.417 9.46124 41.8053 12.0729 38.5837 12.0729C35.362 12.0729 32.7503 9.46124 32.7503 6.23958C32.7503 3.01792 35.362 0.40625 38.5837 0.40625Z"
-        fill={color || Colors.white}
+        d="M11.25 21.5001V26.0001C7.5375 26.0001 4.5 29.0376 4.5 32.7501C4.5 36.4626 7.5375 39.5001 11.25 39.5001C14.9625 39.5001 18 36.4626 18 32.7501H22.5C22.5 38.9601 17.46 44.0001 11.25 44.0001C5.04 44.0001 0 38.9601 0 32.7501C0 26.5401 5.04 21.5001 11.25 21.5001ZM24.66 10.2501C27.99 10.2501 30.195 13.6251 28.8225 16.6176L25.065 24.8751H29.25C31.725 24.8751 33.75 26.9001 33.75 29.3751V41.7501H29.25V30.5001H18.045C14.76 30.5001 12.5325 26.9676 13.8825 23.9751L18 14.7501H13.0275L11.565 18.1926L7.245 17.0001L8.7525 12.9501C9.495 11.3076 11.1375 10.2501 12.96 10.2501H24.66ZM29.25 0.215088C31.7353 0.215088 33.75 2.22981 33.75 4.71509C33.75 7.20037 31.7353 9.21509 29.25 9.21509C26.7647 9.21509 24.75 7.20037 24.75 4.71509C24.75 2.22981 26.7647 0.215088 29.25 0.215088Z"
+        fill="white"
       />
     </mask>
-    <g mask="url(#mask0_2881_3177)">
+    <g mask="url(#mask0_3578_3079)">
       <path
-        d="M15.2501 27.9979V33.8312C10.4376 33.8312 6.50008 37.7688 6.50008 42.5813C6.50008 47.3938 10.4376 51.3312 15.2501 51.3312C20.0626 51.3312 24.0001 47.3938 24.0001 42.5813H29.8334C29.8334 50.6313 23.3001 57.1646 15.2501 57.1646C7.20008 57.1646 0.666748 50.6313 0.666748 42.5813C0.666748 34.5312 7.20008 27.9979 15.2501 27.9979ZM32.6334 13.4146C36.9501 13.4146 39.8084 17.7896 38.0293 21.6688L33.1584 32.3729H38.5834C41.7918 32.3729 44.4168 34.9979 44.4168 38.2062V54.2479H38.5834V39.6646H24.0584C19.8001 39.6646 16.9126 35.0854 18.6626 31.2063L24.0001 19.2479H17.5543L15.6584 23.7104L10.0584 22.1646L12.0126 16.9146C12.9751 14.7854 15.1042 13.4146 17.4668 13.4146H32.6334ZM38.5834 0.40625C41.8051 0.40625 44.4168 3.01792 44.4168 6.23958C44.4168 9.46124 41.8051 12.0729 38.5834 12.0729C35.3618 12.0729 32.7501 9.46124 32.7501 6.23958C32.7501 3.01792 35.3618 0.40625 38.5834 0.40625Z"
+        d="M11.25 21.5001V26.0001C7.5375 26.0001 4.5 29.0376 4.5 32.7501C4.5 36.4626 7.5375 39.5001 11.25 39.5001C14.9625 39.5001 18 36.4626 18 32.7501H22.5C22.5 38.9601 17.46 44.0001 11.25 44.0001C5.04 44.0001 0 38.9601 0 32.7501C0 26.5401 5.04 21.5001 11.25 21.5001ZM24.66 10.2501C27.99 10.2501 30.195 13.6251 28.8225 16.6176L25.065 24.8751H29.25C31.725 24.8751 33.75 26.9001 33.75 29.3751V41.7501H29.25V30.5001H18.045C14.76 30.5001 12.5325 26.9676 13.8825 23.9751L18 14.7501H13.0275L11.565 18.1926L7.245 17.0001L8.7525 12.9501C9.495 11.3076 11.1375 10.2501 12.96 10.2501H24.66ZM29.25 0.215088C31.7353 0.215088 33.75 2.22981 33.75 4.71509C33.75 7.20037 31.7353 9.21509 29.25 9.21509C26.7647 9.21509 24.75 7.20037 24.75 4.71509C24.75 2.22981 26.7647 0.215088 29.25 0.215088Z"
         fill={color || Colors.officerNavy}
       />
     </g>