@hyphen/hyphen-components 7.9.0 → 8.0.0

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

@@ -1,185 +1,235 @@
-@import '@hyphen/hyphen-design-tokens/build/scss/variables';
-
-@mixin size-sm {
-  font-size: var(--size-font-size-xs);
-  padding: var(--size-spacing-2xs) var(--size-spacing-sm);
-  border-radius: var(--size-border-radius-lg);
-}
-
-%size-sm {
-  @include size-sm;
-}
-.size-sm {
-  @extend %size-sm;
-}
-
-@mixin size-md {
-  font-size: var(--size-font-size-sm);
-  padding: var(--size-spacing-xs) var(--size-spacing-md);
-  border-radius: var(--size-border-radius-xl);
-}
-
-%size-md {
-  @include size-md;
-}
-.size-md {
-  @extend %size-md;
-}
-
-@mixin size-lg {
-  font-size: var(--size-font-size-md);
-  padding: var(--size-spacing-sm) var(--size-spacing-lg);
-  border-radius: var(--size-border-radius-2xl);
-}
-
-%size-lg {
-  @include size-lg;
-}
-.size-lg {
-  @extend %size-lg;
-}
-
-.badge {
-  border-style: solid;
-  border-width: var(--size-border-width-sm);
-  font-weight: var(--size-font-weight-medium);
-  line-height: var(--size-line-height-base);
-
-  &.inverse {
-    background-color: var(--color-background-inverse);
-    border-color: var(--color-background-inverse);
-    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);
-    color: var(--color-base-white);
-  }
-
-  &.green {
-    background-color: var(--color-base-green-500);
-    border-color: var(--color-base-green-600);
-    color: var(--color-base-white);
-  }
-
-  &.red {
-    background-color: var(--color-base-red-500);
-    border-color: var(--color-base-red-600);
-    color: var(--color-base-white);
-  }
-
-  &.blue {
-    background-color: var(--color-base-blue-500);
-    border-color: var(--color-base-blue-600);
-    color: var(--color-base-white);
-  }
-
-  &.yellow {
-    background-color: var(--color-base-yellow-400);
-    border-color: var(--color-base-yellow-500);
-    color: var(--color-base-black);
-  }
-
-  &.light-grey {
-    background-color: var(--color-base-grey-200);
-    border-color: var(--color-base-grey-200);
-    color: var(--color-base-grey-600);
-  }
-
-  &.dark-grey {
-    background-color: var(--color-base-grey-400);
-    border-color: var(--color-base-grey-400);
-    color: var(--color-base-white);
-  }
-
-  &.orange {
-    background: var(--color-background-brand-orange);
-    border-color: var(--color-border-brand-orange);
-    color: var(--color-base-white);
-  }
-
-  &.hyphen {
-    background: var(--color-background-brand-gradient);
-    border-color: var(--color-base-yellow-500);
-    color: var(--color-base-white);
-  }
-
-  &.size-sm {
-    @extend %size-sm;
-  }
-
-  &.size-md {
-    @extend %size-md;
-  }
-
-  &.size-lg {
-    @extend %size-lg;
-  }
-
-  @media (min-width: $size-breakpoint-tablet) {
-    &.size-sm-tablet {
-      @include size-sm;
-    }
-
-    &.size-md-tablet {
-      @include size-md;
-    }
-
-    &.size-lg-tablet {
-      @include size-lg;
-    }
-  }
-
-  @media (min-width: $size-breakpoint-desktop) {
-    &.size-sm-desktop {
-      @include size-sm;
-    }
-
-    &.size-md-desktop {
-      @include size-md;
-    }
-
-    &.size-lg-desktop {
-      @include size-lg;
-    }
-  }
-
-  @media (min-width: $size-breakpoint-hd) {
-    &.size-sm-hd {
-      @include size-sm;
-    }
-
-    &.size-md-hd {
-      @include size-md;
-    }
-
-    &.size-lg-hd {
-      @include size-lg;
-    }
-  }
-}
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+/*
+ * Trims the padding on whichever side carries a graphic rather than a text label,
+ * so a nested icon does not sit as far from the edge as text would.
+ *
+ * Block comments are deliberate throughout this file: postcss-loader runs before
+ * sass-loader (webpack applies loaders right to left), so PostCSS parses this file
+ * as plain CSS, where `//` is not a comment. A `;` or an apostrophe inside a `//`
+ * comment breaks the production build while Storybook, which compiles Sass first,
+ * keeps working.
+ */
+@mixin graphic-padding($value) {
+  &:has(> :first-child:not(.label)) {
+    padding-left: $value;
+  }
+
+  &:has(> :last-child:not(.label)) {
+    padding-right: $value;
+  }
+}
+
+@mixin size-sm {
+  font-size: var(--size-font-size-xs);
+  padding: var(--size-spacing-2xs) var(--size-spacing-sm);
+  gap: var(--size-spacing-xs);
+
+  @include graphic-padding(var(--size-spacing-xs));
+}
+
+%size-sm {
+  @include size-sm;
+}
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  font-size: var(--size-font-size-sm);
+  padding: var(--size-spacing-xs) var(--size-spacing-md);
+  gap: var(--size-spacing-xs);
+
+  @include graphic-padding(var(--size-spacing-sm));
+}
+
+%size-md {
+  @include size-md;
+}
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  font-size: var(--size-font-size-md);
+  padding: var(--size-spacing-sm) var(--size-spacing-lg);
+  gap: var(--size-spacing-sm);
+
+  @include graphic-padding(var(--size-spacing-md));
+}
+
+%size-lg {
+  @include size-lg;
+}
+.size-lg {
+  @extend %size-lg;
+}
+
+/*
+ * Each color class declares the six semantic values that the variants below consume,
+ * so styles stay at 8 colors + 4 variants instead of all 32 combinations.
+ */
+@mixin badge-color($color) {
+  --badge-solid-background: var(--color-background-badge-solid-#{$color});
+  --badge-solid-border: var(--color-border-badge-solid-#{$color});
+  --badge-solid-font: var(--color-font-badge-solid-#{$color});
+  --badge-soft-background: var(--color-background-badge-soft-#{$color});
+  --badge-soft-font: var(--color-font-badge-soft-#{$color});
+  --badge-surface-background: var(--color-background-badge-surface-#{$color});
+  --badge-surface-border: var(--color-border-badge-surface-#{$color});
+  --badge-outline-border: var(--color-border-badge-outline-#{$color});
+}
+
+.badge {
+  border-style: solid;
+  border-width: var(--size-border-width-sm);
+  font-weight: var(--size-font-weight-medium);
+  line-height: var(--size-line-height-base);
+
+  /*
+   * Scale any nested graphic to the current text size. Icons are already sized in `em`,
+   * so this is what makes a Spinner (fixed pixel dimensions) track the badge instead.
+   */
+  svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+  }
+
+  /* Spinner renders its svg inside a span. Keep that wrapper from adding line-box height. */
+  > span:not(.label) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &.color-grey {
+    @include badge-color('grey');
+  }
+
+  &.color-blue {
+    @include badge-color('blue');
+  }
+
+  &.color-green {
+    @include badge-color('green');
+  }
+
+  &.color-yellow {
+    @include badge-color('yellow');
+  }
+
+  &.color-red {
+    @include badge-color('red');
+  }
+
+  &.color-purple {
+    @include badge-color('purple');
+  }
+
+  &.color-orange {
+    @include badge-color('orange');
+  }
+
+  &.color-brand {
+    @include badge-color('brand');
+  }
+
+  /* `background` rather than `background-color` so the brand gradient renders under `solid`. */
+  &.solid {
+    background: var(--badge-solid-background);
+    border-color: var(--badge-solid-border);
+    color: var(--badge-solid-font);
+  }
+
+  &.soft {
+    background: var(--badge-soft-background);
+    border-color: transparent;
+    color: var(--badge-soft-font);
+  }
+
+  &.surface {
+    background: var(--badge-surface-background);
+    border-color: var(--badge-surface-border);
+    color: var(--badge-soft-font);
+  }
+
+  &.outline {
+    background: transparent;
+    border-color: var(--badge-outline-border);
+    color: var(--badge-soft-font);
+  }
+
+  &.radius-none {
+    border-radius: var(--size-border-radius-0);
+  }
+
+  &.radius-sm {
+    border-radius: var(--size-border-radius-sm);
+  }
+
+  &.radius-md {
+    border-radius: var(--size-border-radius-md);
+  }
+
+  &.radius-lg {
+    border-radius: var(--size-border-radius-lg);
+  }
+
+  &.radius-full {
+    border-radius: var(--size-border-radius-full);
+  }
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+
+  &.size-md {
+    @extend %size-md;
+  }
+
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+
+    &.size-md-tablet {
+      @include size-md;
+    }
+
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+
+    &.size-md-desktop {
+      @include size-md;
+    }
+
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+
+    &.size-md-hd {
+      @include size-md;
+    }
+
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+}

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

@@ -1,34 +1,40 @@
-import { Badge, BadgeVariant } from './Badge';
+import {
+  Badge,
+  BadgeHue,
+  BadgeRadius,
+  BadgeSemanticColor,
+  BadgeSize,
+  BadgeVariant,
+} from './Badge';
 import React from 'react';
 import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { allModes } from '../../modes';
 
-const SEMANTIC_BADGE_VARIANTS: BadgeVariant[] = [
-  'default',
-  'secondary',
-  'danger',
-  'outline',
-];
+const BADGE_VARIANTS: BadgeVariant[] = ['solid', 'soft', 'surface', 'outline'];
 
-const FIXED_COLOR_BADGE_VARIANTS: BadgeVariant[] = [
-  'light-grey',
-  'dark-grey',
-  'inverse',
-  'purple',
+const BADGE_HUES: BadgeHue[] = [
+  'grey',
   'blue',
   'green',
   'yellow',
   'red',
+  'purple',
   'orange',
-  'hyphen',
+  'brand',
 ];
 
-const BADGE_VARIANTS: BadgeVariant[] = [
-  ...SEMANTIC_BADGE_VARIANTS,
-  ...FIXED_COLOR_BADGE_VARIANTS,
+const BADGE_SEMANTIC_COLORS: BadgeSemanticColor[] = [
+  'danger',
+  'success',
+  'warning',
+  'info',
 ];
 
+const BADGE_RADII: BadgeRadius[] = ['none', 'sm', 'md', 'lg', 'full'];
+
 const BADGE_SIZES = ['sm', 'md', 'lg'];
 
 const meta: Meta<typeof Badge> = {
@@ -38,31 +44,38 @@ const meta: Meta<typeof Badge> = {
     variant: {
       control: 'select',
       options: BADGE_VARIANTS,
-      description: 'The type/color of the badge to show',
+      description: 'The visual style of the badge',
+    },
+    color: {
+      control: 'select',
+      options: [...BADGE_HUES, ...BADGE_SEMANTIC_COLORS],
+      description:
+        'The color of the badge. Semantic names map onto a hue: danger, success, warning, info',
+    },
+    radius: {
+      control: 'select',
+      options: BADGE_RADII,
+      description: "The roundness of the badge's corners",
     },
     size: {
       control: 'select',
       options: BADGE_SIZES,
       description: 'The size of the badge',
     },
-    message: {
-      control: 'text',
-      description:
-        'The text message to be rendered in the badge (deprecated, use children instead)',
-    },
     className: {
       control: 'text',
       description: 'Custom class to apply to the badge',
     },
     children: {
       control: 'text',
-      description: 'Badge content (preferred over message)',
+      description: 'Badge content',
     },
   },
   args: {
-    variant: 'default',
+    variant: 'soft',
+    color: 'grey',
+    radius: 'full',
     size: 'md',
-    message: '',
     className: '',
     children: undefined,
   },
@@ -82,15 +95,15 @@ type Story = StoryObj<typeof Badge>;
 
 export const Overview: Story = {
   args: {
-    message: 'Hello world!',
+    children: 'Hello world!',
   },
 };
 
 export const Variants: Story = {
   render: () => (
     <Box direction="row" gap="sm">
-      {SEMANTIC_BADGE_VARIANTS.map((variant) => (
-        <Badge variant={variant} key={variant}>
+      {BADGE_VARIANTS.map((variant) => (
+        <Badge variant={variant} color="blue" key={variant}>
           {variant}
         </Badge>
       ))}
@@ -101,13 +114,90 @@ export const Variants: Story = {
   },
 };
 
-export const FixedColorVariants: Story = {
+export const Colors: Story = {
   render: () => (
-    <Box direction="row" gap="sm" flexWrap="wrap">
-      {FIXED_COLOR_BADGE_VARIANTS.map((variant) => (
-        <Badge variant={variant} key={variant}>
-          {variant}
+    <Box direction="column" gap="sm">
+      {BADGE_VARIANTS.map((variant) => (
+        <Box direction="row" gap="sm" wrap key={variant}>
+          {BADGE_HUES.map((color) => (
+            <Badge variant={variant} color={color} key={color}>
+              {color}
+            </Badge>
+          ))}
+        </Box>
+      ))}
+    </Box>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
+
+export const SemanticColors: Story = {
+  render: () => (
+    <Box direction="row" gap="sm" wrap>
+      {BADGE_SEMANTIC_COLORS.map((color) => (
+        <Badge color={color} key={color}>
+          {color}
+        </Badge>
+      ))}
+    </Box>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
+
+export const Radii: Story = {
+  render: () => (
+    <Box direction="row" gap="sm" wrap>
+      {BADGE_RADII.map((radius) => (
+        <Badge radius={radius} variant="surface" color="blue" key={radius}>
+          {radius}
+        </Badge>
+      ))}
+    </Box>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Box direction="column" alignItems="flex-start" gap="md">
+      <Box direction="row" gap="sm" alignItems="center" wrap>
+        <Badge variant="solid" color="green">
+          <Icon name="check" />
+          Verified
+        </Badge>
+        <Badge variant="outline" color="yellow">
+          Favorite
+          <Icon name="star" />
+        </Badge>
+        <Badge variant="soft" color="danger">
+          <Spinner />
+          Deleting
+        </Badge>
+        <Badge variant="surface" color="blue">
+          <Icon name="settings" />
         </Badge>
+      </Box>
+      {BADGE_SIZES.map((size) => (
+        <Box direction="row" gap="sm" alignItems="center" key={size}>
+          <Badge size={size as BadgeSize} variant="solid" color="green">
+            <Icon name="check" />
+            {size}
+          </Badge>
+          <Badge size={size as BadgeSize} variant="outline">
+            {size}
+            <Icon name="star" />
+          </Badge>
+          <Badge size={size as BadgeSize} variant="soft" color="danger">
+            <Spinner />
+            {size}
+          </Badge>
+        </Box>
       ))}
     </Box>
   ),
@@ -119,9 +209,9 @@ export const FixedColorVariants: Story = {
 export const Sizes: Story = {
   render: () => (
     <Box direction="column" alignItems="flex-start" gap="md">
-      <Badge size="sm" message="Small" />
-      <Badge size="md" message="Medium" />
-      <Badge size="lg" message="Large" />
+      <Badge size="sm">Small</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
       <Badge
         size={{
           base: 'sm',