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

[CL-294] Make section-header work across clients (#9386)

Browse Source
This commit is contained in:
Victoria League
2024-06-05 15:07:00 -04:00
committed by GitHub
parent bf51469404
commit d3f1992ad5
13 changed files with 281 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
libs/components/src/section/section.stories.ts
View File

@@ -1,15 +1,24 @@
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
import { CardComponent } from "../card";
import { IconButtonModule } from "../icon-button";
import { ItemModule } from "../item";
import { TypographyModule } from "../typography";
import { SectionComponent } from "./section.component";
import { SectionComponent, SectionHeaderComponent } from "./";
export default {
title: "Component Library/Section",
component: SectionComponent,
decorators: [
moduleMetadata({
imports: [TypographyModule],
imports: [
TypographyModule,
SectionHeaderComponent,
CardComponent,
IconButtonModule,
ItemModule,
],
}),
componentWrapperDecorator((story) => `<div class="tw-text-main">${story}</div>`),
],
@@ -17,19 +26,149 @@ export default {
type Story = StoryObj<SectionComponent>;
/** Sections are simple containers that apply a responsive bottom margin. They often contain a heading. */
export const Default: Story = {
render: (args) => ({
props: args,
template: `
render: () => ({
template: /*html*/ `
<bit-section>
<bit-section-header>
<h2 bitTypography="h2">Foo</h2>
<p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
</bit-section-header>
<p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
</bit-section>
<bit-section>
<bit-section-header>
<h2 bitTypography="h2">Bar</h2>
<p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
</bit-section-header>
<p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
</bit-section>
`,
}),
};
export const HeaderVariants: Story = {
render: () => ({
template: /*html*/ `
<bit-section-header>
<h2 bitTypography="h6">
Title only
</h2>
</bit-section-header>
<bit-section-header>
<h2 bitTypography="h6">
Title with icon button suffix
</h2>
<button bitIconButton="bwi-refresh" size="small"></button>
</bit-section-header>
`,
}),
};
export const HeaderEndSlotVariants: Story = {
render: () => ({
template: /*html*/ `
<bit-section-header>
<h2 bitTypography="h6">
Title with end slot text
</h2>
<span bitTypography="body2" slot="end">13</span>
</bit-section-header>
<bit-section-header>
<h2 bitTypography="h6">
Title with end slot icon button
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
`,
}),
};
export const HeaderWithPadding: Story = {
render: () => ({
template: /*html*/ `
<div class="tw-bg-background-alt tw-p-2">
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
Card as immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<bit-card>
<h3 bitTypography="h3">bit-section-header has padding</h3>
</bit-card>
</bit-section>
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
Card nested in immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<div>
<bit-card>
<h3 bitTypography="h3">bit-section-header has padding</h3>
</bit-card>
</div>
</bit-section>
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
Item as immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<bit-item>
<bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
</bit-item>
</bit-section>
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
Item nested in immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<bit-item-group>
<bit-item>
<bit-item-content bitTypography="body1">bit-section-header has padding</bit-item-content>
</bit-item>
</bit-item-group>
</bit-section>
</div>
`,
}),
};
export const HeaderWithoutPadding: Story = {
render: () => ({
template: /*html*/ `
<div class="tw-bg-background-alt tw-p-2">
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
No card or item used
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<div>
<h3 bitTypography="h3">just a div, so bit-section-header has no padding</h3>
</div>
</bit-section>
<bit-section>
<bit-section-header>
<h2 bitTypography="h6">
Card nested in non-immediate sibling
</h2>
<button bitIconButton="bwi-star" size="small" slot="end"></button>
</bit-section-header>
<div class="tw-text-main">
a div here
</div>
<bit-card>
<h3 bitTypography="h3">bit-section-header has no padding</h3>
</bit-card>
</bit-section>
</div>
`,
}),
};