Add badgeProps to BasicEmptyState

mongodb · Oct 4, 2024 · 048d72c · 048d72c
1 parent ce68920
commit 048d72c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/packages/empty-state/README.md b/packages/empty-state/README.md
@@ -33,6 +33,7 @@ import { BasicEmptyState } from '@leafygreen-ui/empty-state';
   title="No Results Found"
   description="Try adjusting your filters or search terms"
   graphic={<SvgOrImgComponent />}
+  badgeProps={{ variant: 'blue', children: 'Optional' }}
   primaryButton={<Button />}
   secondaryButton={<Button />}
   externalLink={<Link />}
@@ -45,6 +46,7 @@ A basic empty state component to be used with MongoDB marketing-approved graphic
 | Prop              | Type           | Description                                                                                                        | Default     |
 | ----------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------- |
 | `graphic`         | `ReactElement` | Graphic shown left of text content. The component is designed to be used with MongoDB marketing-approved graphics. | `undefined` |
+| `badgeProps`      | `BadgeProps`   | Optional props to conditionally render a badge.                                                                    | `undefined` |
 | `title`\*         | `string`       | Heading text.                                                                                                      |             |
 | `description`\*   | `ReactChild`   | Secondary text.                                                                                                    |             |
 | `primaryButton`   | `ReactElement` | Optional primary call-to-action button.                                                                            | `undefined` |

diff --git a/packages/empty-state/src/BasicEmptyState/BasicEmptyState.stories.tsx b/packages/empty-state/src/BasicEmptyState/BasicEmptyState.stories.tsx
@@ -6,6 +6,7 @@ import {
 } from '@lg-tools/storybook-utils';
 import { StoryFn } from '@storybook/react';
 
+import { Variant } from '@leafygreen-ui/badge';
 import Button from '@leafygreen-ui/button';
 import { Theme } from '@leafygreen-ui/lib';
 import { Link } from '@leafygreen-ui/typography';
@@ -27,6 +28,7 @@ const meta: StoryMetaType<typeof BasicEmptyState> = {
   },
   argTypes: {
     graphic: { control: 'none' },
+    badgeProps: { control: 'none' },
     description: { control: 'text' },
     externalLink: { control: 'none' },
     primaryButton: { control: 'none' },
@@ -52,6 +54,10 @@ const meta: StoryMetaType<typeof BasicEmptyState> = {
             viewBox="0 0 198 131"
           />,
         ],
+        badgeProps: [
+          undefined,
+          { variant: Variant.Blue, children: 'Optional' },
+        ],
         primaryButton: [
           undefined,
           <Button key="generated-button">Add Dependency</Button>,
@@ -123,9 +129,10 @@ WithSmallGraphic.args = {
   graphicSize: 'small',
 };
 
-export const WithActionsAndLink = Template.bind({});
-WithActionsAndLink.args = {
+export const WithBadgeAndActionsAndLink = Template.bind({});
+WithBadgeAndActionsAndLink.args = {
   graphic: <LightModeGraphic viewBox="0 0 298 198" />,
+  badgeProps: { variant: Variant.Blue, children: 'Optional' },
   primaryButton: <Button>Add Dependency</Button>,
   secondaryButton: <Button>Upload Module</Button>,
   externalLink: <Link href="https://www.mongodb.com">Test external link</Link>,

diff --git a/packages/empty-state/src/BasicEmptyState/BasicEmptyState.styles.ts b/packages/empty-state/src/BasicEmptyState/BasicEmptyState.styles.ts
@@ -1,7 +1,6 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
-import { palette } from '@leafygreen-ui/palette';
-import { spacing } from '@leafygreen-ui/tokens';
+import { color, spacing } from '@leafygreen-ui/tokens';
 
 export const rootStyles = css`
   padding: 40px;
@@ -15,25 +14,28 @@ export const textContainerStyles = css`
   max-width: 432px;
 `;
 
+export const getBadgeStyles = (className?: string) =>
+  cx(
+    className,
+    css`
+      margin-bottom: ${spacing[300]}px;
+    `,
+  );
+
 export const titleStyles = css`
-  margin-bottom: 12px;
+  margin-bottom: ${spacing[300]}px;
 `;
 
-export const descriptionStyles: Record<Theme, string> = {
-  [Theme.Dark]: css`
-    color: ${palette.gray.light1};
-  `,
-  [Theme.Light]: css`
-    color: ${palette.gray.dark1};
-  `,
-};
+export const getDescriptionStyles = (theme: Theme) => css`
+  color: ${color[theme].text.secondary.default};
+`;
 
 export const buttonContainerStyles = css`
   display: flex;
-  gap: 12px;
-  margin-top: ${spacing[4]}px;
+  gap: ${spacing[300]}px;
+  margin-top: ${spacing[600]}px;
 `;
 
 export const externalLinkStyles = css`
-  margin-top: ${spacing[3]}px;
+  margin-top: ${spacing[300]}px;
 `;
diff --git a/packages/empty-state/src/BasicEmptyState/BasicEmptyState.tsx b/packages/empty-state/src/BasicEmptyState/BasicEmptyState.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef, Ref } from 'react';
 import PropTypes from 'prop-types';
 
+import Badge from '@leafygreen-ui/badge';
 import Button from '@leafygreen-ui/button';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
@@ -9,8 +10,9 @@ import { Body, H3, Link } from '@leafygreen-ui/typography';
 
 import {
   buttonContainerStyles,
-  descriptionStyles,
   externalLinkStyles,
+  getBadgeStyles,
+  getDescriptionStyles,
   rootStyles,
   textContainerStyles,
   titleStyles,
@@ -21,6 +23,7 @@ export const BasicEmptyState = forwardRef(
   (
     {
       graphic,
+      badgeProps,
       title,
       description,
       primaryButton,
@@ -55,8 +58,14 @@ export const BasicEmptyState = forwardRef(
         <div className={rootStyles} ref={ref}>
           {!!graphic && <div>{graphic}</div>}
           <div className={textContainerStyles}>
+            {badgeProps && (
+              <Badge
+                {...badgeProps}
+                className={getBadgeStyles(badgeProps.className)}
+              />
+            )}
             <H3 className={titleStyles}>{title}</H3>
-            <Body className={descriptionStyles[theme]}>{description}</Body>
+            <Body className={getDescriptionStyles(theme)}>{description}</Body>
             {!!primaryButton && (
               <div className={buttonContainerStyles}>
                 <Button {...primaryButton.props} variant="primary" />

diff --git a/packages/empty-state/src/BasicEmptyState/BasicEmptyState.types.ts b/packages/empty-state/src/BasicEmptyState/BasicEmptyState.types.ts
@@ -1,5 +1,6 @@
 import { ReactChild, ReactElement } from 'react';
 
+import { BadgeProps } from '@leafygreen-ui/badge';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
 interface EmptyStateWithCTAProps {
@@ -31,6 +32,11 @@ type BasicEmptyStateBaseProps = DarkModeProps & {
    */
   graphic?: ReactElement;
 
+  /**
+   * Optional badge props to render a badge component
+   */
+  badgeProps?: BadgeProps;
+
   /**
    * Heading text
    */