Skip to content

Commit

Permalink
Add glass token (#1853)
Browse files Browse the repository at this point in the history 
* chore: glass token and brandvisual sandbox background

* chore: increment build version

* chore: minor refactoring
  • Loading branch information
@NotNestor
NotNestor authored Dec 19, 2024
1 parent 2662953 commit b58428e
Show file tree
Hide file tree
Showing 12 changed files with 173 additions and 97 deletions.
2 changes: 1 addition & 1 deletion web-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@momentum-ui/web-components",
"version": "2.16.10",
"version": "2.16.11",
"author": "Yana Harris",
"license": "MIT",
"repository": "https://github.com/momentum-design/momentum-ui.git",
Expand Down
119 changes: 61 additions & 58 deletions web-components/src/[sandbox]/examples/tabs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,69 +514,72 @@ export class TabsTemplateSandbox extends LitElement {
</button>
`}
</md-tabs>
<h3>Allows the tab index to be changed programmatically without requiring a mouse click event on the tab item</h3>
<md-toggle-switch @click=${() => this.handleTabIndexChange()}>
Programmatically change tab index
</md-toggle-switch>
<div>
<md-tabs justified selected-index="${this.selectedTabIndex}">
<md-tab slot="tab" aria-label="Consult Label">
<span>Consult</span>
</md-tab>
<md-tab-panel slot="panel">
<md-list role="listbox">
<md-list-item slot="list-item" aria-label="item-1" shape="rounded">
<div aria-label="item-1-div">
<div>
<p>Alan Johnson</p>
<p>1234434</p>
<h3>
Allows the tab index to be changed programmatically without requiring a mouse click event on the tab item
</h3>
<md-toggle-switch @click=${() => this.handleTabIndexChange()}>
Programmatically change tab index
</md-toggle-switch>
<div>
<md-tabs justified selected-index="${this.selectedTabIndex}">
<md-tab slot="tab" aria-label="Consult Label">
<span>Consult</span>
</md-tab>
<md-tab-panel slot="panel">
<md-list role="listbox">
<md-list-item slot="list-item" aria-label="item-1" shape="rounded">
<div aria-label="item-1-div">
<div>
<p>Alan Johnson</p>
<p>1234434</p>
</div>
</div>
</div>
</md-list-item>
<md-list-item slot="list-item" aria-label="item-2" shape="rounded">
<div aria-label="item-2-div">
<div>
<p>Mark Corrigan</p>
<p>43454334</p>
</md-list-item>
<md-list-item slot="list-item" aria-label="item-2" shape="rounded">
<div aria-label="item-2-div">
<div>
<p>Mark Corrigan</p>
<p>43454334</p>
</div>
</div>
</div>
</md-list-item>
</md-list>
</md-tab-panel>
<md-tab slot="tab" aria-label="Transfer label" aria-label="address-book">
<span>Transfer</span>
</md-tab>
<md-tab-panel slot="panel">
<md-list role="listbox">
<md-list-item slot="list-item" aria-label="item-1">
<div aria-label="item-1-div">
<div>
<p>Jermey Usborne</p>
<p>83498347</p>
</md-list-item>
</md-list>
</md-tab-panel>
<md-tab slot="tab" aria-label="Transfer label" aria-label="address-book">
<span>Transfer</span>
</md-tab>
<md-tab-panel slot="panel">
<md-list role="listbox">
<md-list-item slot="list-item" aria-label="item-1">
<div aria-label="item-1-div">
<div>
<p>Jermey Usborne</p>
<p>83498347</p>
</div>
</div>
</div>
</md-list-item>
<md-list-item slot="list-item" aria-label="item-2">
<div aria-label="item-2-div">
<div>
<p>Sophie Chapman</p>
<p>22384758</p>
</md-list-item>
<md-list-item slot="list-item" aria-label="item-2">
<div aria-label="item-2-div">
<div>
<p>Sophie Chapman</p>
<p>22384758</p>
</div>
</div>
</div>
</md-list-item>
</md-list>
</md-tab-panel>
</md-tabs>
</div>
<br />
<md-modal htmlId="modal-1" ?show=${this.isModalOpen} size="dialog" hideFooter hideHeader noExitOnEsc>
<div slot="header">
<span>Close Tab Confirmation</span>
</md-list-item>
</md-list>
</md-tab-panel>
</md-tabs>
</div>
<p>Are you sure you want to close the Tab?</p>
<md-button slot="footer" @click="${() => (this.isModalOpen = false)}">Cancel</md-button>
<md-button slot="footer" @click="${this.closeTab}" type="submit">Confirm</md-button>
</md-modal>
<br />
<md-modal htmlId="modal-1" ?show=${this.isModalOpen} size="dialog" hideFooter hideHeader noExitOnEsc>
<div slot="header">
<span>Close Tab Confirmation</span>
</div>
<p>Are you sure you want to close the Tab?</p>
<md-button slot="footer" @click="${() => (this.isModalOpen = false)}">Cancel</md-button>
<md-button slot="footer" @click="${this.closeTab}" type="submit">Confirm</md-button>
</md-modal>
</div>
</div>
`;
}
Expand Down
27 changes: 26 additions & 1 deletion web-components/src/[sandbox]/sandbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,36 @@
md-theme {
background-color: white;
color: var(--md-primary-text-color);

&.is-visual-rebrand {
background: url("/images/brand-visuals/backgrounds/operation-pop-background-light.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}


md-theme[darkTheme] {
background-color: black;
color: var(--md-primary-text-color);

&.is-visual-rebrand {
background: url("/images/brand-visuals/backgrounds/operation-pop-background-light.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}

.container {
box-sizing: border-box;
height: calc(100vh - 1.75rem);
max-width: 100%;
overflow-y: auto;
padding: 1rem;
width: 100%;
background: var(--md-primary-bg-color);
background: var(--md-glass-bg-color);
}

.container-color-bg-color-options {
Expand Down
52 changes: 37 additions & 15 deletions web-components/src/[sandbox]/sandbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { themeManager } from "@/managers/ThemeManager";
import reset from "@/wc_scss/reset.scss";
import { MobxLitElement } from "@adobe/lit-mobx";
import { customElement, html, internalProperty, PropertyValues, TemplateResult } from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import {
accordionTemplate,
advanceListTemplate,
Expand Down Expand Up @@ -86,17 +87,6 @@ export class Sandbox extends MobxLitElement {
this.selectedTab = tab;
}

protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (themeManager.isDarkMode) {
document.body.style.backgroundColor = "#000";
document.body.style.color = "#fff";
} else {
document.body.style.backgroundColor = "#fff";
document.body.style.color = "#000";
}
}

protected firstUpdated(_changedProperties: PropertyValues): void {
super.firstUpdated(_changedProperties);
}
Expand All @@ -111,6 +101,11 @@ export class Sandbox extends MobxLitElement {
if (storedDarkTheme) {
themeManager.setDarkMode(JSON.parse(storedDarkTheme));
}

const storedVisualRebrand = localStorage.getItem("is-visual-rebrand-enabled");
if (storedVisualRebrand) {
themeManager.setVisualRebrandEnabled(JSON.parse(storedVisualRebrand));
}
}

toggleSetting(event: MouseEvent) {
Expand All @@ -129,6 +124,11 @@ export class Sandbox extends MobxLitElement {
}
}

toggleVisualRebrandEnabled() {
themeManager.setVisualRebrandEnabled(!themeManager.isVisualRebrandEnabled);
localStorage.setItem("is-visual-rebrand-enabled", JSON.stringify(themeManager.isVisualRebrandEnabled));
}

themeToggle() {
return html`
<div class="toggle-container">
Expand Down Expand Up @@ -176,6 +176,17 @@ export class Sandbox extends MobxLitElement {
/>
MomentumV2
</label>
<label class="switch">
<input
type="checkbox"
name="theme-switch"
class="visual-rebrand-switch"
data-aspect="momentumV2"
@click=${this.toggleVisualRebrandEnabled}
?checked=${themeManager.isVisualRebrandEnabled}
/>
Visual rebrand
</label>
</div>
`;
}
Expand All @@ -185,10 +196,10 @@ export class Sandbox extends MobxLitElement {
<div class="container-color-bg-color-options">
<label for="color-dropdown">container color:</label>
<select id="color-dropdown" name="colors" @change=${this.handleContainerColorChange}>
<option value="--md-glass-bg-color">--md-glass-bg-color</option>
<option value="transparent">transparent</option>
<option value="--md-primary-bg-color">--md-primary-bg-color</option>
<option value="--md-secondary-bg-color">--md-secondary-bg-color</option>
<option value="--md-primary-gradient-background">--md-primary-gradient-background</option>
<option value="--md-secondary-gradient-background">--md-secondary-gradient-background</option>
<option value="--md-secondary-bg-color">--md-secondary-bg-color</option>
<option value="--md-tertiary-one-bg-color">--md-tertiary-one-bg-color</option>
<option value="--md-quaternary-bg-color">--md-md-quaternary-bg-color</option>
Expand All @@ -204,7 +215,11 @@ export class Sandbox extends MobxLitElement {
const elements = this.shadowRoot?.querySelectorAll(".container");
elements?.forEach((element) => {
const containerElement = element as HTMLElement;
containerElement.style.background = `var(${selectedColor})`;
if (selectedColor === "transparent") {
containerElement.style.background = `${selectedColor}`;
} else {
containerElement.style.background = `var(${selectedColor})`;
}
});
}

Expand Down Expand Up @@ -246,10 +261,17 @@ export class Sandbox extends MobxLitElement {
`;
}

get themeClassMap() {
return {
"theme-toggle": true,
"is-visual-rebrand": themeManager.isVisualRebrandEnabled
};
}

render() {
return html`
<md-theme
class="theme-toggle"
class="${classMap(this.themeClassMap)}"
id="app-theme"
?darkTheme=${themeManager.isDarkMode}
theme=${themeManager.themeName}
Expand Down
22 changes: 17 additions & 5 deletions web-components/src/components/button/Button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,13 @@ export namespace Button {
`;
}

get computedAriaExpand(): "true" | "false" | undefined {
if (this.ariaExpanded === "true") return "true";
else if (this.ariaExpanded === "false") return "false";

return undefined;
}

buttonTemplate(tag: Button.Tag) {
if (tag === "button") {
return html`
Expand All @@ -305,9 +312,7 @@ export namespace Button {
aria-label=${ifDefined(this.ariaLabel || undefined)}
aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
aria-live=${ifDefined(this.ariaLive || undefined)}
aria-expanded=${ifDefined(
this.ariaExpanded ? (this.ariaExpanded === "true" ? "true" : "false") : undefined
)}
aria-expanded=${ifDefined(this.computedAriaExpand)}
aria-haspopup=${ifDefined(this.ariaHaspopup === "false" ? undefined : this.ariaHaspopup)}
aria-pressed=${ifDefined(this.ariaPressed || undefined)}
aria-disabled=${ifDefined(this.disabled || this.loading || undefined)}
Expand Down Expand Up @@ -347,7 +352,7 @@ export namespace Button {
@keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
role=${this.role}
tabindex=${ifDefined(this.tabIndex || undefined)}
aria-pressed=${this.ariaPressed === "true" ? true : false}
aria-pressed=${this.ariaPressed === "true" ? "true" : "false"}
aria-label=${ifDefined(this.ariaLabel || undefined)}
aria-labelledby=${ifDefined(this.ariaLabelledBy || undefined)}
aria-live=${ifDefined(this.ariaLive || undefined)}
Expand All @@ -361,12 +366,19 @@ export namespace Button {
return nothing;
}

get buttonContainerClassMap() {
return {
"md-button__container": this.containerLarge,
"md-button__container--small": !this.containerLarge
};
}

render() {
return html`
${this.getStyles()}
${this.label
? html`
<div part="button-container" class=${`md-button__container${this.containerLarge ? "" : "--small"}`}>
<div part="button-container" class=${classMap(this.buttonContainerClassMap)}>
${this.buttonTemplate(this.tag)}
<div part="button-label" class="md-button__label">${this.label}</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions web-components/src/components/icon/Icon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ export namespace Icon {
*/
@property({ type: String }) iconSet: IconSet = "momentumUI";

private static designLookup = new Map(Object.entries(designMapping));
private static readonly designLookup = new Map(Object.entries(designMapping));

@internalProperty()
private svgIcon: HTMLElement | null = null;
Expand Down Expand Up @@ -450,7 +450,7 @@ export namespace Icon {
role="img"
aria-label=${this.ariaLabel}
title=${this.title}
aria-hidden=${ifDefined(this.ariaHidden || undefined)}
aria-hidden=${ifDefined(this.ariaHidden ?? undefined)}
@click=${(event: MouseEvent) => this.handleIconClick(event)}
>
</i>
Expand All @@ -465,7 +465,7 @@ export namespace Icon {
role="img"
aria-label=${this.ariaLabel}
title=${this.title}
aria-hidden=${ifDefined(this.ariaHidden || undefined)}
aria-hidden=${ifDefined(this.ariaHidden ?? undefined)}
@click=${(event: MouseEvent) => this.handleIconClick(event)}
>
${this.svgIcon ? this.svgIcon : nothing}
Expand Down
Loading

0 comments on commit b58428e

Please sign in to comment.