mirror of
https://github.com/bitwarden/browser
synced 2025-12-13 06:43:35 +00:00
3e4c37b8b3
* 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>
36 lines
1.0 KiB
Plaintext
36 lines
1.0 KiB
Plaintext
import { Meta, Story, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./stepper.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Step Component
|
|
|
|
The `<bit-step>` component extends the
|
|
[Angular CdkStep](https://material.angular.io/cdk/stepper/api#CdkStep) component
|
|
|
|
The following additional Inputs are accepted:
|
|
|
|
| Input | Type | Description |
|
|
| ---------- | ------ | -------------------------------------------------------------- |
|
|
| `subLabel` | string | An optional supplemental label to display below the main label |
|
|
|
|
In order for the stepper component to work as intended, its children must be instances of
|
|
`<bit-step>`.
|
|
|
|
```html
|
|
<bit-stepper>
|
|
<bit-step label="This is the label" subLabel="This is the sub label">
|
|
Your content here
|
|
</bit-step>
|
|
<bit-step label="Another label"> Your content here </bit-step>
|
|
<bit-step label="The last label"> Your content here </bit-step>
|
|
</bit-stepper>
|
|
```
|