feat(icons): add DangerousRounded for notifications

chanzuckerberg · Jul 30, 2021 · 20dac4e · 20dac4e
1 parent 518833e
commit 20dac4e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 44 deletions.
diff --git a/packages/components/src/Banner/Banner.tsx b/packages/components/src/Banner/Banner.tsx
@@ -2,10 +2,10 @@ import Heading, { HeadingElement } from "../Heading";
 import Button from "../Button";
 import CheckCircleIcon from "../Icons/CheckCircle";
 import CloseIcon from "../Icons/Close";
+import DangerousRoundedIcon from "../Icons/custom/DangerousRounded";
 import ForumIcon from "../Icons/Forum";
 import NotificationsIcon from "../Icons/Notifications";
 import React from "react";
-import SentimentVeryDissatisfiedIcon from "../Icons/SentimentVeryDissatisfied";
 import Text from "../Text";
 import WarningIcon from "../Icons/Warning";
 import clsx from "clsx";
@@ -73,8 +73,7 @@ export const BannerIcon = ({ color }: { color: Color }) => {
       title: "warning",
     },
     alert: {
-      // TODO: get final icon
-      icon: SentimentVeryDissatisfiedIcon,
+      icon: DangerousRoundedIcon,
       style: styles.iconAlert,
       title: "alert",
     },

diff --git a/packages/components/src/Banner/__snapshots__/Banner.spec.tsx.snap b/packages/components/src/Banner/__snapshots__/Banner.spec.tsx.snap
@@ -17,18 +17,12 @@ exports[`<Banner /> Alert story renders snapshot 1`] = `
       <title>
         alert
       </title>
-      <circle
-        cx="15.5"
-        cy="9.5"
-        r="1.5"
-      />
-      <circle
-        cx="8.5"
-        cy="9.5"
-        r="1.5"
+      <path
+        d="M0,0h24v24H0V0z"
+        fill="none"
       />
       <path
-        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z"
+        d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
       />
     </svg>
   </div>
@@ -93,18 +87,12 @@ exports[`<Banner /> AlertDismissable story renders snapshot 1`] = `
       <title>
         alert
       </title>
-      <circle
-        cx="15.5"
-        cy="9.5"
-        r="1.5"
-      />
-      <circle
-        cx="8.5"
-        cy="9.5"
-        r="1.5"
+      <path
+        d="M0,0h24v24H0V0z"
+        fill="none"
       />
       <path
-        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z"
+        d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
       />
     </svg>
   </div>

diff --git a/packages/components/src/Icons/SentimentVeryDissatisfied.tsx b/packages/components/src/Icons/SentimentVeryDissatisfied.tsx
diff --git a/packages/components/src/Icons/custom/DangerousRounded.tsx b/packages/components/src/Icons/custom/DangerousRounded.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import createSvgIcon from "../../SvgIcon/utils/createSvgIcon";
+
+export default createSvgIcon(
+  <>
+    <path d="M0,0h24v24H0V0z" fill="none" />
+    <path d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z" />
+  </>,
+);
diff --git a/packages/components/src/Icons/index.ts b/packages/components/src/Icons/index.ts
@@ -8,5 +8,7 @@ export { default as CheckCircle } from "./CheckCircle";
 export { default as Close } from "./Close";
 export { default as Forum } from "./Forum";
 export { default as Notifications } from "./Notifications";
-export { default as SentimentVeryDissatisfied } from "./SentimentVeryDissatisfied";
 export { default as Warning } from "./Warning";
+
+// custom SVGs not found in https://material-ui.com/components/material-icons/
+export { default as DangerousRounded } from "./custom/DangerousRounded";
diff --git a/packages/components/src/Toast/__snapshots__/Toast.spec.tsx.snap b/packages/components/src/Toast/__snapshots__/Toast.spec.tsx.snap
@@ -20,18 +20,12 @@ exports[`<Toast /> Alert story renders snapshot 1`] = `
         <title>
           alert
         </title>
-        <circle
-          cx="15.5"
-          cy="9.5"
-          r="1.5"
-        />
-        <circle
-          cx="8.5"
-          cy="9.5"
-          r="1.5"
+        <path
+          d="M0,0h24v24H0V0z"
+          fill="none"
         />
         <path
-          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-6c-2.33 0-4.32 1.45-5.12 3.5h1.67c.69-1.19 1.97-2 3.45-2s2.75.81 3.45 2h1.67c-.8-2.05-2.79-3.5-5.12-3.5z"
+          d="M14.9,3H9.1C8.57,3,8.06,3.21,7.68,3.59l-4.1,4.1C3.21,8.06,3,8.57,3,9.1v5.8c0,0.53,0.21,1.04,0.59,1.41l4.1,4.1 C8.06,20.79,8.57,21,9.1,21h5.8c0.53,0,1.04-0.21,1.41-0.59l4.1-4.1C20.79,15.94,21,15.43,21,14.9V9.1c0-0.53-0.21-1.04-0.59-1.41 l-4.1-4.1C15.94,3.21,15.43,3,14.9,3z M15.54,15.54L15.54,15.54c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.12,2.12 c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L8.46,9.88c-0.39-0.39-0.39-1.02,0-1.41l0,0 c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.12-2.12c0.39-0.39,1.02-0.39,1.41,0l0,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.12,2.12 C15.93,14.51,15.93,15.15,15.54,15.54z"
         />
       </svg>
     </div>