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

[CL-41] Typography directive (#3741)

Browse Source
This commit is contained in:
Oscar Hinton
2023-02-03 10:32:29 +01:00
committed by GitHub
parent fa231499d6
commit 2edbba8a2c
6 changed files with 171 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/components/src/typography/typography.directive.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Directive, HostBinding, Input } from "@angular/core";
type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
const styles: Record<TypographyType, string[]> = {
h1: ["tw-text-3xl", "tw-font-semibold", "tw-mb-2"],
h2: ["tw-text-2xl", "tw-font-semibold", "tw-mb-2"],
h3: ["tw-text-xl", "tw-font-semibold", "tw-mb-2"],
h4: ["tw-text-lg", "tw-font-semibold", "tw-mb-2"],
h5: ["tw-text-base", "tw-font-semibold", "tw-mb-2"],
h6: ["tw-text-sm", "tw-font-semibold", "tw-mb-2"],
body1: ["tw-text-base"],
body2: ["tw-text-sm"],
helper: ["tw-text-xs"],
};
@Directive({
selector: "[bitTypography]",
})
export class TypographyDirective {
@Input("bitTypography") bitTypography: TypographyType;
@HostBinding("class") get classList() {
return styles[this.bitTypography];
}
}