Add interaction stories for buttons, number field, and anchor

change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add interaction stories for buttons, number field, and anchor",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/main.js

@@ -23,7 +23,8 @@ export const addons = [
         }
     },
     '@storybook/addon-a11y',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-addon-pseudo-states'
 ];
 export function webpackFinal(config) {
     config.module.rules.push({

packages/nimble-components/package.json

@@ -160,6 +160,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
     "storybook": "^7.6.13",
+    "storybook-addon-pseudo-states": "^2.2.1",
     "ts-loader": "^9.2.5",
     "typescript": "~4.8.2",
     "webpack": "^5.75.0",

packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts

@@ -10,7 +10,12 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -49,33 +54,46 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${anchorButtonTag}
+        class="${() => interaction}"
         href="https://nimble.ni.dev"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconLinkTag} slot="start"></${iconLinkTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderRightTag} slot="end"></${iconArrowExpanderRightTag}>`)}
     </${anchorButtonTag}>
 `;
 
 export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
         partVisibilityStates
     ])
 );
 
+export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        disabledStates,
+        appearanceStates,
+        appearanceVariantStates,
+        [[false, true, false]]
+    ])
+);
+
 export const hiddenAnchorButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorButtonTag} hidden

packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts

@@ -12,6 +12,10 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { AnchorAppearance } from '../types';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
+import {
+    interactionStates,
+    type InteractionState
+} from '../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
@@ -41,20 +45,32 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, href]: DisabledState,
     [underlineHiddenName, underlineHidden]: UnderlineHiddenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${anchorTag}
+        class="${() => interaction}"
         href=${() => href}
         ?underline-hidden="${() => underlineHidden}"
         appearance="${() => appearance}"
         style="margin-right: 8px; margin-bottom: 8px;">
-            ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
+            ${() => `${interactionName} ${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
 export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
+        disabledStates,
+        underlineHiddenStates,
+        appearanceStates
+    ])
+);
+
+export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
         disabledStates,
         underlineHiddenStates,
         appearanceStates

packages/nimble-components/src/button/tests/button-matrix.stories.ts

@@ -7,7 +7,12 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -47,32 +52,45 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${buttonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${buttonTag}>
 `;
 
 export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
         partVisibilityStates
     ])
 );
 
+export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        disabledStates,
+        appearanceStates,
+        appearanceVariantStates,
+        [[false, true, false]]
+    ])
+);
+
 export const hiddenButton: StoryFn = createStory(
     hiddenWrapper(html`<${buttonTag} hidden>Hidden Button</${buttonTag}>`)
 );

packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts

@@ -7,14 +7,17 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { iconKeyTag } from '../../icons/key';
 import { menuButtonTag } from '..';
-import { menuTag } from '../../menu';
-import { menuItemTag } from '../../menu-item';
 
 const metadata: Meta = {
     title: 'Tests/Menu Button',
@@ -35,36 +38,53 @@ const partVisibilityStates = [
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
 
+const openStates = [
+    ['', false],
+    ['Open', true]
+] as const;
+type OpenState = (typeof openStates)[number];
+
 const appearanceStates = Object.entries(ButtonAppearance).map(
     ([key, value]) => [pascalCase(key), value]
 );
 type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
+    [openName, open]: OpenState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${menuButtonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
+        ?open="${() => open}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${interactionName} ${openName} ${appearanceName!} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
-
-        <${menuTag} slot="menu">
-            <${menuItemTag}>Item 1</${menuItemTag}>
-            <${menuItemTag}>Item 2</${menuItemTag}>
-        </${menuTag}>
     </${menuButtonTag}>
 `;
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         partVisibilityStates,
+        openStates,
+        disabledStates,
+        appearanceStates
+    ])
+);
+
+export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        [[false, true, false]],
+        openStates,
         disabledStates,
         appearanceStates
     ])

packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts

@@ -11,7 +11,9 @@ import {
     disabledStates,
     DisabledState,
     errorStates,
-    ErrorState
+    ErrorState,
+    InteractionState,
+    interactionStates
 } from '../../utilities/tests/states';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { NumberFieldAppearance } from '../types';
@@ -44,6 +46,7 @@ const hideStepStates = [
 type HideStepState = (typeof hideStepStates)[number];
 
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [hideStepName, hideStep]: HideStepState,
     [valueName, valueValue, placeholderValue]: ValueState,
@@ -52,7 +55,7 @@ const component = (
 ): ViewTemplate => html`
     <${numberFieldTag}
         style="width: 250px; padding: 8px;"
-        class="${() => errorVisible}"
+        class="${() => errorVisible} ${() => interaction}"
         value="${() => valueValue}"
         placeholder="${() => placeholderValue}"
         appearance="${() => appearance}"
@@ -61,13 +64,14 @@ const component = (
         error-text="${() => errorText}"
         ?error-visible="${() => errorVisible}"
     >
-        ${() => errorName} ${() => appearanceName} ${() => valueName}
+    ${interactionName} ${() => errorName} ${() => appearanceName} ${() => valueName}
         ${() => hideStepName} ${() => disabledName}
     </${numberFieldTag}>
 `;
 
 export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         hideStepStates,
         valueStates,
@@ -76,6 +80,17 @@ export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.filter(x => x[0] && !x[0].includes('Active')),
+        disabledStates,
+        hideStepStates.slice(0, 1),
+        valueStates.slice(1, 2),
+        errorStates.slice(0, 2),
+        appearanceStates
+    ])
+);
+
 export const hiddenNumberField: StoryFn = createStory(
     hiddenWrapper(
         html`