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

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

@@ -0,0 +1,179 @@
+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="circle" 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="circle" 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="circle" 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',
+};
+
+
+const PillTemplate = (args) =>
+  html` <pds-radio-group
+    component-id=${args.componentId}
+    direction=${args.direction}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    ?invalid=${args.invalid}
+    group-label=${args.groupLabel}
+    name=${args.name}
+    ?required=${args.required}
+  >
+    <pds-radio component-id="pill-solo" label="Just me" value="solo" variant="pill" checked></pds-radio>
+    <pds-radio component-id="pill-small" label="2-10 people" value="small" variant="pill"></pds-radio>
+    <pds-radio component-id="pill-medium" label="11-50 people" value="medium" variant="pill"></pds-radio>
+    <pds-radio component-id="pill-large" label="More than 50" value="large" variant="pill"></pds-radio>
+  </pds-radio-group>`;
+
+export const Pill = PillTemplate.bind();
+Pill.args = {
+  componentId: 'pill-group',
+  direction: 'row',
+  groupLabel: 'How big is your team?',
+  name: 'pill-group',
+};
+
+export const PillDisabled = PillTemplate.bind();
+PillDisabled.args = {
+  componentId: 'pill-group-disabled',
+  direction: 'row',
+  disabled: true,
+  groupLabel: 'How big is your team?',
+  name: 'pill-group-disabled',
+};
+
+export const PillInvalid = PillTemplate.bind();
+PillInvalid.args = {
+  componentId: 'pill-group-invalid',
+  direction: 'row',
+  errorMessage: 'Choose a team size to continue',
+  groupLabel: 'How big is your team?',
+  invalid: true,
+  name: 'pill-group-invalid',
+};

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,19 @@
 import { h, Host } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+/**
+ * @lightDom host-only
+ */
 export class PdsRow {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
+        /**
+         * 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,29 +23,51 @@ 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;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
     }
     render() {
         const rowClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
     ${this.border ? 'pds-row--border' : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.noWrap ? 'pds-row--no-wrap' : ''}
   `;
-        const rowInlineStyles = 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] : '',
+        const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
+            '--row-gap-x': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+            '--row-gap-y': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        })), (this.colGapBlock && {
+            '--row-gap-y': this.colGapBlock != null && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
+        })), (this.colGapInline && {
+            '--row-gap-x': this.colGapInline != null && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
+        return h(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {
@@ -64,8 +99,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 +118,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 +145,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 +216,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 +238,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 +257,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 +276,13 @@ 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"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-row.js.map

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

@@ -1,52 +1,55 @@
 import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 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}" 
-  col-gap="${args.colGap}"
-  justify-content="${args.justifyContent}"
-  min-height="${args.minHeight}"
-  no-wrap="${args.noWrap}"
+  align-items="${ifDefined(args.alignItems)}"
+  ?border=${args.border}
+  component-id="${ifDefined(args.componentId)}"
+  col-gap="${ifDefined(args.colGap)}"
+  justify-content="${ifDefined(args.justifyContent)}"
+  min-height="${ifDefined(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',
+  colGap: 'sm',
 };
 
 const GapTemplate = (args) => html`
 <pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
-  col-gap="${args.colGap}"
-  justify-content="${args.justifyContent}"
-  min-height="${args.minHeight}"
+  align-items="${ifDefined(args.alignItems)}"
+  ?border=${args.border}
+  component-id="${ifDefined(args.componentId)}"
+  col-gap="${ifDefined(args.colGap)}"
+  justify-content="${ifDefined(args.justifyContent)}"
+  min-height="${ifDefined(args.minHeight)}"
 >
   <pds-box size="4">
     <pds-box
       border="true"
       border-radius="sm"
       padding="sm"
-      shadow="sm"
+      shadow="100"
     >
       Item 1
     </pds-box>
@@ -56,7 +59,7 @@ const GapTemplate = (args) => html`
       border="true"
       border-radius="sm"
       padding="sm"
-      shadow="sm"
+      shadow="100"
     >
       Item 2
     </pds-box>
@@ -67,7 +70,7 @@ const GapTemplate = (args) => html`
 
 export const Gap = GapTemplate.bind();
 Gap.args = {
-  border: "false",
+  border: false,
   componentId: 'opt0',
   colGap: 'sm',
 };