@getflip/swirl-components 0.158.0 → 0.159.0

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -76,6 +76,26 @@
 
 @media (min-width: 992px) {
 
+.shell-layout--navigation-collapsed .shell-layout__nav:hover {
+        width: var(--swirl-shell-extended-nav-width);
+        padding-right: var(--s-space-12)
+    }
+      }
+
+@media (min-width: 992px) {
+      .shell-layout--navigation-collapsed .shell-layout__nav:not(:hover) {
+        scrollbar-width: none;
+      }
+
+        .shell-layout--navigation-collapsed .shell-layout__nav:not(:hover)::-webkit-scrollbar {
+          width: 0;
+          background: transparent;
+          -webkit-appearance: none;
+        }
+    }
+
+@media (min-width: 992px) {
+
 .shell-layout--navigation-collapsed {
     grid-template-columns: var(--swirl-shell-collapsed-nav-width) 1fr 0
 }
@@ -298,7 +318,7 @@
   max-width: 18.75rem;
   color: var(--swirl-shell-text-color);
   background-color: var(--s-surface-overlay-default);
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s, width 0.2s;
   transform: translate3d(-100%, 0, 0);
   grid-area: nav;
 }

package/dist/collection/components/swirl-table/swirl-table.stories.js

@@ -28,6 +28,7 @@ const Template = (args) => {
       <swirl-table-column sticky width="74px"><swirl-visually-hidden>Tools</swirl-visually-hidden></swirl-table-column>
     </div>
     <div slot="rows">
+    <swirl-table-row-group label="Active users">
       <swirl-table-row>
         <swirl-table-cell>
           <swirl-checkbox swirl-aria-label="Select Isabel Lakin" input-id="select-1" input-name="select-1">
@@ -59,6 +60,7 @@ const Template = (args) => {
           </swirl-tooltip>
         </swirl-table-cell>
       </swirl-table-row>
+      </swirl-table-row-group>
       <swirl-table-row-group label="Pending users">
         <swirl-table-row>
           <swirl-table-cell>
@@ -118,6 +120,7 @@ const Template = (args) => {
             <swirl-button hide-label icon="<swirl-icon-more-vertikal></swirl-icon-more-vertikal>" label="Options"></swirl-button>
           </swirl-table-cell>
         </swirl-table-row>
+        
       </swirl-table-row-group>
     </div>
   `;

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.css

@@ -22,6 +22,8 @@
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-sm);
+  display: flex;
+  align-items: center;
 }
 
 @media (min-width: 768px) {
@@ -41,3 +43,21 @@
 .table-row-group__tooltip-icon {
   color: var(--s-icon-default);
 }
+
+.table-row-group__collapse-icon {
+  color: var(--s-icon-default);
+  padding-right: var(--s-space-20);
+}
+
+.table-row-group__rows-container {
+  overflow: hidden;
+  transition: height 0.3s ease-out;
+}
+
+.table-row-group__rows-container.is-hidden {
+  height: 0;
+}
+
+.sc-swirl-button-h {
+  display: flex;
+}

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -4,12 +4,46 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlTableRowGroup {
   constructor() {
+    this.toggleShowItems = () => {
+      this.headerRowElement.focus();
+      if (!this.tableRowElements)
+        return;
+      const naturalHeight = this.tableRowElements.scrollHeight + "px";
+      if (this.isVisible) {
+        requestAnimationFrame(() => {
+          this.tableRowElements.style.height = naturalHeight;
+          this.tableRowElements.setAttribute("aria-hidden", "true");
+          requestAnimationFrame(() => {
+            this.tableRowElements.style.height = "0";
+          });
+        });
+      }
+      else {
+        requestAnimationFrame(() => {
+          this.tableRowElements.style.height = naturalHeight;
+          this.tableRowElements.removeAttribute("aria-hidden");
+          setTimeout(() => {
+            this.tableRowElements.style.height = "auto";
+          }, 300);
+        });
+      }
+      this.isVisible = !this.isVisible;
+    };
     this.label = undefined;
     this.tooltip = undefined;
+    this.collapsible = false;
+    this.collapseButtonLabel = "Previous slide";
+    this.isVisible = true;
   }
   render() {
     const rowspan = this.el.querySelectorAll("swirl-table-row").length;
-    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row" }, h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { class: "table-row-group__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("slot", null)));
+    const iconType = this.isVisible
+      ? "<swirl-icon-expand-less></swirl-icon-expand-less"
+      : "<swirl-icon-expand-more></swirl-icon-expand-more";
+    return (h(Host, { class: "table-row-group", role: "rowgroup" }, h("div", { class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { class: "table-row-group__tooltip" }, h("swirl-tooltip", { content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { class: {
+        "table-row-group__rows-container": true,
+        "table-row-group__rows-container--is-hidden": this.isVisible,
+      }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", null))));
   }
   static get is() { return "swirl-table-row-group"; }
   static get encapsulation() { return "shadow"; }
@@ -58,8 +92,49 @@ export class SwirlTableRowGroup {
         },
         "attribute": "tooltip",
         "reflect": false
+      },
+      "collapsible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "collapsible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "collapseButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "collapse-button-label",
+        "reflect": false,
+        "defaultValue": "\"Previous slide\""
       }
     };
   }
+  static get states() {
+    return {
+      "isVisible": {}
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.spec.js

@@ -14,9 +14,11 @@ describe("swirl-table-row-group", () => {
               Label
             </span>
           </div>
-          <slot></slot>
+          <div class="table-row-group__rows-container table-row-group__rows-container--is-hidden">
+            <slot></slot>
+          </div>
         </mock:shadow-root>
-        Content
+          Content
       </swirl-table-row-group>
     `);
   });
@@ -38,10 +40,34 @@ describe("swirl-table-row-group", () => {
               </span>
             </span>
           </div>
-          <slot></slot>
+          <div class="table-row-group__rows-container table-row-group__rows-container--is-hidden">
+            <slot></slot>
+          </div>
         </mock:shadow-root>
         Content
       </swirl-table-row-group>
     `);
   });
+  it("renders collapsible button", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTableRowGroup],
+      html: `<swirl-table-row-group label="Label" collapsible="true">Content</swirl-table-row-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-table-row-group class="table-row-group" label="Label" role="rowgroup" collapsible="true">
+        <mock:shadow-root>
+          <div class="table-row-group__header-row" role="row">
+          <swirl-button class="table-row-group__collapse-icon" hidelabel="" icon="<swirl-icon-expand-less></swirl-icon-expand-less" label="Previous slide" swirlariaexpanded="true" variant="plain"></swirl-button>
+            <span aria-rowspan="0" class="table-row-group__label" role="rowheader">
+              Label
+            </span>
+          </div>
+          <div class="table-row-group__rows-container table-row-group__rows-container--is-hidden">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+          Content
+      </swirl-table-row-group>
+    `);
+  });
 });

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -117,7 +117,7 @@ export class SwirlTimeInput {
     const className = classnames("time-input", {
       "time-input--inline": this.inline,
     });
-    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   static get is() { return "swirl-time-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-time-input/swirl-time-input.spec.js

@@ -16,7 +16,7 @@ describe("swirl-time-input", () => {
     expect(page.root).toEqualHtml(`
       <swirl-time-input>
         <div class="time-input">
-          <input class="time-input__input" id="swirl-time-input-0" placeholder="hh:mm" type="text">
+          <input class="time-input__input" id="swirl-time-input-0" inputmode="numeric" placeholder="hh:mm" type="text">
           <span class="time-input__icon">
             <swirl-icon-time-outlined size="24"></swirl-icon-time-outlined>
           </span>