@hyphen/hyphen-components 7.4.0 → 7.5.0

package/dist/index.d.ts

@@ -411,7 +411,7 @@ declare const Box: FC<BoxProps>;
 declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];
 
 type BadgeSize = 'sm' | 'md' | 'lg';
-type BadgeVariant = 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'orange' | 'hyphen';
+type BadgeVariant = 'default' | 'secondary' | 'danger' | 'outline' | 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'orange' | 'hyphen';
 interface BadgeProps extends BoxProps {
     /**
      * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -58,7 +58,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^7.2.0",
+    "@hyphen/hyphen-design-tokens": "^7.5.1",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/components/Badge/Badge.mdx

@@ -1,28 +1,33 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import { Badge } from './Badge';
-import * as Stories from './Badge.stories';
-
-<Meta of={Stories} />
-
-# Badge
-
-Badges are used to display the status of an object or of an action that’s been taken.
-
-<Canvas of={Stories.Overview} />
-
-## Props
-
-<ArgTypes of={Badge} />
-
-## Variants
-
-Badges come in different variants based on the kind of message being delivered to the user.
-
-<Canvas of={Stories.Variants} />
-
-## Sizes
-
-Set the size of the badge to `sm`, `md`, `lg` or `xl`. `md` is the default size. A `ResponsiveProp` object may also be used
-so the badge can be a different size per breakpoint.
-
-<Canvas of={Stories.Sizes} />
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import { Badge } from './Badge';
+import * as Stories from './Badge.stories';
+
+<Meta of={Stories} />
+
+# Badge
+
+Badges are used to display the status of an object or of an action that’s been taken.
+
+<Canvas of={Stories.Overview} />
+
+## Props
+
+<ArgTypes of={Badge} />
+
+## Variants
+
+Badges come in different variants based on the kind of message being delivered to the user.
+If the `variant` prop is omitted, the badge uses the theme-aware `default` variant.
+
+<Canvas of={Stories.Variants} />
+
+Fixed-color badge variants remain available when you want the same color treatment regardless of theme.
+
+<Canvas of={Stories.FixedColorVariants} />
+
+## Sizes
+
+Set the size of the badge to `sm`, `md`, or `lg`. `md` is the default size. A `ResponsiveProp` object may also be used
+so the badge can be a different size per breakpoint.
+
+<Canvas of={Stories.Sizes} />

package/src/components/Badge/Badge.module.scss

@@ -42,7 +42,7 @@
 .badge {
   border-style: solid;
   border-width: var(--size-border-width-sm);
-  font-weight: var(--size-font-weight-semibold);
+  font-weight: var(--size-font-weight-medium);
   line-height: var(--size-line-height-base);
 
   &.inverse {
@@ -51,6 +51,30 @@
     color: var(--color-font-inverse);
   }
 
+  &.default {
+    background-color: var(--color-background-badge-default);
+    border-color: var(--color-border-badge-default);
+    color: var(--color-font-badge-default);
+  }
+
+  &.secondary {
+    background-color: var(--color-background-badge-secondary);
+    border-color: var(--color-border-badge-secondary);
+    color: var(--color-font-badge-secondary);
+  }
+
+  &.danger {
+    background-color: var(--color-background-badge-danger);
+    border-color: var(--color-border-badge-danger);
+    color: var(--color-font-badge-danger);
+  }
+
+  &.outline {
+    background-color: var(--color-background-badge-outline);
+    border-color: var(--color-border-badge-outline);
+    color: var(--color-font-badge-outline);
+  }
+
   &.purple {
     background-color: var(--color-base-purple-500);
     border-color: var(--color-base-purple-600);

package/src/components/Badge/Badge.stories.tsx

@@ -2,8 +2,16 @@ import { Badge, BadgeVariant } from './Badge';
 import React from 'react';
 import { Box } from '../Box/Box';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { allModes } from '../../modes';
 
-const BADGE_VARIANTS: BadgeVariant[] = [
+const SEMANTIC_BADGE_VARIANTS: BadgeVariant[] = [
+  'default',
+  'secondary',
+  'danger',
+  'outline',
+];
+
+const FIXED_COLOR_BADGE_VARIANTS: BadgeVariant[] = [
   'light-grey',
   'dark-grey',
   'inverse',
@@ -16,6 +24,11 @@ const BADGE_VARIANTS: BadgeVariant[] = [
   'hyphen',
 ];
 
+const BADGE_VARIANTS: BadgeVariant[] = [
+  ...SEMANTIC_BADGE_VARIANTS,
+  ...FIXED_COLOR_BADGE_VARIANTS,
+];
+
 const BADGE_SIZES = ['sm', 'md', 'lg'];
 
 const meta: Meta<typeof Badge> = {
@@ -47,12 +60,20 @@ const meta: Meta<typeof Badge> = {
     },
   },
   args: {
-    variant: 'light-grey',
+    variant: 'default',
     size: 'md',
     message: '',
     className: '',
     children: undefined,
   },
+  parameters: {
+    chromatic: {
+      modes: {
+        light: allModes['light'],
+        dark: allModes['dark'],
+      },
+    },
+  },
 };
 
 export default meta;
@@ -68,7 +89,22 @@ export const Overview: Story = {
 export const Variants: Story = {
   render: () => (
     <Box direction="row" gap="sm">
-      {BADGE_VARIANTS.map((variant) => (
+      {SEMANTIC_BADGE_VARIANTS.map((variant) => (
+        <Badge variant={variant} key={variant}>
+          {variant}
+        </Badge>
+      ))}
+    </Box>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
+
+export const FixedColorVariants: Story = {
+  render: () => (
+    <Box direction="row" gap="sm" flexWrap="wrap">
+      {FIXED_COLOR_BADGE_VARIANTS.map((variant) => (
         <Badge variant={variant} key={variant}>
           {variant}
         </Badge>

package/src/components/Badge/Badge.test.tsx

@@ -3,6 +3,10 @@ import { render, screen } from '@testing-library/react';
 import { Badge, BadgeSize, BadgeVariant } from './Badge';
 
 export const BADGE_VARIANTS: BadgeVariant[] = [
+  'default',
+  'secondary',
+  'danger',
+  'outline',
   'light-grey',
   'dark-grey',
   'inverse',
@@ -18,10 +22,19 @@ export const BADGE_VARIANTS: BadgeVariant[] = [
 export const BADGE_SIZES: BadgeSize[] = ['sm', 'md', 'lg'];
 
 describe('Badge', () => {
-  test('Label correctly renders with base props', () => {
+  test('Badge correctly renders with base props', () => {
     render(<Badge message="hello" />);
     const badge = screen.getByText('hello');
     expect(badge).toBeInTheDocument();
+    expect(badge.getAttribute('class')).toContain('default');
+  });
+
+  test('it applies the default variant when none is provided', () => {
+    render(<Badge>Badge</Badge>);
+    const badge = screen.getByText('Badge');
+
+    expect(badge.getAttribute('class')).toContain('default');
+    expect(badge.getAttribute('class')).not.toContain('light-grey');
   });
 
   describe('Variants', () => {

package/src/components/Badge/Badge.tsx

@@ -8,6 +8,10 @@ import { Box, BoxProps } from '../Box/Box';
 export type BadgeSize = 'sm' | 'md' | 'lg';
 
 export type BadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'danger'
+  | 'outline'
   | 'light-grey'
   | 'dark-grey'
   | 'inverse'
@@ -39,7 +43,7 @@ export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
     {
       className = '',
       message = '',
-      variant = 'light-grey',
+      variant = 'default',
       size = 'md',
       children,
       ...restProps