From 5976821f2e62b2d645f041fced098b45c467971a Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Fri, 15 Mar 2024 15:23:45 -0500 Subject: [PATCH] Share common button matrix states --- .../tests/anchor-button-matrix.stories.ts | 33 +++++------------- .../src/button/tests/button-matrix.stories.ts | 30 +++++----------- .../tests/menu-button-matrix.stories.ts | 34 ++++++++----------- .../src/patterns/button/tests/states.ts | 23 +++++++++++++ .../tests/toggle-button-matrix.stories.ts | 34 ++++++++----------- 5 files changed, 67 insertions(+), 87 deletions(-) create mode 100644 packages/nimble-components/src/patterns/button/tests/states.ts 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 index 8042bcfc73..5306713f61 100644 --- 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 index 353dd05d6c..fc0e33694d 100644 --- 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 index 3b9de718a7..14f7d570cd 100644 --- 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">`)} - ${() => `${appearanceName!} Menu Button ${disabledName}`} + ${() => `${appearanceVariantName} ${appearanceName} Menu Button ${disabledName}`} ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end">`)} <${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 new file mode 100644 index 0000000000..98d77354b4 --- /dev/null +++ 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 index a2772921b3..7e6fc7e002 100644 --- 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">`)} - ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`} + ${() => `${checkedName} ${appearanceVariantName} ${appearanceName} Toggle Button ${disabledName}`} ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end">`)} `; @@ -69,7 +62,8 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory( partVisibilityStates, checkedStates, disabledStates, - appearanceStates + appearanceStates, + appearanceVariantStates ]) );