@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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.css

@@ -1,7 +1,6 @@
 :host {
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --row-gap-y: calc(var(--pine-spacing-250) / 2);
-  --row-gap-x: 10px;
+  --row-gap-y: var(--pine-dimension-125);
+  --row-gap-x: var(--pine-dimension-125);
   display: block;
   margin-block-end: calc(var(--row-gap-y) * -1);
   margin-block-start: calc(var(--row-gap-y) * -1);
@@ -18,11 +17,13 @@
   margin-inline-end: calc(var(--row-gap-x) * -1);
   margin-inline-start: calc(var(--row-gap-x) * -1);
 }
-.pds-row > * {
-  padding-block-end: calc(var(--row-gap-y));
-  padding-block-start: calc(var(--row-gap-y));
-  padding-inline-end: calc(var(--row-gap-x));
-  padding-inline-start: calc(var(--row-gap-x));
+@layer layout {
+  .pds-row > * {
+    padding-block-end: calc(var(--row-gap-y));
+    padding-block-start: calc(var(--row-gap-y));
+    padding-inline-end: calc(var(--row-gap-x));
+    padding-inline-start: calc(var(--row-gap-x));
+  }
 }
 
 .pds-row--no-wrap {
@@ -30,7 +31,7 @@
 }
 
 .pds-row--border {
-  border: var(--border-default);
+  border: var(--pine-border);
 }
 
 .pds-justify-content-start {

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

@@ -1,6 +1,14 @@
 import { h, Host } from "@stencil/core";
 export class PdsRow {
     constructor() {
+        /**
+         * If `true`, the row will have a border.
+         */
+        this.border = false;
+        /**
+         * If `true`, the row items will not wrap to the next line if horizontal space is not available.
+         */
+        this.noWrap = false;
         this.colGapMap = {
             none: '0',
             xxs: '.25rem',
@@ -10,14 +18,25 @@ export class PdsRow {
             lg: '2.25rem',
             xl: '3rem',
             xxl: '4rem',
+            '025': 'var(--pine-dimension-025)',
+            '050': 'var(--pine-dimension-050)',
+            '100': 'var(--pine-dimension-100)',
+            '125': 'var(--pine-dimension-125)',
+            '150': 'var(--pine-dimension-150)',
+            '200': 'var(--pine-dimension-200)',
+            '250': 'var(--pine-dimension-250)',
+            '300': 'var(--pine-dimension-300)',
+            '350': 'var(--pine-dimension-350)',
+            '400': 'var(--pine-dimension-400)',
+            '450': 'var(--pine-dimension-450)',
+            '500': 'var(--pine-dimension-500)',
+            '550': 'var(--pine-dimension-550)',
+            '600': 'var(--pine-dimension-600)',
+            '650': 'var(--pine-dimension-650)',
+            '700': 'var(--pine-dimension-700)',
+            '750': 'var(--pine-dimension-750)',
+            '800': 'var(--pine-dimension-800)'
         };
-        this.alignItems = undefined;
-        this.border = false;
-        this.colGap = undefined;
-        this.componentId = undefined;
-        this.justifyContent = undefined;
-        this.minHeight = undefined;
-        this.noWrap = false;
     }
     render() {
         const rowClasses = `
@@ -26,13 +45,17 @@ export class PdsRow {
     ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.noWrap ? 'pds-row--no-wrap' : ''}
   `;
-        const rowInlineStyles = Object.assign(Object.assign({}, (this.colGap && {
+        const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
             '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
             '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        })), (this.colGapBlock && {
+            '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
+        })), (this.colGapInline && {
+            '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '13417071d1d3411e0bfe0de638c017ee96b1002f', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {
@@ -64,8 +87,10 @@ export class PdsRow {
                         }],
                     "text": "Defines the vertical alignment of the row items."
                 },
-                "attribute": "align-items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-items"
             },
             "border": {
                 "type": "boolean",
@@ -81,21 +106,24 @@ export class PdsRow {
                     "tags": [],
                     "text": "If `true`, the row will have a border."
                 },
-                "attribute": "border",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "border",
                 "defaultValue": "false"
             },
             "colGap": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType | null",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
                         }
                     }
                 },
@@ -105,8 +133,62 @@ export class PdsRow {
                     "tags": [],
                     "text": "Defines the spacing between the row items."
                 },
-                "attribute": "col-gap",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-gap"
+            },
+            "colGapBlock": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the spacing between the row items vertically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-gap-block"
+            },
+            "colGapInline": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {
+                        "BoxSpacingType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::BoxSpacingType",
+                            "referenceLocation": "BoxSpacingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the spacing between the row items horizontally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-gap-inline"
             },
             "componentId": {
                 "type": "string",
@@ -122,8 +204,10 @@ export class PdsRow {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "justifyContent": {
                 "type": "string",
@@ -142,8 +226,10 @@ export class PdsRow {
                         }],
                     "text": "Defines the horizontal alignment of the row items."
                 },
-                "attribute": "justify-content",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify-content"
             },
             "minHeight": {
                 "type": "string",
@@ -159,8 +245,10 @@ export class PdsRow {
                     "tags": [],
                     "text": "The minimum height of the row. Used in conjunction with alignment props"
                 },
-                "attribute": "min-height",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height"
             },
             "noWrap": {
                 "type": "boolean",
@@ -176,11 +264,12 @@ export class PdsRow {
                     "tags": [],
                     "text": "If `true`, the row items will not wrap to the next line if horizontal space is not available."
                 },
-                "attribute": "no-wrap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-wrap",
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=pds-row.js.map

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

@@ -1,42 +1,44 @@
 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',
 };
 
 const BaseTemplate = (args) => html`
 <pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
+  align-items="${args.alignItems}"
+  ?border=${args.border}
+  component-id="${args.componentId}"
   col-gap="${args.colGap}"
   justify-content="${args.justifyContent}"
   min-height="${args.minHeight}"
   no-wrap="${args.noWrap}"
 >
-  <pds-box border>Item 1</pds-box>
-  <pds-box border direction="column">
-    <p>Content 1</p>
-    <p>Content 2</p>
+  <pds-box>
+    <pds-box border>Item 1</pds-box>
+  </pds-box>
+  <pds-box>
+    <pds-box border direction="column">
+      <p>Content 1</p>
+      <p>Content 2</p>
+    </pds-box>
   </pds-box>
 </pds-row>
 `;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  border: "true",
+  border: true,
   componentId: 'opt0',
   colGap: '8px',
 };
 
 const GapTemplate = (args) => html`
 <pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
+  align-items="${args.alignItems}"
+  ?border=${args.border}
+  component-id="${args.componentId}"
   col-gap="${args.colGap}"
   justify-content="${args.justifyContent}"
   min-height="${args.minHeight}"
@@ -67,7 +69,7 @@ const GapTemplate = (args) => html`
 
 export const Gap = GapTemplate.bind();
 Gap.args = {
-  border: "false",
+  border: false,
   componentId: 'opt0',
   colGap: 'sm',
 };

package/dist/collection/components/pds-select/pds-select.css

@@ -0,0 +1,168 @@
+:host {
+  --pds-select-background: var(--pine-color-background-container);
+  --pds-select-border: var(--pine-border);
+  --pds-select-border-radius: var(--pine-dimension-125);
+  --pds-select-border-radius-start-end: var(--pine-dimension-125);
+  --pds-select-border-radius-start-start: var(--pine-dimension-125);
+  --pds-select-border-radius-end-end: var(--pine-dimension-125);
+  --pds-select-border-radius-end-start: var(--pine-dimension-125);
+  --pds-select-min-height: 36px;
+  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);
+}
+:host .hidden,
+:host :host([hidden]) {
+  display: none;
+}
+
+.pds-select {
+  color: var(--pine-color-text);
+  display: grid;
+  flex-direction: column;
+  grid-template-areas: "label label" "field field" "message message";
+  grid-template-columns: 1fr minmax(2rem, min-content);
+  grid-template-rows: min-content min-content min-content;
+  position: relative;
+  width: 100%;
+}
+
+.pds-select__label-wrapper {
+  align-items: center;
+  display: flex;
+  grid-area: label;
+  justify-content: space-between;
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-select__action {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin-inline-start: var(--pine-dimension-xs);
+}
+
+label {
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-select__label-wrapper label {
+  margin-block-end: 0;
+}
+
+select {
+  appearance: none;
+  background-color: var(--pds-select-background);
+  border: var(--pds-select-border);
+  border-end-end-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));
+  border-end-start-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));
+  border-start-end-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));
+  border-start-start-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));
+  color: var(--pine-color-text);
+  font: var(--pine-typography-body);
+  grid-area: field;
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pds-select-min-height);
+  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);
+  padding-inline-end: var(--pine-dimension-450);
+  position: relative;
+}
+select:hover {
+  border-color: var(--pine-color-border-hover);
+  cursor: pointer;
+}
+select:focus-visible {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+select:disabled {
+  background-color: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+select:has(~ .pds-select__message .pds-select__error-message) {
+  background-color: var(--pine-select-color-background-danger);
+  border-color: var(--pine-color-border-danger);
+}
+:host-context([data-theme=dark]) select:has(~ .pds-select__message .pds-select__error-message) {
+  background-color: var(--pine-color-red-950);
+}
+select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+
+:host(.is-disabled) .pds-select__select-icon {
+  color: var(--pine-color-text-disabled);
+}
+
+:host(.is-invalid) select {
+  background-color: var(--pine-select-color-background-danger);
+  border-color: var(--pine-color-border-danger);
+}
+:host-context([data-theme=dark]) :host(.is-invalid) select {
+  background-color: var(--pine-color-red-950);
+}
+:host(.is-invalid) select:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+
+:host([highlight]:not(.is-disabled):not(.is-invalid)) select {
+  background-color: var(--pine-color-accent-disabled);
+  border-color: var(--pine-color-accent);
+  color: var(--pine-color-text-accent);
+}
+:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled) {
+  border-color: var(--pine-color-accent-hover);
+}
+:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible {
+  outline-color: var(--pine-color-focus-ring);
+}
+:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon {
+  color: var(--pine-color-text-accent);
+}
+
+.pds-select__error-message,
+.pds-select__helper-message {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-end: 0;
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-select__error-message {
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-select__error-message pds-icon {
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.pds-select__message {
+  grid-area: message;
+}
+
+.pds-select__select-icon {
+  align-items: center;
+  display: flex;
+  grid-column: -1/-2;
+  grid-row: 2/3;
+  height: var(--pds-select-min-height);
+  pointer-events: none;
+  position: relative;
+  z-index: calc(var(--pine-z-index-raised) - 1);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}