@stackoverflow/stacks 1.8.0 → 1.9.0

package/lib/components/input-message/input-message.less

@@ -0,0 +1,48 @@
+.s-input-message {
+    --_im-fc: unset;
+    --_im-a-fc: unset;
+    --_im-a-fc-hover: unset;
+
+    .input-states({
+        a {
+            text-decoration: underline;
+        }
+    });
+
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    // MODIFIERS
+    .has-error & {
+        --_im-fc: var(--red-500);
+        --_im-a-fc: var(--red-800);
+        --_im-a-fc-hover: var(--red-900);
+    }
+
+    .has-success & {
+        --_im-fc: var(--green-500);
+        --_im-a-fc: var(--green-800);
+        --_im-a-fc-hover: var(--green-900);
+    }
+
+    .has-warning & {
+        --_im-fc: var(--yellow-800);
+        --_im-a-fc: var(--yellow-900);
+    }
+
+    // CHILD ELEMENTS
+    a {
+        &:hover {
+            color: var(--_im-a-fc-hover);
+        }
+
+        color: var(--_im-a-fc);
+    }
+
+    color: var(--_im-fc);
+
+    font-size: var(--fs-caption);
+    padding: var(--su2);
+}

package/lib/{css/components/inputs.less → components/input_textarea/input_textarea.less}

@@ -164,134 +164,3 @@
         top: 1.5em;
     }
 }
-
-// Other input-related elements
-.s-input-fill {
-    --_if-bc: var(--bc-darker);
-    --_if-bg: var(--black-050);
-    --_if-blw: 0;
-    --_if-blr: 0;
-    --_if-brr: 0;
-    --_if-brw: 0;
-
-    &&__clear {
-        --_if-bc: transparent;
-        --_if-bg: transparent;
-    }
-
-    &.order-first {
-        --_if-blw: var(--su-static1);
-        --_if-blr: var(--br-sm);
-    }
-
-    &.order-last {
-        --_if-brw: var(--su-static1);
-        --_if-brr: var(--br-sm);
-    }
-
-    background-color: var(--_if-bg);
-    border: var(--su-static1) solid var(--_if-bc);
-    border-left-width: var(--_if-blw);
-    border-right-width: var(--_if-brw);
-    border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
-
-    color: var(--fc-medium);
-    font-family: inherit;
-    line-height: var(--lh-sm);
-    padding: 0.6em 0.7em;
-    white-space: nowrap;
-}
-
-.s-input-icon {
-    --_ii-fc: unset;
-    --_ii-r: 0.7em;
-
-    // MODIFIERS
-    .has-error & {
-        --_ii-fc: var(--red-400);
-    }
-
-    .has-success & {
-        --_ii-fc: var(--green-400);
-    }
-
-    .has-warning & {
-        --_ii-fc: var(--yellow-600);
-    }
-
-    .is-disabled & {
-        --_ii-fc: var(--black-400);
-    }
-
-    .is-readonly & {
-        --_ii-fc: var(--black-200);
-
-        .highcontrast-mode({
-            --_ii-fc: var(--fc-light);
-        });
-    }
-
-    &&__creditcard,
-    &&__search {
-        --_ii-r: auto;
-
-        color: var(--black-400);
-        left: 0.7em;
-    }
-
-    color: var(--_ii-fc);
-    right: var(--_ii-r);
-
-    margin-top: -9px; // Half the icon's height at 18px for centering;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-}
-.s-input-message {
-    --_im-fc: unset;
-    --_im-a-fc: unset;
-    --_im-a-fc-hover: unset;
-
-    .input-states({
-        a {
-            text-decoration: underline;
-        }
-    });
-
-    fieldset[disabled] & {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-    }
-
-    // MODIFIERS
-    .has-error & {
-        --_im-fc: var(--red-500);
-        --_im-a-fc: var(--red-800);
-        --_im-a-fc-hover: var(--red-900);
-    }
-
-    .has-success & {
-        --_im-fc: var(--green-500);
-        --_im-a-fc: var(--green-800);
-        --_im-a-fc-hover: var(--green-900);
-    }
-
-    .has-warning & {
-        --_im-fc: var(--yellow-800);
-        --_im-a-fc: var(--yellow-900);
-    }
-
-    // CHILD ELEMENTS
-    a {
-        &:hover {
-            color: var(--_im-a-fc-hover);
-        }
-
-        color: var(--_im-a-fc);
-    }
-
-    color: var(--_im-fc);
-
-    font-size: var(--fs-caption);
-    padding: var(--su2);
-}

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

@@ -1,5 +1,5 @@
 // TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
-// it's tech debt that'll take some doing in comsumer's code to pay down.
+// 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);
@@ -105,7 +105,7 @@ a,
 .s-link {
     button& {
         &:focus {
-            outline: none;
+            outline: revert;
         }
 
         appearance: none;

package/lib/{ts/controllers/s-modal.ts → components/modal/modal.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class ModalController extends Stacks.StacksController {
     static targets = ["modal", "initialFocus"];

package/lib/{ts/controllers/s-navigation-tablist.ts → components/navigation/navigation.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class TabListController extends Stacks.StacksController {
     private boundSelectTab!: (event: MouseEvent) => void;

package/lib/{css/components/notices.less → components/notice/notice.less}

@@ -194,51 +194,6 @@
     font-size: var(--fs-body1);
 }
 
-// Banner
-// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
-// This would reduce the amount of CSS we ship to the client and simplify our codebase
-.s-banner {
-    --_no-x-offset: 0; // [1]
-    .construct-notice-component(s-banner);
-
-    &[aria-hidden="true"] { // If you want to hide and reveal the banner
-        --_no-x-offset: calc(var(--su48) + var(--su2) * -1); // -50px
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    &[aria-hidden="false"] {
-        --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
-        opacity: 1;
-        visibility: visible;
-    }
-
-    &.is-pinned { //  If you want to put the banner above the topbar
-        z-index: calc(var(--zi-navigation-fixed) + 1);
-    }
-
-    &__body-pt {
-        padding-top: 93px;
-    }
-
-    & &--container { // When we want to keep hero content capped
-        margin: 0 auto;
-        max-width: calc(var(--s-step) * 10);
-        position: relative;
-        width: 100%;
-    }
-
-    border-width: var(--su-static1) 0;
-    inset: 0 0 auto 0;
-    padding: var(--su12);
-    position: fixed;
-    -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
-    transform: translate3d(0, var(--_no-x-offset), 0);
-    width: 100%;
-    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-}
-
-// Notice
 .s-notice {
     .construct-notice-component(s-notice);
 
@@ -246,47 +201,3 @@
     border-width: var(--su-static1);
     padding: var(--su16);
 }
-
-// Toast
-.s-toast {
-    @media (prefers-reduced-motion) {
-        transform: none !important;
-    }
-
-    &[aria-hidden="false"] {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
-        visibility: visible;
-    }
-
-    .s-notice {
-        box-shadow: var(--bs-sm);
-        max-width: 44rem;
-        padding-bottom: var(--su8);
-        padding-top: var(--su8);
-        pointer-events: all;
-        width: 100%;
-    }
-
-    display: flex;
-    justify-content: center;
-    left: var(--su8);
-    opacity: 0;
-    pointer-events: none;
-    position: fixed;
-    right: var(--su8);
-    top: var(--su16);
-    transform: translate3d(0, -66px, 0);
-    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
-    visibility: hidden;
-    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
-}
-
-//  [1] When we use .s-banner, we need to adjust the padding-top on
-//      the body tag. This class correctly adjusts the body padding ONLY if
-//      the notice is one line. If it wraps to multiple lines, more classes or
-//      (ideally) JS will need to be used to determine the notice's height
-//      at the time of render. The padding value is determined like so:
-//      50px (top bar) + 44px (notice height) - 1px (bottom border)
-//      The borders subtraction are necessary to neatly tuck everything together.

package/lib/{css/components/popovers.less → components/popover/popover.less}

@@ -30,6 +30,7 @@
     &.is-visible {
         --_po-d: block;
     }
+
     &&__tooltip {
         --_po-wmn: unset;
         --_po-w: auto;

package/lib/{ts/controllers/s-popover.ts → components/popover/popover.ts}

@@ -1,6 +1,6 @@
 import { createPopper, Placement } from "@popperjs/core";
 import type * as Popper from "@popperjs/core";
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 type OutsideClickBehavior =
     | "always"

package/lib/{test/s-tooltip.test.ts → components/popover/tooltip.test.ts}

@@ -1,11 +1,11 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import "../ts/index";
+import "../../index";
 
 const user = userEvent.setup();
 
-describe("s-tooltip", () => {
+describe("tooltip", () => {
     it("should make the tooltip element visible on hover (after a delay)", async () => {
         const trigger = await fixture(html`
             <button
@@ -19,10 +19,12 @@ describe("s-tooltip", () => {
             </button>
         `);
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(screen.queryByRole("tooltip")).to.be.null;
 
         await user.hover(trigger);
         const tooltip = await screen.findByRole("tooltip");
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
 
         await user.unhover(trigger);
@@ -54,9 +56,11 @@ describe("s-tooltip", () => {
 
         await user.hover(button);
         const tooltip = await screen.findByRole("tooltip");
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
 
         await user.hover(svg);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(tooltip).to.be.visible;
     });
 });

package/lib/{ts/controllers/s-tooltip.ts → components/popover/tooltip.ts}

@@ -1,5 +1,5 @@
-import * as Stacks from "../stacks";
-import { BasePopoverController, PopoverController } from "./s-popover";
+import * as Stacks from "../../stacks";
+import { BasePopoverController, PopoverController } from "./popover";
 
 export interface TooltipOptions {
     placement: string;

package/lib/{test/s-tooltip.visual.test.ts → components/popover/tooltip.visual.test.ts}

@@ -2,11 +2,11 @@ import { html, fixture } from "@open-wc/testing";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { visualDiff } from "@web/test-runner-visual-regression";
-import "../ts/index";
+import "../../index";
 
 const user = userEvent.setup();
 
-describe("s-tooltip", () => {
+describe("tooltip", () => {
     it("should not introduce visual regressions", async () => {
         const wrapper = await fixture(html`
             <div style="height: 100px; width: 160px; display: inline-block;">

package/lib/{css/components/sidebar-widgets.less → components/sidebar-widget/sidebar-widget.less}

@@ -213,7 +213,6 @@
     position: relative; // so that it's the positioning parent for the :after
 }
 
-
 // COLOR ALTERNATIVES
 .alternate-color(@name) {
     &.s-sidebarwidget__@{name} {

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

@@ -1,8 +1,3 @@
-.s-table-container {
-    overflow-x: auto;
-    @scrollbar-styles();
-}
-
 .s-table {
     @ta-cell-border: var(--su-static1) solid var(--bc-medium);
     @ta-columns: (100% / 12);

package/lib/{ts/controllers/s-table.ts → components/table/table.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class TableController extends Stacks.StacksController {
     static targets = ["column"];

package/lib/components/table-container/table-container.less

@@ -0,0 +1,4 @@
+.s-table-container {
+    overflow-x: auto;
+    @scrollbar-styles();
+}

package/lib/components/toast/toast.less

@@ -0,0 +1,35 @@
+// See also ./lib/components/notice/notice.less
+.s-toast {
+    @media (prefers-reduced-motion) {
+        transform: none !important;
+    }
+
+    &[aria-hidden="false"] {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
+        visibility: visible;
+    }
+
+    .s-notice {
+        box-shadow: var(--bs-sm);
+        max-width: 44rem;
+        padding-bottom: var(--su8);
+        padding-top: var(--su8);
+        pointer-events: all;
+        width: 100%;
+    }
+
+    display: flex;
+    justify-content: center;
+    left: var(--su8);
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    right: var(--su8);
+    top: var(--su16);
+    transform: translate3d(0, -66px, 0);
+    transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
+    visibility: hidden;
+    z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
+}

package/lib/{test/s-toast.test.ts → components/toast/toast.test.ts}

@@ -1,8 +1,8 @@
 import { html, fixture, expect } from "@open-wc/testing";
 import { screen } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showToast, hideToast } from "../ts/index";
+import "../../index";
+import { showToast, hideToast } from "../../controllers";
 
 const user = userEvent.setup();
 
@@ -30,17 +30,19 @@ const testToast = (hidden = true) => html` <button
         </aside>
     </div>`;
 
-describe("s-toast", () => {
+describe("toast", () => {
     it("trigger should make toast visible", async () => {
         await fixture(testToast(true));
 
         const button = screen.getAllByRole("button")[0]; // Trigger button
         const toast = screen.getByTestId("test-toast");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "true");
         button.addEventListener("click", () => showToast(toast));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "false");
     });
 
@@ -50,10 +52,12 @@ describe("s-toast", () => {
         const button = screen.getAllByRole("button")[1]; // Close button
         const toast = screen.getByTestId("test-toast");
 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "false");
         button.addEventListener("click", () => hideToast(toast));
 
         await user.click(button);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
         expect(toast).to.have.attribute("aria-hidden", "true");
     });
 

package/lib/{ts/controllers/s-toast.ts → components/toast/toast.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 export class ToastController extends Stacks.StacksController {
     static targets = ["toast", "initialFocus"];

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

@@ -0,0 +1,27 @@
+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: "visual",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            ariaHidden: "false",
+        },
+        children: {
+            toast: "Test toast",
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
+                ${component}
+            </div>
+        `,
+    });
+});

package/lib/{ts/controllers/s-uploader.ts → components/uploader/uploader.ts}

@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
 
 interface FilePreview {
     data?: string | ArrayBuffer;

package/lib/controllers.ts

@@ -0,0 +1,33 @@
+// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
+export {
+    BannerController,
+    hideBanner,
+    showBanner,
+} from "./components/banner/banner";
+export { ExpandableController } from "./components/expandable/expandable";
+export {
+    ModalController,
+    hideModal,
+    showModal,
+} from "./components/modal/modal";
+export { TabListController } from "./components/navigation/navigation";
+export {
+    attachPopover,
+    detachPopover,
+    hidePopover,
+    BasePopoverController,
+    PopoverController,
+    showPopover,
+} from "./components/popover/popover";
+export { TableController } from "./components/table/table";
+export {
+    ToastController,
+    hideToast,
+    showToast,
+} from "./components/toast/toast";
+export {
+    setTooltipHtml,
+    setTooltipText,
+    TooltipController,
+} from "./components/popover/tooltip";
+export { UploaderController } from "./components/uploader/uploader";

package/lib/{ts/index.ts → index.ts}

@@ -1,4 +1,4 @@
-import "../css/stacks.less";
+import "./stacks.less";
 import {
     BannerController,
     ExpandableController,

package/lib/{css/stacks-dynamic.less → stacks-dynamic.less}

@@ -16,10 +16,9 @@
 //  ----------------------------------------------------------------------------
 //  --  SET BASIC STYLES FOR BODY
 @import "base/body.less";
-
 //  --  LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
 //  --  CONFIG
 @import "base/configuration-static.less";
-@import "base/internals.less";
+@import "base/internal.less";