@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-radio/pds-radio.js

@@ -1,26 +1,70 @@
 import { Host, h } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { assignDescription, messageId, exposeTypeProperty } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+/**
+ * @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
+ * @part image-container - The container for the image
+ * @lightDom renders-markup
+ */
 export class PdsRadio {
     constructor() {
+        this._type = 'radio';
+        this.hostKeeper = new HostStylingKeeper();
+        this._hasImage = false;
+        /**
+         * Determines whether or not the radio is checked. It keeps the value you set and doesn't change when the user picks a radio.
+         * @defaultValue false
+         */
+        this.checked = false;
+        /**
+         * Determines whether or not the radio is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
+         * @defaultValue false
+         */
+        this.hasBorder = false;
+        /**
+       * Determines whether or not the radio is invalid.
+       * @defaultValue false
+       */
+        this.invalid = false;
+        /**
+         * Determines whether or not the radio is required.
+         * @defaultValue false
+         */
+        this.required = false;
+        /**
+         * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleRadioChange = (e) => {
             if (this.disabled) {
                 return;
             }
             const target = e.target;
             const isChecked = target.checked;
+            // If this radio is inside a pds-radio-group, don't emit the individual event
+            // The group will handle emitting its own event
+            if (this.el.closest('pds-radio-group')) {
+                return;
+            }
             this.pdsRadioChange.emit(isChecked);
         };
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalid = false;
-        this.componentId = undefined;
-        this.label = undefined;
-        this.helperMessage = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.value = undefined;
+    }
+    hasImageSlot() {
+        const imageSlot = this.el.querySelector('[slot="image"]');
+        return !!imageSlot;
+    }
+    hasImage() {
+        return this._hasImage;
+    }
+    isPill() {
+        return this.variant === 'pill';
     }
     classNames() {
         const classNames = [];
@@ -30,23 +74,62 @@ export class PdsRadio {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
-        return classNames.join('  ');
+        // A pill is its own bordered shape, so has-border doesn't stack a card around it.
+        if (this.hasBorder && !this.isPill()) {
+            classNames.push('has-border');
+        }
+        if (this.isPill()) {
+            classNames.push('pds-radio--pill');
+        }
+        if (this.hasImage() && !this.isPill()) {
+            classNames.push('has-image');
+        }
+        return classNames.join(' ');
+    }
+    componentWillLoad() {
+        this._hasImage = this.hasImageSlot();
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // Discards stale hidden label/message/wrapper copies left by a page-cache (Turbo, bfcache) reconnect, rescuing real [slot="image"] content stranded inside a stale image-container first.
+    componentDidRender() {
+        const freshImageContainer = this.el.querySelector('.pds-radio__image-container:not([hidden])');
+        const staleSelector = '.pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]';
+        Array.from(this.el.querySelectorAll(staleSelector)).forEach((stale) => {
+            const imageSlotContent = stale.querySelector('[slot="image"]');
+            if (imageSlotContent !== null && freshImageContainer !== null) {
+                freshImageContainer.appendChild(imageSlotContent);
+            }
+            stale.remove();
+        });
     }
     render() {
-        return (h(Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        const renderLabelAndMessages = () => [
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '245464683e5944a26a94509f487deb10ed4e8f05', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), h("span", { key: '4d21fa0984501adc8ffc5fd7328b5dbd9cdfb98a', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
+            this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'ed7bc193c25165d38a227887acda90675fe318f2', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
+        ];
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        const showImage = this.hasImage() && !this.isPill();
+        return (h(Host, { key: 'b8d059bab47b36b7e7b89172e54c57b8df4ce9c7', class: hostClass }, showImage && (h("div", { key: 'bea622fc1afdaacd91f2e89aa7529e54c22c88da', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '3eca85a2457b25fa51509b28543ba897e3d99ab6', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-radio.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-radio.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-radio.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-radio.css"]
         };
     }
     static get properties() {
@@ -66,12 +149,33 @@ export class PdsRadio {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether or not the radio is checked."
+                    "text": "Determines whether or not the radio is checked. It keeps the value you set and doesn't change when the user picks a radio."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -89,8 +193,10 @@ export class PdsRadio {
                         }],
                     "text": "Determines whether or not the radio is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "errorMessage": {
@@ -105,12 +211,33 @@ export class PdsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state."
+                    "text": "Displays an error message below the radio. It becomes the radio's accessible description only while `invalid` is set."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
-            "invalid": {
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a message or hint below the radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "hasBorder": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -125,28 +252,36 @@ export class PdsRadio {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether or not the radio is invalid."
+                    "text": "Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-border",
                 "defaultValue": "false"
             },
-            "componentId": {
-                "type": "string",
+            "invalid": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is invalid."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
             },
             "label": {
                 "type": "string",
@@ -160,27 +295,31 @@ export class PdsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for label text next to radio."
+                    "text": "Text to be displayed as the radio label."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
-            "helperMessage": {
-                "type": "string",
+            "hideLabel": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for helper message below radio."
+                    "text": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "name": {
                 "type": "string",
@@ -196,8 +335,10 @@ export class PdsRadio {
                     "tags": [],
                     "text": "String used for radio `name` attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
@@ -216,8 +357,10 @@ export class PdsRadio {
                         }],
                     "text": "Determines whether or not the radio is required."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "value": {
@@ -234,11 +377,41 @@ export class PdsRadio {
                     "tags": [],
                     "text": "The value of the radio that is submitted with a form."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "default"
+                        }],
+                    "text": "Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
             }
         };
     }
+    static get states() {
+        return {
+            "_hasImage": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsRadioChange",
@@ -248,7 +421,7 @@ export class PdsRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits a boolean indicating whether the checkbox is currently checked or unchecked."
+                    "text": "Emitted with `true` when the user checks the radio, by a click or an arrow key. The radio is `event.target`, so read its `value` there.\nNot emitted when picking another radio unchecks this one. Not emitted inside `pds-radio-group` either; listen for `pdsRadioGroupChange` there."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -257,5 +430,5 @@ export class PdsRadio {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-radio.js.map

package/dist/collection/components/pds-radio/stories/pds-radio.stories.js

@@ -1,71 +1,118 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
+
   args: {
     checked: false,
     disabled: false,
+    hasBorder: false,
     invalid: false,
+    hideLabel: false,
     required: false,
+    variant: 'default',
   },
-  argTypes: extractArgTypes('pds-radio'),
-  component: 'pds-radio',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsRadioChange'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'pill'],
     },
   },
-  title: 'components/Radio',
+  component: 'pds-radio',
+  parameters: {},
+  title: 'components/Radio Group/Radio',
 }
 
 const BaseTemplate = (args) =>
   html` <pds-radio
     component-id=${args.componentId}
     label=${args.label}
-    checked=${args.checked}
-    disabled=${args.disabled}
+    ?checked=${args.checked}
+    ?disabled=${args.disabled}
     error-message=${args.errorMessage}
+    ?has-border=${args.hasBorder}
     helper-message=${args.helperMessage}
+    ?hide-label=${args.hideLabel}
     name=${args.name}
-    indeterminate=${args.indeterminate}
-    required=${args.required}
+    ?required=${args.required}
     value=${args.value}
-    invalid=${args.invalid}
+    ?invalid=${args.invalid}
+    variant=${args.variant}
   />`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  componentId: 'default',
+  componentId: 'radio-default',
   label: 'Label text',
 };
 
 export const Checked = BaseTemplate.bind();
 Checked.args = {
-  componentId: 'checked',
+  componentId: 'radio-checked',
   label: 'Label text',
   checked: true,
 };
 
 export const Disabled = BaseTemplate.bind();
 Disabled.args = {
-  componentId: 'disabled',
+  componentId: 'radio-disabled',
   label: 'Label text',
   disabled: true,
 };
 
 export const withMessage = BaseTemplate.bind();
 withMessage.args = {
-  componentId: 'with-message',
+  componentId: 'radio-with-message',
   label: 'Label text',
   helperMessage: 'This is short message text',
 };
 
 export const Invalid = BaseTemplate.bind();
 Invalid.args = {
-  componentId: 'invalid',
+  componentId: 'radio-invalid',
   errorMessage: 'This is a short error message',
   label: 'Label text',
   invalid: true,
 };
+
+export const WithBorder = BaseTemplate.bind();
+WithBorder.args = {
+  componentId: 'radio-with-border',
+  label: 'Label text',
+  hasBorder: true,
+  helperMessage: 'This radio has a border for better visual separation',
+};
+
+const ImageTemplate = (args) =>
+  html` <pds-radio
+    component-id=${args.componentId}
+    label=${args.label}
+    ?checked=${args.checked}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    ?has-border=${args.hasBorder}
+    helper-message=${args.helperMessage}
+    ?hide-label=${args.hideLabel}
+    name=${args.name}
+    ?required=${args.required}
+    value=${args.value}
+    ?invalid=${args.invalid}
+  >
+    <pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="circle" padding="sm">
+      <pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
+    </pds-box>
+  </pds-radio>`;
+
+export const WithImage = ImageTemplate.bind();
+WithImage.args = {
+  componentId: 'radio-with-image',
+  label: 'Option with image',
+  helperMessage: 'This radio includes an image using the image slot',
+};
+
+export const Pill = BaseTemplate.bind();
+Pill.args = {
+  componentId: 'radio-pill',
+  label: 'Label text',
+  variant: 'pill',
+};

package/dist/collection/components/pds-radio-group/pds-radio-group.css

@@ -0,0 +1,45 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pine-dimension-sm);
+}
+
+:host(.is-invalid) .pds-radio-group__message--error {
+  color: var(--pine-color-text-message-danger);
+}
+
+.pds-radio-group__label {
+  color: var(--pine-color-text-label);
+  font: var(--pine-typography-heading-6);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+.pds-radio-group__radios {
+  display: flex;
+  gap: var(--pds-radio-group-gap, var(--pine-dimension-xs));
+}
+
+.pds-radio-group__radios--row {
+  align-items: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pds-radio-group__radios--column {
+  flex-direction: column;
+}
+
+.pds-radio-group__message {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body);
+  width: 100%;
+}
+
+.pds-radio-group__message--error {
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-radio-group__message--error pds-icon {
+  margin-block-start: var(--pine-dimension-050);
+}