feat(accordion, accordion-item): add component tokens (#9861)

**Related Issue:** #7180 ## Summary adds new component tokens, e2e tests, demo page examples, and chromatic theme tests. ### New CSS variables --calcite-accordion-border-color: Specifies the component's border color. --calcite-accordion-background-color: Specifies the component's background color. --calcite-accordion-text-color: Specifies the component's text color. --calcite-accordion-text-color-hover: Specifies the component's main text color on hover. --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed. --------- Co-authored-by: Kitty Hurley <khurley@esri.com>
Esri · Aug 13, 2024 · 48f7f08 · 48f7f08
1 parent 529bb5a
commit 48f7f08
Show file tree

Hide file tree

Showing 12 changed files with 445 additions and 184 deletions.
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden, focusable } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden, themed, focusable } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, IDS, SLOTS } from "./resources";
 
@@ -24,6 +24,67 @@ describe("calcite-accordion-item", () => {
     focusable("calcite-accordion-item");
   });
 
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
+          >content</calcite-accordion-item
+        >`,
+        {
+          "--calcite-accordion-text-color": [
+            {
+              shadowSelector: `.${CSS.content}`,
+              targetProp: "color",
+            },
+            {
+              shadowSelector: `.${CSS.expandIcon}`,
+              targetProp: "color",
+            },
+            {
+              shadowSelector: `.${CSS.description}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-border-color": [
+            {
+              shadowSelector: `.${CSS.content}`,
+              targetProp: "borderBlockEndColor",
+            },
+            {
+              shadowSelector: `.${CSS.header}`,
+              targetProp: "borderBlockEndColor",
+            },
+          ],
+        },
+      );
+    });
+    describe("expanded", () => {
+      themed(
+        html`<calcite-accordion-item heading="Heading" description="Description" expanded
+          >content</calcite-accordion-item
+        >`,
+        {
+          "--calcite-accordion-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.description}`,
+              targetProp: "color",
+            },
+          ],
+          "--calcite-accordion-text-color-pressed": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+          },
+        },
+      );
+    });
+  });
+
   it("properly uses ARIA and roles", async () => {
     // this test covers a11y relationships not reported by axe-core/accessible test helper