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

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/label/label.less

@@ -53,28 +53,18 @@
 
         // TODO: include child component class (without variant) on selector
         &__beta {
-            --_la-status-bg: var(--blue-300);
+            --_la-status-bg: var(--blue-200);
             --_la-status-fc: var(--blue-500);
         }
 
         &__new {
-            --_la-status-bg: var(--green-300);
+            --_la-status-bg: var(--green-200);
             --_la-status-fc: var(--green-500);
-
-            .dark-mode({
-                --_la-status-bg: var(--green-200);
-                --_la-status-fc: var(--green-600);
-            });
         }
 
         &__required {
-            --_la-status-bg: var(--red-300);
+            --_la-status-bg: var(--red-200);
             --_la-status-fc: var(--red-500);
-
-            .dark-mode({
-                --_la-status-bg: var(--red-200);
-                --_la-status-fc: var(--red-600);
-            });
         }
 
         background-color: var(--_la-status-bg);
@@ -99,7 +89,7 @@
 
     font-size: var(--_la-fs);
 
-    color: var(--fc-dark);
+    color: var(--fc-medium);
     font-family: inherit;
     font-weight: 600;
     padding: 0 var(--su2); // Helps the label visually line up with inputs

package/lib/components/link/link.less

@@ -2,9 +2,9 @@
 // it's tech debt that'll take some doing in consumer's code to pay down.
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color);
-    --_li-fc-hover: var(--theme-link-color-hover);
-    --_li-fc-visited: var(--theme-link-color-visited);
+    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
+    --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -53,22 +53,22 @@ a,
         }
 
         &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
-            --_li-fc: var(--theme-link-color-visited);
-            --_li-fc-hover: var(--theme-link-color-hover);
-            --_li-fc-visited: var(--theme-link-color-visited);
+            --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
+            --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
+            --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
         }
 
         // VARIANTS
         &__danger {
             --_li-fc: var(--red-400);
-            --_li-fc-hover: var(--red-400);
-            --_li-fc-visited: var(--red-500);
+            --_li-fc-hover: var(--red-500);
+            --_li-fc-visited: var(--red-600);
         }
 
         &__grayscale {
-            --_li-fc: var(--black-600);
-            --_li-fc-hover: var(--black-600);
-            --_li-fc-visited: var(--black-500);
+            --_li-fc: var(--black-500);
+            --_li-fc-hover: var(--black-400);
+            --_li-fc-visited: var(--black-600);
         }
 
         &__inherit {
@@ -80,7 +80,7 @@ a,
         &__muted {
             --_li-fc: var(--black-400);
             --_li-fc-hover: var(--black-500);
-            --_li-fc-visited: var(--black-500);
+            --_li-fc-visited: var(--black-600);
         }
     }
 

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

@@ -0,0 +1,48 @@
+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: "a11y",
+        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>
+            `),
+        },
+    });
+});

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/modal/modal.less

@@ -94,6 +94,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,78 @@
+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>
+        `,
+    });
+});

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",
+    });
+});