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

[PM-7343] AnonLayoutComponent Implementation Groundwork (#8585)

Browse Source 
* test implementation

* move files

* adjust import and sample router comments

* add storybook docs to anon-layout

* rename to AnonLayoutWrapperComponent

* update storybook docs

* remove references to CL and replace with 'Auth-owned'

* move AnonLayoutWrapperComponent to libs

* add pageTitle input

* add subTitle input

* translate page title/subtitle, and refactor how icon is added

* update tailwind.config and component styles

* adjust spacing between primary and secondary content

* move switch statement to wrapper

* move icon to router file

* update storybook documentation

* fix storybook text color in normal code blocks

* remove sample route

* move wrapper component back to web

* remove sample route

* update storybook docs
This commit is contained in:
rr-bw
2024-05-06 18:34:40 -07:00
committed by GitHub
parent af6a63c10b
commit 0fb352d8ed
12 changed files with 189 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
libs/auth/src/angular/anon-layout/anon-layout.stories.ts
View File

@@ -3,12 +3,12 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ButtonModule } from "../../../../components/src/button";
import { IconLock } from "../../icons/icon-lock";
import { LockIcon } from "../icons";
import { AnonLayoutComponent } from "./anon-layout.component";
class MockPlatformUtilsService implements Partial<PlatformUtilsService> {
getApplicationVersion = () => Promise.resolve("Version 2023.1.1");
getApplicationVersion = () => Promise.resolve("Version 2024.1.1");
}
export default {
@@ -28,7 +28,7 @@ export default {
args: {
title: "The Page Title",
subtitle: "The subtitle (optional)",
icon: IconLock,
icon: LockIcon,
},
} as Meta;
@@ -38,14 +38,13 @@ export const WithPrimaryContent: Story = {
render: (args) => ({
props: args,
template:
/**
* The projected content (i.e. the <div> ) and styling below is just a
* sample and could be replaced with any content and styling
*/
// Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
`
<auth-anon-layout [title]="title" [subtitle]="subtitle">
<div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
<div class="tw-max-w-md">
<div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
</div>
</auth-anon-layout>
`,
}),
@@ -55,15 +54,16 @@ export const WithSecondaryContent: Story = {
render: (args) => ({
props: args,
template:
// Notice that slot="secondary" is requred to project any secondary content:
// Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
// Notice that slot="secondary" is requred to project any secondary content.
`
<auth-anon-layout [title]="title" [subtitle]="subtitle">
<div>
<div class="tw-max-w-md">
<div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
</div>
<div slot="secondary" class="text-center">
<div slot="secondary" class="text-center tw-max-w-md">
<div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
<button bitButton>Perform Action</button>
</div>
@@ -75,14 +75,16 @@ export const WithSecondaryContent: Story = {
export const WithLongContent: Story = {
render: (args) => ({
props: args,
template: `
template:
// Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
`
<auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?">
<div>
<div class="tw-max-w-md">
<div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div slot="secondary" class="text-center">
<div slot="secondary" class="text-center tw-max-w-md">
<div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est? </p>
<button bitButton>Perform Action</button>
@@ -95,9 +97,11 @@ export const WithLongContent: Story = {
export const WithIcon: Story = {
render: (args) => ({
props: args,
template: `
template:
// Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
`
<auth-anon-layout [title]="title" [subtitle]="subtitle" [icon]="icon">
<div>
<div class="tw-max-w-md">
<div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
</div>