Merge pull request #54 from buildo/3175916-add_action_to_banner

buildo · Mar 4, 2022 · ea184be · ea184be
2 parents 0886864 + 42a5a62
commit ea184be
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 39 deletions.
diff --git a/src/Banner/createBanner.tsx b/src/Banner/createBanner.tsx
@@ -10,8 +10,9 @@ import {
   IconWarning,
   IconNegative,
   IconIdea,
+  ButtonProps,
 } from "..";
-import { Columns, Column, Box, Stack, BentoSprinkles } from "../internal";
+import { Columns, Column, Box, Stack, BentoSprinkles, Inline } from "../internal";
 import { bannerRecipe } from "./Banner.css";
 import { ComponentProps, FunctionComponent } from "react";
 import { IconProps } from "../Icons/IconProps";
@@ -31,6 +32,7 @@ type Kind = "informative" | "positive" | "warning" | "negative" | "tip";
 
 type Props = {
   kind: Kind;
+  action?: ActionProps;
 } & DismissProps &
   (
     | {
@@ -43,6 +45,11 @@ type Props = {
       }
   );
 
+type ActionProps = {
+  label: LocalizedString;
+  onPress: ButtonProps["onPress"];
+};
+
 type KindConfig<T> = {
   [k in Kind]: T;
 };
@@ -55,21 +62,24 @@ type BannerConfig = {
   kindIcons?: KindConfig<FunctionComponent<IconProps>>;
 };
 
-export function createBanner({
-  padding = 16,
-  titleSize = "small",
-  descriptionSize = "small",
-  radius = 8,
-  closeIcon = IconClose,
-  kindIcons = {
-    informative: IconInformative,
-    positive: IconCheckCircleSolid,
-    warning: IconWarning,
-    negative: IconNegative,
-    tip: IconIdea,
-  },
-}: BannerConfig) {
-  return function Banner({ title, description, kind, ...dismissProps }: Props) {
+export function createBanner(
+  Button: FunctionComponent<ButtonProps>,
+  {
+    padding = 16,
+    titleSize = "small",
+    descriptionSize = "small",
+    radius = 8,
+    closeIcon = IconClose,
+    kindIcons = {
+      informative: IconInformative,
+      positive: IconCheckCircleSolid,
+      warning: IconWarning,
+      negative: IconNegative,
+      tip: IconIdea,
+    },
+  }: BannerConfig
+) {
+  return function Banner({ title, description, kind, action, ...dismissProps }: Props) {
     const isWithoutTitle = title === undefined;
     const iconSize = isWithoutTitle ? 16 : 24;
     const iconProps = { size: iconSize, color: kind === "tip" ? "secondary" : kind } as const;
@@ -79,31 +89,46 @@ export function createBanner({
 
     return (
       <Box padding={padding} borderRadius={radius} className={bannerRecipe({ kind })}>
-        <Columns space={16} align="left" alignY={title && description ? "top" : "center"}>
-          <Column width="content">
-            <Box>
-              <Icon {...iconProps} />
-            </Box>
-          </Column>
-          <Stack align="left" space={4}>
-            {title && (
-              <Title size={titleSize} color={kind === "tip" ? "secondary" : kind}>
-                {title}
-              </Title>
-            )}
-            {description && <Body size={descriptionSize}>{description}</Body>}
-          </Stack>
-          {dismissProps.onDismiss && (
+        <Stack space={4}>
+          <Columns space={16} align="left" alignY={title && description ? "top" : "center"}>
             <Column width="content">
-              <IconButton
-                label={dismissProps.dismissButtonLabel ?? defaultMessages.Banner.dismissButtonLabel}
-                onPress={dismissProps.onDismiss}
-                size={12}
-                icon={closeIcon}
-              />
+              <Box>
+                <Icon {...iconProps} />
+              </Box>
             </Column>
+            <Stack align="left" space={4}>
+              {title && (
+                <Title size={titleSize} color={kind === "tip" ? "secondary" : kind}>
+                  {title}
+                </Title>
+              )}
+              {description && <Body size={descriptionSize}>{description}</Body>}
+            </Stack>
+            {dismissProps.onDismiss && (
+              <Column width="content">
+                <IconButton
+                  label={
+                    dismissProps.dismissButtonLabel ?? defaultMessages.Banner.dismissButtonLabel
+                  }
+                  onPress={dismissProps.onDismiss}
+                  size={12}
+                  icon={closeIcon}
+                />
+              </Column>
+            )}
+          </Columns>
+          {action && (
+            <Inline space={0} align="right">
+              <Button
+                onPress={action.onPress}
+                label={action.label}
+                kind="transparent"
+                hierarchy="secondary"
+                size="medium"
+              />
+            </Inline>
           )}
-        </Columns>
+        </Stack>
       </Box>
     );
   };

diff --git a/stories/Components/Banner.stories.tsx b/stories/Components/Banner.stories.tsx
@@ -1,5 +1,6 @@
 import { createComponentStories, formatMessage, textArgType } from "../util";
 import { Banner } from "../";
+import { action } from "@storybook/addon-actions";
 
 const { defaultExport, createStory } = createComponentStories({
   component: Banner,
@@ -27,6 +28,16 @@ export const Dismissable = createStory({
   description: shortDescription,
 });
 
+export const DismissableWithAction = createStory({
+  kind: "informative",
+  title,
+  description: shortDescription,
+  action: {
+    label: formatMessage("Close"),
+    onPress: action("onAction"),
+  },
+});
+
 export const NonDismissable = createStory(
   {
     kind: "informative",

diff --git a/stories/index.tsx b/stories/index.tsx
@@ -44,7 +44,7 @@ export const {
 export const { Button, ButtonLink } = createButtons();
 export const Actions = createActions(Button);
 export const { Form, FormSection, FormRow } = createFormLayoutComponents(Actions);
-export const Banner = createBanner({});
+export const Banner = createBanner(Button, {});
 export const { Toast, ToastProvider } = createToast(Button, {});
 export const Card = createCard<24 | 32 | 40>({});
 export const Link = createLink();