feat(banner): add children (#277)

* feat(banner): remove text prop and add children change component from accepting text to accepting children so that a link may be used BREAKING CHANGE: the banner component no longer accepts a text prop. This can be fixed by changing the text to be a child of the banner component * feat(banner): added text back as an optional prop so it isnt a breaking change * fix(banner): added error whern both text and children defined * fix(banner): remove test prop BREAKING CHANGE: text prop removed
chanzuckerberg · Nov 9, 2022 · 228ad54 · 228ad54
1 parent 8e8b056
commit 228ad54
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 40 deletions.
diff --git a/src/core/Banner/__snapshots__/banner.test.tsx.snap b/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
   style="padding: 24px; width: 600px;"
 >
   <div
-    class="css-9mzx1i"
+    class="css-1v3i1xe"
     role="banner"
   >
     <div
@@ -29,11 +29,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
           />
         </div>
       </div>
-      <div
-        class="css-1xpysbw"
-      >
-        Banner text lorem ipsum dolor mit
-      </div>
+      Banner text lorem ipsum dolor mit
     </div>
     <button
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
@@ -64,7 +60,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
     style="height: 24px;"
   />
   <div
-    class="css-1x062lx"
+    class="css-1doigm5"
     role="banner"
   >
     <div
@@ -88,11 +84,16 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
           />
         </div>
       </div>
+      Banner text lorem ipsum dolor mit
       <div
-        class="css-1xpysbw"
+        style="padding: 5px;"
+      />
+      <a
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-otz8ol-MuiTypography-root-MuiLink-root"
+        href="/"
       >
-        Banner text lorem ipsum dolor mit
-      </div>
+        Learn More
+      </a>
     </div>
     <button
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-quxuam-MuiButtonBase-root-MuiIconButton-root"
@@ -123,7 +124,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
     style="height: 24px;"
   />
   <div
-    class="css-yd06ia"
+    class="css-n7miuv"
     role="banner"
   >
     <div
@@ -147,11 +148,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
           />
         </div>
       </div>
-      <div
-        class="css-1xpysbw"
-      >
-        Stylable. Should have pink background color
-      </div>
+      Stylable. Should have pink background color
     </div>
     <button
       class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"
@@ -183,8 +180,9 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
 
 exports[`<Banner /> Test story renders snapshot 1`] = `
 <div
-  class="css-9mzx1i"
+  class="css-1v3i1xe"
   role="banner"
+  textchild="test text"
 >
   <div
     class="css-1879pua"
@@ -207,11 +205,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
         />
       </div>
     </div>
-    <div
-      class="css-1xpysbw"
-    >
-      test text
-    </div>
+    test text
   </div>
   <button
     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-reo6um-MuiButtonBase-root-MuiIconButton-root"

diff --git a/src/core/Banner/banner.test.tsx b/src/core/Banner/banner.test.tsx
@@ -19,7 +19,7 @@ describe("<Banner />", () => {
 
   it("renders text given to it", () => {
     const text = "this is a test component";
-    render(<Test {...Test.args} text={text} />);
+    render(<Test {...Test.args} textChild={text} />);
     const bannerText = screen.getByText(text);
     expect(bannerText).not.toBeNull();
   });

diff --git a/src/core/Banner/index.stories.tsx b/src/core/Banner/index.stories.tsx
@@ -1,13 +1,18 @@
 import { styled } from "@mui/material/styles";
 import { Args, Story } from "@storybook/react";
 import React from "react";
+import Link from "../Link";
 import Banner from "./index";
 
 const BANNER_TEXT = "Banner text lorem ipsum dolor mit";
 
 const Demo = (props: Args): JSX.Element => {
-  const { sdsType, text } = props;
-  return <Banner sdsType={sdsType} text={text} {...props} />;
+  const { sdsType, textChild } = props;
+  return (
+    <Banner sdsType={sdsType} {...props}>
+      {textChild}
+    </Banner>
+  );
 };
 
 export default {
@@ -23,7 +28,7 @@ export default {
       options: ["primary", "secondary"],
       required: true,
     },
-    text: {
+    textChild: {
       control: { type: "text" },
       required: true,
     },
@@ -45,7 +50,7 @@ Default.args = {
   dismissed: false,
   dismissible: true,
   sdsType: "primary",
-  text: BANNER_TEXT,
+  textChild: BANNER_TEXT,
 };
 
 const StyledBanner = styled(Banner)`
@@ -55,25 +60,45 @@ const StyledBanner = styled(Banner)`
 const LivePreviewDemo = (): JSX.Element => {
   return (
     <div style={{ padding: "24px", width: "600px" }}>
-      <Banner dismissible sdsType="primary" text={BANNER_TEXT} />
+      <Banner dismissible sdsType="primary">
+        {BANNER_TEXT}
+      </Banner>
       <div style={{ height: "24px" }} />
-      <Banner dismissible sdsType="secondary" text={BANNER_TEXT} />
+      <Banner dismissible sdsType="secondary">
+        {BANNER_TEXT}
+        <div style={{ padding: 5 }} />
+        <Link href="/" sdsStyle="default">
+          Learn More
+        </Link>
+      </Banner>
       <div style={{ height: "24px" }} />
-      <StyledBanner
-        sdsType="primary"
-        text="Stylable. Should have pink background color"
-      />
+      <StyledBanner sdsType="primary">
+        Stylable. Should have pink background color
+      </StyledBanner>
     </div>
   );
 };
 
-export const LivePreview = LivePreviewDemo.bind({});
+const LivePreviewTemplate: Story = (args) => <LivePreviewDemo {...args} />;
+export const LivePreview = LivePreviewTemplate.bind({});
+
+LivePreview.parameters = {
+  controls: {
+    exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
+  },
+};
 
 const TestTemplate: Story = (args) => <Demo {...args} />;
 
 export const Test = TestTemplate.bind({});
 Test.args = {
   dismissible: true,
   sdsType: "primary",
-  text: "test text",
+  textChild: "test text",
+};
+
+Test.parameters = {
+  controls: {
+    exclude: ["dismissible", "sdsType", "textChild", "dismissed"],
+  },
 };
diff --git a/src/core/Banner/index.tsx b/src/core/Banner/index.tsx
@@ -6,26 +6,25 @@ import {
   IconWrapper,
   StyledBanner,
   StyledButtonIcon,
-  Text,
 } from "./style";
 
 export interface BannerProps extends BannerExtraProps {
+  children: React.ReactNode;
   dismissed?: boolean;
   dismissible?: boolean;
   onClose?: (e: React.MouseEvent) => void;
-  text: string;
 }
 
 const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
   props,
   ref
 ): JSX.Element | null {
   const {
+    children,
     dismissed,
     dismissible = true,
     onClose,
     sdsType,
-    text,
     ...rest
   } = props;
 
@@ -47,7 +46,7 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
         <IconWrapper>
           <Icon sdsIcon="infoCircle" sdsSize="l" sdsType="static" />
         </IconWrapper>
-        <Text>{text}</Text>
+        {children}
       </Centered>
       {dismissible && (
         <StyledButtonIcon

diff --git a/src/core/Banner/style.ts b/src/core/Banner/style.ts
@@ -104,13 +104,15 @@ export const StyledBanner = styled("div", {
   align-items: center;
   height: 40px;
   width: 100%;
-
+  ${fontBodyS}
   ${(props: BannerExtraProps) => {
     const { sdsType } = props;
+    const typography = getTypography(props);
 
     return `
       ${sdsType === "primary" ? primary(props) : ""}
       ${sdsType === "secondary" ? secondary(props) : ""}
+      font-family: ${typography?.fontFamily};
     `;
   }}
 `;