Skip to content

Commit a70c53d

Browse files
rajsiterajsite
committed
step indicator tests
1 parent 8f6f686 commit a70c53d

3 files changed

Lines changed: 21 additions & 17 deletions

File tree

‎packages/storybook/src/nimble/anchor-step/anchor-step-matrix.stories.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { html, repeat, ViewTemplate, when } from '@ni/fast-element';
33
import { anchorStepTag } from '@ni/nimble-components/dist/esm/anchor-step';
44
import { stepperTag } from '@ni/nimble-components/dist/esm/stepper';
55
import { bodyFont, bodyFontColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
6+
import { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';
67
import {
78
createMatrix,
89
sharedMatrixParameters,
@@ -11,7 +12,7 @@ import {
1112
} from '../../utilities/matrix';
1213
import { createFixedThemeStory, createStory } from '../../utilities/storybook';
1314
import { hiddenWrapper } from '../../utilities/hidden';
14-
import { selectedStates, severityStates, stepContentStateShort, stepContentStates, stepLayoutStates, type SelectedState, type SeverityStates, type StepContentStates, type StepLayoutStates } from '../stepper/types';
15+
import { selectedStates, severityStates, stepContentStateShort, stepContentStateStepIndicator, stepContentStates, stepLayoutStates, type SelectedState, type SeverityStates, type StepContentStates, type StepLayoutStates } from '../stepper/types';
1516
import { backgroundStates, disabledStates, type DisabledState } from '../../utilities/states';
1617

1718
const metadata: Meta = {
@@ -39,9 +40,9 @@ const component = (
3940
[layoutName, isLast, orientation]: StepLayoutStates,
4041
[selectedName, selected]: SelectedState,
4142
[severityName, severity]: SeverityStates,
42-
[contentName, titleContent, subtitleContent, severityTextContent]: StepContentStates,
43+
[contentName, titleContent, subtitleContent, severityTextContent, stepIndicatorVisible]: StepContentStates,
4344
): ViewTemplate => html`
44-
<div style="display: inline-flex; flex-direction: column;">
45+
<div style="display: inline-flex; flex-direction: column; width: min-content;">
4546
<div style="padding-right: 16px;">${disabledName} ${selectedName} Severity(${severityName}) Layout(${layoutName}) Content(${contentName})</div>
4647
<${stepperTag} style="padding-bottom: 16px; width: 200px; height: 80px;" orientation="${() => orientation}">
4748
${repeat(() => [isLast, !isLast], html`
@@ -50,6 +51,7 @@ const component = (
5051
style="${currentIsLast => (currentIsLast ? 'display:none;' : '')}">
5152
${when(() => titleContent !== undefined, html`<span slot="title">${() => titleContent}</span>`)}
5253
${when(() => subtitleContent !== undefined, html`<span slot="subtitle">${() => subtitleContent}</span>`)}
54+
${when(() => stepIndicatorVisible, html`<${iconCogTag} slot="step-indicator">${() => subtitleContent}</${iconCogTag}>`)}
5355
</${anchorStepTag}>
5456
`)}
5557
</${stepperTag}>
@@ -83,15 +85,15 @@ const interactionStatesHover = cartesianProduct([
8385
stepLayoutStates,
8486
selectedStates,
8587
severityStates,
86-
[stepContentStateShort],
88+
[stepContentStateShort, stepContentStateStepIndicator],
8789
] as const);
8890

8991
const interactionStates = cartesianProduct([
9092
disabledStates,
9193
stepLayoutStates,
9294
selectedStates,
9395
severityStates,
94-
[stepContentStateShort],
96+
[stepContentStateShort, stepContentStateStepIndicator],
9597
] as const);
9698

9799
const interactionsTemplate = createMatrixInteractionsFromStates(component, {

‎packages/storybook/src/nimble/step/step-matrix.stories.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
22
import { html, repeat, ViewTemplate, when } from '@ni/fast-element';
33
import { stepTag } from '@ni/nimble-components/dist/esm/step';
44
import { stepperTag } from '@ni/nimble-components/dist/esm/stepper';
5+
import { iconCogTag } from '@ni/nimble-components/dist/esm/icons/cog';
56
import { bodyFont, bodyFontColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
67
import {
78
createMatrix,
@@ -11,7 +12,7 @@ import {
1112
} from '../../utilities/matrix';
1213
import { createFixedThemeStory, createStory } from '../../utilities/storybook';
1314
import { hiddenWrapper } from '../../utilities/hidden';
14-
import { selectedStates, severityStates, stepContentStates, stepContentStateShort, stepLayoutStates, type SelectedState, type SeverityStates, type StepContentStates, type StepLayoutStates } from '../stepper/types';
15+
import { selectedStates, severityStates, stepContentStates, stepContentStateShort, stepContentStateStepIndicator, stepLayoutStates, type SelectedState, type SeverityStates, type StepContentStates, type StepLayoutStates } from '../stepper/types';
1516
import { disabledStates, type DisabledState, backgroundStates } from '../../utilities/states';
1617

1718
const metadata: Meta = {
@@ -39,9 +40,9 @@ const component = (
3940
[layoutName, isLast, orientation]: StepLayoutStates,
4041
[selectedName, selected]: SelectedState,
4142
[severityName, severity]: SeverityStates,
42-
[contentName, titleContent, subtitleContent, severityTextContent]: StepContentStates,
43+
[contentName, titleContent, subtitleContent, severityTextContent, stepIndicatorVisible]: StepContentStates,
4344
): ViewTemplate => html`
44-
<div style="display: inline-flex; flex-direction: column;">
45+
<div style="display: inline-flex; flex-direction: column; width: min-content;">
4546
<div style="padding-right: 16px;">${disabledName} ${selectedName} Severity(${severityName}) Layout(${layoutName}) Content(${contentName})</div>
4647
<${stepperTag} style="padding-bottom: 16px; width: 200px; height: 80px;" orientation="${() => orientation}">
4748
${repeat(() => [isLast, !isLast], html`
@@ -50,6 +51,7 @@ const component = (
5051
style="${currentIsLast => (currentIsLast ? 'display:none;' : '')}">
5152
${when(() => titleContent !== undefined, html`<span slot="title">${() => titleContent}</span>`)}
5253
${when(() => subtitleContent !== undefined, html`<span slot="subtitle">${() => subtitleContent}</span>`)}
54+
${when(() => stepIndicatorVisible, html`<${iconCogTag} slot="step-indicator">${() => subtitleContent}</${iconCogTag}>`)}
5355
</${stepTag}>
5456
`)}
5557
</${stepperTag}>
@@ -83,15 +85,15 @@ const interactionStatesHover = cartesianProduct([
8385
stepLayoutStates,
8486
selectedStates,
8587
severityStates,
86-
[stepContentStateShort],
88+
[stepContentStateShort, stepContentStateStepIndicator],
8789
] as const);
8890

8991
const interactionStates = cartesianProduct([
9092
disabledStates,
9193
stepLayoutStates,
9294
selectedStates,
9395
severityStates,
94-
[stepContentStateShort],
96+
[stepContentStateShort, stepContentStateStepIndicator],
9597
] as const);
9698

9799
const interactionsTemplate = createMatrixInteractionsFromStates(component, {

‎packages/storybook/src/nimble/stepper/types.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { StepperOrientation } from '@ni/nimble-components/dist/esm/stepper/types
44
export const ExampleStepType = {
55
simple: 'simple',
66
severity: 'severity',
7-
// many: 'many',
8-
// wide: 'wide'
97
} as const;
108
export type ExampleStepType = (typeof ExampleStepType)[keyof typeof ExampleStepType];
119

@@ -25,14 +23,16 @@ export type SelectedState = (typeof selectedStates)[number];
2523
export const selectedStateNotSelected = selectedStates[0];
2624

2725
export const stepContentStates = [
28-
['Absent', undefined, undefined, undefined],
29-
['Empty', '', '', ''],
30-
['Short', 'Title', 'Subtitle', 'Severity text'],
31-
['NoSubtitle', 'Title', undefined, 'Severity text'],
32-
['LongSeverity', 'Title is short', 'Subtitle is short', 'Severity text that is very long and very interesting'],
26+
['Absent', undefined, undefined, undefined, false],
27+
['Empty', '', '', '', false],
28+
['Short', 'Title', 'Subtitle', 'Severity text', false],
29+
['NoSubtitle', 'Title', undefined, 'Severity text', false],
30+
['LongSeverity', 'Title is short', 'Subtitle is short', 'Severity text that is very long and very interesting', false],
31+
['StepIndicator', 'Title', 'Subtitle', 'Severity text', true]
3332
] as const;
3433
export type StepContentStates = (typeof stepContentStates)[number];
3534
export const stepContentStateShort = stepContentStates[2];
35+
export const stepContentStateStepIndicator = stepContentStates[5];
3636

3737
export const orientationStates = [
3838
['Horizontal', StepperOrientation.horizontal],

0 commit comments

Comments
 (0)