@sebgroup/green-core 2.27.0 → 2.28.0

package/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -11,6 +11,10 @@ declare class CheckboxGroup extends GdsFormControlElement<string[]> {
      * The direction in which checkbox buttons are displayed.
      */
     direction: 'row' | 'column';
+    /**
+     * Whether to hide the label for the checkbox group. Usable if you want a single checkbox to act as the label.
+     */
+    hideLabel: boolean;
     /**
      * The supporting text displayed between the label and the field.
      * This text provides additional context or information to the user.

package/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -26,6 +26,7 @@ let CheckboxGroup = class extends GdsFormControlElement {
     __privateAdd(this, _CheckboxGroup_instances);
     this.size = "large";
     this.direction = "column";
+    this.hideLabel = false;
     this.supportingText = "";
     this.showExtendedSupportingText = false;
     __privateAdd(this, _syncCheckboxes, () => {
@@ -103,7 +104,12 @@ renderCheckboxGroupContents_fn = function() {
 };
 renderFieldControlHeader_fn = function() {
   if (this.label) {
-    return html`<gds-form-control-header class="size-${this.size}">
+    return html`<gds-form-control-header
+        class=${classMap({
+      [`size-${this.size}`]: true,
+      "visually-hidden": this.hideLabel
+    })}
+      >
         <label id="group-label" slot="label">${this.label}</label>
         <span slot="supporting-text" id="supporting-text">
           ${this.supportingText}
@@ -155,6 +161,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], CheckboxGroup.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], CheckboxGroup.prototype, "hideLabel", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], CheckboxGroup.prototype, "supportingText", 2);

package/components/checkbox/checkbox-group/checkbox-group.styles.js

@@ -61,6 +61,17 @@ const styles = css`
   :host([size='small']) .direction-row .content {
     gap: var(--gds-sys-space-xs) var(--gds-sys-space-m);
   }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 `;
 export {
   styles