docs(badge): enable icon control (#6240)

Co-authored-by: Cory Dransfeldt <445732+cdransf@users.noreply.github.com>

Author: rise-erpelding

2nd-gen/packages/swc/.storybook/helpers/icon-for-size.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { nothing, TemplateResult } from 'lit';
+
+// Matches the Spectrum icon numeric suffix convention used in icon element file names.
+// Aligns with spectrum-css's appendUiIconDefaultSizing mapping.
+const sizeToSuffix: Record<string, string> = {
+  xs: '50',
+  s: '75',
+  m: '100',
+  l: '200',
+  xl: '300',
+  xxl: '400',
+};
+
+/**
+ * Resolves a Spectrum icon TemplateResult from a namespace import of icon elements,
+ * a PascalCase base name, and a t-shirt size string.
+ *
+ * Tries the size-variant key first (e.g. `Checkmark100Icon`), then falls back to
+ * the unsuffixed key (e.g. `AlertIcon`) for icons with no size variants.
+ *
+ * @example
+ * import * as Icons from '../icon/elements/index.js';
+ * iconForSize(Icons, 'Checkmark', 'l') // → Icons.Checkmark200Icon()
+ * iconForSize(Icons, 'Alert', 'm')     // → Icons.AlertIcon()
+ */
+export const iconForSize = (
+  icons: Record<string, () => TemplateResult>,
+  baseName: string,
+  size: string
+): TemplateResult | typeof nothing => {
+  const suffix = sizeToSuffix[size] ?? '100';
+  const sizedFn = icons[`${baseName}${suffix}Icon`];
+  if (sizedFn) {
+    return sizedFn();
+  }
+  const fixedFn = icons[`${baseName}Icon`];
+  if (fixedFn) {
+    return fixedFn();
+  }
+  return nothing;
+};

2nd-gen/packages/swc/.storybook/helpers/index.ts

@@ -11,3 +11,4 @@
  */
 
 export { formatTitle } from './format-title.js';
+export { iconForSize } from './icon-for-size.js';

2nd-gen/packages/swc/components/badge/stories/badge.stories.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { html, TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
 import type { Meta, StoryObj as Story } from '@storybook/web-components';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
 
@@ -30,12 +30,8 @@ import {
   FIXED_VALUES,
   type FixedValues,
 } from '../../../../core/components/badge/Badge.types.js';
-import {
-  Checkmark75Icon,
-  Checkmark100Icon,
-  Checkmark200Icon,
-  Checkmark300Icon,
-} from '../../icon/elements/index.js';
+import { iconForSize } from '../../../.storybook/helpers/index.js';
+import * as Icons from '../../icon/elements/index.js';
 
 // ────────────────
 //    METADATA
@@ -73,13 +69,15 @@ argTypes.size = {
   },
 };
 
-// @todo: create a select dropdown with all available/acceptable icons for a component.
-// For now, this arg is turned off in the control table since the string doesn't get parsed as HTML: SWC-1853
 argTypes['icon-slot'] = {
   ...argTypes['icon-slot'],
-  control: false,
+  control: { type: 'select' },
+  options: [undefined, 'Checkmark', 'Cross', 'Alert'],
   description:
-    'Accepts an icon element. The control is disabled. Use the Anatomy story to see icon usage. Enhancements to this control will be added in a future release.',
+    'Select a named icon to display in the icon slot. The control maps each name to ' +
+    'the correct size-paired icon element via the shared `iconForSize` helper. Only ' +
+    'UI icons currently available in 2nd-gen are offered. The full workflow icon set ' +
+    'is not yet ported.',
 };
 
 argTypes.outline = {
@@ -173,18 +171,6 @@ const nonSemanticLabels = {
 
 const allVariantsLabels = { ...semanticLabels, ...nonSemanticLabels };
 
-const checkmarkIconForSize = (size: string): TemplateResult => {
-  const validSize: BadgeSize = BADGE_VALID_SIZES.includes(size as BadgeSize)
-    ? (size as BadgeSize)
-    : 'm';
-  return {
-    s: Checkmark75Icon,
-    m: Checkmark100Icon,
-    l: Checkmark200Icon,
-    xl: Checkmark300Icon,
-  }[validSize]();
-};
-
 const fixedLabels = {
   'block-start': 'Block start',
   'block-end': 'Block end',
@@ -197,9 +183,34 @@ const fixedLabels = {
 // ────────────────────
 
 export const Playground: Story = {
-  render: (args) => template(args),
+  render: (args) => {
+    const iconKey = (args['icon-slot'] as string) || '';
+    const size = (
+      BADGE_VALID_SIZES.includes(args.size as BadgeSize) ? args.size : 'm'
+    ) as BadgeSize;
+
+    return html`
+      <swc-badge
+        variant=${args.variant ?? 'neutral'}
+        size=${size}
+        ?subtle=${args.subtle}
+        ?outline=${args.outline}
+        fixed=${args.fixed ?? nothing}
+      >
+        ${iconKey
+          ? html`
+              <swc-icon size=${size} slot="icon" aria-hidden="true">
+                ${iconForSize(Icons, iconKey, size)}
+              </swc-icon>
+            `
+          : nothing}
+        ${args['default-slot'] ?? ''}
+      </swc-badge>
+    `;
+  },
   args: {
     'default-slot': 'Active',
+    'icon-slot': undefined,
   },
   tags: ['autodocs', 'dev'],
 };
@@ -246,12 +257,12 @@ export const Anatomy: Story = {
         aria-label="Checkmark"
       >
         <swc-icon size=${size} slot="icon">
-          ${checkmarkIconForSize(size)}
+          ${iconForSize(Icons, 'Checkmark', size)}
         </swc-icon>
       </swc-badge>
       <swc-badge variant=${args.variant} size=${size}>
         <swc-icon size=${size} slot="icon">
-          ${checkmarkIconForSize(size)}
+          ${iconForSize(Icons, 'Checkmark', size)}
         </swc-icon>
         Icon and label
       </swc-badge>
@@ -286,7 +297,7 @@ export const Sizes: Story = {
         (size) => html`
           <swc-badge variant=${args.variant} size=${size}>
             <swc-icon size=${size} slot="icon">
-              ${checkmarkIconForSize(size)}
+              ${iconForSize(Icons, 'Checkmark', size)}
             </swc-icon>
             ${sizeLabels[size]}
           </swc-badge>
@@ -316,7 +327,7 @@ export const Sizes: Story = {
             aria-label=${sizeLabels[size]}
           >
             <swc-icon size=${size} slot="icon">
-              ${checkmarkIconForSize(size)}
+              ${iconForSize(Icons, 'Checkmark', size)}
             </swc-icon>
           </swc-badge>
         `
@@ -637,7 +648,7 @@ export const Accessibility: Story = {
     <!-- Icon + text: icon is decorative, aria-hidden="true" hides it from assistive technology -->
     <swc-badge variant="positive" size=${args.size}>
       <swc-icon size=${args.size} slot="icon" aria-hidden="true">
-        ${checkmarkIconForSize(args.size)}
+        ${iconForSize(Icons, 'Checkmark', args.size)}
       </swc-icon>
       Approved
     </swc-badge>
@@ -650,7 +661,7 @@ export const Accessibility: Story = {
       aria-label="Approved"
     >
       <swc-icon size=${args.size} slot="icon">
-        ${checkmarkIconForSize(args.size)}
+        ${iconForSize(Icons, 'Checkmark', args.size)}
       </swc-icon>
     </swc-badge>
   `,