mirror of
https://github.com/bitwarden/browser
synced 2026-02-20 11:24:07 +00:00
651cb7bbb2
* wip * wip * implement new control flow syntax * new landing helper components * add missing imports to header * create max width container * create landing card component * address claude feedback * fix center aligned text * ensure secondary content is centered for now * only render container when there is content * remove max width container * remove constructor init of variable * remove unnecessary styling * build styling into helper components * ensure content grows * ensure content takes allowed width * apply padding to elements instead of header and check for projected content * use Array.from to filter nodes * fix logo width * use has selector to apply actions styles, simplify heading padding * remove unneeded content projection * remove unneeded comment * use modern control flow for story * update max width classes to signal and remove switch * make logo input readonly * remove variables * remove object type * fix width types usage * add comments about component usage * fix broken variable reference * fix broken max width class usage * only appyly y padding to header actions
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
|
|
|
|
export const LandingContentMaxWidth = ["md", "lg", "xl", "2xl", "3xl", "4xl"] as const;
|
|
|
|
export type LandingContentMaxWidthType = (typeof LandingContentMaxWidth)[number];
|
|
|
|
/**
|
|
* Main content container for landing pages with configurable max-width constraints.
|
|
*
|
|
* @remarks
|
|
* This component provides:
|
|
* - Centered content area with alternative background color
|
|
* - Configurable maximum width to control content readability
|
|
* - Content projection slots for hero section and main content
|
|
* - Responsive padding and layout
|
|
*
|
|
* Use this component inside `bit-landing-layout` to wrap your main page content.
|
|
* Optionally include a `bit-landing-hero` as the first child for consistent hero section styling.
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <bit-landing-content [maxWidth]="'xl'">
|
|
* <bit-landing-hero
|
|
* [icon]="lockIcon"
|
|
* [title]="'Welcome'"
|
|
* [subtitle]="'Get started with your account'"
|
|
* ></bit-landing-hero>
|
|
* <bit-landing-card>
|
|
* <!-- Your form or content here -->
|
|
* </bit-landing-card>
|
|
* </bit-landing-content>
|
|
* ```
|
|
*/
|
|
@Component({
|
|
selector: "bit-landing-content",
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
templateUrl: "./landing-content.component.html",
|
|
host: {
|
|
class: "tw-grow tw-flex tw-flex-col",
|
|
},
|
|
})
|
|
export class LandingContentComponent {
|
|
/**
|
|
* Max width of the landing layout container.
|
|
*
|
|
* @default "md"
|
|
*/
|
|
readonly maxWidth = input<LandingContentMaxWidthType>("md");
|
|
|
|
private readonly maxWidthClassMap: Record<LandingContentMaxWidthType, string> = {
|
|
md: "tw-max-w-md",
|
|
lg: "tw-max-w-lg",
|
|
xl: "tw-max-w-xl",
|
|
"2xl": "tw-max-w-2xl",
|
|
"3xl": "tw-max-w-3xl",
|
|
"4xl": "tw-max-w-4xl",
|
|
};
|
|
|
|
readonly maxWidthClasses = computed(() => {
|
|
const maxWidthClass = this.maxWidthClassMap[this.maxWidth()];
|
|
return `tw-flex tw-flex-col tw-w-full ${maxWidthClass}`;
|
|
});
|
|
}
|