@pine-ds/core 3.11.0 → 3.12.0

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

@@ -0,0 +1,431 @@
+import { Host, h } from "@stencil/core";
+import { messageId } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+/**
+ * @slot (default) - Child pds-radio components
+ */
+export class PdsRadioGroup {
+    constructor() {
+        /**
+         * Layout direction for the radio group.
+         * @defaultValue column
+         */
+        this.direction = 'column';
+        /**
+         * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).
+         * @defaultValue xs
+         */
+        this.gap = 'xs';
+        /**
+         * Determines whether or not the radio group is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether or not the radio group is invalid.
+         * @defaultValue false
+         */
+        this.invalid = false;
+        /**
+         * Determines whether or not the radio group is required.
+         * @defaultValue false
+         */
+        this.required = false;
+    }
+    handlePropsChange() {
+        this.updateChildRadios();
+    }
+    handleRadioChange(event) {
+        const target = event.target;
+        // Only handle events from radio inputs
+        if (target.type !== 'radio') {
+            return;
+        }
+        // Only emit if the radio is being checked (not unchecked)
+        if (target.checked) {
+            const radioElement = target.closest('pds-radio');
+            if (radioElement) {
+                this.pdsRadioGroupChange.emit({
+                    checked: true,
+                    value: radioElement.value,
+                    componentId: radioElement.componentId,
+                });
+            }
+        }
+    }
+    updateChildRadios() {
+        const radios = this.el.querySelectorAll('pds-radio');
+        radios.forEach((radio) => {
+            if (this.name) {
+                radio.setAttribute('name', this.name);
+            }
+            else {
+                radio.removeAttribute('name');
+            }
+            if (this.disabled) {
+                radio.setAttribute('disabled', 'true');
+            }
+            else {
+                radio.removeAttribute('disabled');
+            }
+            if (this.invalid) {
+                radio.setAttribute('invalid', 'true');
+            }
+            else {
+                radio.removeAttribute('invalid');
+            }
+            if (this.required) {
+                radio.setAttribute('required', 'true');
+            }
+            else {
+                radio.removeAttribute('required');
+            }
+        });
+    }
+    componentWillLoad() {
+        // Generate stable group ID once during initialization
+        // This ensures DOM stability and accessibility relationships remain consistent across re-renders
+        if (this.componentId) {
+            this._groupId = this.componentId;
+        }
+        else {
+            // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available
+            const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID
+                ? crypto.randomUUID()
+                : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+            this._groupId = `radio-group-${uniqueId}`;
+        }
+    }
+    componentDidLoad() {
+        if (!this.name) {
+            console.warn('pds-radio-group: name prop is required for proper radio group functionality');
+        }
+        this.updateChildRadios();
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        // The host always uses flex-direction: column, so the label stays above.
+        // The direction prop now only affects the .pds-radio-group__radios container.
+        // No class needed on host for direction.
+        return classNames.join(' ');
+    }
+    getGapValue() {
+        // Map t-shirt sizes to dimension tokens
+        const gapMap = {
+            none: '0',
+            xxs: 'var(--pine-dimension-xxs)',
+            xs: 'var(--pine-dimension-xs)',
+            sm: 'var(--pine-dimension-sm)',
+            md: 'var(--pine-dimension-md)',
+            lg: 'var(--pine-dimension-lg)',
+            xl: 'var(--pine-dimension-xl)',
+            xxl: 'var(--pine-dimension-xxl)',
+        };
+        // If it's a t-shirt size, use the mapped value
+        if (gapMap[this.gap]) {
+            return gapMap[this.gap];
+        }
+        // Otherwise, assume it's a dimension token like "100", "200", etc.
+        return `var(--pine-dimension-${this.gap})`;
+    }
+    getAriaDescribedBy() {
+        const messageIds = [];
+        if (this.errorMessage) {
+            messageIds.push(messageId(this._groupId, 'error'));
+        }
+        if (this.helperMessage) {
+            messageIds.push(messageId(this._groupId, 'helper'));
+        }
+        return messageIds.length > 0 ? messageIds.join(' ') : undefined;
+    }
+    render() {
+        const gapValue = this.getGapValue();
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h(Host, { key: '3354fc555d3158c26d8bc8d63f372bc98bec959b', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+                '--pds-radio-group-gap': gapValue,
+            } }, this.groupLabel && (h("div", { key: '64961e1a1857bb1c31ed97f20f4a1b04731ea3cf', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '2525254fbbaf39fd0c59a830e5a3115ddce0326b', class: {
+                'pds-radio-group__radios': true,
+                'pds-radio-group__radios--row': this.direction === 'row',
+                'pds-radio-group__radios--column': this.direction === 'column',
+            } }, h("slot", { key: '484340d3d920532b32a821322dee3b391429cfae', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '41a0d1105d5f23296382f228d7a2c8b31b3a863a', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '31e67f67b1525426c449abe8daaf8d1af8957b14', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f5ac7ac61e9a5b2fd2a14ee334b3417d9fbd52ca', icon: danger, size: "small" }), this.errorMessage))));
+    }
+    static get is() { return "pds-radio-group"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'row' | 'column'",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "column"
+                        }],
+                    "text": "Layout direction for the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'column'"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays error message text describing an invalid state for the entire group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays helper message text below the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "xs"
+                        }],
+                    "text": "Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'xs'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "groupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for group label/heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for radio `name` attribute. Applied to all child radios.\nRequired for proper radio group behavior (mutual exclusivity and form submission)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsRadioGroupChange",
+                "name": "pdsRadioGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a radio in the group is selected, providing the selected value and component ID."
+                },
+                "complexType": {
+                    "original": "RadioGroupChangeEventDetail",
+                    "resolved": "RadioGroupChangeEventDetail",
+                    "references": {
+                        "RadioGroupChangeEventDetail": {
+                            "location": "import",
+                            "path": "./radio-group-interface",
+                            "id": "src/components/pds-radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "invalid",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "required",
+                "methodName": "handlePropsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "change",
+                "method": "handleRadioChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pds-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-radio-group.js","sourceRoot":"","sources":["../../../../src/components/pds-radio-group/pds-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n/**\n * @slot (default) - Child pds-radio components\n */\n@Component({\n  tag: 'pds-radio-group',\n  styleUrls: ['pds-radio-group.scss'],\n  scoped: true,\n})\nexport class PdsRadioGroup {\n  @Element() el: HTMLPdsRadioGroupElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Stable group ID generated once during component initialization.\n   * Used to maintain DOM stability and accessibility relationships across re-renders.\n   */\n  private _groupId: string;\n\n  /**\n   * Layout direction for the radio group.\n   * @defaultValue column\n   */\n  @Prop() direction: 'row' | 'column' = 'column';\n\n  /**\n   * Displays error message text describing an invalid state for the entire group.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below the radio group.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).\n   * @defaultValue xs\n   */\n  @Prop() gap: string = 'xs';\n\n  /**\n   * Determines whether or not the radio group is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Determines whether or not the radio group is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\n\n  /**\n   * String used for group label/heading.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * String used for radio `name` attribute. Applied to all child radios.\n   * Required for proper radio group behavior (mutual exclusivity and form submission).\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio group is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Emits when a radio in the group is selected, providing the selected value and component ID.\n   */\n  @Event() pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('invalid')\n  @Watch('required')\n  handlePropsChange() {\n    this.updateChildRadios();\n  }\n\n  @Listen('change')\n  handleRadioChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    // Only handle events from radio inputs\n    if (target.type !== 'radio') {\n      return;\n    }\n\n    // Only emit if the radio is being checked (not unchecked)\n    if (target.checked) {\n      const radioElement = target.closest('pds-radio') as HTMLPdsRadioElement;\n      if (radioElement) {\n        this.pdsRadioGroupChange.emit({\n          checked: true,\n          value: radioElement.value,\n          componentId: radioElement.componentId,\n        });\n      }\n    }\n  }\n\n  private updateChildRadios() {\n    const radios = this.el.querySelectorAll('pds-radio');\n    radios.forEach((radio) => {\n      if (this.name) {\n        radio.setAttribute('name', this.name);\n      } else {\n        radio.removeAttribute('name');\n      }\n      if (this.disabled) {\n        radio.setAttribute('disabled', 'true');\n      } else {\n        radio.removeAttribute('disabled');\n      }\n      if (this.invalid) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n      if (this.required) {\n        radio.setAttribute('required', 'true');\n      } else {\n        radio.removeAttribute('required');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    // Generate stable group ID once during initialization\n    // This ensures DOM stability and accessibility relationships remain consistent across re-renders\n    if (this.componentId) {\n      this._groupId = this.componentId;\n    } else {\n      // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available\n      const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID()\n        : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n      this._groupId = `radio-group-${uniqueId}`;\n    }\n  }\n\n  componentDidLoad() {\n    if (!this.name) {\n      console.warn('pds-radio-group: name prop is required for proper radio group functionality');\n    }\n    this.updateChildRadios();\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    // The host always uses flex-direction: column, so the label stays above.\n    // The direction prop now only affects the .pds-radio-group__radios container.\n    // No class needed on host for direction.\n\n    return classNames.join(' ');\n  }\n\n  private getGapValue(): string {\n    // Map t-shirt sizes to dimension tokens\n    const gapMap: Record<string, string> = {\n      none: '0',\n      xxs: 'var(--pine-dimension-xxs)',\n      xs: 'var(--pine-dimension-xs)',\n      sm: 'var(--pine-dimension-sm)',\n      md: 'var(--pine-dimension-md)',\n      lg: 'var(--pine-dimension-lg)',\n      xl: 'var(--pine-dimension-xl)',\n      xxl: 'var(--pine-dimension-xxl)',\n    };\n\n    // If it's a t-shirt size, use the mapped value\n    if (gapMap[this.gap]) {\n      return gapMap[this.gap];\n    }\n\n    // Otherwise, assume it's a dimension token like \"100\", \"200\", etc.\n    return `var(--pine-dimension-${this.gap})`;\n  }\n\n  private getAriaDescribedBy(): string | undefined {\n    const messageIds: string[] = [];\n\n    if (this.errorMessage) {\n      messageIds.push(messageId(this._groupId, 'error'));\n    }\n\n    if (this.helperMessage) {\n      messageIds.push(messageId(this._groupId, 'helper'));\n    }\n\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  render() {\n    const gapValue = this.getGapValue();\n    const ariaDescribedBy = this.getAriaDescribedBy();\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this._groupId}\n        role=\"group\"\n        aria-describedby={ariaDescribedBy}\n        style={{\n          '--pds-radio-group-gap': gapValue,\n        }}\n      >\n        {this.groupLabel && (\n          <div class=\"pds-radio-group__label\">\n            {this.groupLabel}\n          </div>\n        )}\n        <div class={{\n          'pds-radio-group__radios': true,\n          'pds-radio-group__radios--row': this.direction === 'row',\n          'pds-radio-group__radios--column': this.direction === 'column',\n        }}>\n          <slot onSlotchange={() => this.updateChildRadios()} />\n        </div>\n        {this.helperMessage && (\n          <div\n            class=\"pds-radio-group__message\"\n            id={messageId(this._groupId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        )}\n        {this.errorMessage && (\n          <div\n            class=\"pds-radio-group__message pds-radio-group__message--error\"\n            id={messageId(this._groupId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio-group-interface.js.map

package/dist/collection/components/pds-radio-group/radio-group-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-radio-group/radio-group-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface RadioGroupChangeEventDetail {\n  checked: boolean;\n  value?: string;\n  componentId?: string;\n}\n\n"]}

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

@@ -0,0 +1,134 @@
+import { html } from 'lit';
+
+export default {
+  args: {
+    direction: 'column',
+    disabled: false,
+    invalid: false,
+    required: false,
+  },
+  component: 'pds-radio-group',
+  parameters: {},
+  title: 'components/Radio Group',
+}
+
+const BaseTemplate = (args) =>
+  html` <pds-radio-group
+    component-id=${args.componentId}
+    direction=${args.direction}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    gap=${args.gap}
+    helper-message=${args.helperMessage}
+    ?invalid=${args.invalid}
+    group-label=${args.groupLabel}
+    name=${args.name}
+    ?required=${args.required}
+  >
+    <pds-radio component-id="radio1" label="Option 1" value="1"></pds-radio>
+    <pds-radio component-id="radio2" label="Option 2" value="2"></pds-radio>
+    <pds-radio component-id="radio3" label="Option 3" value="3"></pds-radio>
+  </pds-radio-group>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default-group',
+  name: 'default-group',
+};
+
+export const Disabled = BaseTemplate.bind();
+Disabled.args = {
+  componentId: 'disabled-group',
+  disabled: true,
+  groupLabel: 'Comments',
+  name: 'disabled-group',
+};
+
+export const withMessage = BaseTemplate.bind();
+withMessage.args = {
+  componentId: 'helper-group',
+  helperMessage: 'Select one option from the list',
+  groupLabel: 'Comments',
+  name: 'helper-group',
+};
+
+export const Invalid = BaseTemplate.bind();
+Invalid.args = {
+  componentId: 'error-group',
+  errorMessage: 'Please select an option',
+  invalid: true,
+  groupLabel: 'Comments',
+  name: 'error-group',
+};
+
+const BorderTemplate = (args) =>
+  html` <pds-radio-group
+    component-id=${args.componentId}
+    direction=${args.direction}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    gap=${args.gap}
+    helper-message=${args.helperMessage}
+    ?invalid=${args.invalid}
+    group-label=${args.groupLabel}
+    name=${args.name}
+    ?required=${args.required}
+  >
+    <pds-radio component-id="radio1" label="Option 1" value="1" ?has-border=${true}></pds-radio>
+    <pds-radio component-id="radio2" label="Option 2" value="2" ?has-border=${true}></pds-radio>
+    <pds-radio component-id="radio3" label="Option 3" value="3" ?has-border=${true}></pds-radio>
+  </pds-radio-group>`;
+
+export const WithBorder = BorderTemplate.bind();
+WithBorder.args = {
+  componentId: 'bordered-group',
+  direction: 'row',
+  groupLabel: 'Comments',
+  name: 'bordered-group',
+};
+
+const ImageTemplate = (args) =>
+  html` <pds-radio-group
+    component-id=${args.componentId}
+    direction=${args.direction}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    gap=${args.gap}
+    helper-message=${args.helperMessage}
+    ?invalid=${args.invalid}
+    group-label=${args.groupLabel}
+    name=${args.name}
+    ?required=${args.required}
+  >
+    <pds-radio component-id="radio1" label="John Doe" value="john" helper-message="Senior Developer">
+      <pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
+        <pds-icon icon="danger" size="medium" color="var(--pine-color-white)"></pds-icon>
+      </pds-box>
+    </pds-radio>
+    <pds-radio component-id="radio2" label="Jane Smith" value="jane" helper-message="Product Manager">
+      <pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
+        <pds-icon icon="danger" size="medium" color="var(--pine-color-white)"></pds-icon>
+      </pds-box>
+    </pds-radio>
+    <pds-radio component-id="radio3" label="Mike Johnson" value="mike" helper-message="UX Designer">
+      <pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
+        <pds-icon icon="danger" size="medium" color="var(--pine-color-white)"></pds-icon>
+      </pds-box>
+    </pds-radio>
+  </pds-radio-group>`;
+
+export const WithImage = ImageTemplate.bind();
+WithImage.args = {
+  componentId: 'image-group',
+  direction: 'row',
+  groupLabel: 'Select Team Member',
+  name: 'image-group',
+};
+
+export const Horizontal = BorderTemplate.bind();
+Horizontal.args = {
+  componentId: 'horizontal-group',
+  direction: 'row',
+  name: 'horizontal-group',
+};
+

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

@@ -55,7 +55,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'a4df5b098252089e69c7da5f329df4223cc57d81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: 'b0bcc4fc7f67525fb9bae45d31b0ea3df2bda47f', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-row/pds-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-row.js","sourceRoot":"","sources":["../../../src/components/pds-row/pds-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-row',\n  styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n  /**\n   * Defines the vertical alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the row will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   * Defines the spacing between the row items.\n   */\n  @Prop() colGap?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items vertically.\n   */\n  @Prop() colGapBlock?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items horizontally.\n   */\n  @Prop() colGapInline?: BoxSpacingType | null;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Defines the horizontal alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n   */\n  @Prop() noWrap? = false;\n\n  private colGapMap: { [key in BoxSpacingType]: string } = {\n    none: '0',\n    xxs: '.25rem',\n    xs: '.5rem',\n    sm: '1rem',\n    md: '1.5rem',\n    lg: '2.25rem',\n    xl: '3rem',\n    xxl: '4rem',\n    '025': 'var(--pine-dimension-025)',\n    '050': 'var(--pine-dimension-050)',\n    '100': 'var(--pine-dimension-100)',\n    '125': 'var(--pine-dimension-125)',\n    '150': 'var(--pine-dimension-150)',\n    '200': 'var(--pine-dimension-200)',\n    '250': 'var(--pine-dimension-250)',\n    '300': 'var(--pine-dimension-300)',\n    '350': 'var(--pine-dimension-350)',\n    '400': 'var(--pine-dimension-400)',\n    '450': 'var(--pine-dimension-450)',\n    '500': 'var(--pine-dimension-500)',\n    '550': 'var(--pine-dimension-550)',\n    '600': 'var(--pine-dimension-600)',\n    '650': 'var(--pine-dimension-650)',\n    '700': 'var(--pine-dimension-700)',\n    '750': 'var(--pine-dimension-750)',\n    '800': 'var(--pine-dimension-800)'\n  };\n\n  render() {\n    const rowClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.border ? 'pds-row--border' : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.noWrap ? 'pds-row--no-wrap' : ''}\n  `;\n\n    const rowInlineStyles = {\n      ...(this.colGap && {\n        '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n        '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n      }),\n      ...(this.colGapBlock && {\n        '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n      }),\n      ...(this.colGapInline && {\n        '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n      }),\n      ...(this.minHeight && {\n        'min-height': this.minHeight,\n      }),\n    };\n\n    return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n  }\n}\n"]}
+{"version":3,"file":"pds-row.js","sourceRoot":"","sources":["../../../../src/components/pds-row/pds-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-row',\n  styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n  /**\n   * Defines the vertical alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the row will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   * Defines the spacing between the row items.\n   */\n  @Prop() colGap?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items vertically.\n   */\n  @Prop() colGapBlock?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items horizontally.\n   */\n  @Prop() colGapInline?: BoxSpacingType | null;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Defines the horizontal alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n   */\n  @Prop() noWrap? = false;\n\n  private colGapMap: { [key in BoxSpacingType]: string } = {\n    none: '0',\n    xxs: '.25rem',\n    xs: '.5rem',\n    sm: '1rem',\n    md: '1.5rem',\n    lg: '2.25rem',\n    xl: '3rem',\n    xxl: '4rem',\n    '025': 'var(--pine-dimension-025)',\n    '050': 'var(--pine-dimension-050)',\n    '100': 'var(--pine-dimension-100)',\n    '125': 'var(--pine-dimension-125)',\n    '150': 'var(--pine-dimension-150)',\n    '200': 'var(--pine-dimension-200)',\n    '250': 'var(--pine-dimension-250)',\n    '300': 'var(--pine-dimension-300)',\n    '350': 'var(--pine-dimension-350)',\n    '400': 'var(--pine-dimension-400)',\n    '450': 'var(--pine-dimension-450)',\n    '500': 'var(--pine-dimension-500)',\n    '550': 'var(--pine-dimension-550)',\n    '600': 'var(--pine-dimension-600)',\n    '650': 'var(--pine-dimension-650)',\n    '700': 'var(--pine-dimension-700)',\n    '750': 'var(--pine-dimension-750)',\n    '800': 'var(--pine-dimension-800)'\n  };\n\n  render() {\n    const rowClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.border ? 'pds-row--border' : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.noWrap ? 'pds-row--no-wrap' : ''}\n  `;\n\n    const rowInlineStyles = {\n      ...(this.colGap && {\n        '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n        '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n      }),\n      ...(this.colGapBlock && {\n        '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n      }),\n      ...(this.colGapInline && {\n        '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n      }),\n      ...(this.minHeight && {\n        'min-height': this.minHeight,\n      }),\n    };\n\n    return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n  }\n}\n"]}

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

@@ -1,8 +1,6 @@
 import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
-  argTypes: extractArgTypes('pds-row'),
   component: 'pds-row',
   title: 'components/Layout/Row',
 };