@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/{css/components → components/block-link}/block-link.less

@@ -1,80 +1,80 @@
-a.s-block-link,
-.s-block-link {
-    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
-    --_bl-bg: transparent;
-    --_bl-fc: var(--black-600);
-    --_bl-fc-hover: var(--black-800);
-    --_bl-fc-visited: var(--_bl-fc);
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        &.is-selected {
-            --_bl-bg: var(--black-025);
-        }
-    });
-
-    // STATES
-    &.is-selected {
-        --_bl-bg: var(--black-050);
-        --_bl-fc: var(--black-800);
-
-        font-weight: bold;
-    }
-
-    // MODIFIERS
-    &&__left,
-    &&__right {
-        &.is-selected {
-            &:focus:not(:focus-visible),
-            &:focus-visible {
-                outline: none;
-            }
-
-            &:focus-visible {
-                box-shadow: @bl-bs, 0 0 0 var(--su-static4) var(--focus-ring-muted);
-            }
-
-            box-shadow: @bl-bs;
-        }
-    }
-
-    &&__right {
-        &.is-selected {
-            --_li-block-bs-offset-x: -3px;
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_bl-fc: var(--red-500);
-        --_bl-fc-hover: var(--red-700);
-    }
-
-    &:active,
-    &:hover {
-        &,
-        &:visited {
-            color: var(--_bl-fc-hover);
-        }
-    }
-
-    &:visited {
-        color: var(--_bl-fc-focus);
-    }
-
-    @focus-styles();
-    background-color: var(--_bl-bg); // [1]
-    color: var(--_bl-fc);
-
-    border-radius: 0; // [1]
-    border: none; // [1]
-    cursor: pointer; // [1]
-    display: block;
-    font-family: inherit; // [1]
-    line-height: inherit; // [1]
-    padding: var(--su6) var(--su12);
-    text-align: left; // [1]
-    width: 100%;
-}
-
-//  [1] Normalize for when applying to a button
+a.s-block-link,
+.s-block-link {
+    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
+    --_bl-bg: transparent;
+    --_bl-fc: var(--black-600);
+    --_bl-fc-hover: var(--black-800);
+    --_bl-fc-visited: var(--_bl-fc);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        &.is-selected {
+            --_bl-bg: var(--black-025);
+        }
+    });
+
+    // STATES
+    &.is-selected {
+        --_bl-bg: var(--black-050);
+        --_bl-fc: var(--black-800);
+
+        font-weight: bold;
+    }
+
+    // MODIFIERS
+    &&__left,
+    &&__right {
+        &.is-selected {
+            &:focus:not(:focus-visible),
+            &:focus-visible {
+                outline: none;
+            }
+
+            &:focus-visible {
+                box-shadow: @bl-bs, 0 0 0 var(--su-static4) var(--focus-ring-muted);
+            }
+
+            box-shadow: @bl-bs;
+        }
+    }
+
+    &&__right {
+        &.is-selected {
+            --_li-block-bs-offset-x: -3px;
+        }
+    }
+
+    // VARIANTS
+    &&__danger {
+        --_bl-fc: var(--red-500);
+        --_bl-fc-hover: var(--red-700);
+    }
+
+    &:active,
+    &:hover {
+        &,
+        &:visited {
+            color: var(--_bl-fc-hover);
+        }
+    }
+
+    &:visited {
+        color: var(--_bl-fc-focus);
+    }
+
+    @focus-styles();
+    background-color: var(--_bl-bg); // [1]
+    color: var(--_bl-fc);
+
+    border-radius: 0; // [1]
+    border: none; // [1]
+    cursor: pointer; // [1]
+    display: block;
+    font-family: inherit; // [1]
+    line-height: inherit; // [1]
+    padding: var(--su6) var(--su12);
+    text-align: left; // [1]
+    width: 100%;
+}
+
+//  [1] Normalize for when applying to a button

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

@@ -0,0 +1,61 @@
+import { html } from "@open-wc/testing";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const blockLinkTemplate = ({ component, testid }: any) => html`<div
+    class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+    data-testid="${testid}"
+>
+    ${component}
+</div>`;
+
+describe("block-link", () => {
+    // Base block link
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-block-link",
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children: {
+            default: `block link`,
+        },
+        template: blockLinkTemplate,
+    });
+
+    // Base + danger
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-block-link",
+        modifiers: {
+            primary: ["danger"],
+        },
+        children: {
+            default: `block link`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+        template: blockLinkTemplate,
+    });
+
+    // All left and rignt variants
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-block-link",
+        variants: ["left is-selected", "right is-selected"],
+        modifiers: {
+            primary: ["danger"],
+        },
+        children: {
+            default: `block link`,
+        },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+        template: blockLinkTemplate,
+    });
+});

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

@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("breadcrumbs", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-breadcrumbs",
+        children: {
+            default: `
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Help center</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Icons</a>
+                </div>
+            `,
+        },
+        attributes: {
+            "aria-label": "Breadcrumb navigation",
+        },
+        tag: "nav",
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/{css/components → components/breadcrumbs}/breadcrumbs.less

@@ -1,41 +1,41 @@
-.s-breadcrumbs {
-    --_br-divider-px: var(--su4);
-    --_br-link-fc: var(--fc-light);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_br-divider-px: var(--su2);
-    });
-
-    // CHILD ELEMENTS
-    & &--divider {
-        .highcontrast-mode({
-            color: var(--fc-light);
-        });
-
-        margin-left: var(--_br-divider-px);
-        margin-right: var(--_br-divider-px);
-    }
-
-    & &--item {
-        align-items: center;
-        display: flex;
-        flex-wrap: nowrap;
-        margin-bottom: var(--su2);
-        margin-top: var(--su2);
-    }
-
-    & &--link {
-        color: var(--_br-link-fc);
-
-        &:hover {
-            --_br-link-fc: var(--fc-medium);
-        }
-    }
-
-    align-items: flex-start;
-    color: var(--black-200);
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--fs-caption);
-}
+.s-breadcrumbs {
+    --_br-divider-px: var(--su4);
+    --_br-link-fc: var(--fc-light);
+
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        --_br-divider-px: var(--su2);
+    });
+
+    // CHILD ELEMENTS
+    & &--divider {
+        .highcontrast-mode({
+            color: var(--fc-light);
+        });
+
+        margin-left: var(--_br-divider-px);
+        margin-right: var(--_br-divider-px);
+    }
+
+    & &--item {
+        align-items: center;
+        display: flex;
+        flex-wrap: nowrap;
+        margin-bottom: var(--su2);
+        margin-top: var(--su2);
+    }
+
+    & &--link {
+        color: var(--_br-link-fc);
+
+        &:hover {
+            --_br-link-fc: var(--fc-medium);
+        }
+    }
+
+    align-items: flex-start;
+    color: var(--black-200);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--fs-caption);
+}

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

@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("breadcrumbs", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-breadcrumbs",
+        children: {
+            default: `
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Help center</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Icons</a>
+                </div>
+            `,
+        },
+        attributes: {
+            "aria-label": "Breadcrumb navigation",
+        },
+        tag: "nav",
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -0,0 +1,32 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("button", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-btn",
+        variants: ["danger", "muted", "primary"],
+        modifiers: {
+            primary: ["filled", "outlined"],
+            secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
+            global: ["is-loading"],
+            standalone: [
+                ...["link", "unset"],
+                ...["facebook", "github", "google"],
+            ],
+        },
+        attributes: {
+            type: "button",
+        },
+        children: {
+            default: "Ask question",
+        },
+        tag: "button",
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+        skippedTestids: [
+            /s-btn-dark/, // TODO remove when contrast bugs are fixed
+        ],
+    });
+});