@stackoverflow/stacks 1.10.5 → 1.10.6

package/lib/components/code-block/code-block.a11y.test.ts

@@ -0,0 +1,30 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "a11y",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+            // TODO new colors should resolve this issue
+            skippedTestids: [
+                "s-code-block-language-html-light",
+                "s-code-block-language-html-highcontrast-light",
+                "s-code-block-language-html-highcontrast-dark",
+                "s-code-block-language-html-dark",
+                "s-code-block-language-css-dark",
+                "s-code-block-language-javascript-dark",
+                "s-code-block-language-javascript-highcontrast-light",
+            ],
+        });
+    });
+});

package/lib/components/code-block/code-block.fixtures.ts

@@ -0,0 +1,88 @@
+import type { LanguageFn } from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import hljsJavascript from "highlight.js/lib/languages/javascript";
+import hljsCss from "highlight.js/lib/languages/css";
+import hljsHtml from "highlight.js/lib/languages/xml";
+
+const hljsLanguages: Record<string, LanguageFn> = {
+    javascript: hljsJavascript,
+    css: hljsCss,
+    html: hljsHtml,
+};
+
+const javascriptFixture = `
+import React, { Component } from 'react'
+import { IP } from '../constants/IP'
+import { withAuth0 } from '@auth0/auth0-react';
+
+class AddATournament extends Component {
+    componentDidMount() {
+        this.myNewListOfAllTournamentsWithAuth()
+    }
+}
+
+export default withAuth0(AddATournament);
+`;
+
+const cssFixture = `
+.s-input,
+.s-textarea {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.6em 0.7em;
+    border: 1px solid var(--bc-darker);
+    border-radius: 3px;
+    background-color: var(--white);
+    color: var(--fc-dark);
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.15384615;
+    scrollbar-color: var(--scrollbar) transparent;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+    .s-input,
+    .s-textarea {
+        font-size: 16px;
+        padding: 0.36em 0.55em;
+    }
+    .s-input::-webkit-input-placeholder,
+    .s-textarea::-webkit-input-placeholder {
+        line-height: normal !important;
+    }
+}
+`;
+
+const htmlFixture = `
+<form class="d-flex gy4 fd-column">
+    <label class="flex--item s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+`;
+
+const fixtures: Record<string, string> = {
+    javascript: javascriptFixture,
+    css: cssFixture,
+    html: htmlFixture,
+};
+
+const highlightFixture = (fixture: string, language: string) => {
+    const hljsLanguage = hljsLanguages[language];
+    hljs.registerLanguage(language, hljsLanguage);
+
+    const highlightedCode = hljs.highlight(fixture, { language }).value;
+
+    return `<code>${highlightedCode}</code>`;
+};
+
+const highlightedFixtures = Object.keys(fixtures).reduce(
+    (acc, language) => {
+        acc[language] = highlightFixture(fixtures[language], language);
+        return acc;
+    },
+    {} as Record<string, string>
+);
+
+export default highlightedFixtures;

package/lib/components/code-block/code-block.visual.test.ts

@@ -0,0 +1,20 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "visual",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+        });
+    });
+});

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

@@ -0,0 +1,105 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid, classes = "", icon }: any) => html`
+    <div data-testid="${testid}" class="p8 ws4 ${classes}">
+        ${component}${icon}
+    </div>
+`;
+
+const customAttributes = [
+    {
+        placeholder: "Enter your text here",
+    },
+    {
+        readonly: "",
+    },
+    {
+        disabled: "",
+    },
+];
+
+const states = ["has-error", "has-warning", "has-success", "is-readonly"];
+const sizes = ["sm", "md", "lg", "xl"];
+const otherModifiers = ["creditcard", "search"];
+
+["input", "textarea"].map((type) => {
+    const children =
+        type === "textarea" ? { default: "Enter your text here" } : undefined;
+
+    describe(type, () => {
+        // Base styles w/ value, modifiers
+        runComponentTests({
+            type: "a11y",
+            baseClass: `s-${type}`,
+            modifiers: {
+                primary: [...sizes, ...otherModifiers],
+            },
+            tag: type,
+            attributes:
+                type === "input"
+                    ? {
+                          type: "text",
+                          value: "Text input value",
+                      }
+                    : {},
+            children,
+            template,
+            // TODO Stacks v2 should resolve most issues
+            skippedTestids: [/s-input/, /s-textarea/],
+        });
+
+        // Base styles w/o value; w/ readonly attr; w/ disabled attr
+        customAttributes.forEach((attributes) => {
+            const attrString = Object.keys(attributes).sort().join("-");
+
+            runComponentTests({
+                type: "a11y",
+                baseClass: `s-${type} ${attrString}`,
+                tag: type,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: attributes.placeholder
+                                  ? null
+                                  : "Text input value",
+                              ...attributes,
+                          }
+                        : attributes,
+                children,
+                template,
+                // TODO Stacks v2 should resolve most issues
+                skippedTestids: [/s-input/, /s-textarea/],
+            });
+        });
+
+        // w/ state classes; .is-readonly
+        states.forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                baseClass: `s-${type} state-${state}`,
+                tag: type,
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: "Text input value",
+                          }
+                        : {},
+                children,
+                template: ({ component, testid }) =>
+                    template({ component, testid, classes: state }),
+                // TODO Stacks v2 should resolve most issues
+                skippedTestids: [/s-input/, /s-textarea/],
+            });
+        });
+        // TODO interaction (focus) states?
+    });
+});

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

@@ -0,0 +1,98 @@
+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, classes = "", icon }: any) => html`
+    <div data-testid="${testid}" class="p8 ws4 ${classes}">
+        ${component}${icon}
+    </div>
+`;
+
+const customAttributes = [
+    {
+        placeholder: "Enter your text here",
+    },
+    {
+        readonly: "",
+    },
+    {
+        disabled: "",
+    },
+] as Record<string, string>[];
+
+const states = ["has-error", "has-warning", "has-success", "is-readonly"];
+const sizes = ["sm", "md", "lg", "xl"];
+const otherModifiers = ["creditcard", "search"];
+
+["input", "textarea"].map((type) => {
+    const children =
+        type === "textarea" ? { default: "Enter your text here" } : undefined;
+
+    describe(type, () => {
+        // Base styles w/ value, modifiers
+        runComponentTests({
+            type: "visual",
+            baseClass: `s-${type}`,
+            modifiers: {
+                primary: [...sizes, ...otherModifiers],
+            },
+            tag: type,
+            attributes:
+                type === "input"
+                    ? {
+                          type: "text",
+                          value: "Text input value",
+                      }
+                    : {},
+            children,
+            template,
+        });
+
+        // Base styles w/o value; w/ readonly attr; w/ disabled attr
+        customAttributes.forEach((attributes) => {
+            const attrString = Object.keys(attributes).sort().join("-");
+            let attr = attributes;
+            if (type === "input") {
+                attr = {
+                    type: "text",
+                    ...attributes,
+                };
+                if (!attributes.placeholder) {
+                    attr = {
+                        value: "Text input value",
+                        ...attr,
+                    };
+                }
+            }
+            runComponentTests({
+                type: "visual",
+                baseClass: `s-${type} ${attrString}`,
+                tag: type,
+                attributes: attr,
+                children,
+                template,
+            });
+        });
+
+        // w/ state classes; .is-readonly
+        states.forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                baseClass: `s-${type} state-${state}`,
+                tag: type,
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: "Text input value",
+                          }
+                        : {},
+                children,
+                template: ({ component, testid }) =>
+                    template({ component, testid, classes: state }),
+            });
+        });
+        // TODO interaction (focus) states?
+    });
+});

package/lib/components/modal/modal.less

@@ -93,6 +93,7 @@
         font-weight: normal;
         line-height: var(--lh-sm);
         margin-bottom: var(--su16);
+        margin-right: var(--su24);
     }
 
     background-color: var(--_mo-bg);

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

@@ -0,0 +1,80 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const items = [
+    {
+        label: "Group 1",
+        title: true,
+    },
+    {
+        label: "Product",
+        selected: true,
+    },
+    {
+        label: "Email",
+    },
+    {
+        label: "Group 2",
+        title: true,
+    },
+    {
+        label: "Content",
+    },
+    {
+        label: "Brand",
+    },
+    {
+        label: "Marketing",
+    },
+    {
+        label: "More selected",
+        dropdown: true,
+        selected: true,
+    },
+    {
+        label: "More",
+        dropdown: true,
+    },
+];
+
+const getChildren = (includeTitles = false): string =>
+    items
+        .map((item) => {
+            if (item.title) {
+                return includeTitles
+                    ? `<li class="s-navigation--title">${item.label}</li>`
+                    : "";
+            }
+            const classes = `s-navigation--item${
+                item.selected ? " is-selected" : ""
+            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
+            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
+        })
+        .join("");
+
+describe("navigation", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-navigation",
+        variants: ["vertical", "muted"],
+        modifiers: {
+            primary: ["scroll", "sm"],
+        },
+        tag: "ul",
+        children: {
+            default: getChildren(true),
+        },
+        template: ({ component, testid }) => html`
+            <nav
+                class="d-inline-block p8 wmx3"
+                aria-label="example-navigation"
+                data-testid="${testid}"
+            >
+                ${component}
+            </nav>
+        `,
+        // TODO new colors should resolve the `.is-selected` failures
+        skippedTestids: [/s-navigation/],
+    });
+});

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

@@ -0,0 +1,101 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const items = [
+    {
+        label: "Group 1",
+        title: true,
+    },
+    {
+        label: "Product",
+        selected: true,
+    },
+    {
+        label: "Email",
+    },
+    {
+        label: "Group 2",
+        title: true,
+    },
+    {
+        label: "Content",
+    },
+    {
+        label: "Brand",
+    },
+    {
+        label: "Marketing",
+    },
+    {
+        label: "More selected",
+        dropdown: true,
+        selected: true,
+    },
+    {
+        label: "More",
+        dropdown: true,
+    },
+];
+
+const getChildren = (includeTitles = false): string =>
+    items
+        .map((item) => {
+            if (item.title) {
+                return includeTitles
+                    ? `<li class="s-navigation--title">${item.label}</li>`
+                    : "";
+            }
+            const classes = `s-navigation--item${
+                item.selected ? " is-selected" : ""
+            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
+            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
+        })
+        .join("");
+
+describe("navigation", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-navigation",
+        variants: ["muted"],
+        modifiers: {
+            primary: ["scroll", "sm"],
+        },
+        tag: "ul",
+        children: {
+            default: getChildren(),
+        },
+        template: ({ component, testid }) => html`
+            <nav
+                class="d-inline-block p8 wmx3"
+                aria-label="example-navigation"
+                data-testid="${testid}"
+            >
+                ${component}
+            </nav>
+        `,
+    });
+
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-navigation",
+        variants: ["vertical"],
+        tag: "ul",
+        children: {
+            default: getChildren(true),
+        },
+        template: ({ component, testid }) => html`
+            <nav
+                class="d-inline-block p8 ws2"
+                aria-label="example-navigation"
+                data-testid="${testid}"
+            >
+                ${component}
+            </nav>
+        `,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});

package/lib/components/page-title/page-title.a11y.test.ts

@@ -0,0 +1,31 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("page title", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-page-title",
+        children: {
+            default: `
+                <div class="s-page-title--text">
+                    <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">…</nav>
+                    <h1 class="s-page-title--header">Page title</h1>
+                    <p class="s-page-title--description">
+                        Optional description de Finibus Bonorum et Malorum
+                    </p>
+                </div>
+                <div class="s-page-title--actions">
+                    <button class="s-btn s-btn__filled" type="button">Action</button>
+                </div>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws6" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+        // TODO new colors should resolve this issue
+        skippedTestids: [/s-page-title-dark/, /s-page-title-light/],
+    });
+});

package/lib/components/page-title/page-title.visual.test.ts

@@ -0,0 +1,59 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const postTitleTemplate = ({ component, testid }: any) => html`
+    <div class="d-block p8 ws6" data-testid="${testid}">${component}</div>
+`;
+
+const getChildren = ({
+    showEverything = false,
+}: {
+    showEverything: boolean;
+}) => `
+    <div class="s-page-title--text">
+        ${
+            showEverything
+                ? `
+            <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link">Stack Overflow</a>
+                </div>
+            </nav>
+        `
+                : ""
+        }
+        <h1 class="s-page-title--header">Page title</h1>
+        ${
+            showEverything
+                ? `
+            <p class="s-page-title--description">
+                Optional description de Finibus Bonorum et Malorum
+            </p>
+        `
+                : ""
+        }
+    </div>
+    ${
+        showEverything
+            ? `
+        <div class="s-page-title--actions">
+            <button class="s-btn s-btn__filled" type="button">Action</button>
+        </div>
+    `
+            : ""
+    }
+`;
+
+describe("page title", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-page-title",
+        children: {
+            default: getChildren({ showEverything: false }),
+            complete: getChildren({ showEverything: true }),
+        },
+        template: postTitleTemplate,
+    });
+});

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

@@ -0,0 +1,23 @@
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+describe("tag", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
+        skippedTestids: [/s-tag/],
+    });
+});