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

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/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.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/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>
+            `,
+        }
+    });
+});

package/lib/components/pagination/pagination.less

@@ -1,10 +1,10 @@
 .s-pagination {
     & &--item {
         --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-medium);
+        --_pa-item-bc: var(--bc-darker);
         --_pa-item-fc: var(--fc-medium);
         --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-dark);
+        --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
 
         // CONTEXTUAL STYLES

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

@@ -0,0 +1,26 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "visual",
+        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>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-inline-block p8" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/components/post-summary/post-summary.less

@@ -13,11 +13,11 @@
     --_ps-stats-fd: column;
     --_ps-stats-w: calc(var(--su96) + var(--su12));
     // Stats item modifiers
-    --_ps-has-answers-bc: var(--green-500);
+    --_ps-has-answers-bc: var(--green-400);
     --_ps-has-answers-bg: unset;
-    --_ps-has-answers-fc: var(--green-500);
-    --_ps-has-accepted-answers-bc: var(--green-500);
-    --_ps-has-accepted-answers-bg: var(--green-500);
+    --_ps-has-answers-fc: var(--green-400);
+    --_ps-has-accepted-answers-bc: var(--green-400);
+    --_ps-has-accepted-answers-bg: var(--green-400);
     --_ps-has-accepted-answers-fc: var(--white);
     --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
 
@@ -380,15 +380,15 @@
 
             // Hotness
             &.is-warm {
-                color: var(--_ps-state-fc, var(--yellow-600));
+                color: var(--_ps-state-fc, var(--yellow-500));
             }
 
             &.is-hot {
-                color: var(--_ps-state-fc, var(--orange-600));
+                color: var(--_ps-state-fc, var(--orange-500));
             }
 
             &.is-supernova {
-                color: var(--_ps-state-fc, var(--red-600));
+                color: var(--_ps-state-fc, var(--red-500));
             }
 
             // Status

package/lib/components/progress-bar/progress-bar.less

@@ -135,7 +135,7 @@
                     }
                 }
 
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 0;
                 height: var(--su-static6);
                 position: absolute;
@@ -203,7 +203,7 @@
                 });
 
                 align-items: center;
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 100%;
                 color: var(--_white-static);
                 display: flex;

package/lib/components/prose/prose.less

@@ -18,7 +18,7 @@
     --_pr-h6-fs: var(--fs-body1);
     --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
-    --_pr-kbd-bc: var(--black-350);
+    --_pr-kbd-bc: var(--black-300);
     --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -69,7 +69,7 @@
             &__expanding-control {
                 &:before {
                     border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--bc-dark);
+                    border-left-color: var(--black-400);
                     border-right-width: 0;
                     content: '';
                     float: left;
@@ -228,11 +228,11 @@
         }
 
         .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-300");
+            background-color: var(~"--@{name}-200");
             color: var(--fc-medium);
         }
 
-        background-color: var(~"--@{name}-200");
+        background-color: var(~"--@{name}-100");
         border-color: var(--_sw-bc);
     }
 }

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

@@ -0,0 +1,15 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("spinner", () => {
+    runComponentTests({
+        type: "a11y",
+        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

@@ -0,0 +1,43 @@
+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="d-inline-block p8" data-testid="${testid}">${component}</div>
+`;
+describe("spinner", () => {
+    // default, sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // applied font color
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            global: ["fc-theme-primary"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // .is-loading
+    runComponentTests({
+        type: "visual",
+        baseClass: "is-loading",
+        children: {
+            default: `Loading…`,
+        },
+        template,
+    });
+});

package/lib/components/tag/tag.less

@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_ta-bc: var(--red-300);
-        --_ta-bg: var(--red-200);
-        --_ta-fc: var(--red-600);
-        --_ta-bc-hover: var(--red-400);
-        --_ta-bg-hover: var(--red-300);
-        --_ta-fc-hover: var(--red-600);
-        --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-300);
-        --_ta-fc-selected: var(--red-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--orange-100);
+        --_ta-fc: var(--orange-500);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--orange-200);
+        --_ta-fc-hover: var(--orange-600);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--orange-300);
+        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
+        --_ta-bg: var(--black-150);
+        --_ta-fc: var(--black-400);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
+        --_ta-bg-hover: var(--black-200);
+        --_ta-fc-hover: var(--black-500);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-300);
+        --_ta-bg-selected: var(--black-225);
         --_ta-fc-selected: var(--black-600);
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-dark);
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
-        --_ta-bc-hover: var(--black-350);
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
-        --_ta-bc-selected: var(--black-400);
-        --_ta-bg-selected: var(--black-300);
-        --_ta-fc-selected: var(--black-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--theme-secondary-500);
+        --_ta-fc: var(--white);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--theme-secondary-400);
+        --_ta-fc-hover: var(--white);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--theme-secondary-600);
+        --_ta-fc-selected: var(--white);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

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

@@ -0,0 +1,30 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("toast > notice", () => {
+    // This is a test of notice component wrapped in a toast component
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            toast: `<span id="message">Test toast</span>`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div
+                class="s-toast ps-static t0 l0"
+                role="alertdialog"
+                aria-hidden="false"
+                aria-labelledby="message"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `
+    });
+});

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

@@ -11,16 +11,20 @@ describe("toast > notice", () => {
         modifiers: {
             primary: ["important"],
         },
-        attributes: {
-            ariaHidden: "false",
-        },
         children: {
-            toast: "Test toast",
+            toast: `<span id="message">Test toast</span>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
-                ${component}
+            <div class="d-inline-block p8" data-testid="${testid}">
+                <div
+                    class="s-toast ps-static t0 l0"
+                    role="alertdialog"
+                    aria-hidden="false"
+                    aria-labelledby="message"
+                >
+                    ${component}
+                </div>
             </div>
         `,
     });