LG-4511: add badgeProps to BasicEmptyState (#2497)

* Add @leafygreen-ui/badge package

* Add badgeProps to BasicEmptyState

* Changeset

* Update to tokens

Author: stephl3

Diff for: .changeset/nine-pillows-decide.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/empty-state': minor
+---
+
+[LG-4511](https://jira.mongodb.org/browse/LG-4511): Add optional `badgeProps` to `BasicEmptyState` component

Diff for: 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 for: packages/empty-state/package.json

@@ -30,6 +30,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/badge": "^8.1.3",
     "@leafygreen-ui/button": "^21.2.1",
     "@leafygreen-ui/emotion": "^4.0.8",
     "@leafygreen-ui/lib": "^13.3.0",

Diff for: 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 for: packages/empty-state/src/BasicEmptyState/BasicEmptyState.styles.ts

@@ -1,12 +1,11 @@
-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;
+  padding: ${spacing[1000]}px;
   display: flex;
-  gap: ${spacing[3]}px;
+  gap: ${spacing[400]}px;
   align-items: center;
   justify-content: center;
 `;
@@ -15,25 +14,28 @@ export const textContainerStyles = css`
   max-width: 432px;
 `;
 
+export const getBadgeStyles = (className?: string) =>
+  cx(
+    css`
+      margin-bottom: ${spacing[300]}px;
+    `,
+    className,
+  );
+
 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 for: 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 for: 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
    */

Diff for: packages/empty-state/src/EmptyState.stories.tsx

@@ -5,7 +5,7 @@ import { StoryFn } from '@storybook/react';
 import { css } from '@leafygreen-ui/emotion';
 
 import BasicEmptyStateStoryMeta, {
-  WithActionsAndLink,
+  WithBadgeAndActionsAndLink,
   WithSmallGraphic,
 } from './BasicEmptyState/BasicEmptyState.stories';
 import FeaturesEmptyStateStoryMeta, {
@@ -56,15 +56,15 @@ export const LiveExample: StoryFn<StoryProps> = ({
   ...rest
 }: StoryProps) => {
   let StoryComponent: StoryFn<BasicEmptyStateProps | FeaturesEmptyStateProps> =
-    WithActionsAndLink;
+    WithBadgeAndActionsAndLink;
   let storyComponentProps: BasicEmptyStateProps | FeaturesEmptyStateProps =
     {} as BasicEmptyStateProps | FeaturesEmptyStateProps;
 
   if (variant === StoryVariant.Basic) {
-    StoryComponent = WithActionsAndLink;
+    StoryComponent = WithBadgeAndActionsAndLink;
     storyComponentProps = {
       ...BasicEmptyStateStoryMeta.args,
-      ...WithActionsAndLink.args,
+      ...WithBadgeAndActionsAndLink.args,
     } as BasicEmptyStateProps;
   } else if (variant === StoryVariant.BasicWithSmallAsset) {
     StoryComponent = WithSmallGraphic;

Diff for: packages/empty-state/tsconfig.json

@@ -16,6 +16,9 @@
   ],
   "exclude": ["**/*.spec.*", "**/*.stories.*"],
   "references": [
+    {
+      "path": "../badge"
+    },
     {
       "path": "../button"
     },

Diff for: yarn.lock

@@ -14647,16 +14647,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -14743,14 +14734,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15957,7 +15941,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -15975,15 +15959,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"