refactor(callout): new hideTitle and hideBody props and a component s…

…lot (#910) * refactor(callout): new hideTitle and hideBody props + new composing structure * refactor(callout): add sdsStyle prop to control expandability or dismissability * style(cllout): center the title when there is no body * refactor(callout): refactored component based on review feedback
chanzuckerberg · Dec 18, 2024 · 26a830b · 26a830b
1 parent 9f76182
commit 26a830b
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 106 deletions.
diff --git a/packages/components/src/core/Callout/__storybook__/constants.tsx b/packages/components/src/core/Callout/__storybook__/constants.tsx
@@ -1,13 +1,16 @@
-import { action } from "@storybook/addon-actions";
 import CustomSdsIcon from "src/common/storybook/customSdsIcon";
 import CustomSvgIcon from "src/common/storybook/customSvgIcon";
 
 export const CALLOUT_EXCLUDED_CONTROLS = [
   "autoDismiss",
-  "expandable",
   "icon",
   "intent",
   "onClose",
+  "sdsStyle",
+  "hideTitle",
+  "hideBody",
+  "title",
+  "body",
 ];
 
 export const CALLOUT_ICON_OPTIONS = [
@@ -17,4 +20,8 @@ export const CALLOUT_ICON_OPTIONS = [
   "CheckCircle",
 ];
 
-export const CALLOUT_ON_CLOSE_OPTIONS = [action("onClick"), undefined];
+export const CALLOUT_SDS_STYLE_OPTIONS = [
+  "persistent",
+  "expandable",
+  "dismissible",
+];
diff --git a/packages/components/src/core/Callout/__storybook__/index.stories.tsx b/packages/components/src/core/Callout/__storybook__/index.stories.tsx
@@ -1,18 +1,31 @@
 import { Meta } from "@storybook/react";
 import { BADGE } from "@geometricpanda/storybook-addon-badges";
-import { CALLOUT_ICON_OPTIONS, CALLOUT_ON_CLOSE_OPTIONS } from "./constants";
+import { CALLOUT_ICON_OPTIONS, CALLOUT_SDS_STYLE_OPTIONS } from "./constants";
 import { Callout } from "./stories/default";
 
 export default {
   argTypes: {
     autoDismiss: {
       control: { type: "select" },
+      defaultValue: { summary: "false" },
+      description:
+        "If set to a number, the callout will automatically dismiss after that many milliseconds. If set to true, the callout will automatically dismiss after 8000 milliseconds.",
       options: [true, false, 4000, 12000, 20000],
     },
-    expandable: {
-      control: {
-        type: "boolean",
-      },
+    body: {
+      control: { type: "text" },
+      defaultValue: { summary: "-" },
+      description: "The body text of the callout.",
+    },
+    hideBody: {
+      control: { type: "boolean" },
+      defaultValue: { summary: "false" },
+      description: "If true, the body of the callout will be hidden.",
+    },
+    hideTitle: {
+      control: { type: "boolean" },
+      defaultValue: { summary: "false" },
+      description: "If true, the title of the callout will be hidden.",
     },
     icon: {
       control: {
@@ -24,25 +37,41 @@ export default {
         ],
         type: "select",
       },
+      defaultValue: { summary: "-" },
+      description:
+        "The icon displayed in the Callout. By default, each Callout intent is paired with a corresponding SDS icon.",
       mapping: CALLOUT_ICON_OPTIONS,
       options: Object.keys(CALLOUT_ICON_OPTIONS),
     },
     intent: {
       control: { type: "radio" },
+      defaultValue: { summary: "info" },
+      description: "The intent of the callout.",
       options: ["info", "negative", "positive", "notice"],
     },
-    onClose: {
+    sdsStyle: {
       control: {
-        labels: ["() => {}", "undefined"],
+        labels: ["persistent", "expandable", "dismissible"],
         type: "select",
       },
-      mapping: CALLOUT_ON_CLOSE_OPTIONS,
-      options: Object.keys(CALLOUT_ON_CLOSE_OPTIONS),
+      defaultValue: { summary: "persistent" },
+      description:
+        "The style of the Callout determines its behavior: Persistent Callouts are always visible, Expandable Callouts can be toggled to show or hide extra content, and Dismissible Callouts can be closed by the user.",
+      mapping: CALLOUT_SDS_STYLE_OPTIONS,
+      options: Object.keys(CALLOUT_SDS_STYLE_OPTIONS),
+    },
+    title: {
+      control: { type: "text" },
+      defaultValue: { summary: "-" },
+      description: "The title of the callout.",
     },
   },
   component: Callout,
   parameters: {
     badges: [BADGE.STABLE],
+    controls: {
+      expanded: true,
+    },
   },
   title: "Components/Callout",
 } as Meta;
@@ -52,7 +81,7 @@ export default {
 export const Default = {
   args: {
     autoDismiss: false,
-    calloutTitle: "Callout title.",
-    onClose: false,
+    body: "Callout text — replace the content here and the height of the component will adjust automatically.",
+    title: "The callout title goes here",
   },
 };
diff --git a/packages/components/src/core/Callout/__storybook__/stories/default.tsx b/packages/components/src/core/Callout/__storybook__/stories/default.tsx
@@ -1,24 +1,24 @@
-import { FormControlLabel } from "@mui/material";
+import { Box, FormControlLabel } from "@mui/material";
 import { Args } from "@storybook/react";
 import { useState } from "react";
 import RawCallout from "src/core/Callout";
 import InputToggle from "src/core/InputToggle";
-import CalloutTitle from "src/core/Callout/components/CalloutTitle";
-import { EXTRA_SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import { SHORT_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
+import TooltipTableContent from "src/core/TooltipTable";
 
 export const Callout = (props: Args): JSX.Element => {
-  const { intent, onClose, calloutTitle, autoDismiss, ...rest } = props;
+  const { intent, autoDismiss, ...rest } = props;
 
   const [dismissed, setDismissed] = useState(false);
 
   const handleChange = () => {
     setDismissed((prev) => !prev);
   };
 
-  const finalOnclose = !onClose ? undefined : () => setDismissed(true);
+  const finalOnclose = (_: React.SyntheticEvent) => setDismissed(true);
 
   return (
-    <>
+    <Box sx={{ width: 600 }}>
       {!autoDismiss && (
         <FormControlLabel
           control={<InputToggle checked={dismissed} onChange={handleChange} />}
@@ -38,9 +38,25 @@ export const Callout = (props: Args): JSX.Element => {
         onClose={finalOnclose}
         {...rest}
       >
-        {calloutTitle && <CalloutTitle>{calloutTitle}</CalloutTitle>}
-        {EXTRA_SHORT_LOREM_IPSUM}
+        {
+          <div>
+            {SHORT_LOREM_IPSUM}
+            <div style={{ marginTop: 10 }}>
+              <TooltipTableContent
+                data={[
+                  {
+                    dataRows: [
+                      { label: "Lorem ipsum", value: 14.03 },
+                      { label: "Dollor", value: 432.53 },
+                      { label: "Sit amet", value: "7,776.05" },
+                    ],
+                  },
+                ]}
+              />
+            </div>
+          </div>
+        }
       </RawCallout>
-    </>
+    </Box>
   );
 };
diff --git a/packages/components/src/core/Callout/components/CalloutBody/index.tsx b/packages/components/src/core/Callout/components/CalloutBody/index.tsx
@@ -0,0 +1,15 @@
+import { StyledCalloutBody } from "./style";
+
+const CalloutBody = ({
+  children,
+  hideTitle,
+}: {
+  children: React.ReactNode;
+  hideTitle?: boolean;
+}): JSX.Element => {
+  return (
+    <StyledCalloutBody hideTitle={hideTitle}>{children}</StyledCalloutBody>
+  );
+};
+
+export default CalloutBody;
diff --git a/packages/components/src/core/Callout/components/CalloutBody/style.ts b/packages/components/src/core/Callout/components/CalloutBody/style.ts
@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { CommonThemeProps, fontBodyXs, getSpaces } from "src/core/styles";
+
+export const StyledCalloutBody = styled("p")`
+  ${fontBodyXs}
+
+  ${(props: CommonThemeProps & { hideTitle?: boolean }) => {
+    const { hideTitle = false } = props;
+    const spaces = getSpaces(props);
+
+    return `
+      margin: ${!hideTitle ? spaces?.xs : 0}px 0 0 0;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Callout/components/CalloutExtraContent/index.tsx b/packages/components/src/core/Callout/components/CalloutExtraContent/index.tsx
@@ -0,0 +1,19 @@
+import { StyledCalloutExtraContent } from "./style";
+
+const CalloutExtraContent = ({
+  children,
+  hideTitle,
+  hideBody,
+}: {
+  children: React.ReactNode;
+  hideTitle?: boolean;
+  hideBody?: boolean;
+}): JSX.Element => {
+  return (
+    <StyledCalloutExtraContent hideTitle={hideTitle} hideBody={hideBody}>
+      {children}
+    </StyledCalloutExtraContent>
+  );
+};
+
+export default CalloutExtraContent;
diff --git a/packages/components/src/core/Callout/components/CalloutExtraContent/style.ts b/packages/components/src/core/Callout/components/CalloutExtraContent/style.ts
@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { CommonThemeProps, getSpaces } from "src/core/styles";
+
+interface CalloutExtraContentProps {
+  hideTitle?: boolean;
+  hideBody?: boolean;
+}
+
+export const StyledCalloutExtraContent = styled("div")`
+  ${(props: CommonThemeProps & CalloutExtraContentProps) => {
+    const { hideTitle = false, hideBody = false } = props;
+    const spaces = getSpaces(props);
+
+    return `
+      margin: ${hideTitle && hideBody ? 0 : spaces?.m}px 0 0 0;
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/Callout/components/CalloutTitle/style.ts b/packages/components/src/core/Callout/components/CalloutTitle/style.ts
@@ -1,15 +1,8 @@
 import { AlertTitle } from "@mui/material";
 import styled from "@emotion/styled";
-import { fontBodySemiboldXs, getSpaces } from "src/core/styles";
+import { fontBodySemiboldXs } from "src/core/styles";
 
 export const StyledCalloutTitle = styled(AlertTitle)`
   ${fontBodySemiboldXs}
-
-  ${(props) => {
-    const spaces = getSpaces(props);
-
-    return `
-      margin: ${spaces?.xxxs}px 0 ${spaces?.xs}px;
-    `;
-  }}
+  margin: 0;
 `;