@getflip/swirl-components 0.117.0 → 0.118.0

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

@@ -223,6 +223,14 @@
     display: block;
   }
 
+.app-layout--has-custom-sidebar-header .app-layout__sidebar-header {
+    display: none;
+  }
+
+.app-layout--has-custom-sidebar-header .app-layout__custom-sidebar-header {
+    display: block;
+  }
+
 .app-layout--hide-app-bar .app-layout__body {
     grid-template-rows: auto 1fr;
     grid-template-areas:
@@ -417,6 +425,14 @@
 }
   }
 
+.app-layout__custom-sidebar-header {
+  display: none;
+  min-width: 0;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  background-color: var(--s-background-default);
+  grid-area: sidebar-header;
+}
+
 .app-layout__sidebar-header {
   display: flex;
   min-width: 0;

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

@@ -11,6 +11,7 @@ import { isMobileViewport } from "../../utils";
  * @slot app-bar-mobile-menu-button - Used to add a mobile shell layout menu button to the app bar
  * @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
  */
 export class SwirlAppLayout {
   constructor() {
@@ -177,10 +178,12 @@ export class SwirlAppLayout {
       !this.hasCustomAppBarBackButton;
     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 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-navigation": this.hasNavigation,
       "app-layout--has-sidebar": this.hasSidebar,
       "app-layout--hide-app-bar": this.hideAppBar,
@@ -189,7 +192,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__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" }))), 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" })))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.css

@@ -45,13 +45,13 @@
 }
   }
 
-.option-list-item--draggable .option-list-item__label {
+.option-list-item--draggable .option-list-item__label-container {
     padding-right: calc(var(--s-space-16) + 1.5rem);
   }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.option-list-item--draggable .option-list-item__label {
+.option-list-item--draggable .option-list-item__label-container {
       padding-right: calc(var(--s-space-16) + 1rem)
   }
     }
@@ -94,7 +94,8 @@
       color: var(--s-text-on-status);
     }
 
-.option-list-item--disabled .option-list-item__label {
+.option-list-item--disabled .option-list-item__label,
+  .option-list-item--disabled .option-list-item__description {
     color: var(--s-text-disabled);
   }
 
@@ -109,8 +110,13 @@
     background-color: var(--s-surface-overlay-default);
   }
 
-.option-list-item__label {
+.option-list-item__label-container {
+  display: flex;
   flex-grow: 1;
+  flex-direction: column;
+}
+
+.option-list-item__label {
   color: var(--s-text-default);
   font-size: var(--s-font-size-base);
   font-weight: var(--s-font-weight-medium);
@@ -126,6 +132,22 @@
 }
   }
 
+.option-list-item__description {
+  color: var(--s-text-subdued);
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.option-list-item__description {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
 .option-list-item__icon {
   display: inline-flex;
   flex-shrink: 0;

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -1,9 +1,11 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
+import { v4 as uuid } from "uuid";
 export class SwirlOptionListItem {
   constructor() {
     this.desktopMediaQuery = getDesktopMediaQuery();
+    this.id = uuid();
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
       this.updateIconSize(event.matches);
@@ -22,6 +24,7 @@ export class SwirlOptionListItem {
     };
     this.allowDrag = undefined;
     this.context = "single-select";
+    this.description = undefined;
     this.disabled = undefined;
     this.dragging = undefined;
     this.dragHandleDescription = "Press spacebar to toggle grab";
@@ -61,7 +64,9 @@ export class SwirlOptionListItem {
       "option-list-item--dragging": this.dragging,
       "option-list-item--selected": this.selected,
     });
-    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-disabled": ariaDisabled, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
+    return (h(Host, null, h("div", { "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        ? `option-list-item-${this.id}-description`
+        : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.id}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.id}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), showCheckbox && (h("span", { class: "option-list-item__checkbox" }, h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { class: "option-list-item__label-container" }, h("span", { class: "option-list-item__label", id: `option-list-item-${this.id}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { class: "option-list-item__description", id: `option-list-item-${this.id}-description` }, this.description))), showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { size: this.iconSize })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
   static get is() { return "swirl-option-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -117,6 +122,23 @@ export class SwirlOptionListItem {
         "reflect": false,
         "defaultValue": "\"single-select\""
       },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.spec.js

@@ -13,14 +13,17 @@ describe("swirl-option-list-item", () => {
               value="Value">
             </swirl-option-list-item>`,
     });
+    const id = page.root.children[0].id;
     expect(page.root).toEqualHtml(`
       <swirl-option-list-item context="single-select" disabled="false" icon="<swirl-icon-mention></swirl-icon-mention>" label="Option List Item" selected="true" value="Value">
-        <div aria-selected="true" class="option-list-item option-list-item--context-single-select option-list-item--selected" part="option-list-item" role="option">
+        <div aria-labelledby="${id}-label" aria-selected="true" class="option-list-item option-list-item--context-single-select option-list-item--selected" id="${id}" part="option-list-item" role="option">
           <span class="option-list-item__icon">
             <swirl-icon-mention size="24"></swirl-icon-mention>
           </span>
-          <span class="option-list-item__label" part="option-list-item__label">
-            Option List Item
+          <span class="option-list-item__label-container">
+            <span class="option-list-item__label" id="${id}-label" part="option-list-item__label">
+              Option List Item
+            </span>
           </span>
           <span class="option-list-item__selection-icon">
             <swirl-icon-check-small size="24"></swirl-icon-check-small>