@stackoverflow/stacks 1.0.0-beta.0 → 1.1.0

package/lib/css/stacks-static.less

@@ -1,86 +1,86 @@
-//
-//  STACK OVERFLOW
-//  STATIC STACK ELEMENTS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-//  $   STATIC ELEMENTS
-//      The following items are elements which we DO NOT allow communities
-//      to modify via variables.
-//  ----------------------------------------------------------------------------
-@import "base/reset.less";
-@import "base/icons.less";
-
-//  --  COMPONENTS
-@import "components/activity-indicator.less";
-@import "components/avatars.less";
-@import "components/badges.less";
-@import "components/blank-states.less";
-@import "components/breadcrumbs.less";
-@import "components/button-groups.less";
-@import "components/cards.less";
-@import "components/code-blocks.less";
-@import "components/collapsible.less";
-@import "components/inputs.less";
-@import "components/menu.less";
-@import "components/modals.less";
-@import "components/navigation.less";
-@import "components/page-titles.less";
-@import "components/popovers.less";
-@import "components/post-summary.less";
-@import "components/progress-bars.less";
-@import "components/prose.less";
-@import "components/spinner.less";
-@import "components/tables.less";
-@import "components/toggle-switches.less";
-@import "components/topbar.less";
-@import "components/uploader.less";
-@import "components/user-cards.less";
-@import "components/widget-static.less";
-
-//  --  LESS CONSTANTS AND MIXINS
-@import "exports/exports.less";
-
-//  --  ATOMIC CLASSES
-@import "atomic/borders.less";
-@import "atomic/colors.less";
-@import "atomic/flex.less";
-@import "atomic/grid.less";
-@import "atomic/spacing.less";
-@import "atomic/typography.less";
-@import "atomic/misc.less";
-@import "atomic/width-height.less";
-
-/* stylelint-disable */
-#stacks-internals #screen-lg({
-    #stacks-internals-collect-large();
-});
-#stacks-internals #screen-md({
-    #stacks-internals-collect-medium();
-});
-#stacks-internals #screen-sm({
-    #stacks-internals-collect-small();
-});
-
-// We need printing styles to be last so they can override all other styles.
-.print\:d-block {
-    @media print {
-        display: block !important;
-    }
-}
-
-.print\:d-none {
-    @media print {
-        display: none !important;
-    }
-}
-/* stylelint-enable */
-
-//  --  CONFIG
-@import "base/configuration-static.less";
-@import "base/internals.less";
+//
+//  STACK OVERFLOW
+//  STATIC STACK ELEMENTS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  This is where all the magic happens.
+//
+//  ============================================================================
+//  $   STATIC ELEMENTS
+//      The following items are elements which we DO NOT allow communities
+//      to modify via variables.
+//  ----------------------------------------------------------------------------
+@import "base/reset.less";
+@import "base/icons.less";
+
+//  --  COMPONENTS
+@import "components/activity-indicator.less";
+@import "components/avatars.less";
+@import "components/badges.less";
+@import "components/blank-states.less";
+@import "components/breadcrumbs.less";
+@import "components/button-groups.less";
+@import "components/cards.less";
+@import "components/code-blocks.less";
+@import "components/collapsible.less";
+@import "components/inputs.less";
+@import "components/menu.less";
+@import "components/modals.less";
+@import "components/navigation.less";
+@import "components/page-titles.less";
+@import "components/popovers.less";
+@import "components/post-summary.less";
+@import "components/progress-bars.less";
+@import "components/prose.less";
+@import "components/spinner.less";
+@import "components/tables.less";
+@import "components/toggle-switches.less";
+@import "components/topbar.less";
+@import "components/uploader.less";
+@import "components/user-cards.less";
+@import "components/widget-static.less";
+
+//  --  LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+//  --  ATOMIC CLASSES
+@import "atomic/borders.less";
+@import "atomic/colors.less";
+@import "atomic/flex.less";
+@import "atomic/grid.less";
+@import "atomic/spacing.less";
+@import "atomic/typography.less";
+@import "atomic/misc.less";
+@import "atomic/width-height.less";
+
+/* stylelint-disable */
+#stacks-internals #screen-lg({
+    #stacks-internals-collect-large();
+});
+#stacks-internals #screen-md({
+    #stacks-internals-collect-medium();
+});
+#stacks-internals #screen-sm({
+    #stacks-internals-collect-small();
+});
+
+// We need printing styles to be last so they can override all other styles.
+.print\:d-block {
+    @media print {
+        display: block !important;
+    }
+}
+
+.print\:d-none {
+    @media print {
+        display: none !important;
+    }
+}
+/* stylelint-enable */
+
+//  --  CONFIG
+@import "base/configuration-static.less";
+@import "base/internals.less";

package/lib/css/stacks.less

@@ -1,13 +1,13 @@
-//
-//  STACK OVERFLOW
-//  THE COMPLETE STANDALONE STACKS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This is where all the magic happens.
-//
-//  ============================================================================
-@import "stacks-static.less";
-@import "stacks-dynamic.less";
+//
+//  STACK OVERFLOW
+//  THE COMPLETE STANDALONE STACKS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  This is where all the magic happens.
+//
+//  ============================================================================
+@import "stacks-static.less";
+@import "stacks-dynamic.less";

package/lib/ts/controllers/index.ts

@@ -1,8 +1,8 @@
-// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
-export { ExpandableController } from './s-expandable-control';
-export { hideModal, ModalController, showModal } from './s-modal';
-export { TabListController } from './s-navigation-tablist';
-export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
-export { TableController } from './s-table';
-export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
+// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
+export { ExpandableController } from './s-expandable-control';
+export { hideModal, ModalController, showModal } from './s-modal';
+export { TabListController } from './s-navigation-tablist';
+export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
+export { TableController } from './s-table';
+export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
 export { UploaderController } from './s-uploader';

package/lib/ts/controllers/s-expandable-control.ts

@@ -1,189 +1,189 @@
-import * as Stacks from '../stacks';
-
-// Radio buttons only trigger a change event when they're *checked*, but not when
-// they're *unchecked*. Therefore, if we have an active `s-collapsible-control` in
-// the document, we listen for change events on *all* radio buttons and find any
-// other radio buttons in the same `name` group, triggering a custom event on all
-// of them so the controller can re-evaluate.
-//
-// We're keeping a count of how many of these controllers are connected to the DOM,
-// so only have this global listener when we actually need it.
-const RADIO_OFF_EVENT = "s-expandable-control:radio-off";
-
-function globalChangeListener(e: UIEvent) {
-    const target = e.target;
-    if (!(target instanceof HTMLInputElement) || target.nodeName !== "INPUT" || target.type !== "radio") {
-        return;
-    }
-    document.querySelectorAll('input[type="radio"][name="' + target.name + '"]')
-        .forEach(function (other) {
-            if (other === e.target) {
-                return;
-            }
-            var customEvent;
-            try {
-                customEvent = new Event(RADIO_OFF_EVENT);
-            } catch (ex) {
-                // Internet Explorer
-                customEvent = document.createEvent("Event");
-                customEvent.initEvent(RADIO_OFF_EVENT, true, true);
-            }
-            other.dispatchEvent(customEvent);
-        });
-}
-
-var refCount = 0;
-function globalChangeListenerRequired(required: boolean) {
-    if (required) {
-        refCount++;
-        if (refCount === 1) {
-            document.body.addEventListener("change", globalChangeListener as EventListener);
-        }
-    } else {
-        refCount--;
-        if (refCount === 0) {
-            document.body.removeEventListener("change", globalChangeListener as EventListener);
-        }
-    }
-}
-
-export class ExpandableController extends Stacks.StacksController {
-    private isCollapsed!: () => boolean;
-    private events!: string[];
-    private isCheckable!: boolean;
-    private isRadio!: boolean;
-    private lastKeydownClickTimestamp: number = 0;
-
-    initialize() {
-        if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
-            this.isCollapsed = this._isCollapsedForCheckable;
-            this.events = ["change", RADIO_OFF_EVENT];
-            this.isCheckable = true;
-            this.isRadio = (<HTMLInputElement>this.element).type === "radio";
-        } else {
-            this.isCollapsed = this._isCollapsedForClickable;
-            this.events = ["click", "keydown"];
-        }
-        this.listener = this.listener.bind(this);
-    };
-
-
-    // for non-checkable elements, the initial source of truth is the collapsed/expanded
-    // state of the controlled element (unless the element doesn't exist)
-    _isCollapsedForClickable() {
-        var cc = this.controlledCollapsibles;
-        // the element is considered collapsed if *any* target element is collapsed
-        return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
-    };
-
-    // for checkable elements, the initial source of truth is the checked state
-    _isCollapsedForCheckable() {
-        return !(<HTMLInputElement>this.element).checked;
-    };
-
-
-    get controlledCollapsibles() {
-        const attr = this.element.getAttribute("aria-controls");
-        if (!attr) {
-            throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
-        }
-        const result = attr.split(/\s+/g)
-            .map(s => document.getElementById(s))
-            .filter((e): e is HTMLElement => !!e);
-        if (!result.length) {
-            throw "couldn't find controls"
-        }
-        return result;
-    };
-
-    _dispatchShowHideEvent(isShow: boolean) {
-        this.triggerEvent(isShow ? "show" : "hide");
-    };
-
-    _toggleClass(doAdd: boolean) {
-        if (!this.data.has("toggle-class")) {
-            return;
-        }
-        var cl = this.element.classList;
-        var toggleClass = this.data.get("toggle-class");
-        if (!toggleClass) {
-            throw "couldn't find toggle class"
-        }
-        toggleClass.split(/\s+/).forEach(function (cls) {
-            cl.toggle(cls, !!doAdd);
-        });
-    };
-
-    listener(e: Event) {
-        var newCollapsed;
-        if (this.isCheckable) {
-            newCollapsed = !(<HTMLInputElement>this.element).checked;
-        } else {
-            if (e.type == "keydown" && (e instanceof KeyboardEvent && e.keyCode != 13 && e.keyCode != 32)) {
-                return;
-            }
-            if (e.target !== e.currentTarget && ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0) {
-                return;
-            }
-
-            e.preventDefault();
-
-            // Prevent "click" events from toggling the expandable within 300ms of "keydown".
-            // e.preventDefault() should have done the same, but https://bugzilla.mozilla.org/show_bug.cgi?id=1487102
-            // doesn't guarantee it.
-            if (e.type == "keydown") {
-                this.lastKeydownClickTimestamp = Date.now();
-            } else if (e.type == "click" && Date.now() - this.lastKeydownClickTimestamp < 300) {
-                return;
-            }
-            newCollapsed = this.element.getAttribute("aria-expanded") === "true";
-            if (e.type === "click") {
-                (<HTMLInputElement>this.element).blur();
-            }
-        }
-        this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
-        for (let controlledElement of this.controlledCollapsibles) {
-            controlledElement.classList.toggle("is-expanded", !newCollapsed);
-        }
-        this._dispatchShowHideEvent(!newCollapsed);
-        this._toggleClass(!newCollapsed);
-    };
-
-    connect() {
-        this.events.forEach(e => {
-            this.element.addEventListener(e, this.listener);
-        }, this);
-
-        if (this.isRadio) {
-            globalChangeListenerRequired(true);
-        }
-
-        // synchronize state -- in all cases, this means setting the correct `aria-expanded`
-        // attribute; for checkable controls this also means setting the `is-collapsed` class
-        this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
-        if (this.isCheckable) {
-            var cc = this.controlledCollapsibles;
-            if (cc.length) {
-                var expected = !this.isCollapsed();
-                // if any element does not match the expected state, set them all to the expected state
-                if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
-                    for (let controlledElement of this.controlledCollapsibles) {
-                        controlledElement.classList.toggle("is-expanded", expected);
-                    }
-                    this._dispatchShowHideEvent(expected);
-                    this._toggleClass(expected);
-                }
-            }
-        }
-    };
-
-    disconnect() {
-        this.events.forEach(e => {
-            this.element.removeEventListener(e, this.listener);
-        }, this);
-
-        if (this.isRadio) {
-            globalChangeListenerRequired(false);
-        }
-    };
+import * as Stacks from '../stacks';
+
+// Radio buttons only trigger a change event when they're *checked*, but not when
+// they're *unchecked*. Therefore, if we have an active `s-collapsible-control` in
+// the document, we listen for change events on *all* radio buttons and find any
+// other radio buttons in the same `name` group, triggering a custom event on all
+// of them so the controller can re-evaluate.
+//
+// We're keeping a count of how many of these controllers are connected to the DOM,
+// so only have this global listener when we actually need it.
+const RADIO_OFF_EVENT = "s-expandable-control:radio-off";
+
+function globalChangeListener(e: UIEvent) {
+    const target = e.target;
+    if (!(target instanceof HTMLInputElement) || target.nodeName !== "INPUT" || target.type !== "radio") {
+        return;
+    }
+    document.querySelectorAll('input[type="radio"][name="' + target.name + '"]')
+        .forEach(function (other) {
+            if (other === e.target) {
+                return;
+            }
+            var customEvent;
+            try {
+                customEvent = new Event(RADIO_OFF_EVENT);
+            } catch (ex) {
+                // Internet Explorer
+                customEvent = document.createEvent("Event");
+                customEvent.initEvent(RADIO_OFF_EVENT, true, true);
+            }
+            other.dispatchEvent(customEvent);
+        });
+}
+
+var refCount = 0;
+function globalChangeListenerRequired(required: boolean) {
+    if (required) {
+        refCount++;
+        if (refCount === 1) {
+            document.body.addEventListener("change", globalChangeListener as EventListener);
+        }
+    } else {
+        refCount--;
+        if (refCount === 0) {
+            document.body.removeEventListener("change", globalChangeListener as EventListener);
+        }
+    }
+}
+
+export class ExpandableController extends Stacks.StacksController {
+    private isCollapsed!: () => boolean;
+    private events!: string[];
+    private isCheckable!: boolean;
+    private isRadio!: boolean;
+    private lastKeydownClickTimestamp: number = 0;
+
+    initialize() {
+        if (this.element.nodeName === "INPUT" && ["radio", "checkbox"].indexOf((<HTMLInputElement>this.element).type) >= 0) {
+            this.isCollapsed = this._isCollapsedForCheckable;
+            this.events = ["change", RADIO_OFF_EVENT];
+            this.isCheckable = true;
+            this.isRadio = (<HTMLInputElement>this.element).type === "radio";
+        } else {
+            this.isCollapsed = this._isCollapsedForClickable;
+            this.events = ["click", "keydown"];
+        }
+        this.listener = this.listener.bind(this);
+    };
+
+
+    // for non-checkable elements, the initial source of truth is the collapsed/expanded
+    // state of the controlled element (unless the element doesn't exist)
+    _isCollapsedForClickable() {
+        var cc = this.controlledCollapsibles;
+        // the element is considered collapsed if *any* target element is collapsed
+        return cc.length > 0 ? !cc.every(element => element.classList.contains("is-expanded")) : this.element.getAttribute("aria-expanded") === "false";
+    };
+
+    // for checkable elements, the initial source of truth is the checked state
+    _isCollapsedForCheckable() {
+        return !(<HTMLInputElement>this.element).checked;
+    };
+
+
+    get controlledCollapsibles() {
+        const attr = this.element.getAttribute("aria-controls");
+        if (!attr) {
+            throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
+        }
+        const result = attr.split(/\s+/g)
+            .map(s => document.getElementById(s))
+            .filter((e): e is HTMLElement => !!e);
+        if (!result.length) {
+            throw "couldn't find controls"
+        }
+        return result;
+    };
+
+    _dispatchShowHideEvent(isShow: boolean) {
+        this.triggerEvent(isShow ? "show" : "hide");
+    };
+
+    _toggleClass(doAdd: boolean) {
+        if (!this.data.has("toggle-class")) {
+            return;
+        }
+        var cl = this.element.classList;
+        var toggleClass = this.data.get("toggle-class");
+        if (!toggleClass) {
+            throw "couldn't find toggle class"
+        }
+        toggleClass.split(/\s+/).forEach(function (cls) {
+            cl.toggle(cls, !!doAdd);
+        });
+    };
+
+    listener(e: Event) {
+        var newCollapsed;
+        if (this.isCheckable) {
+            newCollapsed = !(<HTMLInputElement>this.element).checked;
+        } else {
+            if (e.type == "keydown" && (e instanceof KeyboardEvent && e.keyCode != 13 && e.keyCode != 32)) {
+                return;
+            }
+            if (e.target !== e.currentTarget && ["A", "BUTTON"].indexOf((<HTMLElement>e.target).nodeName) >= 0) {
+                return;
+            }
+
+            e.preventDefault();
+
+            // Prevent "click" events from toggling the expandable within 300ms of "keydown".
+            // e.preventDefault() should have done the same, but https://bugzilla.mozilla.org/show_bug.cgi?id=1487102
+            // doesn't guarantee it.
+            if (e.type == "keydown") {
+                this.lastKeydownClickTimestamp = Date.now();
+            } else if (e.type == "click" && Date.now() - this.lastKeydownClickTimestamp < 300) {
+                return;
+            }
+            newCollapsed = this.element.getAttribute("aria-expanded") === "true";
+            if (e.type === "click") {
+                (<HTMLInputElement>this.element).blur();
+            }
+        }
+        this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
+        for (let controlledElement of this.controlledCollapsibles) {
+            controlledElement.classList.toggle("is-expanded", !newCollapsed);
+        }
+        this._dispatchShowHideEvent(!newCollapsed);
+        this._toggleClass(!newCollapsed);
+    };
+
+    connect() {
+        this.events.forEach(e => {
+            this.element.addEventListener(e, this.listener);
+        }, this);
+
+        if (this.isRadio) {
+            globalChangeListenerRequired(true);
+        }
+
+        // synchronize state -- in all cases, this means setting the correct `aria-expanded`
+        // attribute; for checkable controls this also means setting the `is-collapsed` class
+        this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
+        if (this.isCheckable) {
+            var cc = this.controlledCollapsibles;
+            if (cc.length) {
+                var expected = !this.isCollapsed();
+                // if any element does not match the expected state, set them all to the expected state
+                if (cc.some(element => element.classList.contains("is-expanded") !== expected)) {
+                    for (let controlledElement of this.controlledCollapsibles) {
+                        controlledElement.classList.toggle("is-expanded", expected);
+                    }
+                    this._dispatchShowHideEvent(expected);
+                    this._toggleClass(expected);
+                }
+            }
+        }
+    };
+
+    disconnect() {
+        this.events.forEach(e => {
+            this.element.removeEventListener(e, this.listener);
+        }, this);
+
+        if (this.isRadio) {
+            globalChangeListenerRequired(false);
+        }
+    };
 }