@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/components/button/button.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 => {
+    switch (child) {
+        case "badge":
+            return `Ask question
+                <span class="s-btn--badge">
+                    <span class="s-btn--number">198</span>
+                </span>`;
+        default:
+            return "Ask question";
+    }
+};
+
+describe("button", () => {
+    // TODO test disabled states, interaction pseudo-classes
+    runComponentTests({
+        type: "visual",
+        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: getChild(),
+            badge: getChild("badge"),
+        },
+        tag: "button",
+        template: ({ component, testid }) => html`
+            <div
+                class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+        excludedTestids: [
+            /primary-outlined/, // This combination is not supported
+        ],
+    });
+});

package/lib/{css/components/button-groups.less → components/button-group/button-group.less}

@@ -1,83 +1,83 @@
-.s-btn-group {
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        .s-btn {
-            &.s-btn__dropdown {
-                padding-right: 1.2em;
-
-                &:after {
-                    right: 0.4em;
-                }
-            }
-
-            padding-left: 0.4em;
-            padding-right: 0.4em;
-        }
-    }, @force-selector: true);
-
-    // VARIANTS
-    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
-    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
-        border-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:first-child:not(:only-child),
-    &&--radio .s-btn:first-of-type:not(:last-of-type) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:last-child:not(:only-child),
-    &&--radio .s-btn:last-of-type:not(:first-of-type) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    &:not(&--radio) .s-btn:not(:last-child),
-    &&--radio .s-btn:not(:last-of-type) {
-        margin-right: calc(var(--su-static1) * -1);
-    }
-
-    // CHILD ELEMENTS
-    form {
-        &:not(:first-child):not(:last-child) {
-            .s-btn {
-                border-radius: 0;
-            }
-        }
-
-        &:last-child:not(:only-child) {
-            .s-btn:not(:last-child) {
-                border-radius: 0;
-            }
-        }
-
-        &:first-child:not(:only-child) {
-            .s-btn:not(:first-child) {
-                border-radius: 0;
-            }
-        }
-
-        display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
-    }
-
-    .s-btn {
-        &:active {
-            z-index: var(--zi-active);
-        }
-
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
-        }
-
-        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
-    }
-
-    // STATIC COMPONENT STYLES
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
-}
+.s-btn-group {
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        .s-btn {
+            &.s-btn__dropdown {
+                padding-right: 1.2em;
+
+                &:after {
+                    right: 0.4em;
+                }
+            }
+
+            padding-left: 0.4em;
+            padding-right: 0.4em;
+        }
+    }, @force-selector: true);
+
+    // VARIANTS
+    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
+    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
+        border-radius: 0;
+    }
+
+    &:not(&--radio) .s-btn:first-child:not(:only-child),
+    &&--radio .s-btn:first-of-type:not(:last-of-type) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &:not(&--radio) .s-btn:last-child:not(:only-child),
+    &&--radio .s-btn:last-of-type:not(:first-of-type) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    &:not(&--radio) .s-btn:not(:last-child),
+    &&--radio .s-btn:not(:last-of-type) {
+        margin-right: calc(var(--su-static1) * -1);
+    }
+
+    // CHILD ELEMENTS
+    form {
+        &:not(:first-child):not(:last-child) {
+            .s-btn {
+                border-radius: 0;
+            }
+        }
+
+        &:last-child:not(:only-child) {
+            .s-btn:not(:last-child) {
+                border-radius: 0;
+            }
+        }
+
+        &:first-child:not(:only-child) {
+            .s-btn:not(:first-child) {
+                border-radius: 0;
+            }
+        }
+
+        display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
+    }
+
+    .s-btn {
+        &:active {
+            z-index: var(--zi-active);
+        }
+
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
+        }
+
+        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
+        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
+    }
+
+    // STATIC COMPONENT STYLES
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
+}

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

@@ -0,0 +1,13 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("card", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-card",
+        variants: ["muted"],
+        children: {
+            default: `<p>This is a description of the card’s content.</p>`,
+        },
+    });
+});

package/lib/{css/components/cards.less → components/card/card.less}

@@ -1,29 +1,29 @@
-.s-card {
-    --_ca-bc: var(--bc-medium);
-
-    // CONTEXTUAL STYLES
-    a& {
-        text-decoration: none !important;
-    }
-
-    // VARIANTS
-    &&__muted {
-        --_ca-bc: var(--bc-light);
-
-        //  Dim only the first child card content
-        > * {
-            opacity: 0.65;
-        }
-    }
-
-    // CHILD ELEMENTS
-    p:last-of-type {
-        margin-bottom: 0;
-    }
-
-    border: var(--su-static1) solid var(--_ca-bc);
-
-    background-color: var(--white);
-    border-radius: var(--br-sm);
-    padding: var(--su12);
-}
+.s-card {
+    --_ca-bc: var(--bc-medium);
+
+    // CONTEXTUAL STYLES
+    a& {
+        text-decoration: none !important;
+    }
+
+    // VARIANTS
+    &&__muted {
+        --_ca-bc: var(--bc-light);
+
+        //  Dim only the first child card content
+        > * {
+            opacity: 0.65;
+        }
+    }
+
+    // CHILD ELEMENTS
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    border: var(--su-static1) solid var(--_ca-bc);
+
+    background-color: var(--white);
+    border-radius: var(--br-sm);
+    padding: var(--su12);
+}

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

@@ -0,0 +1,54 @@
+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 cardTemplate = ({ component, testid }: any) => html`<div
+    class="d-inline-flex ai-center jc-center hs2 ws3 p8"
+    data-testid="${testid}"
+>
+    ${component}
+</div>`;
+
+const baseChild = `
+    <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>
+    <p class="fs-body1 fc-medium">
+        This is a description of the card’s content.
+    </p>
+    <div class="d-flex gx4">
+        <button class="flex--item s-btn s-btn__primary s-btn__sm">
+            Call to action
+        </button>
+        <button class="flex--item s-btn s-btn__sm">Cancel</button>
+    </div>
+`;
+
+describe("card", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-card",
+        variants: ["muted"],
+        children: {
+            default: baseChild,
+        },
+        template: cardTemplate,
+    });
+
+    // Stacked
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-card",
+        variants: ["stacked"], // dummy variant for testid differentiation
+        children: {
+            default: `<div class="s-card ps-relative b4 l4">${baseChild}</div>`,
+        },
+        attributes: {
+            class: "p0",
+        },
+        template: cardTemplate,
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
+    });
+});

package/lib/components/check-control/check-control.less

@@ -0,0 +1,17 @@
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+    --_cc-ai: center;
+
+    // CONTEXTUAL STYLES
+    .s-check-group & {
+        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+    }
+
+    // CHILD ELEMENTS
+    .s-label {
+        font-weight: normal;
+    }
+
+    align-items: var(--_cc-ai);
+    display: flex;
+    gap: var(--su8);
+}

package/lib/components/check-group/check-group.less

@@ -0,0 +1,19 @@
+.s-check-group {
+    --_cg-fd: column;
+
+    // MODIFIERS
+    &&__horizontal {
+        --_cg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    // TODO HACK? <legend> isn't respecting gap...
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+
+    flex-direction: var(--_cg-fd);
+
+    display: flex;
+    gap: var(--su8);
+}