fix up banner

ensdomains · Dec 10, 2024 · c8d3112 · c8d3112
1 parent 2d0910a
commit c8d3112
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx
@@ -4,7 +4,8 @@ import type { WithAlert } from './utils/getValueForAlert'
 import { getValueForAlert } from './utils/getValueForAlert'
 import { Typography } from '../Typography/Typography'
 
-import { AlertSVG, CrossSVG, EthSVG, UpRightArrowSVG } from '../../../index'
+import type { IconProps } from '@/src/icons'
+import { AlertSVG, CrossSVG, EthSVG, UpRightArrowSVG } from '@/src/icons'
 import type { AsProp, BoxProps } from '../Box/Box'
 import { Box } from '../Box/Box'
 import * as styles from './styles.css'
@@ -208,12 +209,21 @@ export type BannerProps = BaseProps &
   (WithIcon | WithoutIcon) &
   WithAlert
 
+const defaultIconType = (
+  alert: NonNullableAlert,
+  icon?: React.FC<IconProps>,
+): IconTypes => {
+  if (alert !== 'info') return 'filledCircle'
+  if (icon) return 'normal'
+  return 'none'
+}
+
 export const Banner = React.forwardRef<
   HTMLDivElement,
   React.PropsWithChildren<BannerProps>
 >(
   (
-    { title, alert = 'info', icon, as: asProp, children, onDismiss, ...props },
+    { title, alert = 'info', icon, iconType, as: asProp, children, onDismiss, ...props },
     ref,
   ) => {
     const Icon
@@ -228,6 +238,7 @@ export const Banner = React.forwardRef<
 
     const hasHref = !!props.href
     const hasAction = hasHref || !!props.onClick
+    const _iconType = iconType || defaultIconType(alert, icon)
 
     return (
       <ContainerBox
@@ -237,9 +248,11 @@ export const Banner = React.forwardRef<
         as={asProp}
         ref={ref}
       >
-        <IconBox $alert={alert}>
-          <SVGBox $alert={alert} as={Icon} />
-        </IconBox>
+        {_iconType !== 'none' && (
+          <IconBox $alert={alert}>
+            <SVGBox $alert={alert} as={Icon} />
+          </IconBox>
+        )}
         <Box
           display="flex"
           flex={1}

diff --git a/components/src/icons.tsx b/components/src/icons.tsx
@@ -3,6 +3,8 @@ import React from 'react'
 
 type Props = SVGProps<SVGSVGElement>
 
+export type { Props as IconProps }
+
 const AeroplaneSVG: FC<Props> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 96 96" {...props}>
     <path fill="currentColor" fillRule="evenodd" d="M4.5 23.225C1.173 12.416 12.09 2.703 22.438 7.264l65.03 28.657c10.502 4.628 10.502 19.53 0 24.158l-65.03 28.657c-10.348 4.56-21.265-5.153-17.94-15.96L12.122 48 4.5 23.225ZM22.83 54l-6.86 22.304c-.303.983.69 1.866 1.63 1.451l65.03-28.657c.31-.136.454-.297.541-.437.102-.166.175-.395.175-.661s-.073-.495-.175-.661c-.087-.14-.232-.301-.54-.437L17.6 18.245c-.941-.415-1.934.468-1.631 1.45L22.83 42h21.72a6 6 0 0 1 0 12H22.83Z" clipRule="evenodd" />