move iconAlertCircle to a component so it can be used inside an SVG (#…

…489) * move iconAlertCircle to a component so it can be used inside svgs * alert icon thicker border. color grey outline in blockWaiverBanner
mbta · Mar 5, 2020 · 4264946 · 4264946
1 parent 20fdaaf
commit 4264946
Show file tree

Hide file tree

Showing 12 changed files with 293 additions and 99 deletions.
diff --git a/assets/css/properties_panel/_block_waiver_banner.scss b/assets/css/properties_panel/_block_waiver_banner.scss
@@ -25,25 +25,28 @@
   display: block;
   margin-right: 0.3rem;
   width: 15px;
+}
 
-  .c-icon-alert-circle__outline {
-    fill: $white;
-  }
-
-  .c-icon-alert-circle__circle-fill {
+.m-block-waiver-banner--current {
+  .c-icon-alert-circle__fill {
     fill: $color-component-dark;
-
-    .m-block-waiver-banner--past & {
-      fill: $color-component-medium;
-    }
   }
 
+  .c-icon-alert-circle__outline,
   .c-icon-alert-circle__exclamation-point {
     fill: $white;
+  }
+}
 
-    .m-block-waiver-banner--past & {
-      fill: $color-bg-medium;
-    }
+.m-block-waiver-banner--future,
+.m-block-waiver-banner--past {
+  .c-icon-alert-circle__fill {
+    fill: $color-component-medium;
+  }
+
+  .c-icon-alert-circle__outline,
+  .c-icon-alert-circle__exclamation-point {
+    fill: $color-bg-medium;
   }
 }
 

diff --git a/assets/src/components/iconAlertCircle.tsx b/assets/src/components/iconAlertCircle.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+
+const IconAlertCircle = () => (
+  <svg viewBox="-3 -3 54 54" className="c-icon-alert-circle">
+    <IconAlertCircleSvgNode />
+  </svg>
+)
+
+export const IconAlertCircleSvgNode = () => (
+  <>
+    <circle cx="24" cy="24" className="c-icon-alert-circle__outline" r="27" />
+    <circle cx="24" cy="24" className="c-icon-alert-circle__fill" r="22.59" />
+    <g className="c-icon-alert-circle__exclamation-point">
+      <path d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11" />
+      <path d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93" />
+    </g>
+  </>
+)
+
+export default IconAlertCircle
diff --git a/assets/src/components/propertiesPanel/blockWaiverBanner.tsx b/assets/src/components/propertiesPanel/blockWaiverBanner.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import { alertCircleIcon } from "../../helpers/icon"
 import { BlockWaiver } from "../../realtime"
 import { now, formattedTime } from "../../util/dateTime"
+import IconAlertCircle from "../iconAlertCircle"
 
 interface Props {
   blockWaiver: BlockWaiver
@@ -57,7 +57,9 @@ const BlockWaiverBanner = ({ blockWaiver }: Props) => (
     )}`}
   >
     <div className="m-block-waiver-banner__header">
-      {alertCircleIcon("m-block-waiver-banner__alert-icon")}
+      <span className="m-block-waiver-banner__alert-icon">
+        <IconAlertCircle />
+      </span>
       <div className="m-block-waiver-banner__title">
         Dispatcher Note - {currentFuturePastTitle(blockWaiver)}
       </div>

diff --git a/assets/src/helpers/icon.tsx b/assets/src/helpers/icon.tsx
@@ -1,6 +1,4 @@
 // @ts-ignore
-import alertCircleIconSvg from "../../static/images/icon-alert-circle.svg"
-// @ts-ignore
 import blueLineIconSvg from "../../static/images/icon-blue-line.svg"
 // @ts-ignore
 import collapseIconSvg from "../../static/images/icon-caret-left.svg"
@@ -42,9 +40,6 @@ import reverseIconReversedSvg from "../../static/images/icon-reverse-reversed.sv
 import searchIconSvg from "../../static/images/icon-search.svg"
 import renderSvg from "./renderSvg"
 
-export const alertCircleIcon = (className: string = ""): JSX.Element =>
-  renderSvg(className, alertCircleIconSvg)
-
 export const blueLineIcon = (className: string = ""): JSX.Element =>
   renderSvg(className, blueLineIconSvg)
 

diff --git a/assets/static/images/icon-alert-circle.svg b/assets/static/images/icon-alert-circle.svg
diff --git a/assets/tests/components/__snapshots__/iconAlertCircle.test.tsx.snap b/assets/tests/components/__snapshots__/iconAlertCircle.test.tsx.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders 1`] = `
+<svg
+  className="c-icon-alert-circle"
+  viewBox="-3 -3 54 54"
+>
+  <circle
+    className="c-icon-alert-circle__outline"
+    cx="24"
+    cy="24"
+    r="27"
+  />
+  <circle
+    className="c-icon-alert-circle__fill"
+    cx="24"
+    cy="24"
+    r="22.59"
+  />
+  <g
+    className="c-icon-alert-circle__exclamation-point"
+  >
+    <path
+      d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+    />
+    <path
+      d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+    />
+  </g>
+</svg>
+`;
+
+exports[`renders an unwrapped svg node 1`] = `
+<svg>
+  <circle
+    className="c-icon-alert-circle__outline"
+    cx="24"
+    cy="24"
+    r="27"
+  />
+  <circle
+    className="c-icon-alert-circle__fill"
+    cx="24"
+    cy="24"
+    r="22.59"
+  />
+  <g
+    className="c-icon-alert-circle__exclamation-point"
+  >
+    <path
+      d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+    />
+    <path
+      d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+    />
+  </g>
+</svg>
+`;
diff --git a/assets/tests/components/iconAlertCircle.test.tsx b/assets/tests/components/iconAlertCircle.test.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import renderer from "react-test-renderer"
+import IconAlertCircle, {
+  IconAlertCircleSvgNode,
+} from "../../src/components/iconAlertCircle"
+
+test("renders", () => {
+  const tree = renderer.create(<IconAlertCircle />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test("renders an unwrapped svg node", () => {
+  const tree = renderer
+    .create(
+      <svg>
+        <IconAlertCircleSvgNode />
+      </svg>
+    )
+    .toJSON()
+
+  expect(tree).toMatchSnapshot()
+})
diff --git a/assets/tests/components/propertiesPanel/__snapshots__/blockWaiverBanner.test.tsx.snap b/assets/tests/components/propertiesPanel/__snapshots__/blockWaiverBanner.test.tsx.snap
@@ -9,12 +9,35 @@ exports[`BlockWaiverBanner renders a current time waiver 1`] = `
   >
     <span
       className="m-block-waiver-banner__alert-icon"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "SVG",
-        }
-      }
-    />
+    >
+      <svg
+        className="c-icon-alert-circle"
+        viewBox="-3 -3 54 54"
+      >
+        <circle
+          className="c-icon-alert-circle__outline"
+          cx="24"
+          cy="24"
+          r="27"
+        />
+        <circle
+          className="c-icon-alert-circle__fill"
+          cx="24"
+          cy="24"
+          r="22.59"
+        />
+        <g
+          className="c-icon-alert-circle__exclamation-point"
+        >
+          <path
+            d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+          />
+          <path
+            d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+          />
+        </g>
+      </svg>
+    </span>
     <div
       className="m-block-waiver-banner__title"
     >
@@ -76,12 +99,35 @@ exports[`BlockWaiverBanner renders a future time waiver 1`] = `
   >
     <span
       className="m-block-waiver-banner__alert-icon"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "SVG",
-        }
-      }
-    />
+    >
+      <svg
+        className="c-icon-alert-circle"
+        viewBox="-3 -3 54 54"
+      >
+        <circle
+          className="c-icon-alert-circle__outline"
+          cx="24"
+          cy="24"
+          r="27"
+        />
+        <circle
+          className="c-icon-alert-circle__fill"
+          cx="24"
+          cy="24"
+          r="22.59"
+        />
+        <g
+          className="c-icon-alert-circle__exclamation-point"
+        >
+          <path
+            d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+          />
+          <path
+            d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+          />
+        </g>
+      </svg>
+    </span>
     <div
       className="m-block-waiver-banner__title"
     >
@@ -143,12 +189,35 @@ exports[`BlockWaiverBanner renders a past time waiver 1`] = `
   >
     <span
       className="m-block-waiver-banner__alert-icon"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "SVG",
-        }
-      }
-    />
+    >
+      <svg
+        className="c-icon-alert-circle"
+        viewBox="-3 -3 54 54"
+      >
+        <circle
+          className="c-icon-alert-circle__outline"
+          cx="24"
+          cy="24"
+          r="27"
+        />
+        <circle
+          className="c-icon-alert-circle__fill"
+          cx="24"
+          cy="24"
+          r="22.59"
+        />
+        <g
+          className="c-icon-alert-circle__exclamation-point"
+        >
+          <path
+            d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+          />
+          <path
+            d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+          />
+        </g>
+      </svg>
+    </span>
     <div
       className="m-block-waiver-banner__title"
     >

diff --git a/assets/tests/components/propertiesPanel/__snapshots__/blockWaiverList.test.tsx.snap b/assets/tests/components/propertiesPanel/__snapshots__/blockWaiverList.test.tsx.snap
@@ -12,12 +12,35 @@ exports[`BlockWaiverList renders 1`] = `
     >
       <span
         className="m-block-waiver-banner__alert-icon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "SVG",
-          }
-        }
-      />
+      >
+        <svg
+          className="c-icon-alert-circle"
+          viewBox="-3 -3 54 54"
+        >
+          <circle
+            className="c-icon-alert-circle__outline"
+            cx="24"
+            cy="24"
+            r="27"
+          />
+          <circle
+            className="c-icon-alert-circle__fill"
+            cx="24"
+            cy="24"
+            r="22.59"
+          />
+          <g
+            className="c-icon-alert-circle__exclamation-point"
+          >
+            <path
+              d="m20.39 4.42h7.22a1.81 1.81 0 0 1 1.49 2.11l-1.49 23.22a1.73 1.73 0 0 1 -1.49 1.78h-4.24a1.73 1.73 0 0 1 -1.49-1.78l-1.49-23.22c-.07-1.13.61-2.11 1.49-2.11"
+            />
+            <path
+              d="m21.57 34.54h4.87a1.88 1.88 0 0 1 1.82 1.93v5.17a1.89 1.89 0 0 1 -1.82 1.94h-4.87a1.89 1.89 0 0 1 -1.83-1.94v-5.17a1.88 1.88 0 0 1 1.83-1.93"
+            />
+          </g>
+        </svg>
+      </span>
       <div
         className="m-block-waiver-banner__title"
       >