Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

[Component Library] Text/Button Links (#3126)

Browse Source 
* Initial commit

* Updated stories / Fixed issues with dark theme constrast color

* Force colors so bootstrap doesn't override

* Fixed text colors / Added initial tests

* Added jest debugging ability to components package

* Removed spec file

* Fixed anchor layout

* revert base font-size

* [CL-28] fixed indentation, used focus-visible, adjusted disabled colors

* [CL-28] Reduced ring thickness to better match figma

* [CL-28] Updated story link

* [CL-44] [CL-28] Updated tabs disabled color / Converted to rgb format with helper
This commit is contained in:
Vincent Salucci 2022-08-08 11:21:46 -05:00 committed by GitHub
parent af371af6e1
commit 07c7357825
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 280 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,31 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest All",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["--runInBand"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
},
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest"
}
}
]
}

1
jest.config.js
View File

@ -15,6 +15,7 @@ module.exports = {
"<rootDir>/libs/angular/jest.config.js",
"<rootDir>/libs/common/jest.config.js",
"<rootDir>/libs/components/jest.config.js",
"<rootDir>/libs/electron/jest.config.js",
"<rootDir>/libs/node/jest.config.js",
],

1
libs/components/src/index.ts
View File

@ -7,6 +7,7 @@ export * from "./icon";
export * from "./menu";
export * from "./dialog";
export * from "./submit-button";
export * from "./link";
export * from "./tabs";
export * from "./toggle-group";
export * from "./utils/i18n-mock.service";

2
libs/components/src/link/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./link.directive";
export * from "./link.module";

54
libs/components/src/link/link.directive.ts Normal file
View File

@ -0,0 +1,54 @@
import { Input, HostBinding, Directive } from "@angular/core";
export type LinkType = "primary" | "secondary" | "contrast";
const linkStyles: Record<LinkType, string[]> = {
primary: [
"!tw-text-primary-500",
"hover:!tw-text-primary-500",
"focus-visible:tw-ring-primary-700",
"disabled:!tw-text-primary-500/60",
],
secondary: [
"!tw-text-main",
"hover:!tw-text-main",
"focus-visible:tw-ring-primary-700",
"disabled:!tw-text-muted/60",
],
contrast: [
"!tw-text-contrast",
"hover:!tw-text-contrast",
"focus-visible:tw-ring-text-contrast",
"disabled:!tw-text-contrast/60",
],
};
@Directive({
selector: "button[bitLink], a[bitLink]",
})
export class LinkDirective {
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-py-0.5",
"tw-px-0",
"tw-bg-transparent",
"tw-border-0",
"tw-border-none",
"tw-rounded",
"tw-transition",
"hover:tw-underline",
"hover:tw-decoration-1",
"focus-visible:tw-outline-none",
"focus-visible:tw-underline",
"focus-visible:tw-decoration-1",
"focus-visible:tw-ring-2",
"focus-visible:tw-z-10",
"disabled:tw-no-underline",
"disabled:tw-cursor-not-allowed",
].concat(linkStyles[this.linkType] ?? []);
}
@Input()
linkType: LinkType = "primary";
}

11
libs/components/src/link/link.module.ts Normal file
View File

@ -0,0 +1,11 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { LinkDirective } from "./link.directive";
@NgModule({
imports: [CommonModule],
exports: [LinkDirective],
declarations: [LinkDirective],
})
export class LinkModule {}

93
libs/components/src/link/link.stories.ts Normal file
View File

@ -0,0 +1,93 @@
import { Meta, Story } from "@storybook/angular";
import { LinkDirective } from "./link.directive";
export default {
title: "Component Library/Link",
component: LinkDirective,
argTypes: {
linkType: {
options: ["primary", "secondary", "contrast"],
control: { type: "radio" },
},
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17419",
},
},
} as Meta;
const ButtonTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">Button</button>
<button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Button
</button>
<button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
Chevron Icon Button
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</button>
<button bitLink [linkType]="linkType" class="tw-text-sm tw-block">Small Button</button>
</div>
`,
});
const AnchorTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">Anchor</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
Add Icon Anchor
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" href="#">
Chevron Icon Anchor
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
</div>
<div class="tw-block tw-p-2">
<a bitLink [linkType]="linkType" class="tw-text-sm" href="#">Small Anchor</a>
</div>
</div>
`,
});
export const Buttons = ButtonTemplate.bind({});
Buttons.args = {
linkType: "primary",
};
export const Anchors = AnchorTemplate.bind({});
Anchors.args = {
linkType: "primary",
};
const DisabledTemplate: Story = (args) => ({
props: args,
template: `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
<button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
<div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
</div>
`,
});
export const Disabled = DisabledTemplate.bind({});
Disabled.parameters = {
controls: {
exclude: ["linkType"],
hideNoControlsWarning: true,
},
};

4
libs/components/src/tabs/tab-item.component.ts
View File

@ -29,8 +29,8 @@ export class TabItemComponent {
"focus-visible:tw-outline-none",
"focus-visible:tw-ring-2",
"focus-visible:tw-ring-primary-700",
"disabled:tw-bg-secondary-100",
"disabled:!tw-text-muted",
"disabled:tw-bg-transparent",
"disabled:!tw-text-muted/60",
"disabled:tw-no-underline",
"disabled:tw-cursor-not-allowed",
];

90
libs/components/src/tw-theme.css
View File

@ -1,35 +1,35 @@
:root {
--color-background: #ffffff;
--color-background-alt: #fbfbfb;
--color-background-alt2: #175ddc;
--color-background: 255 255 255;
--color-background-alt: 251 251 251;
--color-background-alt2: 23 92 219;
--color-primary-300: #6795e8;
--color-primary-500: #175ddc;
--color-primary-700: #1252a3;
--color-primary-300: 103 149 232;
--color-primary-500: 23 93 220;
--color-primary-700: 18 82 163;
--color-secondary-100: #f0f0f0;
--color-secondary-300: #ced4dc;
--color-secondary-500: #89929f;
--color-secondary-700: #212529;
--color-secondary-100: 240 240 240;
--color-secondary-300: 206 212 220;
--color-secondary-500: 137 146 159;
--color-secondary-700: 33 37 41;
--color-success-500: #017e45;
--color-success-700: #00552e;
--color-success-500: 1 126 69;
--color-success-700: 0 85 46;
--color-danger-500: #c83522;
--color-danger-700: #98291b;
--color-danger-500: 200 53 34;
--color-danger-700: 152 41 27;
--color-warning-500: #8b6609;
--color-warning-700: #694d05;
--color-warning-500: 139 102 9;
--color-warning-700: 105 77 5;
--color-info-500: #555555;
--color-info-700: #3b3a3a;
--color-info-500: 85 85 85;
--color-info-700: 59 58 58;
--color-text-main: #212529;
--color-text-muted: #6d757e;
--color-text-contrast: #ffffff;
--color-text-alt2: #ffffff;
--color-text-main: 33 37 41;
--color-text-muted: 109 117 126;
--color-text-contrast: 255 255 255;
--color-text-alt2: 255 255 255;
--tw-ring-offset-color: #fff;
--tw-ring-offset-color: #ffffff;
}
.theme_light {
@ -37,35 +37,35 @@
}
.theme_dark {
--color-background: #1f242e;
--color-background-alt: #161c26;
--color-background-alt2: #2f343d;
--color-background: 31 36 46;
--color-background-alt: 22 28 38;
--color-background-alt2: 47 52 61;
--color-primary-300: #175ddc;
--color-primary-500: #6a99f0;
--color-primary-700: #b4ccf9;
--color-primary-300: 23 93 220;
--color-primary-500: 106 153 240;
--color-primary-700: 180 204 249;
--color-secondary-100: #2f343d;
--color-secondary-300: #6e7689;
--color-secondary-500: #bac0ce;
--color-secondary-700: #ffffff;
--color-secondary-100: 47 52 61;
--color-secondary-300: 110 118 137;
--color-secondary-500: 186 192 206;
--color-secondary-700: 255 255 255;
--color-success-500: #52e07c;
--color-success-700: #a8efbe;
--color-success-500: 82 224 124;
--color-success-700: 168 239 190;
--color-danger-500: #ff8d85;
--color-danger-700: #ffbfbb;
--color-danger-500: 255 141 133;
--color-danger-700: 255 191 187;
--color-warning-500: #ffeb66;
--color-warning-700: #fff5b3;
--color-warning-500: 255 235 102;
--color-warning-700: 255 245 179;
--color-info-500: #a4b0c6;
--color-info-700: #d1d7e2;
--color-info-500: 164 176 198;
--color-info-700: 209 215 226;
--color-text-main: #ffffff;
--color-text-muted: #bac0ce;
--color-text-contrast: #191e26;
--color-text-alt2: #ffffff;
--color-text-main: 255 255 255;
--color-text-muted: 186 192 206;
--color-text-contrast: 25 30 38;
--color-text-alt2: 255 255 255;
--tw-ring-offset-color: #1f242e;
}

70
libs/components/tailwind.config.base.js
View File

@ -1,6 +1,10 @@
/* eslint-disable */
const colors = require("tailwindcss/colors");
function rgba(color) {
return "rgb(var(" + color + ") / <alpha-value>)";
}
module.exports = {
prefix: "tw-",
content: ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"],
@ -12,57 +16,57 @@ module.exports = {
current: colors.current,
black: colors.black,
primary: {
300: "var(--color-primary-300)",
500: "var(--color-primary-500)",
700: "var(--color-primary-700)",
300: rgba("--color-primary-300"),
500: rgba("--color-primary-500"),
700: rgba("--color-primary-700"),
},
secondary: {
100: "var(--color-secondary-100)",
300: "var(--color-secondary-300)",
500: "var(--color-secondary-500)",
700: "var(--color-secondary-700)",
100: rgba("--color-secondary-100"),
300: rgba("--color-secondary-300"),
500: rgba("--color-secondary-500"),
700: rgba("--color-secondary-700"),
},
success: {
500: "var(--color-success-500)",
700: "var(--color-success-700)",
500: rgba("--color-success-500"),
700: rgba("--color-success-700"),
},
danger: {
500: "var(--color-danger-500)",
700: "var(--color-danger-700)",
500: rgba("--color-danger-500"),
700: rgba("--color-danger-700"),
},
warning: {
500: "var(--color-warning-500)",
700: "var(--color-warning-700)",
500: rgba("--color-warning-500"),
700: rgba("--color-warning-700"),
},
info: {
500: "var(--color-info-500)",
700: "var(--color-info-700)",
500: rgba("--color-info-500"),
700: rgba("--color-info-700"),
},
text: {
main: "var(--color-text-main)",
muted: "var(--color-text-muted)",
contrast: "var(--color-text-contrast)",
alt2: "var(--color-text-alt2)",
main: rgba("--color-text-main"),
muted: rgba("--color-text-muted"),
contrast: rgba("--color-text-contrast"),
alt2: rgba("--color-text-alt2"),
},
background: {
DEFAULT: "var(--color-background)",
alt: "var(--color-background-alt)",
alt2: "var(--color-background-alt2)",
DEFAULT: rgba("--color-background"),
alt: rgba("--color-background-alt"),
alt2: rgba("--color-background-alt2"),
},
},
textColor: {
main: "var(--color-text-main)",
muted: "var(--color-text-muted)",
contrast: "var(--color-text-contrast)",
alt2: "var(--color-text-alt2)",
success: "var(--color-success-500)",
danger: "var(--color-danger-500)",
warning: "var(--color-warning-500)",
info: "var(--color-info-500)",
main: rgba("--color-text-main"),
muted: rgba("--color-text-muted"),
contrast: rgba("--color-text-contrast"),
alt2: rgba("--color-text-alt2"),
success: rgba("--color-success-500"),
danger: rgba("--color-danger-500"),
warning: rgba("--color-warning-500"),
info: rgba("--color-info-500"),
primary: {
300: "var(--color-primary-300)",
500: "var(--color-primary-500)",
700: "var(--color-primary-700)",
300: rgba("--color-primary-300"),
500: rgba("--color-primary-500"),
700: rgba("--color-primary-700"),
},
},
ringOffsetColor: ({ theme }) => ({

3
package.json
View File

@ -204,5 +204,8 @@
"engines": {
"node": "~16",
"npm": "~8"
},
"jest": {
"testEnvironment": "node"
}
}