move files and make separate template files
This commit is contained in:
Vicki League
parent
eef7fd42d8
commit
2f1ed4993f
|
|
@ -9,6 +9,8 @@ const config: StorybookConfig = {
|
|||
"../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../apps/web/src/**/*.mdx",
|
||||
"../apps/web/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../apps/browser/src/**/*.mdx",
|
||||
"../apps/browser/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../bitwarden_license/bit-web/src/**/*.mdx",
|
||||
"../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
{
|
||||
"extends": "../tsconfig",
|
||||
"compilerOptions": {
|
||||
"types": ["node", "jest", "chrome"],
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"exclude": ["../src/test.setup.ts", "../apps/src/**/*.spec.ts", "../libs/**/*.spec.ts"],
|
||||
"exclude": ["../src/test.setup.ts", "../apps/**/*.spec.ts", "../libs/**/*.spec.ts"],
|
||||
"files": [
|
||||
"./typings.d.ts",
|
||||
"./preview.tsx",
|
||||
"../libs/components/src/main.ts",
|
||||
"../libs/components/src/polyfills.ts"
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
declare module "*.md" {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-flex-1">
|
||||
<a
|
||||
*ngFor="let button of navButtons"
|
||||
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-no-underline hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus:tw-rounded-lg focus:tw-border-primary-500"
|
||||
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
|
||||
title="{{ button.label }}"
|
||||
routerLink="/{{ button.page }}"
|
||||
routerLinkActive
|
||||
#rla="routerLinkActive"
|
||||
>
|
||||
<i *ngIf="!rla.isActive" class="bwi bwi-lg bwi-{{ button.iconKey }}" aria-hidden="true"></i>
|
||||
<i
|
||||
*ngIf="rla.isActive"
|
||||
class="bwi bwi-lg bwi-{{ button.iconKey }}-f"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span
|
||||
class="tw-truncate tw-max-w-full"
|
||||
[ngClass]="!rla.isActive && 'group-hover:tw-underline'"
|
||||
>{{ button.label }}</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { Component } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
import { LinkModule } from "@bitwarden/components/src/link";
|
||||
|
||||
@Component({
|
||||
selector: "popup-bottom-navigation",
|
||||
templateUrl: "popup-bottom-navigation.component.html",
|
||||
standalone: true,
|
||||
imports: [CommonModule, LinkModule, RouterModule],
|
||||
})
|
||||
export class PopupBottomNavigationComponent {
|
||||
// TODO button functionality
|
||||
|
||||
navButtons = [
|
||||
{
|
||||
label: "Vault",
|
||||
page: "vault",
|
||||
iconKey: "lock",
|
||||
},
|
||||
{
|
||||
label: "Generatorbutverylongversion",
|
||||
page: "generator",
|
||||
iconKey: "generate",
|
||||
},
|
||||
{
|
||||
label: "Send",
|
||||
page: "send",
|
||||
iconKey: "send",
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
page: "settings",
|
||||
iconKey: "cog",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-justify-start">
|
||||
<ng-content select="[actionFooter]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "popup-footer",
|
||||
templateUrl: "popup-footer.component.html",
|
||||
standalone: true,
|
||||
imports: [],
|
||||
})
|
||||
export class PopupFooterComponent {}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<header class="tw-p-4 tw-border-0 tw-border-solid tw-border-b tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between">
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<!-- not the right icon -->
|
||||
<i
|
||||
class="bwi bwi-angle-left tw-font-bold"
|
||||
aria-hidden="true"
|
||||
*ngIf="variant === 'sub-page'"
|
||||
></i>
|
||||
<!-- see if this doesnt need the ! override -->
|
||||
<h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary" type="button">
|
||||
<i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
|
||||
Add
|
||||
</button>
|
||||
<!-- TODO update icon -->
|
||||
<button bitIconButton="bwi-external-link" size="small" *ngIf="!poppedOut" type="button">
|
||||
Pop out
|
||||
</button>
|
||||
<!-- TODO reference browser/src/auth/popup/account-switching/current-account -->
|
||||
<button
|
||||
class="tw-bg-transparent tw-border-none"
|
||||
*ngIf="variant === 'top-level' || variant === 'top-level-action'"
|
||||
type="button"
|
||||
>
|
||||
<bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { CommonModule } from "@angular/common";
|
||||
import { Component, Input } from "@angular/core";
|
||||
|
||||
import { AvatarModule } from "@bitwarden/components/src/avatar";
|
||||
import { ButtonModule } from "@bitwarden/components/src/button";
|
||||
import { IconButtonModule } from "@bitwarden/components/src/icon-button";
|
||||
import { TypographyModule } from "@bitwarden/components/src/typography";
|
||||
|
||||
@Component({
|
||||
selector: "popup-header",
|
||||
templateUrl: "popup-header.component.html",
|
||||
standalone: true,
|
||||
imports: [TypographyModule, CommonModule, AvatarModule, ButtonModule, IconButtonModule],
|
||||
})
|
||||
export class PopupHeaderComponent {
|
||||
@Input() variant: "top-level" | "top-level-action" | "sub-page" = "top-level-action";
|
||||
@Input() pageTitle: string;
|
||||
// Not the best solution
|
||||
@Input() poppedOut: boolean = false;
|
||||
// TODO avatar Input
|
||||
// TODO button functionality
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="tw-border tw-h-full tw-border-secondary-300 tw-border-solid tw-flex tw-flex-col">
|
||||
<ng-content select="[popupHeader]"></ng-content>
|
||||
<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-scroll">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</main>
|
||||
<ng-content select="[popupFooter]"></ng-content>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Component } from "@angular/core";
|
||||
|
||||
@Component({
|
||||
selector: "popup-layout",
|
||||
templateUrl: "popup-layout.component.html",
|
||||
standalone: true,
|
||||
})
|
||||
export class PopupLayoutComponent {}
|
||||
|
|
@ -3,14 +3,12 @@ import { Component, importProvidersFrom } from "@angular/core";
|
|||
import { RouterModule } from "@angular/router";
|
||||
import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
|
||||
|
||||
import { ButtonModule } from "../button";
|
||||
import { ButtonModule } from "@bitwarden/components/src/button";
|
||||
|
||||
import {
|
||||
PopupLayoutComponent,
|
||||
PopupHeaderComponent,
|
||||
PopupFooterComponent,
|
||||
PopupBottomNavigationComponent,
|
||||
} from "./popup-layout.component";
|
||||
import { PopupBottomNavigationComponent } from "./popup-bottom-navigation.component";
|
||||
import { PopupFooterComponent } from "./popup-footer.component";
|
||||
import { PopupHeaderComponent } from "./popup-header.component";
|
||||
import { PopupLayoutComponent } from "./popup-layout.component";
|
||||
|
||||
@Component({
|
||||
selector: "vault-placeholder",
|
||||
|
|
@ -36,6 +36,10 @@ import { TwoFactorComponent } from "../auth/popup/two-factor.component";
|
|||
import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
|
||||
import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
|
||||
import { HeaderComponent } from "../platform/popup/header.component";
|
||||
import { PopupBottomNavigationComponent } from "../platform/popup/layout/popup-bottom-navigation.component";
|
||||
import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component";
|
||||
import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
|
||||
import { PopupLayoutComponent } from "../platform/popup/layout/popup-layout.component";
|
||||
import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component";
|
||||
import { GeneratorComponent } from "../tools/popup/generator/generator.component";
|
||||
import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
|
||||
|
|
@ -108,6 +112,10 @@ import "../platform/popup/locales";
|
|||
AccountComponent,
|
||||
ButtonModule,
|
||||
ExportScopeCalloutComponent,
|
||||
PopupLayoutComponent,
|
||||
PopupBottomNavigationComponent,
|
||||
PopupFooterComponent,
|
||||
PopupHeaderComponent,
|
||||
],
|
||||
declarations: [
|
||||
ActionButtonsComponent,
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
// file location TBD, template files TBD
|
||||
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, Input } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
import { AvatarModule } from "../avatar";
|
||||
import { ButtonModule } from "../button";
|
||||
import { IconButtonModule } from "../icon-button";
|
||||
import { LinkModule } from "../link";
|
||||
import { TypographyModule } from "../typography";
|
||||
|
||||
@Component({
|
||||
selector: "popup-layout",
|
||||
template: `
|
||||
<div class="tw-border tw-h-full tw-border-secondary-300 tw-border-solid tw-flex tw-flex-col">
|
||||
<ng-content select="[popupHeader]"></ng-content>
|
||||
<main class="tw-bg-background-alt tw-p-3 tw-flex-1 tw-overflow-y-scroll">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</main>
|
||||
<ng-content select="[popupFooter]"></ng-content>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
})
|
||||
export class PopupLayoutComponent {}
|
||||
|
||||
@Component({
|
||||
selector: "popup-header",
|
||||
template: `
|
||||
<header class="tw-p-4 tw-border-0 tw-border-solid tw-border-b tw-border-secondary-300 ">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between">
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<!-- not the right icon -->
|
||||
<i
|
||||
class="bwi bwi-angle-left tw-font-bold"
|
||||
aria-hidden="true"
|
||||
*ngIf="variant === 'sub-page'"
|
||||
></i>
|
||||
<!-- see if this doesnt need the ! override -->
|
||||
<h1 bitTypography="h3" class="!tw-mb-0 tw-text-headers">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
|
||||
<button bitButton *ngIf="variant === 'top-level-action'" buttonType="primary">
|
||||
<i class="bwi bwi-plus tw-font-bold" aria-hidden="true"></i>
|
||||
Add
|
||||
</button>
|
||||
<!-- TODO update icon -->
|
||||
<button bitIconButton="bwi-external-link" size="small" *ngIf="!poppedOut">Pop out</button>
|
||||
<!-- TODO reference browser/src/auth/popup/account-switching/current-account -->
|
||||
<button
|
||||
class="tw-bg-transparent tw-border-none"
|
||||
*ngIf="variant === 'top-level' || variant === 'top-level-action'"
|
||||
>
|
||||
<bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [TypographyModule, CommonModule, AvatarModule, ButtonModule, IconButtonModule],
|
||||
})
|
||||
export class PopupHeaderComponent {
|
||||
@Input() variant: "top-level" | "top-level-action" | "sub-page" = "top-level-action";
|
||||
@Input() pageTitle: string;
|
||||
// Not the best solution
|
||||
@Input() poppedOut: boolean = false;
|
||||
// TODO avatar Input
|
||||
// TODO button functionality
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: "popup-footer",
|
||||
template: `
|
||||
<footer class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-justify-start">
|
||||
<ng-content select="[actionFooter]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [],
|
||||
})
|
||||
export class PopupFooterComponent {}
|
||||
|
||||
@Component({
|
||||
selector: "popup-bottom-navigation",
|
||||
template: `
|
||||
<footer class="tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300">
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto">
|
||||
<div class="tw-flex tw-flex-1">
|
||||
<a
|
||||
*ngFor="let button of navButtons"
|
||||
class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 hover:tw-no-underline hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus:tw-rounded-lg focus:tw-border-primary-500 "
|
||||
[ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
|
||||
title="{{ button.label }}"
|
||||
routerLink="/{{ button.page }}"
|
||||
routerLinkActive
|
||||
#rla="routerLinkActive"
|
||||
>
|
||||
<i
|
||||
*ngIf="!rla.isActive"
|
||||
class="bwi bwi-lg bwi-{{ button.iconKey }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<i
|
||||
*ngIf="rla.isActive"
|
||||
class="bwi bwi-lg bwi-{{ button.iconKey }}-f"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span
|
||||
class="tw-truncate tw-max-w-full"
|
||||
[ngClass]="!rla.isActive && 'group-hover:tw-underline'"
|
||||
>{{ button.label }}</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [CommonModule, LinkModule, RouterModule],
|
||||
})
|
||||
export class PopupBottomNavigationComponent {
|
||||
// TODO button functionality
|
||||
|
||||
navButtons = [
|
||||
{
|
||||
label: "Vault",
|
||||
page: "vault",
|
||||
iconKey: "lock",
|
||||
},
|
||||
{
|
||||
label: "Generatorbutverylongversion",
|
||||
page: "generator",
|
||||
iconKey: "generate",
|
||||
},
|
||||
{
|
||||
label: "Send",
|
||||
page: "send",
|
||||
iconKey: "send",
|
||||
},
|
||||
{
|
||||
label: "Settings",
|
||||
page: "settings",
|
||||
iconKey: "cog",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ config.content = [
|
|||
"libs/components/src/**/*.{html,ts,mdx}",
|
||||
"libs/auth/src/**/*.{html,ts,mdx}",
|
||||
"apps/web/src/**/*.{html,ts,mdx}",
|
||||
"apps/browser/src/**/*.{html,ts,mdx}",
|
||||
"bitwarden_license/bit-web/src/**/*.{html,ts,mdx}",
|
||||
".storybook/preview.tsx",
|
||||
];
|
||||
|
|
|
|||
|
|
@ -38,6 +38,16 @@
|
|||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"include": ["apps/web/src/**/*", "libs/*/src/**/*", "bitwarden_license/bit-web/src/**/*"],
|
||||
"exclude": ["apps/web/src/**/*.spec.ts", "libs/*/src/**/*.spec.ts", "**/*.spec-util.ts"]
|
||||
"include": [
|
||||
"apps/web/src/**/*",
|
||||
"apps/browser/src/**/*",
|
||||
"libs/*/src/**/*",
|
||||
"bitwarden_license/bit-web/src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"apps/web/src/**/*.spec.ts",
|
||||
"apps/browser/src/**/*.spec.ts",
|
||||
"libs/*/src/**/*.spec.ts",
|
||||
"**/*.spec-util.ts"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue