mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 16:53:34 +00:00
[CL-194] add vertical stepper to CL (#14528)
* Copy Vertical stepper into CL * remove unused input * add docs around vertical step usage * use signal inputs * add vertical step story * enhance documentation * WIP * Rename to Stepper * adds horizontal stepper * updated view logic * add resizeobserver directive * add basic responsizeness to stepper * add comment about stateChanged method * update responsive logic * reformat with prettier * remove obsolete applyBorder input * fix step type mismatch * fix incorrect step import * fix borken disabled logic * fix class logic * move tabpanel out of tablist. correctly increment ids * make map private * use accordion attributes for vertical stepper * barrel export directive * fixing types * remove now obsolete step-content * reimplement constructors to fix storybook not rendering * move padding to different container * move map and observer into directive * remove useless test for now * add comment about constructor implementation * add template variable for disabled state * fix typo * simplify resize observer directive logic * add jsdoc description * use typography directive * use the variable for step disabled * Update libs/components/src/stepper/stepper.mdx Co-authored-by: Vicki League <vleague@bitwarden.com> --------- Co-authored-by: Will Martin <contact@willmartian.com> Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
30
libs/components/src/stepper/step.stories.ts
Normal file
30
libs/components/src/stepper/step.stories.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
|
||||
|
||||
import { StepComponent } from "./step.component";
|
||||
import { StepperComponent } from "./stepper.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Stepper/Step",
|
||||
component: StepComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [StepperComponent],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
export const Default: StoryObj<StepComponent> = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-stepper>
|
||||
<bit-step
|
||||
label="This is the label"
|
||||
subLabel="This is the sub label"
|
||||
>
|
||||
<p>Your custom step content appears in here. You can add whatever content you'd like</p>
|
||||
</bit-step>
|
||||
</bit-stepper>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
Reference in New Issue
Block a user