@sebgroup/green-core 3.4.0 → 3.5.0

package/components/form-summary/summary.component.d.ts

@@ -6,12 +6,14 @@ import { GdsElement } from '../../gds-element';
  * When a user attempts to submit a form with errors, this component displays a summary of those errors.
  * Including an error summary greatly assists users in promptly identifying and addressing multiple errors
  * in a consolidated manner. It provides a clear indication of what went wrong and what needs to be corrected.
+ *
+ * @slot header - Optional slot for customizing the header of the summary.
  */
 export declare class GdsFormSummary extends GdsElement {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
-     * Whether to hide the error messages under the labels.
+     * @deprecated This no longer has any effect, and will be removed in a future release.
      */
     hideErrors: boolean;
     /**
@@ -35,7 +37,7 @@ export declare class GdsFormSummary extends GdsElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**
-     * Refresh the component to reflext the current state of the form.
+     * Refresh the component to reflect the current state of the form.
      */
     refresh(): void;
     render(): any;

package/components/form-summary/summary.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _form, _formObserver, _getFormControls, getFormControls_fn, _getErrorControls, getErrorControls_fn, _renderArrowIcon, renderArrowIcon_fn;
+var _form, _formObserver, _renderControlItem, renderControlItem_fn, _groupByFieldset, groupByFieldset_fn, _getFormControls, getFormControls_fn, _getErrorControls, getErrorControls_fn, _renderArrowIcon, renderArrowIcon_fn;
 import { msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, queryAsync } from "lit/decorators.js";
@@ -14,15 +14,19 @@ import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
+import { GdsAlert } from "../alert/alert.component.js";
 import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
 import { GdsDiv } from "../div/div.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
 import { IconArrowUp } from "../icon/icons/arrow-up.component.js";
+import { GdsText } from "../text/text.component.js";
 import SummaryStyles from "./summary.styles.js";
 let GdsFormSummary = class extends GdsElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _renderControlItem);
+    __privateAdd(this, _groupByFieldset);
     __privateAdd(this, _getFormControls);
     __privateAdd(this, _getErrorControls);
     __privateAdd(this, _renderArrowIcon);
@@ -70,75 +74,62 @@ let GdsFormSummary = class extends GdsElement {
     __privateGet(this, _formObserver)?.disconnect();
   }
   /**
-   * Refresh the component to reflext the current state of the form.
+   * Refresh the component to reflect the current state of the form.
    */
   refresh() {
     this.requestUpdate();
   }
   render() {
     const formControls = __privateMethod(this, _getFormControls, getFormControls_fn).call(this);
-    const errorControls = __privateMethod(this, _getErrorControls, getErrorControls_fn).call(this);
+    const errorCount = __privateMethod(this, _getErrorControls, getErrorControls_fn).call(this).length;
+    const groupedControls = __privateMethod(this, _groupByFieldset, groupByFieldset_fn).call(this, formControls);
     return when(
-      errorControls.length > 0,
+      errorCount > 0,
       () => html`<gds-card
           id="root"
           role="navigation"
-          variant="negative"
-          padding="l"
-          background="negative-01"
-          color="negative-01"
+          padding="xs"
+          background="neutral-02"
+          border-color="negative-01"
+          border-radius="m"
           overflow="hidden"
           aria-describedby="description"
           aria-label=${msg(`Form error summary`)}
         >
           <gds-flex gap="0" flex-direction="column">
-            <gds-text font="heading-xs" font-weight="book" id="description">
-              ${msg(
-        str`There are ${errorControls.length} errors to correct before you can continue:`
+            <slot name="header">
+              <gds-alert
+                variant="negative"
+                label=${msg(
+        str`There are errors to correct before you can continue`
       )}
-            </gds-text>
+              >
+                ${msg(str`There are errors to correct before you can continue`)}
+              </gds-alert>
+            </slot>
             <ul>
-              ${formControls.map(
-        (el, idx) => html`<li ?inert=${!(el.ariaInvalid === "true" || el.invalid)}>
-                    <gds-card
-                      display="flex"
-                      padding="s"
-                      flex-direction="row"
-                      align-items="center"
-                      justify-content="space-between"
-                      gap="xs"
-                      level="3"
-                      color="negative-01"
-                      background="transparent; hover: negative-01/.1"
-                      style="cursor: pointer"
-                      border-width="0"
-                      border-radius="xs"
-                      margin="0 -xs"
-                      @click=${(e) => {
-          e.preventDefault();
-          el.focus();
-        }}
+              ${groupedControls.map(
+        (entry) => when(
+          entry.fieldset,
+          // Render fieldset groups with legends if they exist
+          () => html`<li
+                      class="group"
+                      ?inert=${!entry.controls.some(
+            (el) => el.ariaInvalid === "true" || el.invalid
+          )}
                     >
-                      <div id=${`error-label-${idx}`}>
-                        <gds-div font-weight="book"
-                          >${el.dataset.label || el.label || el.ariaLabel}</gds-div
-                        >
-                        ${when(
-          !this.hideErrors,
-          () => html`<gds-div font="body-s-regular">
-                              ${el.dataset.errormessage || el.errorMessage || el.ariaErrorMessage}
-                            </gds-div>`
-        )}
-                      </div>
-                      <gds-button
-                        size="small"
-                        variant="negative"
-                        label=${`Move focus to ${el.label} field`}
+                      <gds-text tag="span" font="heading-s" margin="0 s xs"
+                        >${entry.legend}</gds-text
                       >
-                        ${until(__privateMethod(this, _renderArrowIcon, renderArrowIcon_fn).call(this, el), nothing)}
-                      </gds-button>
-                    </gds-card>
-                  </li>`
+                      <ul>
+                        ${entry.controls.map(
+            (el) => __privateMethod(this, _renderControlItem, renderControlItem_fn).call(this, el)
+          )}
+                      </ul>
+                    </li>`,
+          // Render standalone controls without a fieldset
+          () => entry.controls.map((el) => __privateMethod(this, _renderControlItem, renderControlItem_fn).call(this, el))
+        )
       )}
             </ul>
           </gds-flex>
@@ -148,12 +139,70 @@ let GdsFormSummary = class extends GdsElement {
 };
 _form = new WeakMap();
 _formObserver = new WeakMap();
+_renderControlItem = new WeakSet();
+renderControlItem_fn = function(el) {
+  return html`<li
+      class="item"
+      ?inert=${!(el.ariaInvalid === "true" || el.invalid)}
+    >
+      <gds-card
+        display="flex"
+        flex-direction="row"
+        align-items="center"
+        justify-content="space-between"
+        gap="xs"
+        level="3"
+        background="transparent; hover: neutral-02"
+        style="cursor: pointer"
+        border-width="0"
+        border-radius="xs"
+        padding="xs s"
+        @click=${(e) => {
+    e.preventDefault();
+    el.focus();
+  }}
+      >
+        <div>
+          <gds-div font-weight="book"
+            >${el.dataset.label || el.label || el.ariaLabel}</gds-div
+          >
+        </div>
+        <gds-button
+          size="xs"
+          rank="secondary"
+          label=${`Move focus to ${el.label} field`}
+        >
+          ${until(__privateMethod(this, _renderArrowIcon, renderArrowIcon_fn).call(this, el), nothing)}
+        </gds-button>
+      </gds-card>
+    </li>`;
+};
+_groupByFieldset = new WeakSet();
+groupByFieldset_fn = function(controls) {
+  const groups = [];
+  for (const el of controls) {
+    const fieldset = el.closest("fieldset");
+    if (!fieldset) {
+      groups.push({ fieldset: null, legend: "", controls: [el] });
+    } else {
+      let group = groups.find((g) => g.fieldset === fieldset);
+      if (!group) {
+        const legend = fieldset.querySelector("legend")?.textContent?.trim() || "";
+        group = { fieldset, legend, controls: [] };
+        groups.push(group);
+      }
+      group.controls.push(el);
+    }
+  }
+  return groups;
+};
 _getFormControls = new WeakSet();
 getFormControls_fn = function() {
   return Array.from(__privateGet(this, _form)?.elements || []).filter(
     // Individual checkboxes can be used as form controls, but they don't support error messages,
     // so we filter them out here. Checkboxes needs to be wrapped in a group to work with form summary.
-    (el) => el.gdsElementName !== "gds-checkbox"
+    // Fieldsets are also listed in form.elements but are not actual controls.
+    (el) => el.gdsElementName !== "gds-checkbox" && el.tagName !== "FIELDSET"
   );
 };
 _getErrorControls = new WeakSet();
@@ -167,9 +216,13 @@ renderArrowIcon_fn = async function(el) {
   const selfTop = (await this._elRoot).getBoundingClientRect().top;
   const elTop = el.getBoundingClientRect().top;
   const isAbove = elTop < selfTop;
-  return isAbove ? html`<gds-icon-arrow-up></gds-icon-arrow-up>` : html`<gds-icon-arrow-up
+  return when(
+    isAbove,
+    () => html`<gds-icon-arrow-up></gds-icon-arrow-up>`,
+    () => html`<gds-icon-arrow-up
           style="transform: rotate(180deg)"
-        ></gds-icon-arrow-up>`;
+        ></gds-icon-arrow-up>`
+  );
 };
 GdsFormSummary.styles = [tokens, SummaryStyles];
 __decorateClass([
@@ -183,7 +236,15 @@ __decorateClass([
 ], GdsFormSummary.prototype, "_elRoot", 2);
 GdsFormSummary = __decorateClass([
   gdsCustomElement("gds-form-summary", {
-    dependsOn: [GdsCard, GdsFlex, GdsDiv, GdsButton, IconArrowUp]
+    dependsOn: [
+      GdsCard,
+      GdsFlex,
+      GdsDiv,
+      GdsButton,
+      IconArrowUp,
+      GdsAlert,
+      GdsText
+    ]
   })
 ], GdsFormSummary);
 export {

package/components/form-summary/summary.styles.js

@@ -9,6 +9,9 @@ var summary_styles_default = css`
     margin: 1rem 0 0;
     padding: 0;
   }
+  ul ul {
+    margin: 0;
+  }
   li {
     margin: 0;
     transition:
@@ -16,14 +19,25 @@ var summary_styles_default = css`
       opacity 0.3s ease-in-out,
       margin 0.3s ease-in-out;
   }
-  li[inert] {
+  li.item[inert] {
     max-height: 0;
     opacity: 0;
   }
-  li:not([inert]) {
+  li.item:not([inert]) {
     max-height: 4rem;
     opacity: 1;
   }
+  li.group[inert] {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    border-top-width: 0;
+    padding-top: 0;
+    margin-top: 0;
+  }
+  li.group:not([inert]) {
+    padding-top: var(--gds-sys-space-m);
+  }
   a {
     color: inherit;
   }