@getflip/swirl-components 0.179.0 → 0.181.0

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -9,9 +9,9 @@
 .app-icon {
   position: relative;
   overflow: hidden;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--s-border-radius-s);
+  width: var(--swirl-app-icon-size);
+  height: var(--swirl-app-icon-size);
+  border-radius: var(--s-border-radius-sm);
 }
 
 .app-icon > img {

package/dist/collection/components/swirl-form-control/swirl-form-control.css

@@ -135,6 +135,30 @@
 }
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control--label-position-outside .form-control__label-text {
+      display: flex;
+      align-items: center
+  }
+    }
+
+.form-control--label-position-outside .form-control__label-text .form-control__tooltip {
+      display: none;
+    }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.form-control--label-position-outside .form-control__label-text .form-control__tooltip {
+        display: flex;
+        margin-left: var(--s-space-4)
+    }
+
+        .form-control--label-position-outside .form-control__label-text .form-control__tooltip:hover {
+          cursor: default;
+        }
+      }
+
 .form-control--invalid.form-control--has-focus:not(.form-control--disabled) .form-control__label {
       border-color: var(--s-border-critical);
       box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-critical);

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -43,6 +43,7 @@ export class SwirlFormControl {
     this.invalid = undefined;
     this.label = undefined;
     this.labelPosition = "inside";
+    this.tooltip = undefined;
     this.hasFocus = undefined;
     this.inputValue = undefined;
   }
@@ -152,7 +153,7 @@ export class SwirlFormControl {
       "form-control--is-select": isSelect,
     });
     const LabelTag = hasContenteditableControl ? "div" : "label";
-    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h(LabelTag, { class: "form-control__label", onClick: this.onLabelClick }, h("span", { class: "form-control__label-text", id: this.labelId }, this.label), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h(LabelTag, { class: "form-control__label", onClick: this.onLabelClick }, h("span", { class: "form-control__label-text", id: this.labelId }, this.label, this.tooltip && this.labelPosition === "outside" && (h("span", { class: "form-control__tooltip" }, h("swirl-tooltip", { content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { size: 16, tabindex: "0" }))))), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
   }
   static get is() { return "swirl-form-control"; }
   static get encapsulation() { return "scoped"; }
@@ -309,6 +310,23 @@ export class SwirlFormControl {
         "attribute": "label-position",
         "reflect": false,
         "defaultValue": "\"inside\""
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/swirl-form-control/swirl-form-control.spec.js

@@ -94,7 +94,7 @@ describe("swirl-form-control", () => {
     page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
-    expect(formControl.classList.contains('form-control--has-focus')).toBeTruthy();
+    expect(formControl.classList.contains("form-control--has-focus")).toBeTruthy();
   });
   it("doesn't keep focus when Tab is pressed and the active element is not descendent of the input", async () => {
     const page = await newSpecPage({
@@ -113,6 +113,18 @@ describe("swirl-form-control", () => {
     page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
-    expect(formControl.classList.contains('form-control--has-focus')).toBeFalsy();
+    expect(formControl.classList.contains("form-control--has-focus")).toBeFalsy();
+  });
+  it("renders a tooltip icon when tooltip is set an label position is outside", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control label="Label" label-position="outside" tooltip="This is a tooltip">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    const tooltip = page.root.querySelector("swirl-tooltip");
+    expect(tooltip).not.toBeNull();
   });
 });

package/dist/collection/components/swirl-modal/swirl-modal.css

@@ -144,7 +144,7 @@
     }
 
 .modal--variant-drawer .modal__content {
-    min-height: 100%;
+    height: 100%;
   }
 
 @media (min-width: 768px) {

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js

@@ -59,7 +59,7 @@ const Template = (args) => {
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Employee directory">
+          <swirl-shell-navigation-item label="Employee directory" boxed="true">
             <swirl-app-icon icon="<swirl-icon-groups-filled size=&quot;20&quot;></swirl-icon-groups-filled>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css

@@ -16,7 +16,7 @@
   display: flex;
   width: 100%;
   height: 3rem;
-  padding: var(--s-space-12);
+  padding: var(--s-space-8);
   flex-shrink: 0;
   justify-content: flex-start;
   align-items: center;
@@ -31,7 +31,7 @@
   text-decoration: none;
   cursor: pointer;
   container-type: size;
-  gap: var(--s-space-16);
+  gap: var(--s-space-12);
 }
 
 .shell-navigation-item:hover {
@@ -59,6 +59,19 @@
     box-shadow: 0 0 0 0.125rem var(--s-focus-default);
   }
 
+.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {
+      background-color: var(--s-background-default);
+      border-color: var(--s-border-default);
+      border-radius: var(--s-border-radius-sm);
+      border-width: var(--s-border-width-default);
+      border-style: solid;
+    }
+
+.shell-navigation-item.shell-navigation-item--boxed {
+
+    --swirl-app-icon-size: calc(2rem - 2 * var(--s-border-width-default));
+}
+
 .shell-navigation-item.shell-navigation-item--active {
     background-color: var(--s-surface-sunken-hovered);
   }
@@ -92,8 +105,8 @@
 
 .shell-navigation-item__icon {
   display: inline-flex;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
+  min-width: 2rem;
+  min-height: 2rem;
   justify-content: center;
   align-items: center;
 }

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js

@@ -10,10 +10,12 @@ export class SwirlShellNavigationItem {
     this.href = undefined;
     this.label = undefined;
     this.target = undefined;
+    this.boxed = undefined;
   }
   render() {
     const className = classnames("shell-navigation-item", {
       "shell-navigation-item--active": this.active,
+      "shell-navigation-item--boxed": this.boxed,
     });
     const isLink = Boolean(this.href);
     const Tag = isLink ? "a" : "button";
@@ -119,6 +121,23 @@ export class SwirlShellNavigationItem {
         },
         "attribute": "target",
         "reflect": false
+      },
+      "boxed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "boxed",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.js

@@ -13,7 +13,7 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-shell-navigation-item", args);
   element.innerHTML = `
-    <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/433/144/144"></swirl-app-icon>
+    <swirl-app-icon slot="icon" label="link" src="https://cdn-icons-png.flaticon.com/512/1076/1076744.png"></swirl-app-icon>
   `;
   return element;
 };

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
 export class SwirlTextInput {

package/dist/collection/components/swirl-tooltip/swirl-tooltip.css

@@ -71,6 +71,10 @@
 }
   }
 
+.tooltip__content {
+  white-space: normal;
+}
+
 .tooltip__arrow {
   position: absolute;
   width: 0.6875rem;