Add notification icon (#702)

.changeset/great-dingos-behave.md

@@ -0,0 +1,5 @@
+---
+'braid-design-system': minor
+---
+
+Add Notification icon

generate-component-docs/__snapshots__/contract.test.ts.snap

@@ -3575,6 +3575,35 @@ Object {
 }
 `;
 
+exports[`IconNotification 1`] = `
+Object {
+  exportType: component,
+  props: {
+    alignY?: 
+        | "lowercase"
+        | "uppercase"
+    size?: 
+        | "fill"
+        | "large"
+        | "small"
+        | "standard"
+        | "xsmall"
+    title?: string
+    titleId?: string
+    tone?: 
+        | "caution"
+        | "critical"
+        | "formAccent"
+        | "info"
+        | "link"
+        | "neutral"
+        | "positive"
+        | "promote"
+        | "secondary"
+},
+}
+`;
+
 exports[`IconOverflow 1`] = `
 Object {
   exportType: component,

lib/components/icons/IconNotification/IconNotification.docs.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentDocs } from '../../../../site/src/types';
+import { IconNotification } from './IconNotification';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  migrationGuide: true,
+  foundation: true,
+  screenshotWidths: [],
+  examples: [
+    {
+      label: 'Default',
+      Example: () => <IconNotification />,
+    },
+  ],
+};
+
+export default docs;

lib/components/icons/IconNotification/IconNotification.migration.md

@@ -0,0 +1,3 @@
+# IconNotification Migration Guide
+
+Please refer to the [Icon Migration Guide.](../Icon.migration.md)

lib/components/icons/IconNotification/IconNotification.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { UseIconProps } from '../../../hooks/useIcon';
+import { IconNotificationSvg } from './IconNotificationSvg';
+
+export type IconNotificationProps = UseIconProps;
+
+export const IconNotification = (props: IconNotificationProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconNotificationSvg} {...iconProps} />;
+};

lib/components/icons/__snapshots__/icons.test.ts.snap

@@ -869,6 +869,28 @@ export const IconNoteSvg = ({ title, titleId, ...props }: SVGProps) => (
 "
 `;
 
+exports[`IconNotificationSvg should match snapshot 1`] = `
+"import React from 'react';
+
+import { SVGProps } from '../SVGTypes';
+
+export const IconNotificationSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox=\\"0 0 24 24\\"
+    focusable=\\"false\\"
+    fill=\\"currentColor\\"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d=\\"M20 16v-6a8.018 8.018 0 00-5.45-7.577 2.996 2.996 0 00-5.1 0A8.018 8.018 0 004 10v6a1 1 0 000 2h16a1 1 0 000-2zM6 16v-6a6.008 6.008 0 014.411-5.78 1.001 1.001 0 00.663-.591.996.996 0 011.852 0 1.001 1.001 0 00.663.592A6.008 6.008 0 0118 10v6zm6 6a2.991 2.991 0 002.816-2H9.184A2.991 2.991 0 0012 22z\\" />
+  </svg>
+);
+"
+`;
+
 exports[`IconOverflowSvg should match snapshot 1`] = `
 "import React from 'react';
 

lib/components/icons/index.ts

@@ -34,6 +34,7 @@ export { IconMinus } from './IconMinus/IconMinus';
 export { IconMoney } from './IconMoney/IconMoney';
 export { IconNewWindow } from './IconNewWindow/IconNewWindow';
 export { IconNote } from './IconNote/IconNote';
+export { IconNotification } from './IconNotification/IconNotification';
 export { IconOverflow } from './IconOverflow/IconOverflow';
 export { IconPeople } from './IconPeople/IconPeople';
 export { IconPersonAdd } from './IconPersonAdd/IconPersonAdd';