@stackoverflow/stacks 2.0.0-rc.3 → 2.0.0-rc.5

package/lib/atomic/__snapshots__/color.less.test.ts.snap

@@ -904,6 +904,132 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
     color: var(--yellow-600) !important;
 }
 
+.bg-purple-100,
+.h\\\\:bg-purple-100:hover,
+.f\\\\:bg-purple-100:focus,
+.f\\\\:bg-purple-100:focus-within {
+    background-color: var(--purple-100) !important;
+}
+
+.bc-purple-100,
+.h\\\\:bc-purple-100:hover,
+.f\\\\:bc-purple-100:focus,
+.f\\\\:bc-purple-100:focus-within {
+    border-color: var(--purple-100) !important;
+}
+
+.fc-purple-100,
+.h\\\\:fc-purple-100:hover,
+.f\\\\:fc-purple-100:focus,
+.f\\\\:fc-purple-100:focus-within {
+    color: var(--purple-100) !important;
+}
+
+.bg-purple-200,
+.h\\\\:bg-purple-200:hover,
+.f\\\\:bg-purple-200:focus,
+.f\\\\:bg-purple-200:focus-within {
+    background-color: var(--purple-200) !important;
+}
+
+.bc-purple-200,
+.h\\\\:bc-purple-200:hover,
+.f\\\\:bc-purple-200:focus,
+.f\\\\:bc-purple-200:focus-within {
+    border-color: var(--purple-200) !important;
+}
+
+.fc-purple-200,
+.h\\\\:fc-purple-200:hover,
+.f\\\\:fc-purple-200:focus,
+.f\\\\:fc-purple-200:focus-within {
+    color: var(--purple-200) !important;
+}
+
+.bg-purple-300,
+.h\\\\:bg-purple-300:hover,
+.f\\\\:bg-purple-300:focus,
+.f\\\\:bg-purple-300:focus-within {
+    background-color: var(--purple-300) !important;
+}
+
+.bc-purple-300,
+.h\\\\:bc-purple-300:hover,
+.f\\\\:bc-purple-300:focus,
+.f\\\\:bc-purple-300:focus-within {
+    border-color: var(--purple-300) !important;
+}
+
+.fc-purple-300,
+.h\\\\:fc-purple-300:hover,
+.f\\\\:fc-purple-300:focus,
+.f\\\\:fc-purple-300:focus-within {
+    color: var(--purple-300) !important;
+}
+
+.bg-purple-400,
+.h\\\\:bg-purple-400:hover,
+.f\\\\:bg-purple-400:focus,
+.f\\\\:bg-purple-400:focus-within {
+    background-color: var(--purple-400) !important;
+}
+
+.bc-purple-400,
+.h\\\\:bc-purple-400:hover,
+.f\\\\:bc-purple-400:focus,
+.f\\\\:bc-purple-400:focus-within {
+    border-color: var(--purple-400) !important;
+}
+
+.fc-purple-400,
+.h\\\\:fc-purple-400:hover,
+.f\\\\:fc-purple-400:focus,
+.f\\\\:fc-purple-400:focus-within {
+    color: var(--purple-400) !important;
+}
+
+.bg-purple-500,
+.h\\\\:bg-purple-500:hover,
+.f\\\\:bg-purple-500:focus,
+.f\\\\:bg-purple-500:focus-within {
+    background-color: var(--purple-500) !important;
+}
+
+.bc-purple-500,
+.h\\\\:bc-purple-500:hover,
+.f\\\\:bc-purple-500:focus,
+.f\\\\:bc-purple-500:focus-within {
+    border-color: var(--purple-500) !important;
+}
+
+.fc-purple-500,
+.h\\\\:fc-purple-500:hover,
+.f\\\\:fc-purple-500:focus,
+.f\\\\:fc-purple-500:focus-within {
+    color: var(--purple-500) !important;
+}
+
+.bg-purple-600,
+.h\\\\:bg-purple-600:hover,
+.f\\\\:bg-purple-600:focus,
+.f\\\\:bg-purple-600:focus-within {
+    background-color: var(--purple-600) !important;
+}
+
+.bc-purple-600,
+.h\\\\:bc-purple-600:hover,
+.f\\\\:bc-purple-600:focus,
+.f\\\\:bc-purple-600:focus-within {
+    border-color: var(--purple-600) !important;
+}
+
+.fc-purple-600,
+.h\\\\:fc-purple-600:hover,
+.f\\\\:fc-purple-600:focus,
+.f\\\\:fc-purple-600:focus-within {
+    color: var(--purple-600) !important;
+}
+
 .bg-gold-100,
 .h\\\\:bg-gold-100:hover,
 .f\\\\:bg-gold-100:focus,
@@ -1928,6 +2054,54 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
         color: var(--yellow-600) !important;
     }
 
+    body.theme-system  .d\\\\:bg-purple-100 {
+        background-color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-100 {
+        color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-200 {
+        background-color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-200 {
+        color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-300 {
+        background-color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-300 {
+        color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-400 {
+        background-color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-400 {
+        color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-500 {
+        background-color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-500 {
+        color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-600 {
+        background-color: var(--purple-600) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-600 {
+        color: var(--purple-600) !important;
+    }
+
     body.theme-system  .d\\\\:bg-gold-100 {
         background-color: var(--gold-100) !important;
     }
@@ -2613,6 +2787,78 @@ body.theme-system .theme-dark__forced  .d\\\\:fc-yellow-600 {
     color: var(--yellow-600) !important;
 }
 
+body.theme-dark  .d\\\\:bg-purple-100,
+.theme-dark__forced  .d\\\\:bg-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-100 {
+    background-color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-100,
+.theme-dark__forced  .d\\\\:fc-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-100 {
+    color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-200,
+.theme-dark__forced  .d\\\\:bg-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-200 {
+    background-color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-200,
+.theme-dark__forced  .d\\\\:fc-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-200 {
+    color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-300,
+.theme-dark__forced  .d\\\\:bg-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-300 {
+    background-color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-300,
+.theme-dark__forced  .d\\\\:fc-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-300 {
+    color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-400,
+.theme-dark__forced  .d\\\\:bg-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-400 {
+    background-color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-400,
+.theme-dark__forced  .d\\\\:fc-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-400 {
+    color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-500,
+.theme-dark__forced  .d\\\\:bg-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-500 {
+    background-color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-500,
+.theme-dark__forced  .d\\\\:fc-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-500 {
+    color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-600,
+.theme-dark__forced  .d\\\\:bg-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-600 {
+    background-color: var(--purple-600) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-600,
+.theme-dark__forced  .d\\\\:fc-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-600 {
+    color: var(--purple-600) !important;
+}
+
 body.theme-dark  .d\\\\:bg-gold-100,
 .theme-dark__forced  .d\\\\:bg-gold-100,
 body.theme-system .theme-dark__forced  .d\\\\:bg-gold-100 {

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

@@ -44,6 +44,6 @@ describe("anchors", () => {
             <div data-testid="${testid}" class="s-card ws3 fc-green-500">
                 ${testid}: ${component}
             </div>
-        `
+        `,
     });
 });

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

@@ -46,6 +46,6 @@ describe("avatar", () => {
             >
                 ${component}
             </div>
-        `
+        `,
     });
 });

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

@@ -21,6 +21,6 @@ describe("button", () => {
         children: {
             default: "Ask question",
         },
-        tag: "button"
+        tag: "button",
     });
 });

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

@@ -44,6 +44,6 @@ describe("button", () => {
             >
                 ${component}
             </div>
-        `
+        `,
     });
 });

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/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/notice/notice.a11y.test.ts

@@ -12,6 +12,6 @@ describe("notice", () => {
         children: {
             default: `Test notice`,
         },
-        tag: "aside"
+        tag: "aside",
     });
 });

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

@@ -15,6 +15,6 @@ describe("pagination", () => {
                 <a class="s-pagination--item" href="#">100</a>
                 <a class="s-pagination--item" href="#">Next</a>
             `,
-        }
+        },
     });
 });

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

@@ -25,6 +25,6 @@ describe("toast > notice", () => {
             >
                 ${component}
             </div>
-        `
+        `,
     });
 });