test(stepper-item): add token theming tests (#9486)

**Related Issue:** #7180 ## Summary Add token theming tests for `stepper-item`.
Esri · Jun 2, 2024 · f42fdf7 · f42fdf7
1 parent 97dd07d
commit f42fdf7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
@@ -1,6 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { disabled, renders, hidden, t9n } from "../../tests/commonTests";
+import { disabled, renders, hidden, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-stepper-item", () => {
   describe("renders", () => {
@@ -36,4 +38,39 @@ describe("calcite-stepper-item", () => {
     await stepperItem.click();
     expect(stepperItemSelect).toHaveReceivedEventTimes(1);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-stepper-item-description-text-color": {
+          shadowSelector: `.${CSS.stepperItemDescription}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-heading-text-color": {
+          shadowSelector: `.${CSS.stepperItemHeading}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-icon-color": {
+          shadowSelector: `calcite-icon`,
+          targetProp: "--calcite-icon-color",
+        },
+        "--calcite-stepper-item-number-text-color": {
+          shadowSelector: `.${CSS.stepperItemNumber}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+      };
+      themed(
+        html`
+          <calcite-stepper-item heading="Confirm and complete" icon numbered description="Some subtext">
+            <div>Step 1 Content Goes Here</div>
+          </calcite-stepper-item>
+        `,
+        tokens,
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -113,7 +113,7 @@
     h-3
     flex-shrink-0
     self-start;
-  color: var(
+  --calcite-icon-color: var(
     --calcite-stepper-item-icon-color,
     var(--calcite-internal-stepper-item-icon-color, var(--calcite-color-text-3))
   );