@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.10

package/lib/components/link-preview/link-preview.less

@@ -1,6 +1,9 @@
 .s-link-preview {
+    --_lp-details-fc: var(--black-400);
     --_lp-details-mt: var(--su2);
+    --_lp-footer-bg: var(--black-100);
     --_lp-footer-fd: unset;
+    --_lp-header-bg: var(--black-100);
     --_lp-misc-pl: var(--su4);
     --_lp-misc-pt: unset;
 
@@ -12,6 +15,12 @@
         --_lp-misc-pt: var(--su2);
     });
 
+    .highcontrast-mode({
+        --_lp-details-fc: var(--black-600);
+        --_lp-footer-bg: var(--black-050);
+        --_lp-header-bg: var(--black-050);
+    });
+
     // CHILD ELEMENTS
     & &--details,
     & &--footer {
@@ -25,7 +34,7 @@
                 color: var(--black-500);
             }
 
-            color: var(--black-400);
+            color: var(--black-600);
             cursor: pointer;
             text-decoration: none;
         }
@@ -49,16 +58,16 @@
     }
 
     & &--details {
+        color: var(--_lp-details-fc);
         margin-top: var(--_lp-details-mt);
 
-        color: var(--black-400);
         font-size: var(--fs-caption);
     }
 
     & &--footer {
+        background: var(--_lp-footer-bg);
         flex-direction: var(--_lp-footer-fd);
 
-        background: var(--black-100);
         border-bottom-left-radius: var(--br-sm);
         border-bottom-right-radius: var(--br-sm);
         border-top: var(--su-static1) solid var(--bc-medium);
@@ -69,7 +78,7 @@
     }
 
     & &--header {
-        background: var(--black-100);
+        background: var(--_lp-header-bg);
         border-bottom: var(--su-static1) solid var(--bc-medium);
         border-top-left-radius: var(--br-sm);
         border-top-right-radius: var(--br-sm);
@@ -100,7 +109,7 @@
         &:hover{
             &,
             &.s-link__visited {
-                color: var(--theme-link-color-hover);
+                color: var(--theme-link-color-hover, var(--theme-secondary-500));
             }
         }
 
@@ -117,10 +126,10 @@
         }
 
         &.s-link__visited:visited {
-            color: var(--theme-link-color);
+            color: var(--theme-link-color, var(--theme-secondary-600));
         }
 
-        color: var(--theme-link-color);
+        color: var(--theme-link-color, var(--theme-secondary-400));
         cursor: pointer;
         text-decoration: none;
     }

package/lib/components/link-preview/link-preview.visual.test.ts

@@ -0,0 +1,52 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    return `
+        <div class="s-link-preview--header">
+            <div class="s-link-preview--icon">👋</div>
+            <div>
+                <a href="#" class="s-link-preview--title">
+                    Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
+                </a>
+                <div class="s-link-preview--details">
+                    Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
+                </div>
+            </div>
+        </div>
+        ${
+            child
+                ? child
+                : `
+            <div class="s-link-preview--body">
+                <p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
+                <p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
+                <p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
+                <p>Thanks!</p>
+            </div>
+        `
+        }
+        <div class="s-link-preview--footer">
+            <a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
+            <a href="#" class="s-link-preview--misc">Privacy notice</a>
+        </div>
+    `;
+};
+describe("link preview", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-link-preview",
+        children: {
+            default: getChild(),
+            code: getChild(`
+                <div class="s-link-preview--code">
+                    <pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
+                </div>
+            `),
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws8 p8" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

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

@@ -0,0 +1,17 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("notice", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            default: `Test notice`,
+        },
+        tag: "aside",
+    });
+});

package/lib/components/notice/notice.less

@@ -1,9 +1,10 @@
 .construct-notice-component(@baseClass) {
-    --_no-bc: var(--bc-medium);
-    --_no-bg: var(--black-150);
-    --_no-fc: var(--fc-medium);
+    --_no-bc: var(--black-225);
+    --_no-bg: var(--black-100);
+    --_no-fc: var(--black-500);
     --_no-btn-bg-focus: var(--black-225);
     --_no-btn-bg-active: var(--black-250);
+    --_no-btn-fc: var(--_no-fc);
 
     // MODIFIERS
     &:not(&__important) {
@@ -26,137 +27,99 @@
         --_no-fc: var(--white);
         --_no-btn-bg-focus: var(--black-600);
         --_no-btn-bg-active: var(--black-600);
-
-        .highcontrast-mode({
-            --_no-bc: var(--_no-bg);
-        });
+        --_no-btn-fc: var(--_no-fc);
+        --_no-code-bg: var(--black-300);
     }
 
     // VARIANTS
     &__danger {
         --_no-bc: var(--red-300);
-        --_no-bg: var(--red-200);
-        --_no-btn-bg-active: var(--red-300);
-        --_no-btn-bg-focus: var(--red-300);
-
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--red-300);
-            });
-        }
+        --_no-bg: var(--red-100);
+        --_no-btn-bg-active: var(--red-200);
+        --_no-btn-bg-focus: var(--red-200);
+        --_no-btn-fc: var(--red-500);
+        --_no-code-bg: var(--red-300);
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--red-400);
             --_no-btn-bg-active: var(--red-500);
             --_no-btn-bg-focus: var(--red-500);
+            --_no-btn-fc: var(--red-100);
 
-            .dark-mode({
-                --_no-bg: var(--red-400);
-                --_no-fc: var(--black-600);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--red-400);
-                --_no-fc: var(--white);
+            .highcontrast-mode({
+                --_no-bg: var(--red-500);
             });
         }
     }
 
     &__info {
         --_no-bc: var(--theme-secondary-300);
-        --_no-bg: var(--theme-secondary-200);
-        --_no-btn-bg-focus: var(--theme-secondary-300);
-        --_no-btn-bg-active: var(--theme-secondary-300);
+        --_no-bg: var(--theme-secondary-100);
+        --_no-btn-bg-focus: var(--theme-secondary-200);
+        --_no-btn-bg-active: var(--theme-secondary-200);
+        --_no-btn-fc: var(--theme-secondary-500);
         --_no-code-bg: var(--theme-secondary-300);
 
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--theme-secondary-300);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--theme-secondary-300);
-            });
-        }
-
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--theme-secondary-400);
             --_no-btn-bg-active: var(--theme-secondary-500);
-            --_no-btn-bg-focus: var(--theme-secondary-400);
+            --_no-btn-bg-focus: var(--theme-secondary-500);
+            --_no-btn-fc: var(--theme-secondary-100);
 
-            .dark-mode({
-                --_no-bg: var(--theme-secondary-400);
-                --_no-fc: var(--black-600);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--theme-secondary-400);
-                --_no-fc: var(--white);
+            .highcontrast-mode({
+                --_no-bg: var(--theme-secondary-500);
             });
         }
     }
 
     &__success {
         --_no-bc: var(--green-300);
-        --_no-bg: var(--green-200);
-        --_no-btn-bg-active: var(--green-300);
-        --_no-btn-bg-focus: var(--green-300);
-
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--green-300);
-            });
-        }
+        --_no-bg: var(--green-100);
+        --_no-btn-bg-active: var(--green-200);
+        --_no-btn-bg-focus: var(--green-200);
+        --_no-btn-fc: var(--green-500);
+        --_no-code-bg: var(--green-300);
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--green-400);
-            --_no-fc: var(--black-600);
             --_no-btn-bg-active: var(--green-500);
-            --_no-btn-bg-focus: var(--green-400);
-
-            .dark-mode({
-                --_no-bg: var(--green-400);
-                --_no-fc: var(--white);
-            });
+            --_no-btn-bg-focus: var(--green-500);
+            --_no-btn-fc: var(--green-100);
 
             .highcontrast-mode({
-                --_no-bg: var(--green-400);
-                --_no-fc: var(--white);
+                --_no-bg: var(--green-500);
             });
         }
     }
 
     &__warning {
-        --_no-bc: var(--yellow-400);
-        --_no-bg: var(--yellow-200);
-        --_no-btn-bg-active: var(--yellow-400);
-        --_no-btn-bg-focus: var(--yellow-300);
+        --_no-bc: var(--yellow-300);
+        --_no-bg: var(--yellow-100);
+        --_no-btn-bg-active: var(--yellow-200);
+        --_no-btn-bg-focus: var(--yellow-200);
+        --_no-btn-fc: var(--yellow-600);
         --_no-code-bg: var(--yellow-300);
 
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--yellow-300);
-            });
-        }
-
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--yellow-400);
-            --_no-fc: var(--black-600);
-            --_no-btn-bg-active: var(--yellow-500);
-            --_no-btn-bg-focus: var(--yellow-400);
+            --_no-fc: var(--black);
+            --_no-btn-fc: var(--_no-fc);
+            --_no-btn-bg-active: var(--yellow-300);
+            --_no-btn-bg-focus: var(--yellow-300);
 
             .dark-mode({
-                --_no-bg: var(--yellow-500);
-                --_no-fc: var(--white);
+                --_no-fc: var(--yellow-200);
             });
 
             .highcontrast-mode({
                 --_no-bg: var(--yellow-500);
                 --_no-fc: var(--white);
+                --_no-btn-bg-active: transparent;
+                --_no-btn-bg-focus: transparent;
             });
         }
     }
@@ -173,15 +136,15 @@
         }
 
         &:active {
-            background: var(--_no-btn-bg-active);
+            background-color: var(--_no-btn-bg-active, inherit) !important;
         }
 
         &:focus,
         &:hover {
-            background: var(--_no-btn-bg-focus);
+            background-color: var(--_no-btn-bg-focus, inherit) !important;
         }
 
-        color: inherit;
+        color: var(--_no-btn-fc, inherit) !important;
         padding: var(--su8);
     }
 

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

@@ -0,0 +1,26 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("notice", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-notice",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            ariaHidden: "false",
+        },
+        children: {
+            default: `Test notice`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div class="d-inline-block p8" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -0,0 +1,29 @@
+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>
+        `,
+    });
+});

package/lib/components/page-title/page-title.less

@@ -31,7 +31,7 @@
     & &--header {
         color: var(--fc-dark);
         font-size: var(--fs-headline1);
-        font-weight: normal;
+        font-weight: bold;
         line-height: var(--lh-sm);
         margin: 0;
         margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️

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

@@ -0,0 +1,20 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-pagination",
+        children: {
+            default: `
+                <a class="s-pagination--item" href="#">Prev</a>
+                <a class="s-pagination--item" href="#">1</a>
+                <span class="s-pagination--item is-selected" aria-current="page">2</span>
+                <a class="s-pagination--item" href="#">3</a>
+                <span class="s-pagination--item s-pagination--item__clear">…</span>
+                <a class="s-pagination--item" href="#">100</a>
+                <a class="s-pagination--item" href="#">Next</a>
+            `,
+        },
+    });
+});