@getflip/swirl-components 0.195.0 → 0.197.0

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

@@ -8,9 +8,12 @@
 
 .banner {
   display: flex;
+  align-items: flex-start;
+  gap: var(--s-space-16);
+
   max-width: 100%;
-  padding: var(--s-space-12);
-  align-items: baseline;
+  min-height: 3.5rem;
+  padding: var(--s-space-16);
 }
 
 .banner:focus:not(:focus-visible) {
@@ -22,10 +25,11 @@
     outline-offset: var(--s-space-4);
   }
 
-@media (min-width: 768px) {
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .banner {
-    padding: var(--s-space-16)
+    padding: var(--s-space-16);
+    min-height: 3.25rem
 }
   }
 
@@ -35,13 +39,11 @@
 }
 
 .banner--size-s .banner__content {
-    margin-right: var(--s-space-8);
     flex-grow: 0;
     text-align: center;
   }
 
 .banner--size-s .banner__controls {
-    margin-right: var(--s-space-4);
     margin-left: 0;
   }
 
@@ -94,16 +96,25 @@
     color: var(--s-text-default);
   }
 
-@media (min-width: 375px) {
+.banner__content {
+  display: flex;
+  align-items: flex-start;
+
+  min-height: 1.5rem;
+  flex-grow: 1;
+  line-height: var(--s-line-height-base);
+}
 
-.banner--has-icon .banner__content {
-      padding-top: var(--s-space-2)
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.banner__content {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm);
+    min-height: 1.25rem
+}
   }
-    }
 
 .banner__icon {
-  position: relative;
-  top: var(--s-space-4);
   display: none;
   width: 1.5rem;
   height: 1.5rem;
@@ -127,26 +138,21 @@
 }
   }
 
-.banner__content {
+.banner__text {
   min-height: 1.5rem;
-  margin-right: var(--s-space-12);
-  flex-grow: 1;
-  line-height: var(--s-line-height-base);
 }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.banner__content {
-    font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm)
+.banner__text {
+    min-height: 1.25rem
 }
   }
 
 .banner__controls {
   display: inline-flex;
-  margin-left: var(--s-space-16);
   flex-shrink: 0;
-  align-items: center;
+  align-items: flex-start;
   line-height: var(--s-line-height-base);
   gap: var(--s-space-16);
 }
@@ -193,6 +199,7 @@
 .banner__action-button,
 .banner__dismiss-button {
     font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm)
+    line-height: var(--s-line-height-sm);
+    height: 1.25rem
 }
   }

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

@@ -27,6 +27,7 @@ export class SwirlBanner {
     this.importance = "status";
     this.intent = "default";
     this.showIcon = false;
+    this.icon = undefined;
     this.size = "m";
   }
   componentDidLoad() {
@@ -42,14 +43,17 @@ export class SwirlBanner {
     icon?.setAttribute("size", smallIcon ? "20" : "24");
     dismissButtonIcon?.setAttribute("size", smallIcon ? "20" : "24");
   }
+  determineIcon() {
+    return this.icon ? this.icon : swirlBannerIconMapping[this.intent];
+  }
   render() {
-    const icon = swirlBannerIconMapping[this.intent];
+    const icon = this.determineIcon();
     const showControls = Boolean(this.actionLabel) || this.dismissable;
-    const showIcon = this.showIcon && Boolean(icon);
+    const showIcon = this.icon || (this.showIcon && Boolean(icon));
     const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
       "banner--has-icon": showIcon,
     });
-    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, showIcon && (h("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), showControls && (h("span", { class: "banner__controls" }, this.actionLabel && (h("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", null))))))));
+    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "banner__text" }, this.content)), showControls && (h("div", { class: "banner__controls" }, this.actionLabel && (h("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", null))))))));
   }
   static get is() { return "swirl-banner"; }
   static get encapsulation() { return "shadow"; }
@@ -199,6 +203,23 @@ export class SwirlBanner {
         "reflect": false,
         "defaultValue": "false"
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -10,18 +10,22 @@ describe("swirl-banner", () => {
       <swirl-banner action-label="Action" content="Content" dismissable="true" intent="info" show-icon="true">
         <mock:shadow-root>
           <div aria-describedby="content" class="banner banner--has-icon banner--intent-info banner--size-m" role="status" tabindex="0">
-            <span aria-hidden="true" class="banner__icon">
-              <swirl-icon-info size="24"></swirl-icon-info>
-            </span>
-            <span class="banner__content" id="content" part="banner__content">Content</span>
-            <span class="banner__controls">
+            <div class="banner__content" id="content" part="banner__content">
+              <span aria-hidden="true" class="banner__icon">
+                <swirl-icon-info size="24"></swirl-icon-info>
+              </span>
+              <span class="banner__text">
+                Content
+              </span>
+            </div>
+            <div class="banner__controls">
               <button class="banner__action-button" part="banner__action-button" type="button">
                 Action
               </button>
               <button aria-label="Dismiss" class="banner__dismiss-button" part="banner__dismiss-button" type="button">
                 <swirl-icon-close size="24"></swirl-icon-close>
               </button>
-            </span>
+            </div>
           </div>
         </mock:shadow-root>
       </swirl-banner>
@@ -53,4 +57,34 @@ describe("swirl-banner", () => {
     await page.waitForChanges();
     expect(buttonSpy).toHaveBeenCalled();
   });
+  it("renders with custom icon, when icon prop is set", async () => {
+    const page = await newSpecPage({
+      components: [SwirlBanner],
+      html: `<swirl-banner action-label="Action" content="Content" dismissable="true" intent="info" icon="<swirl-icon-download></swirl-icon-download>"></swirl-banner>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-banner action-label="Action" content="Content" dismissable="true" icon="<swirl-icon-download></swirl-icon-download>" intent="info">
+        <mock:shadow-root>
+          <div aria-describedby="content" class="banner banner--has-icon banner--intent-info banner--size-m" role="status" tabindex="0">
+            <div class="banner__content" id="content" part="banner__content">
+              <span aria-hidden="true" class="banner__icon">
+                <swirl-icon-download size="24"></swirl-icon-download>
+              </span>
+              <span class="banner__text">
+                Content
+              </span>
+            </div>
+            <div class="banner__controls">
+              <button class="banner__action-button" part="banner__action-button" type="button">
+                Action
+              </button>
+              <button aria-label="Dismiss" class="banner__dismiss-button" part="banner__dismiss-button" type="button">
+                <swirl-icon-close size="24"></swirl-icon-close>
+              </button>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-banner>
+    `);
+  });
 });

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

@@ -1,6 +1,16 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-banner.mdx";
 export default {
+  argTypes: {
+    icon: {
+      table: {
+        type: {
+          detail: "e.g. <swirl-icon-download></swirl-icon-download>",
+          summary: "swirl-icon-*",
+        },
+      },
+    },
+  },
   component: "swirl-banner",
   tags: ["autodocs"],
   parameters: {

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

@@ -10,7 +10,6 @@
 .tag {
   display: inline-flex;
   max-width: 100%;
-  padding: var(--s-space-2) var(--s-space-8);
   align-items: center;
   border-radius: var(--s-border-radius-s);
   color: var(--s-text-default);
@@ -22,6 +21,14 @@
   gap: var(--s-space-4);
 }
 
+.tag--size-s {
+  padding: var(--s-space-0) var(--s-space-4);
+}
+
+.tag--size-m {
+  padding: var(--s-space-2) var(--s-space-8);
+}
+
 .tag--bordered {
   border-style: solid;
   border-width: var(--s-border-width-default);

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

@@ -9,10 +9,11 @@ export class SwirlTag {
     this.label = undefined;
     this.removable = undefined;
     this.bordered = undefined;
+    this.size = "m";
     this.removalButtonLabel = "Remove";
   }
   render() {
-    const className = classnames("tag", `tag--intent-${this.intent}`, {
+    const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, {
       "tag--bordered": this.bordered,
     });
     return (h(Host, null, h("span", { class: className, part: "tag" }, h("span", { class: "tag__label" }, this.label), this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
@@ -105,6 +106,29 @@ export class SwirlTag {
         "attribute": "bordered",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlTagSize",
+          "resolved": "\"m\" | \"s\"",
+          "references": {
+            "SwirlTagSize": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tag/swirl-tag.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"m\""
+      },
       "removalButtonLabel": {
         "type": "string",
         "mutable": false,

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

@@ -9,7 +9,7 @@ describe("swirl-tag", () => {
     expect(page.root).toEqualHtml(`
       <swirl-tag intent="info" label="Label">
         <mock:shadow-root>
-          <span class="tag tag--intent-info" part="tag">
+          <span class="tag tag--intent-info tag--size-m" part="tag">
             <span class="tag__label">
               Label
             </span>