@stackoverflow/stacks 2.0.1 → 2.0.2

package/lib/components/empty-state/empty-state.a11y.test.ts

@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-empty-state",
+        children: {
+            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws3 p16" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

package/lib/components/empty-state/empty-state.visual.test.ts

@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-empty-state",
+        children: {
+            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws3 p16" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

package/lib/components/progress-bar/progress-bar.a11y.test.ts

@@ -0,0 +1,200 @@
+import { html } from "@open-wc/testing";
+import {
+    IconAchievementsSm,
+    IconCheckmarkSm,
+} from "@stackoverflow/stacks-icons/icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-flex ai-center jc-center p8 ws2" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const steppedItems = [
+    {
+        complete: true,
+        label: "Select plan",
+    },
+    {
+        complete: true,
+        label: "Team name",
+    },
+    {
+        active: true,
+        label: "Payment",
+    },
+    {
+        label: "Create account",
+    },
+];
+
+const getChildren = (type: string) => {
+    switch (type) {
+        case "badge":
+            return `<div class="s-progress--label" id="example-label">
+                <div class="s-badge--label">Electorate</div>
+            </div>
+            <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="example-label" style="width: 75%;"></div>`;
+        case "circular":
+            return `<svg class="s-progress-bar" role="progressbar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
+                <circle cx="16" cy="16" r="14"></circle>
+                <circle cx="16" cy="16" r="14"></circle>
+            </svg>`;
+        case "privilege":
+            return `
+                <div class="s-progress--label" id="progress-label">
+                    ${IconAchievementsSm}
+                    Access Review Queues
+                </div>
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" style="width: 75%;"></div>
+            `;
+        case "segmented":
+            return `
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" style="width: 75%;"></div>
+                <ol class="s-progress--segments">
+                    <li></li><li></li><li></li>
+                </ol>
+            `;
+        case "stepped":
+            return steppedItems
+                .map((step, i) => {
+                    return `
+                    <div
+                        class="
+                            s-progress--step
+                            ${step.active ? "is-active" : ""}
+                            ${step.complete ? "is-complete" : ""}
+                        "
+                    >
+                        <a href="#" class="s-progress--stop">
+                            ${step.complete ? IconCheckmarkSm : ""}
+                            <span class="v-visible-sr">${step.label} ${
+                                step.complete ? "complete" : "incomplete"
+                            }</span>
+                        </a>
+                        ${
+                            i > 0
+                                ? '<div class="s-progress--bar s-progress--bar__left"></div>'
+                                : ""
+                        }
+
+                        ${
+                            i < steppedItems.length - 1
+                                ? '<div class="s-progress--bar s-progress--bar__right"></div>'
+                                : ""
+                        }
+                        <a class="s-progress--label">${step.label}</a>
+                    </div>
+                `;
+                })
+                .join("");
+        default:
+            return `<div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="progress" style="width: 75%"></div>`;
+    }
+};
+describe("progress-bar", () => {
+    // Base
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["brand", "info"],
+        children: {
+            default: getChildren(""),
+        },
+        template,
+    });
+
+    // Badge
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["badge"],
+        modifiers: {
+            primary: ["gold", "silver", "bronze"],
+        },
+        children: {
+            default: getChildren("badge"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Circular
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["circular"],
+        modifiers: {
+            global: ["fc-green-400", "fc-theme-primary"],
+        },
+        children: {
+            default: getChildren("circular"),
+        },
+        template,
+        attributes: {
+            style: "--s-progress-value: .75",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Privilege
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["privilege"],
+        children: {
+            default: getChildren("privilege"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Segmented
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["segmented"],
+        children: {
+            default: getChildren("segmented"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Stepped
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-progress",
+        variants: ["stepped"],
+        children: {
+            default: getChildren("stepped"),
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws5" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+        // TODO add skipped test ids
+    });
+});

package/lib/components/progress-bar/progress-bar.visual.test.ts

@@ -0,0 +1,199 @@
+import { html } from "@open-wc/testing";
+import {
+    IconAchievementsSm,
+    IconCheckmarkSm,
+} from "@stackoverflow/stacks-icons/icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-flex ai-center jc-center p8 ws2" data-testid="${testid}">
+        ${component}
+    </div>
+`;
+
+const steppedItems = [
+    {
+        complete: true,
+        label: "Select plan",
+    },
+    {
+        complete: true,
+        label: "Team name",
+    },
+    {
+        active: true,
+        label: "Payment",
+    },
+    {
+        label: "Create account",
+    },
+];
+
+const getChildren = (type: string) => {
+    switch (type) {
+        case "badge":
+            return `<div class="s-progress--label" id="example-label">
+                <div class="s-badge--label">Electorate</div>
+            </div>
+            <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="example-label" style="width: 75%;"></div>`;
+        case "circular":
+            return `<svg class="s-progress-bar" role="progressbar" viewbox="0 0 32 32" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
+                <circle cx="16" cy="16" r="14"></circle>
+                <circle cx="16" cy="16" r="14"></circle>
+            </svg>`;
+        case "privilege":
+            return `
+                <div class="s-progress--label" id="progress-label">
+                    ${IconAchievementsSm}
+                    Access Review Queues
+                </div>
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" style="width: 75%;"></div>
+            `;
+        case "segmented":
+            return `
+                <div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="…" style="width: 75%;"></div>
+                <ol class="s-progress--segments">
+                    <li></li><li></li><li></li>
+                </ol>
+            `;
+        case "stepped":
+            return steppedItems
+                .map((step, i) => {
+                    return `
+                    <div
+                        class="
+                            s-progress--step
+                            ${step.active ? "is-active" : ""}
+                            ${step.complete ? "is-complete" : ""}
+                        "
+                    >
+                        <a href="#" class="s-progress--stop">
+                            ${step.complete ? IconCheckmarkSm : ""}
+                            <span class="v-visible-sr">${step.label} ${
+                                step.complete ? "complete" : "incomplete"
+                            }</span>
+                        </a>
+                        ${
+                            i > 0
+                                ? '<div class="s-progress--bar s-progress--bar__left"></div>'
+                                : ""
+                        }
+
+                        ${
+                            i < steppedItems.length - 1
+                                ? '<div class="s-progress--bar s-progress--bar__right"></div>'
+                                : ""
+                        }
+                        <a class="s-progress--label">${step.label}</a>
+                    </div>
+                `;
+                })
+                .join("");
+        default:
+            return `<div class="s-progress--bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="progress" style="width: 75%"></div>`;
+    }
+};
+describe("progress-bar", () => {
+    // Base
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["brand", "info"],
+        children: {
+            default: getChildren(""),
+        },
+        template,
+    });
+
+    // Badge
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["badge"],
+        modifiers: {
+            primary: ["gold", "silver", "bronze"],
+        },
+        children: {
+            default: getChildren("badge"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Circular
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["circular"],
+        modifiers: {
+            global: ["fc-green-400", "fc-theme-primary"],
+        },
+        children: {
+            default: getChildren("circular"),
+        },
+        template,
+        attributes: {
+            style: "--s-progress-value: .75",
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+            includeNullModifier: false,
+        },
+    });
+
+    // Privilege
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["privilege"],
+        children: {
+            default: getChildren("privilege"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Segmented
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["segmented"],
+        children: {
+            default: getChildren("segmented"),
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+
+    // Stepped
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-progress",
+        variants: ["stepped"],
+        children: {
+            default: getChildren("stepped"),
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws5" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});

package/lib/components/table/table.a11y.test.ts

@@ -0,0 +1,113 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="s-table-container p8" data-testid="${testid}">${component}</div>
+`;
+
+const rows = [
+    {
+        displayName: "Sponge",
+        fullName: "Bobby Geometrislacks",
+        progress: 10,
+        active: true,
+    },
+    {
+        displayName: "Patty",
+        fullName: "Pat Supernova",
+        progress: 50,
+        active: true,
+        // }, {
+        //     displayName: "Crustoph",
+        //     fullName: "Eugene Harold K",
+        //     progress: 75,
+        //     active: false, // TODO reintroduce once disabled rows pass contrast requirements
+    },
+    {
+        displayName: "SCheeks",
+        fullName: "Sandra C.",
+        progress: 100,
+        active: true,
+    },
+];
+
+const children = {
+    default: `
+        <thead>
+            <tr>
+                <th scope="col" class="s-table--bulk">
+                    <label class="v-visible-sr" for="check">bulk action</label>
+                    <input type="checkbox" class="s-checkbox" id="check">
+                </th>
+                <th scope="col">Display Name</th>
+                <th scope="col">Full name</th>
+                <th scope="col" colspan="2">Progress</th>
+                <th scope="col"><span>class="v-visible-sr">Bar</span></th>
+            </tr>
+        </thead>
+        <tbody>
+            ${rows
+                .map(
+                    (row, i) => `
+                <tr class="${row.active ? "" : "is-disabled"}">
+                    <th scope="row">
+                        <label class="v-visible-sr" for="check-${i}">bulk</label>
+                        <input type="checkbox" class="s-checkbox" id="check-${i}">
+                    </th>
+                    <td>${row.displayName}</td>
+                    <td>${row.fullName}</td>
+                    <td class="s-table--progress">${row.progress}</td>
+                    <td class="s-table--progress-bar">
+                        <div class="s-progress bg-white">
+                            <div class="s-progress--bar bg-blue-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${
+                                row.progress
+                            }" aria-label="progressbar" style="width: ${
+                                row.progress
+                            }%"></div>
+                        </div>
+                    </td>
+                    <td><a class="s-link" href="#">Add</a></td>
+                </tr>
+            `
+                )
+                .join("")}
+        </tbody>
+        <tfoot class="s-table--totals">
+            <tr>
+                <td scope="row"><span class="v-visible-sr">Empty</span></td>
+                <th scope="row" class="ta-left">Totals</th>
+                <td><span class="v-visible-sr">Empty</span></td>
+                <td colspan="2">160</td>
+                <td><span class="v-visible-sr">Empty</span></td>
+            </tr>
+        </tfoot>
+    `,
+};
+
+describe("table", () => {
+    // default, sizes
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-table",
+        variants: ["stripes"],
+        modifiers: {
+            primary: ["sm", "lg"],
+            secondary: ["b0", "bx", "bx-simple", "sortable"],
+            // global: ["ta-center", "ta-left", "ta-justify", "ta-right", "va-bottom", "va-middle", "va-top"], // Removing these modifiers *for now* since they create so many test images and would slow testing
+        },
+        tag: "table",
+        children,
+        template,
+        // TODO resolve HC contrast issues with `.s-table.s-table__sortable thead th` sortable
+        skippedTestids: [
+            "s-table-highcontrast-light-lg-sortable",
+            "s-table-highcontrast-light-sm-sortable",
+            "s-table-highcontrast-light-sortable",
+            "s-table-highcontrast-light-stripes-lg-sortable",
+            "s-table-highcontrast-light-stripes-sm-sortable",
+            "s-table-highcontrast-light-stripes-sortable",
+        ],
+    });
+});

package/lib/components/table/table.visual.test.ts

@@ -0,0 +1,105 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="s-table-container p8" data-testid="${testid}">${component}</div>
+`;
+
+const rows = [
+    {
+        displayName: "Sponge",
+        fullName: "Bobby Geometrislacks",
+        progress: 10,
+        active: true,
+    },
+    {
+        displayName: "Patty",
+        fullName: "Pat Supernova",
+        progress: 50,
+        active: true,
+    },
+    {
+        displayName: "Crustoph",
+        fullName: "Eugene Harold K",
+        progress: 75,
+        active: false,
+    },
+    {
+        displayName: "SCheeks",
+        fullName: "Sandra C.",
+        progress: 100,
+        active: true,
+    },
+];
+
+const children = {
+    default: `
+        <thead>
+            <tr>
+                <th scope="col" class="s-table--bulk">
+                    <label class="v-visible-sr" for="check">bulk action</label>
+                    <input type="checkbox" class="s-checkbox" id="check">
+                </th>
+                <th scope="col">Display Name</th>
+                <th scope="col">Full name</th>
+                <th scope="col" colspan="2">Progress</th>
+                <th scope="col"><span>class="v-visible-sr">Bar</span></th>
+            </tr>
+        </thead>
+        <tbody>
+            ${rows
+                .map(
+                    (row, i) => `
+                <tr class="${row.active ? "" : "is-disabled"}">
+                    <th scope="row">
+                        <label class="v-visible-sr" for="check-${i}">bulk</label>
+                        <input type="checkbox" class="s-checkbox" id="check-${i}">
+                    </th>
+                    <td>${row.displayName}</td>
+                    <td>${row.fullName}</td>
+                    <td class="s-table--progress">${row.progress}</td>
+                    <td class="s-table--progress-bar">
+                        <div class="s-progress bg-white">
+                            <div class="s-progress--bar bg-blue-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${
+                                row.progress
+                            }" aria-label="progressbar" style="width: ${
+                                row.progress
+                            }%"></div>
+                        </div>
+                    </td>
+                    <td><a class="s-link" href="#">Add</a></td>
+                </tr>
+            `
+                )
+                .join("")}
+        </tbody>
+        <tfoot class="s-table--totals">
+            <tr>
+                <td scope="row"><span class="v-visible-sr">Empty</span></td>
+                <th scope="row" class="ta-left">Totals</th>
+                <td><span class="v-visible-sr">Empty</span></td>
+                <td colspan="2">160</td>
+                <td><span class="v-visible-sr">Empty</span></td>
+            </tr>
+        </tfoot>
+    `,
+};
+
+describe("table", () => {
+    // default, sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-table",
+        variants: ["stripes"],
+        modifiers: {
+            primary: ["sm", "lg"],
+            secondary: ["b0", "bx", "bx-simple", "sortable"],
+            // global: ["ta-center", "ta-left", "ta-justify", "ta-right", "va-bottom", "va-middle", "va-top"], // Removing these modifiers *for now* since they create so many test images and would slow testing
+        },
+        tag: "table",
+        children,
+        template,
+    });
+});

package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -316,10 +316,10 @@ body .themed {
     --green-600: hsl(148, 75%, 15%);
     --red-100: hsl(0, 72%, 96%);
     --red-200: hsl(0, 70%, 93%);
-    --red-300: hsl(0, 65%, 76%);
+    --red-300: hsl(0, 66%, 80%);
     --red-400: hsl(0, 60%, 49%);
     --red-500: hsl(0, 65%, 37%);
-    --red-600: hsl(0, 65%, 24%);
+    --red-600: hsl(0, 65%, 22%);
     --yellow-100: hsl(43, 80%, 96%);
     --yellow-200: hsl(43, 80%, 88%);
     --yellow-300: hsl(43, 85%, 72%);