bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

[PM-2276] Upgrade Storybook to v7 (#5258)

Browse Source
This commit is contained in:
Oscar Hinton
2023-05-26 15:58:06 +02:00
committed by GitHub
parent 1638a1d6f5
commit f7b372a0b0
72 changed files with 6340 additions and 16409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
libs/components/src/stories/banner-docs.stories.mdx
View File

@@ -1,53 +0,0 @@
import { Meta, Story } from "@storybook/addon-docs";
<Meta title="Documentation/Banner" />
# Banner
Banners are used for important communication with the user that needs to be seen right away, but has
little effect on the experience. Banners appear at the top of the user's screen on page load and
persist across all pages a user navigates to.
- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should
not reappear during that same active session.
- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
effectiveness may decrease if too many are used.
- Avoid stacking multiple banners.
- Banners support a button link (text button).
## Types
Icons should remain consistent across these types. Do not change the icon without consulting
designers.
Use the following guidelines to help choose the correct type of banner.
### Premium
<Story id="component-library-banner--premium" />
Used primarily to encourage user to upgrade to premium.
### Info
<Story id="component-library-banner--info" />
Used to communicate release notes, server maintenance or other informative event.
### Warning
<Story id="component-library-banner--warning" />
Used to alert the user of outdated info or versions.
### Danger
<Story id="component-library-banner--danger" />
Rarely used, but may be used to alert users over critical messages or very outdated versions.
## Accessibility
Banners sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers
announce the content prior to the test of the page. This behaviour can be disabled by setting
`[useAlertRole]="false"`.

92
libs/components/src/stories/button-docs.stories.mdx
View File

@@ -1,92 +0,0 @@
import { Meta, Story } from "@storybook/addon-docs";
<Meta title="Documentation/Button" />
# Button
Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
used to indicate actions that can be performed by a user such as submitting a form.
## Guidelines
### Choosing the `<a>` or `<button>`
Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button
takes:
- If navigating to a new page, use `<a>`
- If taking an action on the current page use `<button>`
- If the button launches a dialog, use `<button>`
### Groups
Groups of buttons should be seperated by a `0.5` rem gap. Usually acomplished by using the
`tw-gap-2` class in the button group container.
Groups within page content, dialog footers or forms should have the `primary` call to action placed
to left. Groups in headers and navigational areas should have the `primary` call to action on the
right.
## Accessibility
Please follow these guidelines to ensure that buttons are accessible to all users.
### Color contrast
All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To
use a button on a different background, double check that the color contrast is sufficient in both
the light and dark themes.
### Loading Buttons
Include an `aria-label` attribute that defaults to “loading” but can be configurable per
implementation. On click, the screen reader should announce the `aria-label`. Once the action is
compelted, use another messaging pattern to alert the user that the action is complete (example:
success toast).
### Submit and async actions
Both submit and async action buttons use a loading button state while an action is taken. If your
button is preforming a long running task in the background like a server API call, be sure to review
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
<Story id="component-library-button--loading" />
## Styles
There are 3 main styles for the button: Primary, Secondary, and Danger.
### Primary
<Story id="component-library-button--primary" />
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
### Secondary
<Story id="component-library-button--secondary" />
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
other; however, generally there should only be 1 or 2 calls to action per page.
### Danger
<Story id="component-library-button--danger" />
Use the danger styling only in settings when the user may preform a permanent action.
## Disabled UI
Both the disabled and loading states use the default state’s color with a 60% opacity or
`tw-opacity-60`.
<Story id="component-library-button--disabled" />
## Block
Typically button widths expand with their text. In some causes though buttons may need to be block
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
<Story id="component-library-button--block" />

6
libs/components/src/stories/colors.stories.mdx → libs/components/src/stories/colors.mdx
View File

@@ -67,7 +67,8 @@ export const Table = (args) => (
</table>
);
<style>{`
<style>
{`
table {
border-spacing: 0.5rem;
border-collapse: separate !important;
@@ -85,7 +86,8 @@ td, th {
th {
border: none !important;
}
`}</style>
`}
</style>
# Colors

2
libs/components/src/stories/forms-docs.stories.mdx → libs/components/src/stories/forms.mdx
View File

@@ -1,6 +1,6 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Documentation/Forms" />
<Meta title="Component Library/Form" />
# Forms

4
libs/components/src/stories/icons.stories.mdx → libs/components/src/stories/icons.mdx
View File

@@ -1,6 +1,6 @@
<!-- Iconography.stories.mdx -->
{/* Iconography.stories.mdx */}
import { Meta } from "@storybook/addon-docs/";
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Icons" />

4
libs/components/src/stories/input-docs.stories.mdx → libs/components/src/stories/input.mdx
View File

@@ -1,8 +1,8 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/bitInput" />
<Meta title="Component Library/Form/Input" />
# `bitInput`
# Input
`bitInput` is an Angular directive to be used on `<input>`, `<select>`, and `<textarea>` tags in
order to provide standardized TailwindCss styling, error handling, and more. It is meant to be used

6
libs/components/src/stories/Introduction.stories.mdx → libs/components/src/stories/introduction.mdx
View File

@@ -2,7 +2,8 @@ import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Introduction" />
<style>{`
<style>
{`
.subheading {
--mediumdark: '#999999';
font-weight: 900;
@@ -77,7 +78,8 @@ import { Meta } from "@storybook/addon-docs";
font-size: 14px;
line-height: 20px;
}
`}</style>
`}
</style>
# Bitwarden Component Library

149
libs/components/src/stories/table-docs.stories.mdx
View File

@@ -1,149 +0,0 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Documentation/Table" />
# Table
## Overview
The table component provides a comprehensive way to display, sort and filter data. It consists of
two portions, a UI component called `bit-table` and the underlying data source `TableDataSource`.
This documentation will initially focus on the UI portion before covering the data source.
## UI Component
The UI component consists of a couple of elements.
- `bit-table`: The main component that creates a native table element and applies the table styling.
- `header`: A container for the table header.
- `body`: A container for the table body.
- `bitCell`: A cell within the table. Used for both headers and content.
### Guidelines
- Always include a row or column header with your table; this allows screen readers to better
contextualize the data
- Avoid spanning data across cells.
- Be sure to make repeating actions unique by associating them with the object they relate to.
Example: if there are multiple “Edit” buttons on a table, a screen reader should read “Edit,
Netflix” for an edit option for a Netflix item.
- Use [Virtual Scrolling](#virtual-scrolling) for large data sets.
### Example
<Story id="component-library-table--default" />
### Usage
The below code is the minimum required to create a table. However we strongly advise you to use the
`dataSource` input to provide a data source for your table. This allows you to easily sort data.
```html
<bit-table>
<ng-container header>
<tr>
<th bitCell>Header 1</th>
<th bitCell>Header 2</th>
<th bitCell>Header 3</th>
</tr>
</ng-container>
<ng-template body>
<tr bitRow>
<td bitCell>Cell 1</td>
<td bitCell>Cell 2</td>
<td bitCell>Cell 3</td>
</tr>
</ng-template>
</bit-table>
```
## Data Source
Bitwarden provides a data source for tables that can be used in place of a traditional data array.
The `TableDataSource` implements sorting and filtering capabilities. This allows the `bitTable`
component to focus on rendering while offloading the data management to the data source.
```ts
// External data source
const data: T[];
const dataSource = new TableDataSource<T>();
dataSource.data = data;
```
We use the `dataSource` as an input to the `bit-table` component, and access the rows to render
within the `ng-template`which provides access to the rows using `let-rows$`.
```html
<bit-table [dataSource]="dataSource">
<ng-container header>
<tr>
<th bitCell bitSortable="id" default>Id</th>
<th bitCell bitSortable="name">Name</th>
<th bitCell bitSortable="other" [fn]="sortFn">Other</th>
</tr>
</ng-container>
<ng-template body let-rows$>
<tr bitRow *ngFor="let r of rows$ | async">
<td bitCell>{{ r.id }}</td>
<td bitCell>{{ r.name }}</td>
<td bitCell>{{ r.other }}</td>
</tr>
</ng-template>
</bit-table>
```
### Sorting
We provide a simple component for displaying sortable column headers. The `bitSortable` component
wires up to the `TableDataSource` and will automatically sort the data when clicked and display an
indicator for which column is currently sorted. The dafault sorting can be specified by setting the
`default`.
```html
<th bitCell bitSortable="id" default>Id</th>
<th bitCell bitSortable="name" default>Name</th>
```
It's also possible to define a custom sorting function by setting the `fn` input.
```ts
const sortFn = (a: T, b: T) => (a.id > b.id ? 1 : -1);
```
### Filtering
The `TableDataSource` supports a rudimentary filtering capability most commonly used to implement a
search function. It works by converting each entry into a string of it's properties. The string is
then compared against the filter value using a simple `indexOf`check.
```ts
dataSource.filter = "search value";
```
### Virtual Scrolling
It's heavily adviced to use virtual scrolling if you expect the table to have any significant amount
of data. This is easily done by wrapping the table in the `cdk-virtual-scroll-viewport` component,
specify a `itemSize`, set `scrollWindow` to `true` and replace `*ngFor` with `*cdkVirtualFor`.
```html
<cdk-virtual-scroll-viewport scrollWindow itemSize="47">
<bit-table [dataSource]="dataSource">
<ng-container header>
<tr>
<th bitCell bitSortable="id" default>Id</th>
<th bitCell bitSortable="name">Name</th>
<th bitCell bitSortable="other" [fn]="sortFn">Other</th>
</tr>
</ng-container>
<ng-template let-rows$>
<tr bitRow *cdkVirtualFor="let r of rows$">
<td bitCell>{{ r.id }}</td>
<td bitCell>{{ r.name }}</td>
<td bitCell>{{ r.other }}</td>
</tr>
</ng-template>
</bit-table>
</cdk-virtual-scroll-viewport>
```

59
libs/components/src/stories/typography.stories.mdx
View File

@@ -1,59 +0,0 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Documentation/Typography" />
# Typography
<Story id="component-library-typography--h-1" />
```html
<h1 bitTypography="h1">H1</h1>
```
<Story id="component-library-typography--h-2" />
```html
<h2 bitTypography="h2">H2</h2>
```
<Story id="component-library-typography--h-3" />
```html
<h3 bitTypography="h3">H3</h3>
```
<Story id="component-library-typography--h-4" />
```html
<h4 bitTypography="h4">H4</h4>
```
<Story id="component-library-typography--h-5" />
```html
<h5 bitTypography="h5">H5</h5>
```
<Story id="component-library-typography--h-6" />
```html
<h6 bitTypography="h6">H6</h6>
```
<Story id="component-library-typography--body-1" />
```html
<p bitTypography="body1">Body 1</p>
```
<Story id="component-library-typography--body-2" />
```html
<p bitTypography="body2">Body 2</h1>
```
<Story id="component-library-typography--helper" />
```html
<p bitTypography="helper">Helper Text</h1>
```