129 lines
3.1 KiB
Plaintext
129 lines
3.1 KiB
Plaintext
import { Meta } from "@storybook/addon-docs";
|
|
|
|
<Meta title="Documentation/Introduction" />
|
|
|
|
<style>{`
|
|
.subheading {
|
|
--mediumdark: '#999999';
|
|
font-weight: 900;
|
|
font-size: 13px;
|
|
color: #999;
|
|
letter-spacing: 6px;
|
|
line-height: 24px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 12px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.link-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
@media (min-width: 620px) {
|
|
.link-list {
|
|
row-gap: 20px;
|
|
column-gap: 20px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media all and (-ms-high-contrast:none) {
|
|
.link-list {
|
|
display: -ms-grid;
|
|
-ms-grid-columns: 1fr 1fr;
|
|
-ms-grid-rows: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.link-item {
|
|
display: block;
|
|
padding: 20px 30px 20px 15px;
|
|
border: 1px solid #00000010;
|
|
border-radius: 5px;
|
|
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.link-item:hover {
|
|
border-color: #1EA7FD50;
|
|
transform: translate3d(0, -3px, 0);
|
|
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
|
}
|
|
|
|
.link-item:active {
|
|
border-color: #1EA7FD;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.link-item strong {
|
|
font-weight: 700;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.link-item img {
|
|
height: 40px;
|
|
width: 40px;
|
|
margin-right: 15px;
|
|
flex: none;
|
|
}
|
|
|
|
.link-item span {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
`}</style>
|
|
|
|
# Bitwarden Component Library
|
|
|
|
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_.
|
|
|
|
**Roll 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://tailwindcss.com/" target="_blank">
|
|
<span>
|
|
<strong>Tailwind</strong>
|
|
The component library CSS is powered by the Tailwind CSS framework
|
|
</span>
|
|
</a>
|
|
<a
|
|
className="link-item"
|
|
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
|
target="_blank"
|
|
>
|
|
<span>
|
|
<strong>Data</strong>
|
|
Providers and mocking for data libraries
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="subheading">Learn</div>
|
|
|
|
<div className="link-list">
|
|
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
|
<span>
|
|
<strong>Storybook documentation</strong>
|
|
Configure, customize, and extend
|
|
</span>
|
|
</a>
|
|
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
|
<span>
|
|
<strong>In-depth guides</strong>
|
|
Best practices from leading teams
|
|
</span>
|
|
</a>
|
|
</div>
|