mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 01:33:33 +00:00
[CL-208][CL-339] Enhance Storybook docs pages (#14838)
* rearrange button docs * Enhance avatar docs * Enhance badge docs * Enhance banner docs * add util to format args for snippets * update banner snippets * WIP * bind boolean args so they work correctly in Storybook * simplify button stories * Update callout docs * use title component for checkbox docs * use title and description component for chip select docs * update color password story docs * update disclosure docs * add import to icon docs * updated icon-button docs * update link docs * Update prgress docs * updated search field docs * remove html type definitions * add import for progress * updated toast docs * remove example from docs. format args for snippet * Update badges docs * handle array arg values correctly * Update badges list docs * fix dupe key error from taost story * remove unnecessary typeof check * remove banner usage example * add breadcrumbs import statement and jsdoc * add color password import statement * fixing type mismaches * fix typos * Add missing generics to format function * fix typo * update callout icon spacing to match Figma * add back max width container
This commit is contained in:
@@ -11,6 +11,30 @@ import {
|
||||
|
||||
let nextId = 0;
|
||||
|
||||
/**
|
||||
* The `bit-disclosure` component is used in tandem with the `bitDisclosureTriggerFor` directive to create an accessible content area whose visibility is controlled by a trigger button.
|
||||
|
||||
* To compose a disclosure and trigger:
|
||||
|
||||
* 1. Create a trigger component (see "Supported Trigger Components" section below)
|
||||
* 2. Create a `bit-disclosure`
|
||||
* 3. Set a template reference on the `bit-disclosure`
|
||||
* 4. Use the `bitDisclosureTriggerFor` directive on the trigger component, and pass it the `bit-disclosure` template reference
|
||||
* 5. Set the `open` property on the `bit-disclosure` to init the disclosure as either currently expanded or currently collapsed. The disclosure will default to `false`, meaning it defaults to being hidden.
|
||||
*
|
||||
* @example
|
||||
*
|
||||
* ```html
|
||||
* <button
|
||||
* type="button"
|
||||
* bitIconButton="bwi-sliders"
|
||||
* [buttonType]="'muted'"
|
||||
* [bitDisclosureTriggerFor]="disclosureRef"
|
||||
* ></button>
|
||||
* <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
@Component({
|
||||
selector: "bit-disclosure",
|
||||
standalone: true,
|
||||
|
||||
Reference in New Issue
Block a user