@getflip/swirl-components 0.124.1 → 0.125.0

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

@@ -231,6 +231,10 @@
     display: block;
   }
 
+.app-layout--has-floating-action-button .app-layout__floating-action-button {
+    display: block;
+  }
+
 .app-layout--hide-app-bar .app-layout__body {
     grid-template-rows: auto 1fr;
     grid-template-areas:
@@ -307,11 +311,12 @@
   margin-left: calc(-1 * var(--s-space-4));
 }
 
-.app-layout__floating-cta {
+.app-layout__floating-action-button {
   position: absolute;
   z-index: 4;
   right: var(--s-space-16);
   bottom: var(--s-space-16);
+  display: none;
 }
 
 .app-layout__navigation-controls {

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

@@ -12,6 +12,7 @@ import { isMobileViewport } from "../../utils";
  * @slot banner - Used to show a banner below the app bar
  * @slot sidebar - Content of the right sidebar
  * @slot custom-sidebar-header - Replaces the default sidebar header
+ * @slot floating-action-button - Floating button displayed in the bottom right corner
  */
 export class SwirlAppLayout {
   constructor() {
@@ -179,11 +180,14 @@ export class SwirlAppLayout {
     const hasAppBarControls = Boolean(this.el.querySelector('[slot="app-bar-controls"]'));
     const hasAppBarMobileMenuButton = Boolean(this.el.querySelector('[slot="app-bar-mobile-menu-button"]'));
     const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
+    const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
+      Boolean(this.ctaLabel);
     const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
       "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
       "app-layout--has-app-bar-controls": hasAppBarControls,
       "app-layout--has-custom-app-bar-back-button": this.hasCustomAppBarBackButton,
       "app-layout--has-custom-sidebar-header": hasCustomSidebarHeader,
+      "app-layout--has-floating-action-button": hasFloatingActionButton,
       "app-layout--has-navigation": this.hasNavigation,
       "app-layout--has-sidebar": this.hasSidebar,
       "app-layout--hide-app-bar": this.hideAppBar,
@@ -192,7 +196,7 @@ export class SwirlAppLayout {
     });
     return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, h("span", { class: "app-layout__navigation-mobile-menu-button" }, h("slot", { name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { class: "app-layout__app-bar" }, h("span", { class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__custom-sidebar-header" }, h("slot", { name: "custom-sidebar-header" })), h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { class: "app-layout__custom-app-bar-back-button" }, h("slot", { name: "custom-app-bar-back-button" })), h("div", { class: "app-layout__app-bar-content" }, h("slot", { name: "app-bar" })), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))), h("div", { class: "app-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__custom-sidebar-header" }, h("slot", { name: "custom-sidebar-header" })), h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), h("span", { class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { name: "floating-action-button" }))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

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

@@ -54,8 +54,7 @@ describe("swirl-app-layout", () => {
       `,
     });
     const spy = jest.fn();
-    const cta = page.root.shadowRoot.querySelector(".app-layout__floating-cta")
-      .children[0];
+    const cta = page.root.shadowRoot.querySelector(".app-layout__floating-action-button").children[0];
     page.root.addEventListener("ctaClick", spy);
     expect(cta).not.toBeNull();
     expect(cta.getAttribute("icon")).toBe("<swirl-icon-add></swirl-icon-add>");

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

@@ -51,6 +51,7 @@ const Template = (args) => {
     </div>
     <div slot="content"></div>
     <div slot="sidebar"></div>
+    <swirl-button slot="floating-action-button" icon="<swirl-icon-add></swirl-icon-add>" label="CTA" variant="floating" intent="primary" hide-label="true"></swirl-button>
   `;
   element.querySelector(".info-button").addEventListener("click", () => {
     element.changeMobileView("sidebar");
@@ -65,8 +66,6 @@ const Template = (args) => {
 export const SwirlAppLayout = Template.bind({});
 SwirlAppLayout.args = {
   appName: "App Name",
-  ctaIcon: "<swirl-icon-add></swirl-icon-add>",
-  ctaLabel: "Call to action",
   navigationLabel: "Items",
   sidebarHeading: "Sidebar Heading",
 };