- Update Banner spacing default to 1 when only either headerText or t…

…ext is passed - Refactored component to make better use of padding
StenaIT · Sep 12, 2023 · 25a58e3 · 25a58e3
1 parent 5330f31
commit 25a58e3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/packages/elements/src/components/ui/banners/banner/Banner.module.css b/packages/elements/src/components/ui/banners/banner/Banner.module.css
@@ -1,9 +1,6 @@
 .banner {
   --current-bg-color: var(--lhds-color-ui-200);
 
-  padding: calc(var(--swui-metrics-spacing) * 2) 0;
-  padding-right: calc(var(--swui-metrics-indent) * 2);
-
   background: var(--current-bg-color);
 
   .iconBackground {

diff --git a/packages/elements/src/components/ui/banners/banner/Banner.stories.tsx b/packages/elements/src/components/ui/banners/banner/Banner.stories.tsx
@@ -11,10 +11,7 @@ export default {
 
 export const Standard = () => (
   <Box width={"500px"}>
-    <Banner
-      headerText={"This is working."}
-      text={"This is some generic information about something. Well done."}
-    />
+    <Banner headerText={"This is a single line very important message"} />
   </Box>
 );
 

diff --git a/packages/elements/src/components/ui/banners/banner/Banner.tsx b/packages/elements/src/components/ui/banners/banner/Banner.tsx
@@ -48,6 +48,8 @@ const iconPerVariant: Record<BannerVariant, IconDefinition | undefined> = {
   error: stenaExclamationTriangle,
 };
 
+const leftContentWidth = "56px";
+
 export const Banner: React.FC<BannerProps> = ({
   headerText,
   text,
@@ -59,14 +61,14 @@ export const Banner: React.FC<BannerProps> = ({
   ...rest
 }) => {
   return (
-    <div className={cx(styles.banner, styles[variant])} {...getDataProps(rest)}>
+    <Column
+      className={cx(styles.banner, styles[variant])}
+      spacing={children || (headerText && text) ? 2 : 1}
+      indent={2}
+      {...getDataProps(rest)}
+    >
       <Row justifyContent={"space-between"}>
-        <Row
-          flex={"none"}
-          width={"64px"}
-          justifyContent={"center"}
-          alignItems={"center"}
-        >
+        <Row flex={"none"} width={leftContentWidth} alignItems={"center"}>
           <div className={styles.iconBackground}>
             {(icon || iconPerVariant[variant] || loading) && (
               <>
@@ -95,13 +97,13 @@ export const Banner: React.FC<BannerProps> = ({
       </Row>
       {children && (
         <Row>
-          <Box minWidth={"64px"} />
+          <Box minWidth={leftContentWidth} />
           <Box>
             <Space />
             {children}
           </Box>
         </Row>
       )}
-    </div>
+    </Column>
   );
 };