fix(tablekit-banner): fix icon alignment

closes #39
tablecheck · Aug 25, 2021 · 44e1353 · 44e1353
1 parent 46ed549
commit 44e1353
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/packages/banner/package.json b/packages/banner/package.json
@@ -29,6 +29,7 @@
     "react-dom": ">=16.2.0 <18"
   },
   "devDependencies": {
+    "@storybook/react": "6.3.7",
     "@tablecheck/tablekit-enzyme": "^1.0.0",
     "@tablecheck/tablekit-free-icon-config": "^1.0.0"
   },

diff --git a/packages/banner/src/Banner.tsx b/packages/banner/src/Banner.tsx
@@ -1,6 +1,7 @@
 import { ButtonAppearance, ButtonSize } from '@tablecheck/tablekit-button';
 import { Icon, getIcon } from '@tablecheck/tablekit-icon';
 import { Size } from '@tablecheck/tablekit-theme';
+import { MutableRefObject, useRef, useState, useEffect } from 'react';
 
 import {
   adjustedIconSizes,
@@ -21,15 +22,21 @@ export const Banner = ({
   size = Size.Regular,
   ...restProps
 }: BannerProps): JSX.Element => {
+  const [height, setHeight] = useState(0);
+  const ref = useRef() as MutableRefObject<HTMLDivElement>;
+  useEffect(() => {
+    setHeight(ref.current.clientHeight);
+  }, []);
   const displayedIcon = customIcon || getIcon(appearance);
   return (
     <BannerContainer
+      ref={ref}
       {...restProps}
       className={className}
       appearance={appearance}
       size={size}
     >
-      <BannerMessageContainer>
+      <BannerMessageContainer height={height && height} size={size}>
         {displayedIcon && (
           <AlertIcon
             className="bannerIcon"

diff --git a/packages/banner/src/__tests__/__snapshots__/index.tsx.snap b/packages/banner/src/__tests__/__snapshots__/index.tsx.snap
@@ -35,9 +35,13 @@ exports[`Banner should allow passing of custom className 1`] = `
   -webkit-justify-content: center;
   justify-content: center;
   padding: 6px 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
-.emotion-2:only-child {
+0 .emotion-2:only-child {
   padding: 6px 8px 6px 0;
 }
 
@@ -58,9 +62,14 @@ exports[`Banner should allow passing of custom className 1`] = `
       className="test-class emotion-0 emotion-1"
       size="regular"
     >
-      <BannerMessageContainer>
+      <BannerMessageContainer
+        height={0}
+        size="regular"
+      >
         <div
           className="emotion-2 emotion-3"
+          height={0}
+          size="regular"
         >
           <AlertIcon
             className="bannerIcon"
@@ -120,9 +129,13 @@ exports[`Banner should correctly apply styling 1`] = `
   -webkit-justify-content: center;
   justify-content: center;
   padding: 6px 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
-.emotion-2:only-child {
+0 .emotion-2:only-child {
   padding: 6px 8px 6px 0;
 }
 
@@ -141,9 +154,14 @@ exports[`Banner should correctly apply styling 1`] = `
       className="emotion-0 emotion-1"
       size="regular"
     >
-      <BannerMessageContainer>
+      <BannerMessageContainer
+        height={0}
+        size="regular"
+      >
         <div
           className="emotion-2 emotion-3"
+          height={0}
+          size="regular"
         >
           <AlertIcon
             className="bannerIcon"

diff --git a/packages/banner/src/styled.ts b/packages/banner/src/styled.ts
@@ -11,7 +11,7 @@ import { getThemeValue } from '@tablecheck/tablekit-utils';
 import type { ThemeOnlyProps } from '@tablecheck/tablekit-utils';
 
 import { bannerClassicTheme, bannerThemeNamespace } from './themes';
-import { Appearance, BannerProps } from './types';
+import { Appearance, BannerProps, BannerSizes } from './types';
 
 const sizedTypography = {
   [Size.Small]: Typography.Heading4,
@@ -62,11 +62,19 @@ export const BannerContainer = styled.div<
   ${getBannerAppearance}
 `;
 
-export const BannerMessageContainer = styled.div`
+export const BannerMessageContainer = styled.div<{
+  height: number;
+  size: BannerSizes;
+}>`
   display: flex;
   flex: 1;
   justify-content: center;
   padding: 6px 0;
+  display: flex;
+  ${({ height, size }) =>
+    height &&
+    height <= parseFloat(sizedTypography[size].lineHeight) + 12 &&
+    'align-items: center;'}
 
   &:only-child {
     padding: 6px ${Spacing.L2} 6px 0;