Skip to content

Commit 5a4b003

Browse files
thelukewaltonthelukewalton
authored
style(HMX-5599): Update In Page Banner (#165)
1 parent a45c558 commit 5a4b003

4 files changed

Lines changed: 283 additions & 121 deletions

File tree

‎src/components/in-page-banner/in-page-banner.styles.js‎

Lines changed: 76 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,125 @@
11
import { css } from "lit";
22
export default css`
33
:host {
4+
--banner-background-color: var(--surface-default);
5+
--banner-border-color: var(--border-default);
6+
--banner-foreground-color: var(--main-default);
7+
--banner-icon-color: var(--main-default);
8+
49
display: flex;
5-
flex-direction: row;
10+
flex-direction: column;
611
padding: var(--spacing-medium);
712
justify-content: center;
813
align-items: center;
9-
border: var(--border-size-small) solid;
10-
color: var(--main-default);
11-
12-
> .leading {
13-
padding-right: var(--spacing-small);
14-
padding-top: var(--spacing-0-5);
15-
align-self: stretch;
16-
--icon-size: 20px;
17-
}
14+
border: var(--border-size-small) solid var(--banner-border-color);
15+
color: var(--banner-foreground-color);
16+
background-color: var(--banner-background-color);
1817
19-
> .trailing {
20-
flex: 1;
18+
> .container {
2119
display: flex;
22-
flex-direction: column;
23-
gap: var(--spacing-minimum);
20+
flex-direction: row;
21+
width: 100%;
2422
25-
> .header {
23+
> .center {
2624
display: flex;
27-
flex-direction: row;
28-
justify-content: space-between;
25+
flex-direction: column;
26+
flex: 1;
2927
30-
zeta-icon-button {
31-
margin-top: -4px;
32-
margin-right: -4px;
33-
--icon-button-color: transparent;
34-
--icon-button-icon-color: var(--main-default);
35-
cursor: pointer;
28+
> div[part="header"] {
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: space-between;
32+
33+
> .title {
34+
font: var(--label-large);
35+
}
3636
}
3737
38-
> .title {
39-
font: var(--label-large);
38+
> div[part="body"] {
39+
max-width: calc(100% - var(--spacing-3xl));
40+
margin-top: var(--spacing-0-5);
41+
margin-top: var(--spacing-minimum);
42+
margin-right: var(--spacing-3xl);
43+
font: var(--body-small);
44+
45+
> ::slotted(*) {
46+
max-width: 100%;
47+
height: auto;
48+
}
4049
}
4150
}
42-
> .body {
43-
margin-top: var(--spacing-minimum);
44-
margin-right: var(--spacing-3xl);
45-
font: var(--body-small);
46-
}
4751
48-
> .content {
49-
max-width: calc(100% - var(--spacing-3xl));
52+
> .leading {
53+
padding-right: var(--spacing-small);
54+
padding-top: var(--spacing-0-5);
55+
align-self: stretch;
56+
--icon-size: 20px;
5057
51-
> ::slotted(*) {
52-
max-width: 100%;
53-
height: auto;
58+
zeta-icon {
59+
--icon-color: var(--banner-icon-color);
5460
}
5561
}
5662
57-
> .footer {
63+
> .trailing {
5864
display: flex;
59-
flex-direction: row;
60-
gap: var(--spacing-small);
61-
max-width: calc(100% - var(--spacing-3xl));
65+
flex-direction: column;
66+
gap: var(--spacing-minimum);
67+
68+
zeta-icon-button {
69+
margin-top: -4px;
70+
margin-right: -4px;
71+
--icon-button-color: transparent;
72+
--icon-button-icon-color: var(--main-default);
73+
cursor: pointer;
74+
}
6275
}
6376
}
77+
> div[part="footer"] {
78+
display: flex;
79+
flex-direction: row;
80+
gap: var(--spacing-small);
81+
max-width: calc(100% - var(--spacing-3xl));
82+
align-items: flex-start;
83+
width: 100%;
84+
}
6485
}
6586
6687
:host([rounded]),
67-
:host([rounded]) .content ::slotted(*) {
88+
:host([rounded]) div[part="body"] ::slotted(*) {
6889
border-radius: var(--radius-minimal);
6990
}
7091
7192
:host([status="default"]) {
72-
border-color: var(--border-default);
73-
background: var(--surface-default);
74-
fill: var(--main-default);
93+
--banner-border-color: var(--border-default);
94+
--banner-background-color: var(--surface-default);
95+
--banner-icon-color: var(--main-default);
7596
}
7697
7798
:host([status="info"]) {
78-
border-color: var(--border-info);
79-
background: var(--surface-info-subtle);
80-
zeta-icon {
81-
--icon-color: var(--main-info);
82-
}
99+
--banner-border-color: var(--border-info);
100+
--banner-background-color: var(--surface-info-subtle);
101+
--banner-icon-color: var(--main-info);
83102
}
84103
85104
:host([status="positive"]) {
86-
border-color: var(--border-positive);
87-
background: var(--surface-positive-subtle);
88-
zeta-icon {
89-
--icon-color: var(--main-positive);
90-
}
105+
--banner-border-color: var(--border-positive);
106+
--banner-background-color: var(--surface-positive-subtle);
107+
--banner-icon-color: var(--main-positive);
91108
}
92109
93110
:host([status="warning"]) {
94-
border-color: var(--border-warning);
95-
background: var(--surface-warning-subtle);
96-
97-
zeta-icon {
98-
--icon-color: var(--main-warning);
99-
}
111+
--banner-border-color: var(--border-warning);
112+
--banner-background-color: var(--surface-warning-subtle);
113+
--banner-icon-color: var(--main-warning);
100114
}
101115
102116
:host([status="negative"]) {
103-
border-color: var(--border-negative);
104-
background: var(--surface-negative-subtle);
105-
zeta-icon {
106-
--icon-color: var(--main-negative);
107-
}
117+
--banner-border-color: var(--border-negative);
118+
--banner-background-color: var(--surface-negative-subtle);
119+
--banner-icon-color: var(--main-negative);
108120
}
109121
110122
::slotted([slot="action"]) {
111123
margin-top: var(--spacing-large);
112124
}
113-
114-
::slotted([slot="leadingAction"]:not(zeta-button)),
115-
::slotted([slot="trailingAction"]:not(zeta-button)) {
116-
display: none;
117-
}
118125
`;

‎src/components/in-page-banner/in-page-banner.ts‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,69 @@
1-
import { html, LitElement } from "lit";
1+
import { html, LitElement, nothing } from "lit";
22
import { customElement, property } from "lit/decorators.js";
33
import styles from "./in-page-banner.styles.js";
44
import { Contourable } from "../../mixins/mixins.js";
55
import "../button/icon-button/icon-button.js";
66
import { ZetaCloseEvent } from "../../events.js";
7+
import type { ZetaIconName } from "@zebra-fed/zeta-icons";
78

8-
/** In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
9+
/** In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen, below a top app bar. Only one banner should be shown at a time.
910
*
1011
* This component represents a banner that can be displayed within a page.
11-
* It can have a title, body text, and various status options.
12+
* It can have a title, body content, and various status options.
1213
*
1314
* @slot - The main content of the banner.
1415
* @slot action - The action buttons.
1516
*
17+
* @part header - The header section containing the title.
18+
* @part body - The body section containing the main content.
19+
* @part footer - The footer section containing action buttons.
20+
*
1621
* @event {CustomEvent<ZetaCloseEventDetail>} close - Fired when the close icon is clicked.
1722
*
23+
* @cssproperty --banner-border-color - The border color of the banner.
24+
* @cssproperty --banner-background-color - The background color of the banner.
25+
* @cssproperty --banner-foreground-color - The foreground color of the banner.
26+
* @cssproperty --banner-icon-color - The icon color of the banner.
27+
*
28+
*
1829
* @figma https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=21156-27071
1930
* @storybook https://design.zebra.com/web/storybook/?path=/docs/components-in-page-banner--docs
2031
*/
2132
@customElement("zeta-in-page-banner")
2233
export class ZetaInPageBanner extends Contourable(LitElement) {
23-
/**
24-
* Title of the banner, displayed at the top.
25-
*/
34+
/** Title of the banner, displayed at the top. */
2635
@property({ type: String }) title: string = "";
2736

28-
/**
29-
* Status of the component.
30-
*/
37+
/** Status of the component. */
3138
@property({ type: String, reflect: true }) status: "default" | "info" | "positive" | "warning" | "negative" = "default";
3239

40+
/** Whether the banner can be closed by the user. */
41+
@property({ type: Boolean }) canClose: boolean = true;
42+
43+
/** Whether the icon should be displayed. */
44+
@property({ type: Boolean }) showIcon: boolean = true;
45+
46+
/** Custom icon to replace default.
47+
*
48+
* Default icons are:
49+
* - positive: check_circle
50+
* - negative: error
51+
* - warning: warning
52+
* - info: info
53+
* - default: info
54+
*/
55+
@property({ type: String }) icon?: ZetaIconName;
56+
3357
close() {
3458
this.remove();
3559
this.dispatchEvent(new ZetaCloseEvent().toEvent());
3660
}
3761
static styles = [styles, super.styles ?? []];
3862

3963
private getIcon = () => {
64+
if (this.icon) {
65+
return this.icon;
66+
}
4067
switch (this.status) {
4168
case "positive":
4269
return "check_circle";
@@ -51,19 +78,25 @@ export class ZetaInPageBanner extends Contourable(LitElement) {
5178

5279
protected render() {
5380
return html`
54-
<div class="leading"><zeta-icon .rounded=${this.rounded}>${this.getIcon()}</zeta-icon></div>
55-
<div class="trailing">
56-
<div class="header">
57-
<div class="title">${this.title}</div>
58-
<zeta-icon-button flavor="text" size="small" shape=${this.rounded ? "rounded" : "sharp"} @click=${() => this.close()}>close</zeta-icon-button>
59-
</div>
60-
<div class="content">
61-
<slot></slot>
81+
<div class="container">
82+
${this.showIcon ? html` <div class="leading"><zeta-icon .rounded=${this.rounded}>${this.getIcon()}</zeta-icon></div>` : nothing}
83+
<div class="center">
84+
<div part="header">${this.title ? html`<div class="title">${this.title}</div>` : nothing}</div>
85+
<div part="body">
86+
<slot></slot>
87+
</div>
6288
</div>
63-
<div class="footer">
64-
<slot name="action"></slot>
89+
<div class="trailing">
90+
${this.canClose
91+
? html`<zeta-icon-button flavor="text" size="small" shape=${this.rounded ? "rounded" : "sharp"} @click=${() => this.close()}>
92+
close
93+
</zeta-icon-button>`
94+
: nothing}
6595
</div>
6696
</div>
97+
<div part="footer">
98+
<slot name="action"></slot>
99+
</div>
67100
`;
68101
}
69102
}

0 commit comments

Comments
 (0)