Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-04-01 17:57:27 +02:00
Code Issues Projects Releases Wiki Activity

Update introduction for CL ()

Browse Source
This commit is contained in:
Oscar Hinton 2022-04-08 17:47:32 +02:00 committed by GitHub
parent 3b9ef68f4b
commit f0d9f8641e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 127 additions and 50 deletions

7
components/.storybook/main.js
View File

@ -1,6 +1,11 @@
module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-a11y"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-a11y",
"storybook-addon-designs",
],
framework: "@storybook/angular",
core: {
builder: "webpack5",

92
components/package-lock.json generated
View File

@ -47,6 +47,7 @@
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"postcss": "^8.4.6",
"storybook-addon-designs": "^6.2.1",
"tailwindcss": "^3.0.18",
"typescript": "~4.3.5"
}
@ -4036,6 +4037,29 @@
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
"dev": true
},
"node_modules/@figspec/components": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.0.tgz",
"integrity": "sha512-a8sgP0YLJ3H0g0pdZPYecxfp9JNVQUTaaU3xcSci8duHXTGkJ7X8QPPCBbyhB+MoxMxnsAh8GjkfZHEr9oIoPQ==",
"dev": true,
"dependencies": {
"copy-to-clipboard": "^3.0.0",
"lit-element": "^2.4.0",
"lit-html": "^1.1.1"
}
},
"node_modules/@figspec/react": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.0.tgz",
"integrity": "sha512-BkOu3RsKF5vCtPoqsc6Oeyxw4wr9GesFrB9/wDHFqgjzhWsw8erFxCsPxsjdlJD8d8OWVHoM6SWxAaGe/pLdxg==",
"dev": true,
"dependencies": {
"@figspec/components": "^1.0.0"
},
"peerDependencies": {
"react": "^16.14.0 || ^17.0.0"
}
},
"node_modules/@foliojs-fork/fontkit": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz",
@ -22451,6 +22475,21 @@
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true
},
"node_modules/lit-element": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz",
"integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==",
"dev": true,
"dependencies": {
"lit-html": "^1.1.1"
}
},
"node_modules/lit-html": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz",
"integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==",
"dev": true
},
"node_modules/loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -30454,6 +30493,15 @@
"integrity": "sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==",
"dev": true
},
"node_modules/storybook-addon-designs": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz",
"integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==",
"dev": true,
"dependencies": {
"@figspec/react": "^1.0.0"
}
},
"node_modules/stream-browserify": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@ -37238,6 +37286,26 @@
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
"dev": true
},
"@figspec/components": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@figspec/components/-/components-1.0.0.tgz",
"integrity": "sha512-a8sgP0YLJ3H0g0pdZPYecxfp9JNVQUTaaU3xcSci8duHXTGkJ7X8QPPCBbyhB+MoxMxnsAh8GjkfZHEr9oIoPQ==",
"dev": true,
"requires": {
"copy-to-clipboard": "^3.0.0",
"lit-element": "^2.4.0",
"lit-html": "^1.1.1"
}
},
"@figspec/react": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@figspec/react/-/react-1.0.0.tgz",
"integrity": "sha512-BkOu3RsKF5vCtPoqsc6Oeyxw4wr9GesFrB9/wDHFqgjzhWsw8erFxCsPxsjdlJD8d8OWVHoM6SWxAaGe/pLdxg==",
"dev": true,
"requires": {
"@figspec/components": "^1.0.0"
}
},
"@foliojs-fork/fontkit": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz",
@ -51668,6 +51736,21 @@
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true
},
"lit-element": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz",
"integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==",
"dev": true,
"requires": {
"lit-html": "^1.1.1"
}
},
"lit-html": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz",
"integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==",
"dev": true
},
"loader-runner": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@ -57893,6 +57976,15 @@
"integrity": "sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==",
"dev": true
},
"storybook-addon-designs": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-6.2.1.tgz",
"integrity": "sha512-ihsscab8185HnxqTNZlM4TfrCPVsO7AimVA8BapuqT/sfZQF9m5H9C0plT3kbECdIMh2cmzMBF1Tc9ckWRgpWg==",
"dev": true,
"requires": {
"@figspec/react": "^1.0.0"
}
},
"stream-browserify": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",

1
components/package.json
View File

@ -53,6 +53,7 @@
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"postcss": "^8.4.6",
"storybook-addon-designs": "^6.2.1",
"tailwindcss": "^3.0.18",
"typescript": "~4.3.5"
}

6
components/src/badge/badge.stories.ts
View File

@ -8,6 +8,12 @@ export default {
args: {
type: "primary",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A16956",
},
},
} as Meta;
const Template: Story<BadgeComponent> = (args: BadgeComponent) => ({

10
components/src/button/button.stories.ts
View File

@ -2,17 +2,20 @@ import { Meta, Story } from "@storybook/angular";
import { ButtonComponent } from "./button.component";
// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
export default {
title: "Jslib/Button",
component: ButtonComponent,
args: {
buttonType: "primary",
},
// More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A16733",
},
},
} as Meta;
// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
props: args,
template: `
@ -22,7 +25,6 @@ const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
});
export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
Primary.args = {
buttonType: "primary",
};

6
components/src/callout/callout.stories.ts
View File

@ -27,6 +27,12 @@ export default {
args: {
type: "warning",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A17484",
},
},
} as Meta;
const Template: Story<CalloutComponent> = (args: CalloutComponent) => ({

55
components/src/stories/Introduction.stories.mdx
View File

@ -18,7 +18,7 @@ import { Meta } from "@storybook/addon-docs";
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-rows: 1fr;
row-gap: 10px;
}
@ -81,44 +81,21 @@ import { Meta } from "@storybook/addon-docs";
# Bitwarden Component Library
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
The Bitwarden Component Library is a collection of reusable low level components which empowers designers and
developers to work more efficiently. The primary goal is to ensure a consistent design and behavior across the
different clients and platforms. Currently the primary focus is the web based clients, namely _web_, _browser_ and
_desktop_.
Browse example stories now by navigating to them in the sidebar.
View their code in the `src/stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
**Role out status:** we are currently in the process of transitioning the Web Vault to utilize the component library
and the other clients will follow once this work is completed.
<div className="subheading">Configure</div>
<div className="link-list">
<a
className="link-item"
href="https://storybook.js.org/docs/react/addons/addon-types"
target="_blank"
>
<a className="link-item" href="https://tailwindcss.com/" target="_blank">
<span>
<strong>Presets for popular tools</strong>
Easy setup for TypeScript, SCSS and more.
</span>
</a>
<a
className="link-item"
href="https://storybook.js.org/docs/react/configure/webpack"
target="_blank"
>
<span>
<strong>Build configuration</strong>
How to customize webpack and Babel
</span>
</a>
<a
className="link-item"
href="https://storybook.js.org/docs/react/configure/styling-and-css"
target="_blank"
>
<span>
<strong>Styling</strong>
How to load and configure CSS libraries
<strong>Tailwind</strong>
The component library CSS is powered by the Tailwind CSS framework
</span>
</a>
<a
@ -148,16 +125,4 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
Best practices from leading teams
</span>
</a>
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
<span>
<strong>GitHub project</strong>
View the source and add issues
</span>
</a>
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
<span>
<strong>Discord chat</strong>
Chat with maintainers and the community
</span>
</a>
</div>