@stackoverflow/stacks 2.3.3 → 2.5.0

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

@@ -1,188 +0,0 @@
-import { html } from "@open-wc/testing";
-import {
-    IconAchievementsSm,
-    IconCheckmarkSm,
-} from "@stackoverflow/stacks-icons/icons";
-import { runVisualTests } from "../../test/visual-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
-    runVisualTests({
-        baseClass: "s-progress",
-        variants: ["brand", "info"],
-        children: {
-            default: getChildren(""),
-        },
-        template,
-    });
-
-    // Badge
-    runVisualTests({
-        baseClass: "s-progress",
-        variants: ["badge"],
-        modifiers: {
-            primary: ["gold", "silver", "bronze"],
-        },
-        children: {
-            default: getChildren("badge"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-            includeNullModifier: false,
-        },
-    });
-
-    // Circular
-    runVisualTests({
-        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: {
-            includeNullVariant: false,
-            includeNullModifier: false,
-        },
-    });
-
-    // Privilege
-    runVisualTests({
-        baseClass: "s-progress",
-        variants: ["privilege"],
-        children: {
-            default: getChildren("privilege"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-
-    // Segmented
-    runVisualTests({
-        baseClass: "s-progress",
-        variants: ["segmented"],
-        children: {
-            default: getChildren("segmented"),
-        },
-        template,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-
-    // Stepped
-    runVisualTests({
-        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: {
-            includeNullVariant: false,
-        },
-    });
-});

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

@@ -1,72 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid, className }: any) => html`
-    <div class="d-inline-flex p8 ${className}" data-testid="${testid}">
-        ${component}
-    </div>
-`;
-
-const child = (attr?: string): string => {
-    return `
-    <label for="select-menu">Transportation method</label>
-    <select id="select-menu" ${attr}>
-        <option value="" selected>Please select one…</option>
-        <option value="walk">Walk</option>
-        <option value="bike">Bicycle</option>
-        <option value="car">Automobile</option>
-        <option value="rail">Train</option>
-        <option value="fly">Plane</option>
-    </select>`;
-};
-
-describe("select", () => {
-    // default, sizes
-    runA11yTests({
-        baseClass: "s-select",
-        modifiers: {
-            primary: ["sm", "md", "lg", "xl"],
-        },
-        children: {
-            default: child(),
-        },
-        template,
-    });
-
-    // modifier classes
-    [
-        {
-            class: "is-disabled",
-            attr: 'disabled=""',
-        },
-        {
-            class: "is-readonly",
-            attr: 'readonly=""',
-        },
-        {
-            class: "has-success",
-        },
-        {
-            class: "has-error",
-        },
-        {
-            class: "has-warning",
-        },
-    ].forEach((state) => {
-        runA11yTests({
-            baseClass: `s-select state-${state.class}`,
-            children: {
-                default: child(state.attr),
-            },
-            template: ({ component, testid }) =>
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                template({ component, testid, className: state.class }),
-            options: {
-                includeNullModifier: false,
-            },
-            skippedTestids: [/readonly/], // Skipping readonly since it doesn't need to meet APCA contrast minimums
-        });
-    });
-});

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

@@ -1,72 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid, className }: any) => html`
-    <div class="d-inline-flex p8 ${className}" data-testid="${testid}">
-        ${component}
-    </div>
-`;
-
-const child = (attr?: string): string => {
-    return `<select id="select-menu" ${attr}>
-        <option value="" selected>Please select one…</option>
-        <option value="walk">Walk</option>
-        <option value="bike">Bicycle</option>
-        <option value="car">Automobile</option>
-        <option value="rail">Train</option>
-        <option value="fly">Plane</option>
-    </select>`;
-};
-
-describe("select", () => {
-    // default, sizes
-    runVisualTests({
-        baseClass: "s-select",
-        modifiers: {
-            primary: ["sm", "md", "lg", "xl"],
-        },
-        children: {
-            default: child(),
-        },
-        template,
-    });
-
-    // modifier classes
-    [
-        {
-            class: "is-disabled",
-            attr: 'disabled=""',
-        },
-        {
-            class: "is-readonly",
-            attr: 'readonly=""',
-        },
-        {
-            class: "has-success",
-        },
-        {
-            class: "has-error",
-        },
-        {
-            class: "has-warning",
-        },
-    ].forEach((state) => {
-        runVisualTests({
-            baseClass: "s-select",
-            modifiers: {
-                global: [`state-${state.class}`],
-            },
-            children: {
-                selected: child(state.attr),
-            },
-            template: ({ component, testid }) =>
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                template({ component, testid, className: state.class }),
-            options: {
-                includeNullModifier: false,
-            },
-        });
-    });
-});

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

@@ -1,14 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("spinner", () => {
-    runA11yTests({
-        baseClass: "s-spinner",
-        modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
-        },
-        children: {
-            default: `<div class="v-visible-sr">Loading…</div>`,
-        },
-    });
-});

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

@@ -1,40 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid }: any) => html`
-    <div class="d-inline-block p8" data-testid="${testid}">${component}</div>
-`;
-describe("spinner", () => {
-    // default, sizes
-    runVisualTests({
-        baseClass: "s-spinner",
-        modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
-        },
-        children: {
-            default: `<div class="v-visible-sr">Loading…</div>`,
-        },
-        template,
-    });
-    // applied font color
-    runVisualTests({
-        baseClass: "s-spinner",
-        modifiers: {
-            global: ["fc-theme-primary"],
-        },
-        children: {
-            default: `<div class="v-visible-sr">Loading…</div>`,
-        },
-        template,
-    });
-    // .is-loading
-    runVisualTests({
-        baseClass: "is-loading",
-        children: {
-            default: `Loading…`,
-        },
-        template,
-    });
-});

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

@@ -1,112 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-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><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
-    runA11yTests({
-        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",
-        ],
-    });
-});