@getflip/swirl-components 0.154.1 → 0.155.1

package/dist/collection/collection-manifest.json

@@ -146,6 +146,7 @@
     "./components/swirl-icon/icons/swirl-icon-group-assign.js",
     "./components/swirl-icon/icons/swirl-icon-groups-filled.js",
     "./components/swirl-icon/icons/swirl-icon-groups.js",
+    "./components/swirl-icon/icons/swirl-icon-hamburger-menu.js",
     "./components/swirl-icon/icons/swirl-icon-help.js",
     "./components/swirl-icon/icons/swirl-icon-highlight.js",
     "./components/swirl-icon/icons/swirl-icon-home.js",

package/dist/collection/components/swirl-icon/icons/swirl-icon-hamburger-menu.js

@@ -0,0 +1,78 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconHamburgerMenu {
+  constructor() {
+    this.color = undefined;
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2.66667 12C2.47778 12 2.31956 11.936 2.192 11.808C2.064 11.6804 2 11.5222 2 11.3333C2 11.1444 2.064 10.9862 2.192 10.8587C2.31956 10.7307 2.47778 10.6667 2.66667 10.6667H13.3333C13.5222 10.6667 13.6804 10.7307 13.808 10.8587C13.936 10.9862 14 11.1444 14 11.3333C14 11.5222 13.936 11.6804 13.808 11.808C13.6804 11.936 13.5222 12 13.3333 12H2.66667ZM2.66667 8.66667C2.47778 8.66667 2.31956 8.60267 2.192 8.47467C2.064 8.34711 2 8.18889 2 8C2 7.81111 2.064 7.65267 2.192 7.52467C2.31956 7.39711 2.47778 7.33333 2.66667 7.33333H13.3333C13.5222 7.33333 13.6804 7.39711 13.808 7.52467C13.936 7.65267 14 7.81111 14 8C14 8.18889 13.936 8.34711 13.808 8.47467C13.6804 8.60267 13.5222 8.66667 13.3333 8.66667H2.66667ZM2.66667 5.33333C2.47778 5.33333 2.31956 5.26956 2.192 5.142C2.064 5.014 2 4.85556 2 4.66667C2 4.47778 2.064 4.31933 2.192 4.19133C2.31956 4.06378 2.47778 4 2.66667 4H13.3333C13.5222 4 13.6804 4.06378 13.808 4.19133C13.936 4.31933 14 4.47778 14 4.66667C14 4.85556 13.936 5.014 13.808 5.142C13.6804 5.26956 13.5222 5.33333 13.3333 5.33333H2.66667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 18C3.71667 18 3.47933 17.904 3.288 17.712C3.096 17.5207 3 17.2833 3 17C3 16.7167 3.096 16.4793 3.288 16.288C3.47933 16.096 3.71667 16 4 16H20C20.2833 16 20.5207 16.096 20.712 16.288C20.904 16.4793 21 16.7167 21 17C21 17.2833 20.904 17.5207 20.712 17.712C20.5207 17.904 20.2833 18 20 18H4ZM4 13C3.71667 13 3.47933 12.904 3.288 12.712C3.096 12.5207 3 12.2833 3 12C3 11.7167 3.096 11.479 3.288 11.287C3.47933 11.0957 3.71667 11 4 11H20C20.2833 11 20.5207 11.0957 20.712 11.287C20.904 11.479 21 11.7167 21 12C21 12.2833 20.904 12.5207 20.712 12.712C20.5207 12.904 20.2833 13 20 13H4ZM4 8C3.71667 8 3.47933 7.90433 3.288 7.713C3.096 7.521 3 7.28333 3 7C3 6.71667 3.096 6.479 3.288 6.287C3.47933 6.09567 3.71667 6 4 6H20C20.2833 6 20.5207 6.09567 20.712 6.287C20.904 6.479 21 6.71667 21 7C21 7.28333 20.904 7.521 20.712 7.713C20.5207 7.90433 20.2833 8 20 8H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66667 21C4.33611 21 4.05922 20.888 3.836 20.664C3.612 20.4408 3.5 20.1639 3.5 19.8333C3.5 19.5028 3.612 19.2259 3.836 19.0027C4.05922 18.7787 4.33611 18.6667 4.66667 18.6667H23.3333C23.6639 18.6667 23.9408 18.7787 24.164 19.0027C24.388 19.2259 24.5 19.5028 24.5 19.8333C24.5 20.1639 24.388 20.4408 24.164 20.664C23.9408 20.888 23.6639 21 23.3333 21H4.66667ZM4.66667 15.1667C4.33611 15.1667 4.05922 15.0547 3.836 14.8307C3.612 14.6074 3.5 14.3306 3.5 14C3.5 13.6694 3.612 13.3922 3.836 13.1682C4.05922 12.9449 4.33611 12.8333 4.66667 12.8333H23.3333C23.6639 12.8333 23.9408 12.9449 24.164 13.1682C24.388 13.3922 24.5 13.6694 24.5 14C24.5 14.3306 24.388 14.6074 24.164 14.8307C23.9408 15.0547 23.6639 15.1667 23.3333 15.1667H4.66667ZM4.66667 9.33333C4.33611 9.33333 4.05922 9.22172 3.836 8.9985C3.612 8.7745 3.5 8.49722 3.5 8.16667C3.5 7.83611 3.612 7.55883 3.836 7.33483C4.05922 7.11161 4.33611 7 4.66667 7H23.3333C23.6639 7 23.9408 7.11161 24.164 7.33483C24.388 7.55883 24.5 7.83611 24.5 8.16667C24.5 8.49722 24.388 8.7745 24.164 8.9985C23.9408 9.22172 23.6639 9.33333 23.3333 9.33333H4.66667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-hamburger-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -269,7 +269,7 @@
 }
   }
 
-.shell-layout__navigation-toggle:hover swirl-icon-menu {
+.shell-layout__navigation-toggle:hover swirl-icon-hamburger-menu {
       display: none;
     }
 

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

@@ -108,7 +108,7 @@ export class SwirlShellLayout {
       "shell-layout--navigation-collapsed": this.navigationCollapsed,
       "shell-layout--sidebar-active": this.sidebarActive,
     });
-    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
+    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
   }
   static get is() { return "swirl-shell-layout"; }
   static get encapsulation() { return "scoped"; }

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

@@ -14,6 +14,6 @@ describe("swirl-shell-layout", () => {
         <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
     });
-    expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->            <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-menu size=\\"20\\"></swirl-icon-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> <div slot=\\"header-tools\\">Tools</div></div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
+    expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->            <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> <div slot=\\"header-tools\\">Tools</div></div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
   });
 });