@justeattakeaway/pie-checkbox-group 0.2.0 → 0.3.0

package/README.md

@@ -87,34 +87,16 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 ```html
 <!-- Native HTML -->
 <pie-checkbox-group name="TESTNAME">
-  <pie-checkbox
-    name="my-checkbox-one"
-    label="Checkbox Label 1">
-  </pie-checkbox>
-  <pie-checkbox
-      name="my-checkbox-two"
-      label="Checkbox Label 2">
-  </pie-checkbox>
-  <pie-checkbox
-      name="my-checkbox-three"
-      label="Checkbox Label 3">
-  </pie-checkbox>
+  <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
+  <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
+  <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
 </pie-checkbox-group>
 
 <!-- JSX -->
 <PieCheckboxGroup name="TESTNAME">
-  <PieCheckbox
-    name="my-checkbox-one"
-    label="Checkbox Label 1">
-  </PieCheckbox>
-  <PieCheckbox
-      name="my-checkbox-two"
-      label="Checkbox Label 2">
-  </PieCheckbox>
-  <PieCheckbox
-      name="my-checkbox-three"
-      label="Checkbox Label 3">
-  </PieCheckbox>
+  <PieCheckbox name="my-checkbox-one">Checkbox Label 1</PieCheckbox>
+  <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
+  <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
 </PieCheckboxGroup>
 ```
 

package/custom-elements.json

@@ -35,7 +35,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    status: 'default',\n    disabled: false,\n}"
+          "default": "{\n    status: 'default',\n    disabled: false,\n    isInline: false,\n}"
         }
       ],
       "exports": [
@@ -73,6 +73,12 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckboxGroup",
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -101,6 +107,12 @@
               "privacy": "public",
               "attribute": "assistiveText"
             },
+            {
+              "kind": "field",
+              "name": "isInline",
+              "privacy": "public",
+              "attribute": "isInline"
+            },
             {
               "kind": "field",
               "name": "status",
@@ -173,6 +185,10 @@
               },
               "fieldName": "assistiveText"
             },
+            {
+              "name": "isInline",
+              "fieldName": "isInline"
+            },
             {
               "name": "status",
               "fieldName": "status"

package/dist/index.d.ts

@@ -16,6 +16,10 @@ export declare interface CheckboxGroupProps {
      * The label value of the component
      */
     label?: string;
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -30,7 +34,7 @@ export declare interface CheckboxGroupProps {
     status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -43,12 +47,14 @@ export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
 
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
     label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
+    isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
     _slottedChildren: Array<HTMLElement>;

package/dist/index.js

@@ -1,86 +1,96 @@
-import { LitElement as b, html as p, unsafeCSS as m } from "lit";
-import { property as l, queryAssignedElements as v } from "lit/decorators.js";
-import { FormControlMixin as y, RtlMixin as x, validPropertyValues as _, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { LitElement as x, html as d, unsafeCSS as g } from "lit";
+import { property as r, queryAssignedElements as m } from "lit/decorators.js";
+import { FormControlMixin as v, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
 import { ifDefined as h } from "lit/directives/if-defined.js";
+import { classMap as _ } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const g = `*,*:after,*:before{box-sizing:inherit}
-`, S = ["default", "success", "error"], E = "pie-checkbox-group-disabled", u = {
+const C = `*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:first-child)){margin-block-start:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup-label{max-width:100%;white-space:normal;padding:0;font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);font-weight:var(--dt-font-body-strong-s-weight);color:var(--dt-color-content-default);margin-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline .c-checkboxGroup-label{margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)))}
+`, w = ["default", "success", "error"], S = "pie-checkbox-group-disabled", n = {
   status: "default",
-  disabled: !1
+  disabled: !1,
+  isInline: !1
 };
-var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (d, t, o, s) => {
-  for (var e = s > 1 ? void 0 : s ? D(t, o) : t, r = d.length - 1, n; r >= 0; r--)
-    (n = d[r]) && (e = (s ? n(t, o, e) : n(e)) || e);
-  return s && e && $(t, o, e), e;
+var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (p, e, i, c) => {
+  for (var t = c > 1 ? void 0 : c ? E(e, i) : e, a = p.length - 1, l; a >= 0; a--)
+    (l = p[a]) && (t = (c ? l(e, i, t) : l(t)) || t);
+  return c && t && $(e, i, t), t;
 };
-const f = "pie-checkbox-group", c = "assistive-text";
-class i extends y(x(b)) {
+const f = "pie-checkbox-group", b = "assistive-text";
+class o extends v(k(x)) {
   constructor() {
-    super(...arguments), this.status = u.status, this.disabled = u.disabled;
+    super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
   }
   _handleDisabled() {
-    this._slottedChildren && this._slottedChildren.forEach((t) => {
-      t.dispatchEvent(new CustomEvent(E, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
+    this._slottedChildren && this._slottedChildren.forEach((e) => {
+      e.dispatchEvent(new CustomEvent(S, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
     });
   }
   _handleStatus() {
-    this._slottedChildren && this._slottedChildren.forEach((t) => t.setAttribute("status", this.status));
+    this._slottedChildren && this._slottedChildren.forEach((e) => e.setAttribute("status", this.status));
   }
-  updated(t) {
-    t.has("disabled") && this._handleDisabled(), t.has("status") && this._handleStatus();
+  updated(e) {
+    e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
   }
   render() {
     const {
-      name: t,
-      label: o,
-      assistiveText: s,
-      status: e,
-      disabled: r
-    } = this;
-    return p`
+      name: e,
+      label: i,
+      isInline: c,
+      assistiveText: t,
+      status: a,
+      disabled: l
+    } = this, u = {
+      "c-checkboxGroup": !0,
+      "c-checkboxGroup--inline": c
+    };
+    return d`
             <fieldset
-                name=${h(t)}
-                ?disabled=${r}
-                aria-describedby="${h(s ? c : void 0)}"
+                name=${h(e)}
+                ?disabled=${l}
+                aria-describedby="${h(t ? b : void 0)}"
                 data-test-id="pie-checkbox-group"
+                class="${_(u)}"
             >
-                ${o && p`<legend>${o}</legend>`}
+                ${i && d`<legend class="c-checkboxGroup-label">${i}</legend>`}
                 <slot></slot>
             </fieldset>
-            ${s && p`
+            ${t && d`
                 <pie-assistive-text
-                    id="${c}"
-                    variant=${e}
+                    id="${b}"
+                    variant=${a}
                     data-test-id="pie-checkbox-group-assistive-text">
-                        ${s}
+                        ${t}
                 </pie-assistive-text>`}
         `;
   }
 }
-i.styles = m(g);
-a([
-  l({ type: String })
-], i.prototype, "name", 2);
-a([
-  l({ type: String })
-], i.prototype, "label", 2);
-a([
-  l({ type: String })
-], i.prototype, "assistiveText", 2);
-a([
-  l({ type: String }),
-  _(f, S, u.status)
-], i.prototype, "status", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-a([
-  v({})
-], i.prototype, "_slottedChildren", 2);
-C(f, i);
+o.styles = g(C);
+s([
+  r({ type: String })
+], o.prototype, "name", 2);
+s([
+  r({ type: String })
+], o.prototype, "label", 2);
+s([
+  r({ type: String })
+], o.prototype, "assistiveText", 2);
+s([
+  r({ type: Boolean })
+], o.prototype, "isInline", 2);
+s([
+  r({ type: String }),
+  y(f, w, n.status)
+], o.prototype, "status", 2);
+s([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+s([
+  m({})
+], o.prototype, "_slottedChildren", 2);
+G(f, o);
 export {
-  E as ON_CHECKBOX_GROUP_DISABLED,
-  i as PieCheckboxGroup,
-  u as defaultProps,
-  S as statusTypes
+  S as ON_CHECKBOX_GROUP_DISABLED,
+  o as PieCheckboxGroup,
+  n as defaultProps,
+  w as statusTypes
 };

package/dist/react.d.ts

@@ -17,6 +17,10 @@ export declare interface CheckboxGroupProps {
      * The label value of the component
      */
     label?: string;
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -31,7 +35,7 @@ export declare interface CheckboxGroupProps {
     status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -46,12 +50,14 @@ export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<Checkbo
 
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
     label?: CheckboxGroupProps['label'];
     assistiveText?: CheckboxGroupProps['assistiveText'];
+    isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
     _slottedChildren: Array<HTMLElement>;

package/dist/react.js

@@ -1,11 +1,12 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieCheckboxGroup as r } from "./index.js";
-import { ON_CHECKBOX_GROUP_DISABLED as h, defaultProps as k, statusTypes as P } from "./index.js";
+import { ON_CHECKBOX_GROUP_DISABLED as k, defaultProps as P, statusTypes as n } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
 import "lit/directives/if-defined.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
 const p = e({
   displayName: "PieCheckboxGroup",
@@ -16,10 +17,10 @@ const p = e({
     onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled"
     // triggered after the disabled state of the checkbox group changes.
   }
-}), u = p;
+}), x = p;
 export {
-  h as ON_CHECKBOX_GROUP_DISABLED,
-  u as PieCheckboxGroup,
-  k as defaultProps,
-  P as statusTypes
+  k as ON_CHECKBOX_GROUP_DISABLED,
+  x as PieCheckboxGroup,
+  P as defaultProps,
+  n as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/checkbox-group.scss

@@ -1 +1,53 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-checkboxGroup {
+    --checkbox-group-offset: var(--dt-spacing-c);
+    --checkbox-group-offset--inline: var(--dt-spacing-e);
+    --checkbox-group-label-offset: var(--dt-spacing-a);
+
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+
+    ::slotted(pie-checkbox) {
+        display: flex;
+    }
+
+    &:not(.c-checkboxGroup--inline) {
+        ::slotted(pie-checkbox:not(:first-child)) {
+            margin-block-start: var(--checkbox-group-offset);
+        }
+    }
+}
+
+.c-checkboxGroup--inline {
+    display: flex;
+
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.c-checkboxGroup-label {
+    max-width: 100%;
+    white-space: normal;
+    padding: 0;
+    font-size: p.font-size(--dt-font-body-strong-s-size);
+    line-height: p.line-height(--dt-font-body-strong-s-line-height);
+    font-weight: var(--dt-font-body-strong-s-weight);
+    color: var(--dt-color-content-default);
+
+    margin-block-end: var(--checkbox-group-label-offset);
+}
+
+.c-checkboxGroup.c-checkboxGroup--inline {
+    margin: calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
+
+    ::slotted(pie-checkbox) {
+        margin: calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2);
+    }
+
+    .c-checkboxGroup-label {
+        margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)));
+    }
+}

package/src/defs.ts

@@ -13,6 +13,11 @@ export interface CheckboxGroupProps {
      */
     label?: string;
 
+    /**
+     * Inline (horizontal) positioning of checkbox items
+     */
+    isInline?: boolean;
+
     /**
      * An optional assistive text to display below the checkbox group.
      */
@@ -36,9 +41,10 @@ export interface CheckboxGroupProps {
  */
 export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
 
-export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 
 export const defaultProps: DefaultProps = {
     status: 'default',
     disabled: false,
+    isInline: false,
 };

package/src/index.ts

@@ -9,6 +9,7 @@ import {
     validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 import styles from './checkbox-group.scss?inline';
 import {
     ON_CHECKBOX_GROUP_DISABLED,
@@ -26,6 +27,7 @@ const assistiveTextId = 'assistive-text';
 
 /**
  * @tagname pie-checkbox-group
+ * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
@@ -38,6 +40,9 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     @property({ type: String })
     public assistiveText?: CheckboxGroupProps['assistiveText'];
 
+    @property({ type: Boolean })
+    public isInline = defaultProps.isInline;
+
     @property({ type: String })
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
     public status = defaultProps.status;
@@ -75,18 +80,26 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
         const {
             name,
             label,
+            isInline,
             assistiveText,
             status,
             disabled,
         } = this;
+
+        const classes = {
+            'c-checkboxGroup': true,
+            'c-checkboxGroup--inline': isInline,
+        };
+
         return html`
             <fieldset
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 aria-describedby="${ifDefined(assistiveText ? assistiveTextId : undefined)}"
                 data-test-id="pie-checkbox-group"
+                class="${classMap(classes)}"
             >
-                ${label && html`<legend>${label}</legend>`}
+                ${label && html`<legend class="c-checkboxGroup-label">${label}</legend>`}
                 <slot></slot>
             </fieldset>
             ${assistiveText && html`