@getflip/swirl-components 0.167.2 → 0.168.0

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

@@ -33,6 +33,7 @@ export class SwirlAppLayout {
     this.backToNavigationViewButtonLabel = "Back to navigation";
     this.ctaIcon = undefined;
     this.ctaLabel = undefined;
+    this.hasNavigation = undefined;
     this.hideAppBar = undefined;
     this.navigationBackButtonLabel = "Go back";
     this.navigationLabel = undefined;
@@ -41,7 +42,6 @@ export class SwirlAppLayout {
     this.sidebarHeading = undefined;
     this.transitionStyle = "slides";
     this.hasCustomAppBarBackButton = undefined;
-    this.hasNavigation = undefined;
     this.hasSidebar = undefined;
     this.mobileView = "navigation";
     this.sidebarActive = undefined;
@@ -284,6 +284,23 @@ export class SwirlAppLayout {
         "attribute": "cta-label",
         "reflect": false
       },
+      "hasNavigation": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "has-navigation",
+        "reflect": false
+      },
       "hideAppBar": {
         "type": "boolean",
         "mutable": false,
@@ -411,7 +428,6 @@ export class SwirlAppLayout {
   static get states() {
     return {
       "hasCustomAppBarBackButton": {},
-      "hasNavigation": {},
       "hasSidebar": {},
       "mobileView": {},
       "sidebarActive": {},

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

@@ -66,6 +66,7 @@ const Template = (args) => {
 export const SwirlAppLayout = Template.bind({});
 SwirlAppLayout.args = {
   appName: "App Name",
+  hasNavigation: true,
   navigationLabel: "Items",
   sidebarHeading: "Sidebar Heading",
 };

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

@@ -96,7 +96,7 @@ export class SwirlAvatar {
     const showIcon = !showImage && !showInitials && Boolean(this.icon);
     const showFallbackIcon = !showImage && !showInitials && !showIcon;
     const showBadge = Boolean(this.badge) && this.size === "m";
-    const role = this.interactive ? "button" : "img";
+    const role = this.interactive ? "button" : undefined;
     const className = classnames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
       "avatar--has-icon": showIcon || showFallbackIcon,
       "avatar--has-initials": showInitials,

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

@@ -7,7 +7,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar label="John Doe"></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe" role="img">
+      <swirl-avatar aria-label="John Doe" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -33,7 +33,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar label="John Doe" src="https://"></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe" role="img" src="https://">
+      <swirl-avatar aria-label="John Doe" label="John Doe" src="https://">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__image">
@@ -53,7 +53,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar initials="JD" label="John Doe"></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" initials="JD" label="John Doe" role="img">
+      <swirl-avatar aria-label="John Doe" initials="JD" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-initials avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__initials">
@@ -75,7 +75,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar icon="<swirl-icon-close></swirl-icon-close>" label="John Doe"></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" icon="<swirl-icon-close></swirl-icon-close>" label="John Doe" role="img">
+      <swirl-avatar aria-label="John Doe" icon="<swirl-icon-close></swirl-icon-close>" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -118,7 +118,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe"></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe" role="img">
+      <swirl-avatar aria-label="John Doe" badge="<swirl-badge aria-label='3 new messages' label='3'></swirl-badge>" badge-position="top" label="John Doe">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">
@@ -141,7 +141,7 @@ describe("swirl-avatar", () => {
       html: `<swirl-avatar label="John Doe" show-label></swirl-avatar>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-avatar aria-label="John Doe" label="John Doe" role="img" show-label="">
+      <swirl-avatar aria-label="John Doe" label="John Doe" show-label="">
         <mock:shadow-root>
           <span class="avatar avatar--color-kiwi avatar--has-icon avatar--size-m avatar--variant-round" part="avatar">
             <span class="avatar__icon">