bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 17:23:37 +00:00
Code Issues Releases Wiki Activity

[CL-208][CL-339] Enhance Storybook docs pages (#14838)

Browse Source 
* 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:
Bryan Cunningham
2025-05-30 12:38:40 -04:00
committed by GitHub
parent 4e07fd7666
commit 5eb8d7b181
44 changed files with 454 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/components/src/toast/toast.stories.ts
View File

@@ -6,6 +6,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { ButtonModule } from "../button";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -75,11 +76,22 @@ export const Default: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-flex tw-flex-col tw-min-w tw-max-w-[--bit-toast-width]">
<bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="success"></bit-toast>
<bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="info"></bit-toast>
<bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="warning"></bit-toast>
<bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="error"></bit-toast>
<div class="tw-min-w tw-max-w-[--bit-toast-width]">
<bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)}></bit-toast>
</div>
`,
}),
};
export const Variants: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-flex tw-flex-col tw-min-w tw-max-w-[--bit-toast-width] tw-gap-2">
<bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="success"></bit-toast>
<bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="info"></bit-toast>
<bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="warning"></bit-toast>
<bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="error"></bit-toast>
</div>
`,
}),
@@ -93,8 +105,8 @@ export const LongContent: Story = {
args: {
title: "Foo",
message: [
"Lorem ipsum dolor sit amet, consectetur adipisci",
"Lorem ipsum dolor sit amet, consectetur adipisci",
"Maecenas commodo posuere quam, vel malesuada nulla accumsan ac.",
"Pellentesque interdum ligula ante, eget bibendum ante lacinia congue.",
],
},
};