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

[PM-3388] AnonLayout Component (#6424)

Browse Source 
* setup anon-layout component

* add story with content

* simplify stories and add title input

* add responsiveness

* adjust border styling

* add logo

* add logo

* mock PlatformUtilsService

* more responsivness

* add secondary content

* add stories and clarifying comments

* add more to responsiveness

* Update libs/components/tailwind.config.js

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/components/tailwind.config.base.js

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/auth/src/components/anon-layout.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* refactor: use bit-icon instead of css file, add auth- prefix, adjust tailwind settings

* account for longer content

* allow for adding an icon above logo

* simplify stories by removing unnecessary styling

* delete duplicate logo and minify logo and icon

* remove componentWrapperDecorator

* change subTitle to subtitle

* use bitTypography

* add accessibility title and use tw class for fill color

* add <title> element to SVG

* typography update and minor styling updates for stories

* match breakpoint for logo and h1

* reduce spacing between sections

* move to new folder

* add closing tag

* make fields protected

* use svg directly

* refactor icons

* revert to allow for additional icons in the future

* decouple icon from component

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
rr-bw
2024-03-06 09:32:50 -08:00
committed by GitHub
parent 5dcc035245
commit b3e4ecc568
6 changed files with 185 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
libs/auth/src/angular/anon-layout/anon-layout.component.ts Normal file
View File

@@ -0,0 +1,31 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { IconModule, Icon } from "../../../../components/src/icon";
import { TypographyModule } from "../../../../components/src/typography";
import { BitwardenLogo } from "../../icons/bitwarden-logo";
@Component({
standalone: true,
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [IconModule, CommonModule, TypographyModule],
})
export class AnonLayoutComponent {
@Input() title: string;
@Input() subtitle: string;
@Input() icon: Icon;
protected logo = BitwardenLogo;
protected version: string;
protected year = "2024";
constructor(private platformUtilsService: PlatformUtilsService) {}
async ngOnInit() {
this.year = new Date().getFullYear().toString();
this.version = await this.platformUtilsService.getApplicationVersion();
}
}