Share common button matrix states

ni · Mar 15, 2024 · 5976821 · 5976821
1 parent d9c094d
commit 5976821
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 87 deletions.
diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -1,10 +1,5 @@
 import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
-import { pascalCase } from '@microsoft/fast-web-utilities';
-import {
-    ButtonAppearance,
-    ButtonAppearanceVariant
-} from '../../patterns/button/types';
 import {
     createMatrix,
     sharedMatrixParameters,
@@ -17,6 +12,14 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { anchorButtonTag } from '..';
 import { iconLinkTag } from '../../icons/link';
 import { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';
+import {
+    appearanceStates,
+    type AppearanceState,
+    type AppearanceVariantState,
+    type PartVisibilityState,
+    appearanceVariantStates,
+    partVisibilityStates
+} from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor Button',
@@ -27,26 +30,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-/* array of iconVisible, labelVisible, endIconVisible */
-const partVisibilityStates = [
-    [true, true, false],
-    [true, false, false],
-    [false, true, false],
-    [true, true, true],
-    [false, true, true]
-] as const;
-type PartVisibilityState = (typeof partVisibilityStates)[number];
-
-const appearanceStates: [string, string | undefined][] = Object.entries(
-    ButtonAppearance
-).map(([key, value]) => [pascalCase(key), value]);
-type AppearanceState = (typeof appearanceStates)[number];
-
-const appearanceVariantStates: [string, string | undefined][] = Object.entries(
-    ButtonAppearanceVariant
-).map(([key, value]) => [pascalCase(key), value]);
-type AppearanceVariantState = (typeof appearanceVariantStates)[number];
-
 // prettier-ignore
 const component = (
     [disabledName, disabled]: DisabledState,

diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -1,7 +1,5 @@
 import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
-import { pascalCase } from '@microsoft/fast-web-utilities';
-import { ButtonAppearance, ButtonAppearanceVariant } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
@@ -15,6 +13,14 @@ import { buttonTag } from '..';
 import { iconKeyTag } from '../../icons/key';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { bodyFont } from '../../theme-provider/design-tokens';
+import {
+    appearanceStates,
+    type AppearanceState,
+    type AppearanceVariantState,
+    type PartVisibilityState,
+    appearanceVariantStates,
+    partVisibilityStates
+} from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Button',
@@ -25,26 +31,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-/* array of iconVisible, labelVisible, endIconVisible */
-const partVisibilityStates = [
-    [true, true, false],
-    [true, false, false],
-    [false, true, false],
-    [true, true, true],
-    [false, true, true]
-] as const;
-type PartVisibilityState = (typeof partVisibilityStates)[number];
-
-const appearanceStates: [string, string | undefined][] = Object.entries(
-    ButtonAppearance
-).map(([key, value]) => [pascalCase(key), value]);
-type AppearanceState = (typeof appearanceStates)[number];
-
-const appearanceVariantStates: [string, string | undefined][] = Object.entries(
-    ButtonAppearanceVariant
-).map(([key, value]) => [pascalCase(key), value]);
-type AppearanceVariantState = (typeof appearanceVariantStates)[number];
-
 // prettier-ignore
 const component = (
     [disabledName, disabled]: DisabledState,

diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -1,7 +1,5 @@
 import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
-import { pascalCase } from '@microsoft/fast-web-utilities';
-import { ButtonAppearance } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
@@ -15,6 +13,14 @@ import { iconKeyTag } from '../../icons/key';
 import { menuButtonTag } from '..';
 import { menuTag } from '../../menu';
 import { menuItemTag } from '../../menu-item';
+import {
+    appearanceStates,
+    type AppearanceState,
+    type AppearanceVariantState,
+    type PartVisibilityState,
+    appearanceVariantStates,
+    partVisibilityStates
+} from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Menu Button',
@@ -25,34 +31,21 @@ const metadata: Meta = {
 
 export default metadata;
 
-/* array of iconVisible, labelVisible, endIconVisible */
-const partVisibilityStates = [
-    [true, true, false],
-    [true, false, false],
-    [false, true, false],
-    [true, true, true],
-    [false, true, true]
-] as const;
-type PartVisibilityState = (typeof partVisibilityStates)[number];
-
-const appearanceStates = Object.entries(ButtonAppearance).map(
-    ([key, value]) => [pascalCase(key), value]
-);
-type AppearanceState = (typeof appearanceStates)[number];
-
 // prettier-ignore
 const component = (
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [disabledName, disabled]: DisabledState,
-    [appearanceName, appearance]: AppearanceState
+    [appearanceName, appearance]: AppearanceState,
+    [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
 ): ViewTemplate => html`
     <${menuButtonTag}
         appearance="${() => appearance}"
+        appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${appearanceVariantName} ${appearanceName} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
 
         <${menuTag} slot="menu">
@@ -66,7 +59,8 @@ export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         partVisibilityStates,
         disabledStates,
-        appearanceStates
+        appearanceStates,
+        appearanceVariantStates
     ])
 );
 

diff --git a/packages/nimble-components/src/patterns/button/tests/states.ts b/packages/nimble-components/src/patterns/button/tests/states.ts
@@ -0,0 +1,23 @@
+import { pascalCase } from '@microsoft/fast-web-utilities';
+import { ButtonAppearance, ButtonAppearanceVariant } from '../types';
+
+/* array of iconVisible, labelVisible, endIconVisible */
+export const partVisibilityStates = [
+    [true, true, false],
+    [true, false, false],
+    [false, true, false],
+    [true, true, true],
+    [false, true, true]
+] as const;
+export type PartVisibilityState = (typeof partVisibilityStates)[number];
+
+export const appearanceStates: [string, string | undefined][] = Object.entries(
+    ButtonAppearance
+).map(([key, value]) => [pascalCase(key), value]);
+export type AppearanceState = (typeof appearanceStates)[number];
+
+export const appearanceVariantStates: [string, string | undefined][] = Object.entries(ButtonAppearanceVariant).map(([key, value]) => [
+    pascalCase(key),
+    value
+]);
+export type AppearanceVariantState = (typeof appearanceVariantStates)[number];
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -1,7 +1,5 @@
 import type { StoryFn, Meta } from '@storybook/html';
 import { html, ViewTemplate, when } from '@microsoft/fast-element';
-import { pascalCase } from '@microsoft/fast-web-utilities';
-import { ButtonAppearance } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
@@ -14,6 +12,14 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { toggleButtonTag } from '..';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { iconKeyTag } from '../../icons/key';
+import {
+    appearanceStates,
+    type AppearanceState,
+    type AppearanceVariantState,
+    type PartVisibilityState,
+    appearanceVariantStates,
+    partVisibilityStates
+} from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Toggle Button',
@@ -24,21 +30,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-/* array of iconVisible, labelVisible, endIconVisible */
-const partVisibilityStates = [
-    [true, true, false],
-    [true, false, false],
-    [false, true, false],
-    [true, true, true],
-    [false, true, true]
-] as const;
-type PartVisibilityState = (typeof partVisibilityStates)[number];
-
-const appearanceStates: [string, string | undefined][] = Object.entries(
-    ButtonAppearance
-).map(([key, value]) => [pascalCase(key), value]);
-type AppearanceState = (typeof appearanceStates)[number];
-
 const checkedStates = [
     ['Checked', true],
     ['Unchecked', false]
@@ -50,16 +41,18 @@ const component = (
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [checkedName, checked]: CheckedState,
     [disabledName, disabled]: DisabledState,
-    [appearanceName, appearance]: AppearanceState
+    [appearanceName, appearance]: AppearanceState,
+    [appearanceVariantName, appearanceVariant]: AppearanceVariantState
 ): ViewTemplate => html`
     <${toggleButtonTag}
         appearance="${() => appearance}"
+        appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         ?checked=${() => checked}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`}
+            ${() => `${checkedName} ${appearanceVariantName} ${appearanceName} Toggle Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${toggleButtonTag}>
 `;
@@ -69,7 +62,8 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
         partVisibilityStates,
         checkedStates,
         disabledStates,
-        appearanceStates
+        appearanceStates,
+        appearanceVariantStates
     ])
 );