From 297142d6cd6b396ca2bd714fde829868ae952363 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 09:38:40 -0700 Subject: [PATCH 1/6] chore(themed): helpers for e2e, storybook, and demo pages --- .../calcite-components/src/components.d.ts | 2 - .../src/tests/commonTests/themed.ts | 21 +--------- .../src/utils/variableValue.ts | 42 +++++++++++++++++++ 3 files changed, 44 insertions(+), 21 deletions(-) create mode 100644 packages/calcite-components/src/utils/variableValue.ts diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index e2d6b128d7a..b78dddcf48c 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -37,7 +37,6 @@ import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; @@ -133,7 +132,6 @@ export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { OverlayPositioning as OverlayPositioning1 } from "./components"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts index 00524d01382..65dd05118ca 100644 --- a/packages/calcite-components/src/tests/commonTests/themed.ts +++ b/packages/calcite-components/src/tests/commonTests/themed.ts @@ -2,6 +2,7 @@ import { E2EElement, E2EPage } from "@stencil/core/testing"; import { toHaveNoViolations } from "jest-axe"; import { ElementHandle } from "puppeteer"; import type { RequireExactlyOne } from "type-fest"; +import { setVariableValue } from "../../utils/variableValue"; import type { ComponentTestSetup } from "./interfaces"; import { getTagAndPage } from "./utils"; @@ -101,7 +102,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component // Set test values for each token if (!setTokens[token]) { - setTokens[token] = assignTestTokenThemeValues(token); + setTokens[token] = setVariableValue(token); } // Set up styleTargets and testTargets @@ -426,21 +427,3 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise { + return new RegExp(regexStr, "g").test(token); + }); + + return value; + } catch (error) { + console.warn("token not found in tokenValueMap", token); + return "rgb(0, 191, 255)"; + } +} + +export function setCSSVariables(tokens: string[]): string { + return tokens + .map((token) => { + return `${token}: ${setVariableValue(token)};`; + }) + .join("\n"); +} From 2fc283278ea8db7fcacbbd436ce1c2e1264ebe1c Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 10:03:12 -0700 Subject: [PATCH 2/6] chore(demo-theme): demo-theme helper reference shared util --- .../calcite-components/src/components.d.ts | 2 + .../src/demos/_assets/demo-theme.ts | 69 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 packages/calcite-components/src/demos/_assets/demo-theme.ts diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index b78dddcf48c..e2d6b128d7a 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -37,6 +37,7 @@ import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; +import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; @@ -132,6 +133,7 @@ export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; +export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { OverlayPositioning as OverlayPositioning1 } from "./components"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts new file mode 100644 index 00000000000..2c30c2224f5 --- /dev/null +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -0,0 +1,69 @@ +/* + * EXAMPLE USAGE: + * + * Button + * + */ + +import { setCSSVariables } from "../../utils/variableValue"; + +export class DemoTheme extends HTMLElement { + _slot: HTMLSlotElement; + + _el: HTMLElement; + + static observedAttributes = ["tokens"]; + + constructor() { + super(); + const shadow = this.attachShadow({ mode: "open" }); + const slot = document.createElement("slot"); + shadow.append(slot); + this._slot = slot; + if (this._slot.assignedNodes().length === 1 && this._slot.assignedNodes()[0].nodeName.includes("calcite")) { + this._el = this._slot.assignedNodes()[0] as HTMLElement; + } + } + + attributeChangedCallback(name: string, oldValue: string, newValue: string): void { + if (newValue !== oldValue && name === "tokens") { + this.updateTheme(newValue); + } + } + + updateTheme(newValue: string): void { + if (typeof newValue === "string") { + let tokensList; + + try { + tokensList = JSON.parse(newValue); + } catch (error) { + tokensList = newValue.split(",").map((t) => t.trim()); + } + + if (Array.isArray(tokensList)) { + const stringifiedTheme = setCSSVariables(tokensList); + + if (this._el) { + this._el.style.cssText = stringifiedTheme; + } else { + this.setAttribute("style", stringifiedTheme); + } + } + } + } +} + +customElements.define("demo-theme", DemoTheme); From 427fa8bba0faac2d41b29f3f3c9221e38d3d0838 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 13:54:58 -0700 Subject: [PATCH 3/6] chore(demo-theme): fix imports into demo pages --- .../src/demos/_assets/demo-theme.ts | 42 ++++++++++++++++++- .../src/demos/_assets/head.ts | 4 ++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts index 2c30c2224f5..6bc5e40140f 100644 --- a/packages/calcite-components/src/demos/_assets/demo-theme.ts +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -17,7 +17,47 @@ * */ -import { setCSSVariables } from "../../utils/variableValue"; +/** + * + * Sets the value of a CSS variable to a test value. + * This is useful for testing themed components. + * + * @param token - the token as a CSS variable + * @returns string - the new value for the token + */ +export function setVariableValue(token: string): string { + const tokenValueMap = { + background$: "rgb(252, 244, 52)", + "text-color$": "rgb(239,118,39)", + "border-color$": "rgb(156, 89, 209)", + "background-color$": "rgb(44, 44, 44)", + color$: "rgb(0, 191, 255)", + highlighted$: "rgb(255, 105, 180)", + selected$: "rgb(255, 255, 255)", + shadow$: + "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", + "z-index$": "42", + "(size|space)$": "42px", + }; + + const returnVal = Object.entries(tokenValueMap).find(([regexStr]) => { + return new RegExp(regexStr, "g").test(token); + }); + + if (!returnVal) { + console.warn("token not found in tokenValueMap", token); + } + + return returnVal ? returnVal[1] : "rgb(0, 191, 255)"; +} + +export function setCSSVariables(tokens: string[]): string { + return tokens + .map((token) => { + return `${token}: ${setVariableValue(token)};`; + }) + .join("\n"); +} export class DemoTheme extends HTMLElement { _slot: HTMLSlotElement; diff --git a/packages/calcite-components/src/demos/_assets/head.ts b/packages/calcite-components/src/demos/_assets/head.ts index eeda4a8ab55..b82226531b6 100644 --- a/packages/calcite-components/src/demos/_assets/head.ts +++ b/packages/calcite-components/src/demos/_assets/head.ts @@ -18,6 +18,10 @@ { src: "demos/_assets/demo-dom-swapper.js", }, + { + src: "demos/_assets/demo-theme.js", + type: "module", + }, ]; const parseTemplate = (text: string): HTMLTemplateElement | null => { From 2aad1fe223975067e0def2c606355054520c8bd3 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 17:47:22 -0700 Subject: [PATCH 4/6] chore(cssTokenValue): rename util fle into test utils --- .../src/tests/commonTests/themed.ts | 4 +-- .../utils/cssTokenValues.ts} | 25 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) rename packages/calcite-components/src/{utils/variableValue.ts => tests/utils/cssTokenValues.ts} (67%) diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts index 65dd05118ca..363577eb8f4 100644 --- a/packages/calcite-components/src/tests/commonTests/themed.ts +++ b/packages/calcite-components/src/tests/commonTests/themed.ts @@ -2,7 +2,7 @@ import { E2EElement, E2EPage } from "@stencil/core/testing"; import { toHaveNoViolations } from "jest-axe"; import { ElementHandle } from "puppeteer"; import type { RequireExactlyOne } from "type-fest"; -import { setVariableValue } from "../../utils/variableValue"; +import { getTokenValue } from "../utils/cssTokenValues"; import type { ComponentTestSetup } from "./interfaces"; import { getTagAndPage } from "./utils"; @@ -102,7 +102,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component // Set test values for each token if (!setTokens[token]) { - setTokens[token] = setVariableValue(token); + setTokens[token] = getTokenValue(token); } // Set up styleTargets and testTargets diff --git a/packages/calcite-components/src/utils/variableValue.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts similarity index 67% rename from packages/calcite-components/src/utils/variableValue.ts rename to packages/calcite-components/src/tests/utils/cssTokenValues.ts index 5f2ea91c207..e5e34dd3ad2 100644 --- a/packages/calcite-components/src/utils/variableValue.ts +++ b/packages/calcite-components/src/tests/utils/cssTokenValues.ts @@ -6,7 +6,7 @@ * @param token - the token as a CSS variable * @returns string - the new value for the token */ -export function setVariableValue(token: string): string { +export function getTokenValue(token: string): string { const tokenValueMap = { background$: "rgb(252, 244, 52)", "text-color$": "rgb(239,118,39)", @@ -19,24 +19,29 @@ export function setVariableValue(token: string): string { "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", "z-index$": "42", "(size|space)$": "42px", - }; + } as const; - try { - const [, value] = Object.entries(tokenValueMap).find(([regexStr]) => { - return new RegExp(regexStr, "g").test(token); - }); + const match = Object.entries(tokenValueMap).find(([regexStr]) => { + return new RegExp(regexStr, "g").test(token); + }); - return value; - } catch (error) { + if (!match) { console.warn("token not found in tokenValueMap", token); - return "rgb(0, 191, 255)"; + return tokenValueMap["color$"]; } + + return match[1]; } +/** + * + * @param tokens - an array of CSS variables + * @returns a string of CSS variables with their new values. + */ export function setCSSVariables(tokens: string[]): string { return tokens .map((token) => { - return `${token}: ${setVariableValue(token)};`; + return `${token}: ${getTokenValue(token)};`; }) .join("\n"); } From ea7b003c1bb4d4147d1e31eb37c9f3b51b854efd Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 17:49:46 -0700 Subject: [PATCH 5/6] chore(demo-theme): rename function and update JSDocs --- .../src/demos/_assets/demo-theme.ts | 51 ++++++++++--------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts index 6bc5e40140f..3627e693d9a 100644 --- a/packages/calcite-components/src/demos/_assets/demo-theme.ts +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -1,22 +1,3 @@ -/* - * EXAMPLE USAGE: - * - * Button - * - */ - /** * * Sets the value of a CSS variable to a test value. @@ -25,7 +6,7 @@ * @param token - the token as a CSS variable * @returns string - the new value for the token */ -export function setVariableValue(token: string): string { +export function getTokenValue(token: string): string { const tokenValueMap = { background$: "rgb(252, 244, 52)", "text-color$": "rgb(239,118,39)", @@ -38,23 +19,43 @@ export function setVariableValue(token: string): string { "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", "z-index$": "42", "(size|space)$": "42px", - }; + } as const; - const returnVal = Object.entries(tokenValueMap).find(([regexStr]) => { + const match = Object.entries(tokenValueMap).find(([regexStr]) => { return new RegExp(regexStr, "g").test(token); }); - if (!returnVal) { + if (!match) { console.warn("token not found in tokenValueMap", token); + return tokenValueMap["color$"]; } - return returnVal ? returnVal[1] : "rgb(0, 191, 255)"; + return match[1]; } +/* + * @prop tokens - an array of CSS variables + * @returns a string of CSS variables with their new values. + * @example + * Button + */ + export function setCSSVariables(tokens: string[]): string { return tokens .map((token) => { - return `${token}: ${setVariableValue(token)};`; + return `${token}: ${getTokenValue(token)};`; }) .join("\n"); } From ff78bd356cbf496236eae002fbef7c8b6e59dbb2 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 26 Jul 2024 18:10:04 -0700 Subject: [PATCH 6/6] docs(demo-theme): add documentation --- .../src/demos/_assets/demo-theme.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/demos/_assets/demo-theme.ts b/packages/calcite-components/src/demos/_assets/demo-theme.ts index 3627e693d9a..55c02899401 100644 --- a/packages/calcite-components/src/demos/_assets/demo-theme.ts +++ b/packages/calcite-components/src/demos/_assets/demo-theme.ts @@ -36,6 +36,17 @@ export function getTokenValue(token: string): string { /* * @prop tokens - an array of CSS variables * @returns a string of CSS variables with their new values. + */ +export function setCSSVariables(tokens: string[]): string { + return tokens + .map((token) => { + return `${token}: ${getTokenValue(token)};`; + }) + .join("\n"); +} + +/** + * * @example * Button */ - -export function setCSSVariables(tokens: string[]): string { - return tokens - .map((token) => { - return `${token}: ${getTokenValue(token)};`; - }) - .join("\n"); -} - export class DemoTheme extends HTMLElement { _slot: HTMLSlotElement;