chore(custom-theme): refactor storybook theme for component tokens

packages/calcite-components/src/components/avatar/avatar.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 

packages/calcite-components/src/components/card/card.e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 

packages/calcite-components/src/components/list/list.e2e.ts

@@ -1,6 +1,6 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from "../../tests/commonTests";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";

packages/calcite-components/src/custom-theme.stories.ts

@@ -1,88 +1,65 @@
-import { placeholderImage } from "../.storybook/placeholderImage";
+import { accordion } from "./custom-theme/accordion";
+import { buttons } from "./custom-theme/button";
+import { card, cardTokens } from "./custom-theme/card";
+import { checkbox } from "./custom-theme/checkbox";
+import { chips } from "./custom-theme/chips";
+import { datePicker } from "./custom-theme/date-picker";
+import { dropdown } from "./custom-theme/dropdown";
+import { icon } from "./custom-theme/icon";
+import { loader } from "./custom-theme/loader";
+import { notices } from "./custom-theme/notice";
+import { pagination } from "./custom-theme/pagination";
+import { segmentedControl } from "./custom-theme/segmented-control";
+import { slider } from "./custom-theme/slider";
+import { calciteSwitch } from "./custom-theme/switch";
+import { tabs } from "./custom-theme/tabs";
 
-interface CustomThemeArgs {
-  calciteColorBrand: string;
-  calciteColorBrandHover: string;
-  calciteColorBrandPress: string;
-  calciteColorStatusInfo: string;
-  calciteColorStatusSuccess: string;
-  calciteColorStatusWarning: string;
-  calciteColorStatusDanger: string;
-  calciteColorStatusDangerHover: string;
-  calciteColorStatusDangerPress: string;
-  calciteColorBackground: string;
-  calciteColorForeground1: string;
-  calciteColorForeground2: string;
-  calciteColorForeground3: string;
-  calciteColorText1: string;
-  calciteColorText2: string;
-  calciteColorText3: string;
-  calciteColorTextInverse: string;
-  calciteColorTextLink: string;
-  calciteColorBorder1: string;
-  calciteColorBorder2: string;
-  calciteColorBorder3: string;
-  calciteColorBorderInput: string;
-  calciteUiIconColor: string;
+const globalTokens = {
+  calciteColorBrand: "#007ac2",
+  calciteColorBrandHover: "#00619b",
+  calciteColorBrandPress: "#004874",
+  calciteColorStatusInfo: "#00619b",
+  calciteColorStatusSuccess: "#35ac46",
+  calciteColorStatusWarning: "#edd317",
+  calciteColorStatusDanger: "#d83020",
+  calciteColorStatusDangerHover: "#a82b1e",
+  calciteColorStatusDangerPress: "#7c1d13",
+  calciteColorBackground: "#f8f8f8",
+  calciteColorForeground1: "#ffffff",
+  calciteColorForeground2: "#f3f3f3",
+  calciteColorForeground3: "#eaeaea",
+  calciteColorText1: "#151515",
+  calciteColorText2: "#4a4a4a",
+  calciteColorText3: "#6a6a6a",
+  calciteColorTextInverse: "#ffffff",
+  calciteColorTextLink: "#00619b",
+  calciteColorBorder1: "#cacaca",
+  calciteColorBorder2: "#d4d4d4",
+  calciteColorBorder3: "#dfdfdf",
+  calciteColorBorderInput: "#949494",
+  calciteUiIconColor: "currentColor",
+};
+
+function convertToParamCase(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+function addTokens(args) {
+  return Object.entries(args)
+    .map(([tokenName, tokenValue]) =>
+      !!tokenValue && tokenValue !== "" ? `--${convertToParamCase(tokenName)}: ${tokenValue};` : null,
+    )
+    .filter((token) => token)
+    .join("");
 }
 
 export default {
   title: "Theming/Custom Theme",
-  args: {
-    calciteColorBrand: "#007ac2",
-    calciteColorBrandHover: "#00619b",
-    calciteColorBrandPress: "#004874",
-    calciteColorStatusInfo: "#00619b",
-    calciteColorStatusSuccess: "#35ac46",
-    calciteColorStatusWarning: "#edd317",
-    calciteColorStatusDanger: "#d83020",
-    calciteColorStatusDangerHover: "#a82b1e",
-    calciteColorStatusDangerPress: "#7c1d13",
-    calciteColorBackground: "#f8f8f8",
-    calciteColorForeground1: "#ffffff",
-    calciteColorForeground2: "#f3f3f3",
-    calciteColorForeground3: "#eaeaea",
-    calciteColorText1: "#151515",
-    calciteColorText2: "#4a4a4a",
-    calciteColorText3: "#6a6a6a",
-    calciteColorTextInverse: "#ffffff",
-    calciteColorTextLink: "#00619b",
-    calciteColorBorder1: "#cacaca",
-    calciteColorBorder2: "#d4d4d4",
-    calciteColorBorder3: "#dfdfdf",
-    calciteColorBorderInput: "#949494",
-    calciteUiIconColor: "currentColor",
-  },
+  args: { ...globalTokens, ...cardTokens },
 };
 
-export const themingInteractive = (args: CustomThemeArgs): string => {
-  return `<div
-    style="
-      --calcite-color-brand: ${args.calciteColorBrand};
-      --calcite-color-brand-hover: ${args.calciteColorBrandHover};
-      --calcite-color-brand-press: ${args.calciteColorBrandPress};
-      --calcite-color-status-info: ${args.calciteColorStatusInfo};
-      --calcite-color-status-success: ${args.calciteColorStatusSuccess};
-      --calcite-color-status-warning: ${args.calciteColorStatusWarning};
-      --calcite-color-status-danger: ${args.calciteColorStatusDanger};
-      --calcite-color-status-danger-hover: ${args.calciteColorStatusDangerHover};
-      --calcite-color-status-danger-press: ${args.calciteColorStatusDangerPress};
-      --calcite-color-background: ${args.calciteColorBackground};
-      --calcite-color-foreground-1: ${args.calciteColorForeground1};
-      --calcite-color-foreground-2: ${args.calciteColorForeground2};
-      --calcite-color-foreground-3: ${args.calciteColorForeground3};
-      --calcite-color-text-1: ${args.calciteColorText1};
-      --calcite-color-text-2: ${args.calciteColorText2};
-      --calcite-color-text-3: ${args.calciteColorText3};
-      --calcite-color-text-inverse: ${args.calciteColorTextInverse};
-      --calcite-color-text-link: ${args.calciteColorTextLink};
-      --calcite-color-border-1: ${args.calciteColorBorder1};
-      --calcite-color-border-2: ${args.calciteColorBorder2};
-      --calcite-color-border-3: ${args.calciteColorBorder3};
-      --calcite-color-border-input: ${args.calciteColorBorderInput};
-      --calcite-ui-icon-color: ${args.calciteUiIconColor};
-    "
-  >
+export const themingInteractive = (args: Record<string, string>): string => {
+  return `<div style="${addTokens(args)}">
     <style>
       .demo {
         display: flex;
@@ -101,141 +78,31 @@ export const themingInteractive = (args: CustomThemeArgs): string => {
     </style>
     <div class="demo">
       <div class="demo-column">
-        <calcite-accordion>
-          <calcite-accordion-item heading="Accordion Item"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 2"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 3"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 4"
-            ><img src="${placeholderImage({ width: 300, height: 200 })}" />
-          </calcite-accordion-item>
-          <calcite-accordion-item heading="Accordion Item 5" expanded>
-            <calcite-tree lines>
-              <calcite-tree-item>
-                Child 1
-              </calcite-tree-item>
-              <calcite-tree-item>
-                Child 2
-                <calcite-tree slot="children">
-                  <calcite-tree-item>
-                    Grandchild 1
-                  </calcite-tree-item>
-                  <calcite-tree-item>
-                    Grandchild 2
-                    <calcite-tree slot="children">
-                      <calcite-tree-item>
-                        Great-Grandchild 1
-                      </calcite-tree-item>
-                      <calcite-tree-item>
-                        Great-Grandchild 2
-                      </calcite-tree-item>
-                    </calcite-tree>
-                  </calcite-tree-item>
-                </calcite-tree>
-              </calcite-tree-item>
-              <calcite-tree-item>
-                Child 3
-              </calcite-tree-item>
-            </calcite-tree>
-          </calcite-accordion-item>
-        </calcite-accordion>
-        <calcite-notice kind="danger" scale="s" open>
-          <div slot="title">Something failed</div>
-          <div slot="message">
-            There was an error while performing the task.
-          </div>
-          <calcite-link slot="link" title="my action">Retry</calcite-link>
-        </calcite-notice>
-        <calcite-notice icon kind="success" scale="s" open closable>
-          <div slot="title">Something worked</div>
-          <div slot="message">
-            That thing you wanted to do worked as expected
-          </div>
-        </calcite-notice>
-        <calcite-label>
-          Segmented Control
-          <calcite-segmented-control>
-            <calcite-segmented-control-item value="react" checked>React</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="ember">Ember</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="angular">Angular</calcite-segmented-control-item>
-            <calcite-segmented-control-item value="vue">Vue</calcite-segmented-control-item>
-          </calcite-segmented-control>
-        </calcite-label>
-        <calcite-icon icon="3d-glasses"></calcite-icon>
+        ${accordion}
+        ${notices}
+        ${segmentedControl}
+        ${icon}
       </div>
       <div class="demo-column">
         <div>
-          <calcite-card selected selectable>
-            <img
-              alt="thumbnail"
-              slot="thumbnail"
-              style="width:260px"
-              src="${placeholderImage({ width: 260, height: 160 })}"
-            />
-            <h3 slot="title">Selectable card</h3>
-            <calcite-link slot="footer-start">Lead füt</calcite-link>
-            <calcite-link slot="footer-end">Trail füt</calcite-link>
-          </calcite-card>
-        </div>
-        <div>
-          <calcite-dropdown>
-            <calcite-button slot="trigger">Primary</calcite-button>
-            <calcite-dropdown-group group-title="View">
-              <calcite-dropdown-item icon-start="list-bullet" selected>List</calcite-dropdown-item>
-              <calcite-dropdown-item icon-start="grid">Grid</calcite-dropdown-item>
-              <calcite-dropdown-item icon-start="table">Table</calcite-dropdown-item>
-            </calcite-dropdown-group>
-          </calcite-dropdown>
-          <calcite-button appearance="outline">Outline</calcite-button>
-          <calcite-button kind="danger">Red</calcite-button>
-        </div>
-        <div>
-          <label>
-            <calcite-checkbox indeterminate></calcite-checkbox>
-            Initially indeterminate and unchecked
-          </label>
+          ${card}
         </div>
         <div>
-          <calcite-chip>Neutral</calcite-chip>
-          <calcite-chip kind="inverse">Inverse</calcite-chip>
-          <calcite-chip kind="brand">Brand</calcite-chip>
+          ${dropdown}
+          ${buttons}
         </div>
         <div>
-          <calcite-chip appearance="transparent">Neutral</calcite-chip>
-          <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
-          <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+          ${checkbox}
         </div>
-        <calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>
-        <calcite-slider
-          min="0"
-          max="100"
-          min-value="50"
-          max-value="85"
-          step="1"
-          min-label="Temperature range (lower)"
-          max-label="Temperature range (upper)"
-        ></calcite-slider>
+        ${chips}
+        ${pagination}
+        ${slider}
       </div>
       <div class="demo-column">
-        <calcite-date-picker scale="m" value="2020-11-27"></calcite-date-picker>
-        <calcite-tabs>
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-        </calcite-tabs>
-        <calcite-loader class="chromatic-ignore"></calcite-loader>
-        <label>
-          <calcite-switch scale="m" checked> </calcite-switch>
-          Red switch scale medium
-        </label>
+        ${datePicker}
+        ${tabs}
+        ${loader}
+        ${calciteSwitch}
       </div>
     </div>
   </div>`;

packages/calcite-components/src/custom-theme/accordion-item.ts

@@ -0,0 +1,7 @@
+import { placeholderImage } from "../../.storybook/placeholder-image";
+import { html } from "../../support/formatting";
+
+export const accordionItem = (idx: number): string =>
+  html`<calcite-accordion-item heading="${idx === 0 ? "Accordion Item" : `Accordion Item ${idx + 1}`}"
+    ><img src="${placeholderImage({ width: 300, height: 200 })}" />
+  </calcite-accordion-item>`;

packages/calcite-components/src/custom-theme/accordion.ts

@@ -0,0 +1,8 @@
+import { html } from "../../support/formatting";
+import { accordionItem } from "./accordion-item";
+import { tree } from "./tree";
+
+export const accordion = html`<calcite-accordion>
+  ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))}
+  <calcite-accordion-item heading="Accordion Item 5" expanded>${tree}</calcite-accordion-item>
+</calcite-accordion>`;

packages/calcite-components/src/custom-theme/button.ts

@@ -0,0 +1,17 @@
+import { html } from "../../support/formatting";
+
+const buttonProps: [args: string, content: string] = ["", ""];
+
+export const button = (props: { kind?: string; appearance?: string }): string => {
+  const [buttonArgs, content] = Object.entries(props)
+    .filter(([key, value]) => key && value && value !== "")
+    .reduce(([args, content], [key, value]) => {
+      args += `${key}="${value}" `;
+      content += `${value} `;
+      return [args, content];
+    }, buttonProps);
+
+  return html`<calcite-button ${buttonArgs.trim()}>${content.trim()}</calcite-button>`;
+};
+
+export const buttons = html`${button({ appearance: "outline" })} ${button({ kind: "danger" })}`;

packages/calcite-components/src/custom-theme/card.ts

@@ -0,0 +1,19 @@
+import { placeholderImage } from "../../.storybook/placeholder-image";
+import { html } from "../../support/formatting";
+
+export const cardTokens = {
+  calciteCardAccentColorSelected: "",
+  calciteCardBackgroundColor: "",
+  calciteCardBorderColor: "",
+  calciteCardSelectIndicatorColorHover: "",
+  calciteCardSelectIndicatorColor: "",
+  calciteCardCornerRadius: "",
+  calciteCardShadow: "",
+};
+
+export const card = html`<calcite-card selected selectable>
+  <img alt="thumbnail" slot="thumbnail" style="width:260px" src="${placeholderImage({ width: 260, height: 160 })}" />
+  <h3 slot="title">Selectable card</h3>
+  <calcite-link slot="footer-start">Lead füt</calcite-link>
+  <calcite-link slot="footer-end">Trail füt</calcite-link>
+</calcite-card>`;

packages/calcite-components/src/custom-theme/checkbox.ts

@@ -0,0 +1,6 @@
+import { html } from "../../support/formatting";
+
+export const checkbox = html`<label>
+  <calcite-checkbox indeterminate></calcite-checkbox>
+  Initially indeterminate and unchecked
+</label>`;

packages/calcite-components/src/custom-theme/chips.ts

@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const chips = html`<div>
+    <calcite-chip>Neutral</calcite-chip>
+    <calcite-chip kind="inverse">Inverse</calcite-chip>
+    <calcite-chip kind="brand">Brand</calcite-chip>
+  </div>
+  <div>
+    <calcite-chip appearance="transparent">Neutral</calcite-chip>
+    <calcite-chip appearance="transparent" kind="inverse">Inverse</calcite-chip>
+    <calcite-chip appearance="outline-fill" kind="brand">Brand</calcite-chip>
+  </div>`;