npm - @pine-ds/core - Versions diffs - 3.11.0 → 3.12.0 - Mend

@pine-ds/core 3.11.0 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (922) hide show

package/dist/collection/components/pds-property/stories/pds-property.stories.js CHANGED Viewed

@@ -1,11 +1,7 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
 export default {
-  argTypes: extractArgTypes('pds-property'),
   component: 'pds-property',
-  decorators: [withActions],
   title: 'components/Property',
 };

package/dist/collection/components/pds-radio/pds-radio.css CHANGED Viewed

@@ -8,20 +8,6 @@
   position: relative;
 }
-:host(.is-invalid) input {
-  border-color: var(--pine-color-border-danger);
-}
-:host(.is-invalid) input:checked {
-  background: var(--pine-color-border-danger);
-}
-:host(.is-invalid) input:checked:hover {
-  background: var(--pine-color-border-danger-hover);
-  border-color: var(--pine-color-border-danger-hover);
-}
-:host(.is-invalid) input:focus-visible {
-  outline-color: var(--pine-color-focus-ring-danger);
-}
-:host(.is-invalid) label,
 :host(.is-invalid) .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
 }
@@ -36,6 +22,14 @@
   flex-direction: column;
   padding: var(--pine-dimension-md);
 }
+@media (max-width: 767px) {
+  :host(.has-border) {
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+}
 :host(.has-border):hover {
   border: var(--pine-border-hover);
 }
@@ -56,6 +50,18 @@
   width: 100%;
   z-index: 1;
 }
+:host(.has-border):has(input:disabled) {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  cursor: not-allowed;
+}
+:host(.has-border):has(input:disabled) label {
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host(.has-border).is-invalid .pds-radio__message--error {
+  color: var(--pine-color-text-message-danger);
+}
 input {
   appearance: none;
@@ -95,7 +101,7 @@ input:checked:hover {
   border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  background: var(--pine-color-background-container);
+  background: var(--pine-color-white);
   border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;
@@ -118,12 +124,6 @@ input:disabled:checked {
 input:disabled:checked::after {
   border-color: var(--pine-color-border-disabled);
 }
-input:disabled + label {
-  cursor: not-allowed;
-}
-input:disabled ~ .pds-radio__message {
-  color: var(--pine-color-text-message-disabled);
-}
 input:focus-visible {
   outline: var(--pine-outline-focus);
 }
@@ -133,6 +133,15 @@ label {
   gap: var(--pine-dimension-xs);
 }
+label:has(input:disabled) {
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host:has(input:disabled) .pds-radio__message {
+  color: var(--pine-color-text-label-disabled);
+}
 .visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -148,18 +157,17 @@ label {
 .pds-radio__message {
   color: var(--pine-color-text-message);
+  flex-basis: 100%;
   font: var(--pine-typography-body);
   margin-inline-start: var(--pine-dimension-md);
   width: 100%;
 }
 .pds-radio__message--error {
+  align-items: center;
   display: flex;
   gap: var(--pine-dimension-2xs);
 }
-.pds-radio__message--error pds-icon {
-  margin-block-start: var(--pine-dimension-025);
-}
 :host(.has-image) {
   align-items: center;
@@ -170,6 +178,14 @@ label {
   flex: 1;
   padding: var(--pine-dimension-md);
 }
+@media (max-width: 767px) {
+  :host(.has-image) {
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+}
 :host(.has-image):hover {
   border: var(--pine-border-hover);
 }
@@ -219,43 +235,26 @@ label {
   margin-block-start: 0;
   margin-inline-start: 0;
 }
+:host(.has-image).is-disabled {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  cursor: not-allowed;
+}
 :host(.has-image).is-disabled .pds-radio__image-container {
   border-color: var(--pine-color-border-disabled);
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: 0.5;
 }
 :host(.has-image).is-disabled .pds-radio__image-container:hover {
   border-color: var(--pine-color-border-disabled);
 }
 :host(.has-image).is-disabled label {
+  color: var(--pine-color-text-label-disabled);
   cursor: not-allowed;
 }
-:host(.has-image).is-invalid .pds-radio__image-container {
-  border-color: var(--pine-color-border-danger);
-}
-:host(.has-image).is-invalid .pds-radio__image-container:hover {
-  border-color: var(--pine-color-border-danger-hover);
-}
-:host(.has-image).is-invalid:has(input:checked) {
-  box-shadow: 0 0 0 2px var(--pine-color-border-danger);
-}
-:host(.has-image).is-invalid:has(input:checked) .pds-radio__image-container {
-  border-color: var(--pine-color-border-danger);
-  box-shadow: 0 0 0 2px var(--pine-color-border-danger);
-  /* stylelint-disable-next-line */
-  /* stylelint-disable-next-line */
-}
-:host(.has-image).is-invalid:has(input:checked) .pds-radio__image-container::after {
-  background: var(--pine-color-border-danger);
-}
-:host(.has-image).is-invalid:has(input:checked) .pds-radio__image-container:hover {
-  border-color: var(--pine-color-border-danger-hover);
-  box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);
-}
-:host(.has-image).is-invalid:has(input:checked):hover {
-  box-shadow: 0 0 0 2px var(--pine-color-border-danger-hover);
+:host(.has-image).is-disabled .pds-radio__message {
+  color: var(--pine-color-text-label-disabled);
 }
-:host(.has-image).is-invalid label,
 :host(.has-image).is-invalid .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
 }

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

@@ -40,6 +40,11 @@ export class PdsRadio {
             }
             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);
         };
     }
@@ -75,11 +80,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '5ec06b8b4e017027a3fe20cef0241a612abec196', "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, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: 'f7bc6d0bd0759a833a668499039ba97a10bf18ec', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'c2361c9041baae2cf222314101f390fbf19266fd', "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, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: 'ce704f1c12d7e9a214f2a93499bd065037631586', class: this.hideLabel ? '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: '629e33e9c80a6dc3af11e471d4342b4f992e0084', icon: danger, size: "small" }), this.errorMessage))
+            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: '138adf48418372b3ca28ab4b6998e74f7a2de8b2', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '706822a4f2b85462533dedc7c204679272537c2d', class: this.classNames() }, this.hasImage() && (h("div", { key: 'cc19b9c47bc9b3c38aa322754ff9bf51f6e75d76', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'cf4fe8dbdc464cb0ad39cafb21e67e9e184a2e4f', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '25a216197228fc211ab2fd3ce3ee767e34d90ac0', class: this.classNames() }, this.hasImage() && (h("div", { key: 'b19b9c38cd8ba864328c4d4a3e0402b38b096f44', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '72723bbd792394d1f358acf6a3a6969c6ac4012d', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-radio/pds-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["~~../../../~~src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMmB,UAAK,GAAG,OAAgB,CAAC;QAIzB,cAAS,GAAG,KAAK,CAAC;QAEnC;;;WAGG;QACK,YAAO,GAAG,KAAK,CAAC;QAOxB;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAYzB;;;WAGG;QACK,cAAS,GAAG,KAAK,CAAC;QAExB;;;SAGC;QACO,YAAO,GAAG,KAAK,CAAC;QAiB1B;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAajB,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,6EAA6E;YAC7E,+CAA+C;YAC/C,IAAI,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBACvC,OAAO;YACT,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;KAkGF;IAhGS,YAAY;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1D,OAAO,CAAC,CAAC,SAAS,CAAC;IACrB,CAAC;IAEO,QAAQ;QACd,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACpB,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC/B,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACvC,CAAC;IAED,iBAAiB;QACf,qFAAqF;QACrF,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC;YACnC,aAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,QAAQ;gBAChE,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAC/C;gBACF,6DAAM,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IACjD,IAAI,CAAC,KAAK,CACN,CACD;YACR,IAAI,CAAC,aAAa,IAAI,CACpB,WACE,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,SAAS,EACjC,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,CACP;YACD,IAAI,CAAC,YAAY,IAAI,CACnB,WACE,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,QAAQ,EAChC,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;gBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;gBACtC,IAAI,CAAC,YAAY,CACd,CACP;SACF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC3B,IAAI,CAAC,QAAQ,EAAE,IAAI,CAClB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,iBAAiB;gBAC5D,6DAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,GAAI,CAC7E,CACP;YACA,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CACjB,WAAK,KAAK,EAAC,4BAA4B,IACpC,sBAAsB,EAAE,CACrB,CACP,CAAC,CAAC,CAAC,CACF,sBAAsB,EAAE,CACzB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/*\n @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n /\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n private readonly _type = 'radio' as const;\n\n @Element() el: HTMLPdsRadioElement;\n\n @State() private _hasImage = false;\n\n /\n Determines whether or not the radio is checked.\n * @defaultValue false\n /\n @Prop() checked = false;\n\n /\n A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Determines whether or not the radio is disabled.\n * @defaultValue false\n /\n @Prop() disabled = false;\n\n /\n Displays error message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n Displays helper message text below radio.\n /\n @Prop() helperMessage: string;\n\n /\n Adds a border around the radio component for better visual separation.\n * @defaultValue false\n /\n @Prop() hasBorder = false;\n\n /\n Determines whether or not the radio is invalid.\n * @defaultValue false\n /\n @Prop() invalid = false;\n\n /\n String used for label text next to radio.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() hideLabel: boolean;\n\n /\n String used for radio `name` attribute.\n /\n @Prop() name: string;\n\n /\n Determines whether or not the radio is required.\n * @defaultValue false\n /\n @Prop() required = false;\n\n /\n The value of the radio that is submitted with a form.\n /\n @Prop() value: string;\n\n\n /\n Emits a boolean indicating whether the radio is currently checked or unchecked.\n */\n @Event() pdsRadioChange: EventEmitter<boolean>;\n\n private handleRadioChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n const isChecked = target.checked;\n\n // If this radio is inside a pds-radio-group, don't emit the individual event\n // The group will handle emitting its own event\n if (this.el.closest('pds-radio-group')) {\n return;\n }\n\n this.pdsRadioChange.emit(isChecked);\n }\n\n private hasImageSlot(): boolean {\n const imageSlot = this.el.querySelector('[slot=\"image\"]');\n return !!imageSlot;\n }\n\n private hasImage(): boolean {\n return this._hasImage;\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) {\n classNames.push('is-invalid');\n }\n if (this.disabled) {\n classNames.push('is-disabled');\n }\n if (this.hasBorder) {\n classNames.push('has-border');\n }\n if (this.hasImage()) {\n classNames.push('has-image');\n }\n\n return classNames.join(' ');\n }\n\n componentWillLoad() {\n this._hasImage = this.hasImageSlot();\n }\n\n connectedCallback() {\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n render() {\n const renderLabelAndMessages = () => [\n <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n type=\"radio\"\n id={this.componentId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleRadioChange}\n class={this.hasImage() ? 'visually-hidden' : ''}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>,\n this.helperMessage && (\n <div\n key={`${this.componentId}-helper`}\n class={'pds-radio__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n ),\n this.errorMessage && (\n <div\n key={`${this.componentId}-error`}\n class={`pds-radio__message pds-radio__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n )\n ];\n\n return (\n <Host class={this.classNames()}>\n {this.hasImage() && (\n <div class=\"pds-radio__image-container\" part=\"image-container\">\n <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n </div>\n )}\n {this.hasImage() ? (\n <div class=\"pds-radio__content-wrapper\">\n {renderLabelAndMessages()}\n </div>\n ) : (\n renderLabelAndMessages()\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -1,8 +1,8 @@
 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,
@@ -11,15 +11,9 @@ export default {
     hideLabel: false,
     required: false,
   },
-  argTypes: extractArgTypes('pds-radio'),
   component: 'pds-radio',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsRadioChange'],
-    },
-  },
-  title: 'components/Radio',
+  parameters: {},
+  title: 'components/Radio Group/Radio',
 }
 const BaseTemplate = (args) =>
@@ -33,7 +27,6 @@ const BaseTemplate = (args) =>
     helper-message=${args.helperMessage}
     ?hide-label=${args.hideLabel}
     name=${args.name}
-    ?indeterminate=${args.indeterminate}
     ?required=${args.required}
     value=${args.value}
     ?invalid=${args.invalid}

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

@@ -0,0 +1,43 @@
+: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 {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}