mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
[CL-854] feat: add bit-header component to component library (#17662)
Add new bit-header component to libs/components with: - Header component with left, center, and right content projection - Storybook stories for documentation - Export from component library index
This commit is contained in:
Will Martin
GitHub
35
libs/components/src/header/header.component.html
Normal file
35
libs/components/src/header/header.component.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<header
|
||||
class="-tw-mt-6 -tw-mx-8 tw-mb-3 tw-flex tw-flex-col tw-py-6 tw-px-8 has-[[data-tabs]:not(:empty)]:tw-border-0 has-[[data-tabs]:not(:empty)]:tw-border-b has-[[data-tabs]:not(:empty)]:tw-border-solid has-[[data-tabs]:not(:empty)]:tw-border-secondary-100 has-[[data-tabs]:not(:empty)]:tw-bg-background-alt has-[[data-tabs]:not(:empty)]:tw-pb-0"
|
||||
>
|
||||
<div class="tw-flex">
|
||||
<div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
|
||||
<ng-content select="[slot=breadcrumbs]"></ng-content>
|
||||
<h1
|
||||
bitTypography="h1"
|
||||
noMargin
|
||||
class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
|
||||
[title]="title()"
|
||||
>
|
||||
<div class="tw-truncate">
|
||||
@if (icon()) {
|
||||
<i class="bwi {{ icon() }}" aria-hidden="true"></i>
|
||||
}
|
||||
|
||||
{{ title() }}
|
||||
</div>
|
||||
<div><ng-content select="[slot=title-suffix]"></ng-content></div>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="tw-ml-auto tw-flex tw-flex-col tw-gap-4">
|
||||
<div class="tw-flex tw-min-w-max tw-items-center tw-justify-end tw-gap-2">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div class="tw-ml-auto empty:tw-hidden">
|
||||
<ng-content select="[slot=secondary]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-tabs class="-tw-mx-4 -tw-mb-px empty:tw-hidden">
|
||||
<ng-content select="[slot=tabs]"></ng-content>
|
||||
</div>
|
||||
</header>
|
||||
19
libs/components/src/header/header.component.ts
Normal file
19
libs/components/src/header/header.component.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { ChangeDetectionStrategy, Component, input } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "bit-header",
|
||||
templateUrl: "./header.component.html",
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
})
|
||||
export class HeaderComponent {
|
||||
/**
|
||||
* The title of the page
|
||||
*/
|
||||
readonly title = input.required<string>();
|
||||
|
||||
/**
|
||||
* Icon to show before the title
|
||||
*/
|
||||
readonly icon = input<string>();
|
||||
}
|
||||
189
libs/components/src/header/header.stories.ts
Normal file
189
libs/components/src/header/header.stories.ts
Normal file
@@ -0,0 +1,189 @@
|
||||
import { importProvidersFrom } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import {
|
||||
applicationConfig,
|
||||
componentWrapperDecorator,
|
||||
Meta,
|
||||
moduleMetadata,
|
||||
StoryObj,
|
||||
} from "@storybook/angular";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
import {
|
||||
AvatarModule,
|
||||
BreadcrumbsModule,
|
||||
ButtonModule,
|
||||
IconButtonModule,
|
||||
IconModule,
|
||||
InputModule,
|
||||
MenuModule,
|
||||
NavigationModule,
|
||||
TabsModule,
|
||||
TypographyModule,
|
||||
} from "@bitwarden/components";
|
||||
|
||||
import { I18nMockService } from "../utils";
|
||||
|
||||
import { HeaderComponent } from "./header.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Header",
|
||||
component: HeaderComponent,
|
||||
decorators: [
|
||||
componentWrapperDecorator(
|
||||
(story) => `<div class="tw-min-h-screen tw-flex-1 tw-p-6 tw-text-main">${story}</div>`,
|
||||
),
|
||||
moduleMetadata({
|
||||
imports: [
|
||||
HeaderComponent,
|
||||
AvatarModule,
|
||||
BreadcrumbsModule,
|
||||
ButtonModule,
|
||||
IconButtonModule,
|
||||
IconModule,
|
||||
InputModule,
|
||||
MenuModule,
|
||||
NavigationModule,
|
||||
TabsModule,
|
||||
TypographyModule,
|
||||
],
|
||||
}),
|
||||
applicationConfig({
|
||||
providers: [
|
||||
{
|
||||
provide: I18nService,
|
||||
useFactory: () => {
|
||||
return new I18nMockService({
|
||||
moreBreadcrumbs: "More breadcrumbs",
|
||||
loading: "Loading",
|
||||
});
|
||||
},
|
||||
},
|
||||
importProvidersFrom(
|
||||
RouterModule.forRoot(
|
||||
[
|
||||
{ path: "", redirectTo: "foo", pathMatch: "full" },
|
||||
{ path: "foo", component: HeaderComponent },
|
||||
{ path: "bar", component: HeaderComponent },
|
||||
],
|
||||
{ useHash: true },
|
||||
),
|
||||
),
|
||||
],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
type Story = StoryObj<HeaderComponent>;
|
||||
|
||||
export const KitchenSink: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
||||
<bit-breadcrumbs slot="breadcrumbs">
|
||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
||||
</bit-breadcrumbs>
|
||||
<input
|
||||
bitInput
|
||||
placeholder="Ask Jeeves"
|
||||
type="text"
|
||||
/>
|
||||
<button type="button" bitIconButton="bwi-filter" label="Switch products"></button>
|
||||
<bit-avatar text="Will"></bit-avatar>
|
||||
<button bitButton buttonType="primary">New</button>
|
||||
<button bitButton slot="secondary">Click Me 🎉</button>
|
||||
<bit-tab-nav-bar slot="tabs">
|
||||
<bit-tab-link [route]="['foo']">Foo</bit-tab-link>
|
||||
<bit-tab-link [route]="['bar']">Bar</bit-tab-link>
|
||||
</bit-tab-nav-bar>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const Basic: Story = {
|
||||
render: (args: any) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" />
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithLongTitle: Story = {
|
||||
render: (arg: any) => ({
|
||||
props: arg,
|
||||
template: /*html*/ `
|
||||
<bit-header title="LongTitleeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" icon="bwi-bug">
|
||||
<ng-container slot="title-suffix"><i class="bwi bwi-key"></i></ng-container>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithBreadcrumbs: Story = {
|
||||
render: (args: any) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<bit-breadcrumbs slot="breadcrumbs">
|
||||
<bit-breadcrumb>Foo</bit-breadcrumb>
|
||||
<bit-breadcrumb>Bar</bit-breadcrumb>
|
||||
</bit-breadcrumbs>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithSearch: Story = {
|
||||
render: (args: any) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<input
|
||||
bitInput
|
||||
placeholder="Ask Jeeves"
|
||||
type="text"
|
||||
/>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithSecondaryContent: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<button bitButton slot="secondary">Click Me 🎉</button>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithTabs: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<bit-tab-nav-bar slot="tabs">
|
||||
<bit-tab-link [route]="['foo']">Foo</bit-tab-link>
|
||||
<bit-tab-link [route]="['bar']">Bar</bit-tab-link>
|
||||
</bit-tab-nav-bar>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithTitleSuffixComponent: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-header title="Foobar" icon="bwi-bug" class="tw-text-main">
|
||||
<ng-container slot="title-suffix"><i class="bwi bwi-spinner bwi-spin"></i></ng-container>
|
||||
</bit-header>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
1
libs/components/src/header/index.ts
Normal file
1
libs/components/src/header/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from "./header.component";
|
||||
@@ -19,6 +19,7 @@ export * from "./dialog";
|
||||
export * from "./disclosure";
|
||||
export * from "./drawer";
|
||||
export * from "./form-field";
|
||||
export * from "./header";
|
||||
export * from "./icon-button";
|
||||
export * from "./icon";
|
||||
export * from "./icon-tile";
|
||||
|
||||
Reference in New Issue
Block a user