add hide icon prop to lemon banner

PostHog · Jun 19, 2024 · 8ed987f · 8ed987f
1 parent 956848a
commit 8ed987f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx
@@ -19,6 +19,7 @@ export interface LemonBannerProps {
     className?: string
     /** If provided, the banner will be dismissed and hidden when the key is set in localStorage. */
     dismissKey?: string
+    hideIcon?: boolean
 }
 
 /** Generic alert message. */
@@ -29,6 +30,7 @@ export function LemonBanner({
     action,
     className,
     dismissKey = '',
+    hideIcon = false,
 }: LemonBannerProps): JSX.Element | null {
     const logic = lemonBannerLogic({ dismissKey })
     const { isDismissed } = useValues(logic)
@@ -49,11 +51,12 @@ export function LemonBanner({
     return (
         <div className={clsx('LemonBanner @container', `LemonBanner--${type}`, className)}>
             <div className="flex items-center gap-2 grow @md:px-1">
-                {type === 'warning' || type === 'error' ? (
-                    <IconWarning className="LemonBanner__icon hidden @md:block" />
-                ) : (
-                    <IconInfo className="LemonBanner__icon hidden @md:block" />
-                )}
+                {!hideIcon &&
+                    (type === 'warning' || type === 'error' ? (
+                        <IconWarning className="LemonBanner__icon hidden @md:block" />
+                    ) : (
+                        <IconInfo className="LemonBanner__icon hidden @md:block" />
+                    ))}
                 <div className="grow overflow-hidden">{children}</div>
                 {action && <LemonButton className="hidden @md:flex" type="secondary" {...action} />}
                 {showCloseButton && <LemonButton size="small" icon={<IconX />} onClick={_onClose} aria-label="close" />}

diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -292,7 +292,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                             <h4 className="my-4">Add-ons</h4>
                             {featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] == 'test' &&
                                 billing?.subscription_level == 'free' && (
-                                    <LemonBanner type="warning" className="text-sm mb-4">
+                                    <LemonBanner type="warning" className="text-sm mb-4" hideIcon>
                                         <div className="flex justify-between items-center">
                                             <div>
                                                 Add-ons are only available on paid plans. Upgrade to access these