Merge pull request #1528 from NYPL/DSD-1688/StatusBadge-icon

DSD-1688: Updates StatusBadge styles and Storybook docs

CHANGELOG.md

@@ -8,6 +8,9 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+- Updates the `StatusBadge` styles so that if an icon is passed, the icon and text line up with one another
+
+
 ### Fixes
 
 - Fixes a styling issue on the range `DatePicker` for the month and year types

src/components/StatusBadge/StatusBadge.mdx

@@ -1,7 +1,8 @@
-import { ArgTypes, Canvas, Description, Meta } from "@storybook/blocks";
-
+import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 import * as StatusBadgeStories from "./StatusBadge.stories";
 import Link from "../Link/Link";
+import { changelogData } from "./statusBadgeChangelogData";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={StatusBadgeStories} />
 
@@ -18,6 +19,7 @@ import Link from "../Link/Link";
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
 - {<Link href="#patterns" target="_self">Patterns</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -51,3 +53,35 @@ Used in instances where the associated message is the lower barrier. Use
 `"low"` for this level which is the default.
 
 <Canvas of={StatusBadgeStories.LowerBarrier} />
+
+### Icons
+
+You may render an icon within the `StatusBadge` by passing it as a child to the component.
+If you are using an icon, you should still pass text to the badge so that the user can
+understand its meaning.
+
+You will have to pass a `margin-left` or `margin-right` to add space
+between the icon and the text. The use of the design tokens (ie, `xs`) is encouraged.
+
+<Canvas of={StatusBadgeStories.Icons} />
+
+<Source
+  code={`
+// Icon first (add margin-right)
+
+<StatusBadge level="high">
+  <Icon color="brand.primary" mr="xs" name="errorFilled" size="medium" />
+  On-Site Access Only
+</StatusBadge>
+
+// Icon second (add margin-left)
+
+<StatusBadge level="low">
+  Registration Required
+  <Icon color="ui.black" ml="xs" name="actionIdentityFilled" size="medium" />
+</StatusBadge>
+`} language="jsx" />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/StatusBadge/StatusBadge.stories.tsx

@@ -1,6 +1,7 @@
 import { VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
+import Icon from "../Icons/Icon";
 
 import StatusBadge, { statusBadgeTypeArray } from "./StatusBadge";
 
@@ -62,3 +63,23 @@ export const LowerBarrier: Story = {
     </VStack>
   ),
 };
+
+export const Icons: Story = {
+  render: () => (
+    <VStack spacing="s" align="stretch">
+      <StatusBadge level="high">
+        <Icon color="brand.primary" mr="xs" name="errorFilled" size="medium" />
+        On-Site Access Only
+      </StatusBadge>
+      <StatusBadge level="low">
+        Registration Required
+        <Icon
+          color="ui.black"
+          ml="xs"
+          name="actionIdentityFilled"
+          size="medium"
+        />
+      </StatusBadge>
+    </VStack>
+  ),
+};

src/components/StatusBadge/statusBadgeChangelogData.ts

@@ -0,0 +1,21 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles", "Documentation"],
+    notes: [
+      "Updated the styles so that if a dev passes an icon to the badge as well as text, the icon and text line up with one another",
+    ],
+  },
+];

src/theme/components/statusBadge.ts

@@ -1,13 +1,13 @@
 const StatusBadge = {
   baseStyle: {
+    alignItems: "center",
     borderRadius: "base",
     color: "ui.typography.heading",
-    display: "block",
+    display: "flex",
     fontSize: "desktop.body.body2", // slightly smaller than the default size
     fontStyle: "italic",
     py: "inset.extranarrow",
     px: "inset.narrow",
-    textAlign: "center",
     width: "fit-content",
     _dark: {
       backgroundColor: "dark.ui.bg.active",