mirror of
https://github.com/bitwarden/browser
synced 2026-02-24 00:23:17 +00:00
Merge branch 'main' into ps/extension-refresh
This commit is contained in:
Victoria League
GitHub
@@ -40,13 +40,13 @@ export class BitFormButtonDirective implements OnDestroy {
|
||||
if (this.type === "submit") {
|
||||
buttonComponent.loading = loading;
|
||||
} else {
|
||||
buttonComponent.disabled = loading;
|
||||
buttonComponent.disabled = this.disabled || loading;
|
||||
}
|
||||
});
|
||||
|
||||
submitDirective.disabled$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
|
||||
if (this.disabled !== false) {
|
||||
buttonComponent.disabled = disabled;
|
||||
buttonComponent.disabled = this.disabled || disabled;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -33,6 +33,7 @@ const template = `
|
||||
<button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
|
||||
<button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton>Cancel</button>
|
||||
<button class="tw-mr-2" type="button" buttonType="danger" bitButton bitFormButton [bitAction]="delete">Delete</button>
|
||||
<button class="tw-mr-2" type="button" buttonType="secondary" bitButton bitFormButton [disabled]="true">Disabled</button>
|
||||
<button class="tw-mr-2" type="button" buttonType="secondary" bitIconButton="bwi-star" bitFormButton [bitAction]="delete">Delete</button>
|
||||
</form>`;
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ export class BadgeDirective implements FocusableElement {
|
||||
]
|
||||
.concat(styles[this.variant])
|
||||
.concat(this.hasHoverEffects ? hoverStyles[this.variant] : [])
|
||||
.concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
|
||||
.concat(this.truncate ? ["tw-truncate", this.maxWidthClass] : []);
|
||||
}
|
||||
@HostBinding("attr.title") get title() {
|
||||
return this.truncate ? this.el.nativeElement.textContent.trim() : null;
|
||||
@@ -65,6 +65,8 @@ export class BadgeDirective implements FocusableElement {
|
||||
*/
|
||||
@Input() truncate = true;
|
||||
|
||||
@Input() maxWidthClass: `tw-max-w-${string}` = "tw-max-w-40";
|
||||
|
||||
getFocusTarget() {
|
||||
return this.el.nativeElement;
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
|
||||
*/
|
||||
private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null {
|
||||
let result = null;
|
||||
if (tree.value === value) {
|
||||
if (tree.value !== null && tree.value === value) {
|
||||
return tree;
|
||||
}
|
||||
|
||||
@@ -183,7 +183,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnChange(option?.value);
|
||||
this.notifyOnChange(option?.value ?? null);
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
|
||||
32
libs/components/src/icon/icons/deactivated-org.ts
Normal file
32
libs/components/src/icon/icons/deactivated-org.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const DeactivatedOrg = svgIcon`
|
||||
<svg width="138" height="118" viewBox="0 0 138 118" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2929_17380)">
|
||||
<path class="tw-stroke-text-headers" d="M80.0852 15.889V11.7504C80.0852 9.75243 78.6181 8.18262 76.7509 8.18262H53.1445C51.2773 8.18262 49.8102 9.75243 49.8102 11.7504V16.0317" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M73.3568 7.06126V3.568C73.3568 1.75668 71.8648 0.333496 69.9658 0.333496H59.9285C58.0295 0.333496 56.5374 1.75668 56.5374 3.568V7.06126" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M41.9611 29.8517V20.5736C41.9611 18.658 43.4441 17.1528 45.3315 17.1528H84.5637C86.4511 17.1528 87.9341 18.658 87.9341 20.5736V83.2728" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M12.8074 103.493V32.9262C12.8074 31.0004 14.3311 29.4873 16.2703 29.4873H56.4389C58.3781 29.4873 59.9018 31.0004 59.9018 32.9262V103.493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M36.3545 39.5791V94.5225" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M47.5677 39.5791V94.5225" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M78.9634 26.1235V37.3365" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M78.9634 45.1851V56.398" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M78.9634 64.2476V75.4605" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M78.9634 83.3091V94.522" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M69.9932 26.1235V37.3365" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M69.9932 45.1851V56.398" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M69.9932 64.2476V75.4605" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M69.9932 83.3091V94.522" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M24.0202 39.5791V94.5225" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-text-headers" d="M0.473145 104.614H75.3408" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-fill-danger-600" fill-rule="evenodd" clip-rule="evenodd" d="M121.425 111.921L99.1265 73.2989C98.3006 71.8685 96.236 71.8685 95.4101 73.2989L73.1119 111.921C72.286 113.351 73.3183 115.139 74.97 115.139H119.567C121.218 115.139 122.251 113.351 121.425 111.921ZM101.604 71.8685C99.6771 68.5308 94.8595 68.5308 92.9325 71.8685L70.6343 110.49C68.7073 113.828 71.116 118 74.97 118H119.567C123.421 118 125.829 113.828 123.902 110.49L101.604 71.8685Z"/>
|
||||
<path class="tw-fill-danger-600" d="M98.2704 84.3848C98.8321 84.3848 99.2836 84.8473 99.2701 85.4088L98.8811 101.584C98.8681 102.127 98.4243 102.56 97.8814 102.56H96.6544C96.1118 102.56 95.6682 102.127 95.6547 101.585L95.254 85.4095C95.24 84.8477 95.6917 84.3848 96.2537 84.3848H98.2704Z" />
|
||||
<circle class="tw-fill-danger-600" cx="97.2682" cy="106.556" r="2.14565" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2929_17380">
|
||||
<rect width="138" height="118" class="tw-fill-danger-600"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,3 +1,5 @@
|
||||
export * from "./deactivated-org";
|
||||
export * from "./search";
|
||||
export * from "./no-access";
|
||||
export * from "./vault";
|
||||
export * from "./no-results";
|
||||
|
||||
18
libs/components/src/icon/icons/no-results.ts
Normal file
18
libs/components/src/icon/icons/no-results.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { svgIcon } from "../icon";
|
||||
|
||||
export const NoResults = svgIcon`
|
||||
<svg width="98" height="96" viewBox="0 0 98 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="tw-stroke-text-headers" d="M8.8545 86.7919L56.9901 86.7919C60.2321 86.7919 62.8603 84.1637 62.8603 80.9217L62.8603 32.2678C62.8603 30.7472 62.2702 29.2859 61.2143 28.1916L47.5536 14.0345C46.4473 12.8881 44.9225 12.2405 43.3293 12.2405L8.85451 12.2405C5.61249 12.2405 2.98431 14.8687 2.98431 18.1107L2.98431 80.9217C2.98431 84.1637 5.61248 86.7919 8.8545 86.7919Z" stroke-width="1.76106"/>
|
||||
<path class="tw-fill-background tw-stroke-text-headers" d="M18.8335 76.8125L66.9691 76.8125C70.2111 76.8125 72.8393 74.1844 72.8393 70.9423L72.8393 21.8271C72.8393 20.3144 72.2554 18.8601 71.2093 17.7675L57.5349 3.48471C56.4276 2.32814 54.8959 1.67408 53.2947 1.67408L18.8335 1.67407C15.5915 1.67407 12.9633 4.30225 12.9633 7.54427L12.9633 70.9423C12.9633 74.1844 15.5915 76.8125 18.8335 76.8125Z" stroke-width="1.76106"/>
|
||||
<path class="tw-stroke-text-headers" d="M54.3484 2.26123L54.3484 14.0016C54.3484 17.2436 56.9766 19.8718 60.2186 19.8718L72.546 19.8718" stroke-width="1.76106"/>
|
||||
<path class="tw-stroke-info-600" d="M20.0914 15.9861L43.5722 15.9861" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
|
||||
<path class="tw-stroke-info-600" d="M20.0914 30.8945L51.2034 30.8945" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
|
||||
<path class="tw-stroke-info-600" d="M20.0914 45.803L45.9203 45.803" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
|
||||
<path class="tw-stroke-info-600" d="M20.0914 60.7112L45.9203 60.7112" stroke-width="0.880529" stroke-linecap="round" stroke-dasharray="11.74 4.7"/>
|
||||
<path class="tw-fill-background tw-stroke-text-headers" d="M85.4233 53.9449C81.9863 66.772 68.6684 74.3484 55.6768 70.8674C42.6853 67.3863 34.9398 54.1659 38.3768 41.3388C41.8138 28.5117 55.1318 20.9353 68.1234 24.4163C81.1149 27.8974 88.8604 41.1178 85.4233 53.9449Z" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-stroke-info-600" d="M55.1859 41.5395C55.1859 41.5395 55.2828 39.2314 57.5434 37.273C58.8998 36.084 60.5145 35.7692 61.9678 35.7343C63.2919 35.6993 64.4868 35.9441 65.1649 36.3288C66.3921 36.9583 68.7497 38.462 68.7497 41.7144C68.7497 45.1416 66.6828 46.6804 64.3576 48.394C62.0324 50.1076 62.3667 52.3385 62.3667 54.227" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="tw-fill-info-600 tw-stroke-secondary-600" d="M62.2727 59.2015C62.759 59.2015 63.1533 58.8073 63.1533 58.321C63.1533 57.8347 62.759 57.4404 62.2727 57.4404C61.7864 57.4404 61.3922 57.8347 61.3922 58.321C61.3922 58.8073 61.7864 59.2015 62.2727 59.2015Z"/>
|
||||
<path class="tw-fill-secondary-300 tw-stroke-text-headers" d="M96.0333 89.0621L95.4703 89.5329C94.2269 90.5728 92.3758 90.4078 91.3359 89.1644L78.2766 73.5488L74.79 69.3798C74.4843 69.0105 74.6096 68.4514 75.0271 68.2155C76.7198 67.2592 78.097 65.9974 78.8894 65.1364C79.1502 64.853 79.6089 64.8477 79.856 65.1431L83.3425 69.3121L96.4018 84.9277C97.4418 86.1712 97.2768 88.0222 96.0333 89.0621Z" stroke-width="1.76106" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
`;
|
||||
@@ -1 +1,2 @@
|
||||
export * from "./section.component";
|
||||
export * from "./section-header.component";
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="tw-flex tw-justify-between tw-items-end tw-gap-1">
|
||||
<div class="[&>*]:tw-mb-0 [&>*]:tw-text-headers tw-flex tw-items-center tw-gap-1">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div class="tw-text-muted has-[button]:-tw-mb-1">
|
||||
<ng-content select="[slot=end]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
16
libs/components/src/section/section-header.component.ts
Normal file
16
libs/components/src/section/section-header.component.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { TypographyModule } from "../typography";
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
selector: "bit-section-header",
|
||||
templateUrl: "./section-header.component.html",
|
||||
imports: [TypographyModule],
|
||||
host: {
|
||||
class:
|
||||
// apply bottom and x padding when a `bit-card` or `bit-item` is the immediate sibling, or nested in the immediate sibling
|
||||
"tw-block has-[+_*_bit-card]:tw-pb-1 has-[+_bit-card]:tw-pb-1 has-[+_*_bit-item]:tw-pb-1 has-[+_bit-item]:tw-pb-1 has-[+_*_bit-card]:tw-px-1 has-[+_bit-card]:tw-px-1 has-[+_*_bit-item]:tw-px-1 has-[+_bit-item]:tw-px-1",
|
||||
},
|
||||
})
|
||||
export class SectionHeaderComponent {}
|
||||
89
libs/components/src/section/section.mdx
Normal file
89
libs/components/src/section/section.mdx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./section.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
```ts
|
||||
import { SectionComponent, SectionHeaderComponent } from "@bitwarden/components";
|
||||
```
|
||||
|
||||
# Section
|
||||
|
||||
Sections are simple containers that apply a responsive bottom margin and utilize the semantic
|
||||
`section` HTML element.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.Default} />
|
||||
</Canvas>
|
||||
|
||||
## Section Header
|
||||
|
||||
Sections often contain a heading. Use `bit-section-header` inside of the `bit-section`.
|
||||
|
||||
```html
|
||||
<bit-section>
|
||||
<bit-section-header>
|
||||
<h1 bitTypography="h1">I'm a section header</h2>
|
||||
</bit-section-header>
|
||||
<div>Section content here!</div>
|
||||
</bit-section>
|
||||
```
|
||||
|
||||
### Section Header Padding
|
||||
|
||||
When placed inside of a section with a `bit-card` or `bit-item` as the immediate next sibling (or
|
||||
nested in the immediate next sibling), the section header will automatically apply bottom and x-axis
|
||||
padding to align the header with the border radius of the card/item.
|
||||
|
||||
```html
|
||||
<bit-section>
|
||||
<bit-section-header>
|
||||
<h2 bitTypography="h6">I'm a section header</h2>
|
||||
<button bitIconButton="bwi-star" size="small" slot="end"></button>
|
||||
</bit-section-header>
|
||||
<bit-card>
|
||||
<h3 bitTypography="h3">I'm card content</h3>
|
||||
</bit-card>
|
||||
</bit-section>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.HeaderWithPadding} />
|
||||
</Canvas>
|
||||
|
||||
If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item`
|
||||
that is not a descendant of the immediate next sibling, the padding is not applied.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.HeaderWithoutPadding} />
|
||||
</Canvas>
|
||||
|
||||
### Section Header Content Slots
|
||||
|
||||
`bit-section-header` contains the following slots to help position the content:
|
||||
|
||||
| Slot | Description |
|
||||
| ------------ | ------------------------------- |
|
||||
| default | title text of the header |
|
||||
| `slot="end"` | placed at the end of the header |
|
||||
|
||||
#### Default slot
|
||||
|
||||
Anything passed to the default slot will display as part of the title. The title should be a
|
||||
`bitTypography` element, usually an `h2` styled as an `h6`.
|
||||
|
||||
Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically
|
||||
applied between the children of the default slot.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.HeaderVariants} />
|
||||
</Canvas>
|
||||
|
||||
#### End slot
|
||||
|
||||
The `end` slot will typically be used for text or an icon button.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.HeaderEndSlotVariants} />
|
||||
</Canvas>
|
||||
@@ -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>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -18,7 +18,7 @@ export type ToastOptions = {
|
||||
export class ToastService {
|
||||
constructor(private toastrService: ToastrService) {}
|
||||
|
||||
showToast(options: ToastOptions) {
|
||||
showToast(options: ToastOptions): void {
|
||||
const toastrConfig: Partial<IndividualConfig> = {
|
||||
payload: {
|
||||
message: options.message,
|
||||
|
||||
Reference in New Issue
Block a user