bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +00:00
Code Issues Releases Wiki Activity

Update font to inter feature branch (#16782)

Browse Source
This commit is contained in:
Vicki League
2025-11-03 15:17:07 -05:00
committed by GitHub
parent 6265fc2d46
commit cba47e4abd
49 changed files with 318 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/components/src/typography/typography.directive.ts
View File

@@ -3,12 +3,12 @@ import { booleanAttribute, 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-text-main"],
h2: ["!tw-text-2xl", "tw-font-semibold", "tw-text-main"],
h3: ["!tw-text-xl", "tw-font-semibold", "tw-text-main"],
h4: ["!tw-text-lg", "tw-font-semibold", "tw-text-main"],
h5: ["!tw-text-base", "tw-font-bold", "tw-text-main"],
h6: ["!tw-text-sm", "tw-font-bold", "tw-text-main"],
h1: ["!tw-text-3xl", "tw-text-main"],
h2: ["!tw-text-2xl", "tw-text-main"],
h3: ["!tw-text-xl", "tw-text-main"],
h4: ["!tw-text-lg", "tw-text-main"],
h5: ["!tw-text-base", "tw-text-main"],
h6: ["!tw-text-sm", "tw-text-main"],
body1: ["!tw-text-base"],
body2: ["!tw-text-sm"],
helper: ["!tw-text-xs"],

222
libs/components/src/typography/typography.stories.ts
View File

@@ -1,28 +1,226 @@
import { Meta, StoryObj } from "@storybook/angular";
import { Meta, moduleMetadata } from "@storybook/angular";
import { TableModule, TableDataSource } from "../table";
import { TypographyDirective } from "./typography.directive";
export default {
title: "Component Library/Typography",
component: TypographyDirective,
decorators: [
moduleMetadata({
imports: [TableModule],
}),
],
} as Meta;
export const Default: StoryObj<TypographyDirective & { text: string }> = {
render: (args) => ({
type TypographyData = {
id: string;
typography: string;
classes?: string;
weight: string;
size: number;
lineHeight: string;
};
const typographyProps: TypographyData[] = [
{
id: "h1",
typography: "h1",
weight: "Regular",
size: 30,
lineHeight: "150%",
},
{
id: "h2",
typography: "h2",
weight: "Regular",
size: 24,
lineHeight: "150%",
},
{
id: "h3",
typography: "h3",
weight: "Regular",
size: 20,
lineHeight: "150%",
},
{
id: "h4",
typography: "h4",
weight: "Regular",
size: 18,
lineHeight: "150%",
},
{
id: "h5",
typography: "h5",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "h6",
typography: "h6",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "body",
typography: "body1",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "body-med",
typography: "body1",
classes: "tw-font-medium",
weight: "Medium",
size: 16,
lineHeight: "150%",
},
{
id: "body-semi",
typography: "body1",
classes: "tw-font-semibold",
weight: "Semibold",
size: 16,
lineHeight: "150%",
},
{
id: "body-underline",
typography: "body1",
classes: "tw-underline",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "body-sm",
typography: "body2",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-med",
typography: "body2",
classes: "tw-font-medium",
weight: "Medium",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-semi",
typography: "body2",
classes: "tw-font-semibold",
weight: "Semibold",
size: 14,
lineHeight: "150%",
},
{
id: "body-sm-underline",
typography: "body2",
classes: "tw-underline",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "helper",
typography: "helper",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
{
id: "helper-med",
typography: "helper",
classes: "tw-font-medium",
weight: "Medium",
size: 12,
lineHeight: "150%",
},
{
id: "helper-semi",
typography: "helper",
classes: "tw-font-semibold",
weight: "Semibold",
size: 12,
lineHeight: "150%",
},
{
id: "helper-underline",
typography: "helper",
classes: "tw-underline",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
{
id: "code",
typography: "body1",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 16,
lineHeight: "150%",
},
{
id: "code-sm",
typography: "body2",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 14,
lineHeight: "150%",
},
{
id: "code-helper",
typography: "helper",
classes: "tw-font-mono tw-text-code",
weight: "Regular",
size: 12,
lineHeight: "150%",
},
];
const typographyData = new TableDataSource<TypographyData>();
typographyData.data = typographyProps;
export const Default = {
render: (args: { text: string; dataSource: typeof typographyProps }) => ({
props: args,
template: /*html*/ `
<div bitTypography="h1">h1 - {{ text }}</div>
<div bitTypography="h2">h2 - {{ text }}</div>
<div bitTypography="h3">h3 - {{ text }}</div>
<div bitTypography="h4">h4 - {{ text }}</div>
<div bitTypography="h5">h5 - {{ text }}</div>
<div bitTypography="h6">h6 - {{ text }}</div>
<div bitTypography="body1" class="tw-text-main">body1 - {{ text }}</div>
<div bitTypography="body2" class="tw-text-main">body2 - {{ text }}</div>
<div bitTypography="helper" class="tw-text-main">helper - {{ text }}</div>
<bit-table [dataSource]="dataSource">
<ng-container header>
<tr>
<th bitCell>Rendered Text</th>
<th bitCell>bitTypography Variant</th>
<th bitCell>Additional Classes</th>
<th bitCell>Weight</th>
<th bitCell>Size</th>
<th bitCell>Line Height</th>
</tr>
</ng-container>
<ng-template body let-rows$>
@for (row of rows$ | async; track row.id) {
<tr bitRow alignContent="middle">
<td bitCell><div [bitTypography]="row.typography" [ngClass]="row.classes">{{text}}</div></td>
<td bitCell bitTypography="body2">{{row.typography}}</td>
<td bitCell bitTypography="body2">{{row.classes}}</td>
<td bitCell bitTypography="body2">{{row.weight}}</td>
<td bitCell bitTypography="body2">{{row.size}}</td>
<td bitCell bitTypography="body2">{{row.lineHeight}}</td>
</tr>
}
</ng-template>
</bit-table>
`,
}),
args: {
text: `Sphinx of black quartz, judge my vow.`,
dataSource: typographyData,
},
};