fix: Add optional prop to hide icon in Banner component (#1089)

- Would like to hide the `icon` in some uses of the `Banner` component
(example below)
- Also adding a `commentFilled` icon

![Screenshot 2024-11-26 at 9 59
13 AM](https://github.com/user-attachments/assets/f3a6e61a-36d8-4da1-bcdc-5b9930821a98)

<img width="160" alt="Screenshot 2024-11-26 at 11 11 54 AM"
src="https://github.com/user-attachments/assets/f047e898-6780-47b1-a6d4-c37f80358c8b">

---------

Co-authored-by: Kelsie Besinger Yeh <[email protected]>

src/components/Banner.tsx

@@ -8,16 +8,19 @@ export interface BannerProps {
   type: BannerTypes;
   message: ReactNode;
   onClose?: VoidFunction;
+  showIcon?: boolean;
 }
 
 export function Banner(props: BannerProps) {
-  const { type, message, onClose = false, ...others } = props;
+  const { type, message, onClose = false, showIcon = true, ...others } = props;
   const tid = useTestIds(others, "banner");
   return (
     <div css={{ ...variantStyles[type], ...Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }} {...tid} role="alert">
-      <span css={Css.fs0.$}>
-        <Icon icon={typeToIcon[type]} {...tid.type} color={Palette.Gray900} />
-      </span>
+      {showIcon && (
+        <span css={Css.fs0.$}>
+          <Icon icon={typeToIcon[type]} {...tid.type} color={Palette.Gray900} />
+        </span>
+      )}
       <span css={Css.fg1.$} {...tid.message}>
         {message}
       </span>

src/components/Icon.stories.tsx

@@ -29,6 +29,7 @@ export const Icon = (props: IconProps) => {
     "check",
     "search",
     "comment",
+    "commentFilled",
     "plus",
     "minus",
     "pencil",

src/components/Icon.tsx

@@ -117,6 +117,9 @@ export const Icons = {
   comment: (
     <path d="M12 2C6.486 2 2 5.589 2 10C2 12.908 3.898 15.516 7 16.934V22L12.34 17.995C17.697 17.852 22 14.32 22 10C22 5.589 17.514 2 12 2ZM12 16H11.667L9 18V15.583L8.359 15.336C5.67 14.301 4 12.256 4 10C4 6.691 7.589 4 12 4C16.411 4 20 6.691 20 10C20 13.309 16.411 16 12 16Z" />
   ),
+  commentFilled: (
+    <path d="M10 0C4.486 0 0 3.589 0 8C0 10.908 1.898 13.516 5 14.934V20L10.34 15.995C15.697 15.852 20 12.32 20 8C20 3.589 15.514 0 10 0Z" />
+  ),
   plus: <path d="M19 11H13V5H11V11H5V13H11V19H13V13H19V11Z" />,
   minus: <rect x="6" y="11" width="12" height="2" />,
   pencil: (