@getflip/swirl-components 0.74.2 → 0.76.0

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

@@ -84,6 +84,11 @@
   background-color: var(--s-decorative-kiwi-surface);
 }
 
+.badge--intent-neutral {
+  color: var(--s-text-default);
+  background-color: var(--s-surface-neutral-subdued);
+}
+
 .badge--intent-pumpkin {
   color: var(--s-text-dark);
   background-color: var(--s-decorative-pumpkin-surface);

package/dist/collection/components/swirl-badge/swirl-badge.js

@@ -50,7 +50,7 @@ export class SwirlBadge {
         "mutable": false,
         "complexType": {
           "original": "SwirlBadgeIntent",
-          "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"critical\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
+          "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"critical\" | \"grape\" | \"kiwi\" | \"neutral\" | \"pumpkin\" | \"radish\"",
           "references": {
             "SwirlBadgeIntent": {
               "location": "local",

package/dist/collection/components/swirl-image-grid/swirl-image-grid.stories.js

@@ -19,6 +19,6 @@ export const SwirlImageGrid = Template.bind({});
 SwirlImageGrid.args = {
   aspectRatio: "16 / 9",
   slot: `<swirl-image-grid-item alt="Cute dog in a blanket" interactive src="/sample.jpg"></swirl-image-grid-item>
-<swirl-image-grid-item alt="Another cute dog in a blanket" interactive src="/sample-2.jpg"></swirl-image-grid-item>
+<swirl-image-grid-item alt="Another cute dog in a blanket" icon="<swirl-icon-play-arrow></swirl-icon-play-arrow>" interactive src="/sample-2.jpg"></swirl-image-grid-item>
 <swirl-image-grid-item alt="Third cute dog in a blanket" interactive src="/sample-3.jpg"></swirl-image-grid-item>`,
 };

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.css

@@ -69,14 +69,35 @@ button.image-grid-item:focus-visible {
      object-position: center;
 }
 
+.image-grid-item__icon {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: var(--s-icon-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.image-grid-item__icon ::part(icon) {
+    width: 2rem;
+    height: 2rem;
+  }
+
 .image-grid-item__overlay {
   position: absolute;
   z-index: 2;
-  inset: 0;
   display: flex;
-  align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.4);
+  align-items: center;
   color: var(--s-text-on-image);
+  background-color: rgba(0, 0, 0, 0.4);
   font-size: var(--s-font-size-2xl);
+  inset: 0;
 }

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -3,6 +3,7 @@ import classnames from "classnames";
 export class SwirlImageGridItem {
   constructor() {
     this.alt = undefined;
+    this.icon = undefined;
     this.interactive = undefined;
     this.overlay = undefined;
     this.src = undefined;
@@ -12,7 +13,7 @@ export class SwirlImageGridItem {
     const className = classnames("image-grid-item", {
       "image-grid-item--has-overlay": this.overlay,
     });
-    return (h(Host, { role: "listitem" }, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("div", { class: "image-grid-item__background", style: { backgroundImage: `url(${this.src})` } }), h("img", { alt: this.alt, class: "image-grid-item__image", src: this.src }), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)))));
+    return (h(Host, { role: "listitem" }, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("div", { class: "image-grid-item__background", style: { backgroundImage: `url(${this.src})` } }), h("img", { alt: this.alt, class: "image-grid-item__image", src: this.src }), this.icon && !Boolean(this.overlay) && (h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)))));
   }
   static get is() { return "swirl-image-grid-item"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +46,23 @@ export class SwirlImageGridItem {
         "attribute": "alt",
         "reflect": false
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "interactive": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.stories.js

@@ -19,5 +19,6 @@ const Template = (args) => {
 export const SwirlImageGridItem = Template.bind({});
 SwirlImageGridItem.args = {
   alt: "Dog in a blanket",
+  icon: "<swirl-icon-play-arrow></swirl-icon-play-arrow>",
   src: "/sample.jpg",
 };

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

@@ -85,7 +85,7 @@
 
 @media (min-width: 768px) {
 
-.modal--variant-drawer.modal--hide-label .modal__header {
+.modal--variant-drawer.modal--hide-label .modal__header-bar {
         height: auto;
         padding-top: var(--s-space-4);
         padding-bottom: var(--s-space-4)
@@ -112,17 +112,17 @@
   }
     }
 
-.modal--variant-drawer .modal__header {
+.modal--variant-drawer .modal__header-bar {
     background-color: var(--s-surface-overlay-default);
   }
 
-.modal--variant-drawer .modal__header .modal__close-button {
+.modal--variant-drawer .modal__header-bar .modal__close-button {
       margin-left: calc(-1 * var(--s-space-8));
     }
 
 @media (min-width: 768px) {
 
-.modal--variant-drawer .modal__header {
+.modal--variant-drawer .modal__header-bar {
       flex-direction: row
   }
     }
@@ -177,6 +177,10 @@
     padding-left: var(--s-space-24);
   }
 
+.modal--has-header-tools .modal__header-tools {
+    display: block;
+  }
+
 @media (min-width: 768px) {
     .modal--scrolled .modal__header {
       border-bottom-color: var(--s-border-default);
@@ -213,6 +217,17 @@
   }
 
 .modal__header {
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+@media (min-width: 768px) {
+
+.modal__header {
+    border-bottom: var(--s-border-width-default) solid transparent
+}
+  }
+
+.modal__header-bar {
   display: flex;
   height: 3.5rem;
   padding-top: var(--s-space-8);
@@ -221,24 +236,36 @@
   padding-left: var(--s-space-16);
   flex-shrink: 0;
   align-items: center;
-  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   gap: var(--s-space-8);
 }
 
 @media (min-width: 768px) {
 
-.modal__header {
+.modal__header-bar {
     height: 4.125rem;
     padding-top: var(--s-space-24);
     padding-right: var(--s-space-24);
     padding-bottom: var(--s-space-16);
     padding-left: var(--s-space-24);
-    border-bottom: var(--s-border-width-default) solid transparent;
     flex-direction: row-reverse;
     gap: var(--s-space-16)
 }
   }
 
+.modal__header-tools {
+  display: none;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+}
+
+@media (min-width: 768px) {
+
+.modal__header-tools {
+    padding-right: var(--s-space-24);
+    padding-left: var(--s-space-24)
+}
+  }
+
 .modal__custom-header {
   flex-shrink: 0;
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);

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

@@ -3,8 +3,10 @@ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as focusTrap from "focus-trap";
 import classnames from "classnames";
 /**
- * slot - Modal contents
- * custom-header - Optional custom header; should be used hidden label
+ * @slot slot - Modal contents
+ * @slot header-tools - Used to display elements inside the sticky header, below the label
+ * @slot custom-header - Optional custom header; should be used hidden label
+ * @slot custom-footer - Optional custom footer; replaces the default footer with primary and secondary actions
  */
 export class SwirlModal {
   constructor() {
@@ -53,6 +55,7 @@ export class SwirlModal {
     this.closing = false;
     this.hasCustomHeader = undefined;
     this.hasCustomFooter = undefined;
+    this.hasHeaderTools = undefined;
     this.scrollable = false;
     this.scrolled = false;
     this.scrolledDown = false;
@@ -70,6 +73,7 @@ export class SwirlModal {
     queueMicrotask(() => {
       this.updateCustomFooterStatus();
       this.updateCustomHeaderStatus();
+      this.updateHeaderToolsStatus();
     });
   }
   disconnectedCallback() {
@@ -120,6 +124,9 @@ export class SwirlModal {
   updateCustomHeaderStatus() {
     this.hasCustomHeader = Boolean(this.el.querySelector('[slot="custom-header"]'));
   }
+  updateHeaderToolsStatus() {
+    this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }
@@ -132,15 +139,16 @@ export class SwirlModal {
       "modal--closing": this.closing,
       "modal--has-custom-footer": this.hasCustomFooter,
       "modal--has-custom-header": this.hasCustomHeader,
+      "modal--has-header-tools": this.hasHeaderTools,
       "modal--hide-label": this.hideLabel,
       "modal--padded": this.padded,
       "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("div", { class: "modal__custom-footer" }, h("slot", { name: "custom-footer" })), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+        : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__header-tools" }, h("slot", { name: "header-tools" })))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("div", { class: "modal__custom-footer" }, h("slot", { name: "custom-footer" })), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
   static get is() { return "swirl-modal"; }
   static get originalStyleUrls() {
@@ -324,6 +332,7 @@ export class SwirlModal {
       "closing": {},
       "hasCustomHeader": {},
       "hasCustomFooter": {},
+      "hasHeaderTools": {},
       "scrollable": {},
       "scrolled": {},
       "scrolledDown": {}

package/dist/collection/components/swirl-modal/swirl-modal.spec.js

@@ -13,8 +13,11 @@ describe("swirl-modal", () => {
           <div class="modal__body">
             <header class="modal__custom-header"></header>
             <header class="modal__header">
-              <swirl-button class="modal__close-button" hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close modal"></swirl-button>
-              <swirl-heading as="h2" class="modal__heading" level="3" text="Dialog"></swirl-heading>
+              <div class="modal__header-bar">
+                <swirl-button class="modal__close-button" hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close modal"></swirl-button>
+                <swirl-heading as="h2" class="modal__heading" level="3" text="Dialog"></swirl-heading>
+              </div>
+              <div class="modal__header-tools"></div>
             </header>
             <div class="modal__content">
               Content

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

@@ -49,17 +49,9 @@ const Template = (args) => {
       sit amet.
     </swirl-text>
 
-    <swirl-form-control label="Test" label-position="outside"><swirl-select label="Select">
-    <swirl-option-list-section label="Section 1">
-      <swirl-option-list-item label="This is an option 1" value="1"></swirl-option-list-item>
-      <swirl-option-list-item label="This is an option 2" value="2"></swirl-option-list-item>
-      <swirl-option-list-item label="This is an option 3" value="3"></swirl-option-list-item>
-    </swirl-option-list-section>
-    <swirl-option-list-section label="Section 2">
-      <swirl-option-list-item label="This is an option 4" value="4"></swirl-option-list-item>
-    </swirl-option-list-section>
-  </swirl-select></swirl-form-control>
-
+    <swirl-box padding-block-start="0" padding-block-end="16" slot="header-tools">
+      <swirl-search label="Search"></swirl-search>
+    </div>
   `;
   container.append(trigger, element);
   return container;