@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+
+import { customArgsWithIconControl } from '../../../stories/_helpers';
+
+export default {
+  argTypes: customArgsWithIconControl({ component: 'pds-button', property: 'icon' }),
+  component: 'pds-button',
+  title: 'components/Button'
+}
+
+const BaseTemplate = (args) => html`
+  <pds-button
+    component-id=${args.componentId}
+    disabled=${args.disabled}
+    icon=${args.icon}
+    name=${args.name}
+    type=${args.type}
+    value=${args.value}
+    variant=${args.variant}>
+      ${args.slot}
+    </pds-button> `;
+
+export const Accent = BaseTemplate.bind();
+Accent.args = {
+  disabled: false,
+  slot: 'Accent',
+  type: 'button',
+  variant: 'accent',
+};
+
+export const Destructive = BaseTemplate.bind({});
+Destructive.args = {
+  disabled: false,
+  slot: 'Destructive',
+  type: 'button',
+  variant: 'destructive',
+}
+
+export const Disclosure = BaseTemplate.bind({});
+Disclosure.args = {
+  disabled: false,
+  slot: 'Disclosure',
+  type: 'button',
+  variant: 'disclosure'
+}
+
+// We do not want to show Icon control, but icon is hard coded
+Disclosure.parameters = {
+  controls: { exclude: 'icon' }
+}
+
+export const Primary = BaseTemplate.bind({});
+Primary.args = {
+  disabled: false,
+  slot: 'Primary',
+  type: 'button',
+}
+
+export const Secondary = BaseTemplate.bind({});
+Secondary.args = {
+  disabled: false,
+  slot: 'Secondary',
+  variant: 'secondary',
+  type: 'button',
+}

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

@@ -0,0 +1,106 @@
+:host {
+  --background-color-disabled: var(--pine-color-neutral-grey-200);
+  --background-color-hover: var(--pine-color-neutral-grey-100);
+  --border: var(--pine-border-interactive);
+  --border-color-disabled: var(--pine-color-neutral-charcoal-100);
+  --border-color-hover: var(--pine-border-interactive-hover-color);
+  --border-color-icon: var(--pine-color-base-white);
+  --border-radius: var(--pine-border-radius-xs);
+  --color-checked: var(--pine-color-neutral-charcoal-500);
+  --color-disabled: var(--pine-color-neutral-grey-300);
+  --color-focus: var(--pine-color-primary-200);
+  --color-invalid-focus: var(--pine-color-red-200);
+  --color-invalid: var(--pine-color-red-300);
+  --message-color-disabled: var(--pine-color-neutral-grey-500);
+  --message-color: var(--pine-color-neutral-charcoal-200);
+  --input-size: 16px;
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+:host(.is-invalid) input {
+  border-color: var(--color-invalid);
+}
+:host(.is-invalid) input:checked {
+  background: var(--color-invalid);
+}
+:host(.is-invalid) input:focus-visible {
+  box-shadow: 0 0 0 4px var(--color-invalid-focus);
+  outline: none;
+}
+:host(.is-invalid) label,
+:host(.is-invalid) .pds-checkbox__message--error {
+  color: var(--color-invalid);
+}
+
+:host(.is-indeterminate) input:checked::after {
+  border-bottom: 0;
+  transform: rotate(87deg) translate3d(-114%, 25%, 0);
+}
+
+input {
+  appearance: none;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  height: var(--input-size);
+  margin: 0;
+  position: relative;
+  width: var(--input-size);
+}
+input:hover {
+  background: var(--background-color-hover);
+  border-color: var(--border-color-hover);
+}
+input:checked {
+  background: var(--color-checked);
+  border-color: var(--color-checked);
+}
+input:checked::after {
+  border: 1px solid var(--border-color-icon);
+  border-left: 0;
+  border-top: 0;
+  content: "";
+  display: block;
+  height: 7px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: rotate(43deg) translate3d(-110%, -30%, 0);
+  width: 4px;
+}
+input:disabled {
+  background: var(--background-color-disabled);
+  border-color: var(--color-disabled);
+  cursor: not-allowed;
+}
+input:disabled:checked {
+  background: var(--color-disabled);
+  border-color: var(--color-disabled);
+}
+input:disabled:checked::after {
+  border-color: var(--border-color-disabled);
+}
+input:disabled + label {
+  color: var(--border-color-hover);
+  cursor: not-allowed;
+}
+input:disabled ~ .pds-checkbox__message {
+  color: var(--message-color-disabled);
+}
+input:focus-visible {
+  box-shadow: 0 0 0 4px var(--color-focus);
+  outline: none;
+}
+
+label {
+  margin-inline-start: 10px;
+}
+
+.pds-checkbox__message {
+  color: var(--message-color);
+  font-size: 14px;
+  margin-block-start: 6px;
+  margin-inline-start: 26px;
+  width: 100%;
+}

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

@@ -0,0 +1,266 @@
+import { h, Host } from "@stencil/core";
+import { assignDescription, messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsCheckbox {
+    constructor() {
+        this.handleCheckboxChange = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const target = e.target;
+            const isChecked = target.checked;
+            this.pdsCheckboxChange.emit(isChecked);
+        };
+        this.checked = undefined;
+        this.componentId = undefined;
+        this.disabled = undefined;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.indeterminate = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = undefined;
+        this.value = undefined;
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.indeterminate) {
+            classNames.push('is-indeterminate');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { class: this.classNames() }, h("input", { "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+    static get is() { return "pds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is checked."
+                },
+                "attribute": "checked",
+                "reflect": false
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays message text describing an invalid state."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for helper message below checkbox."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
+                },
+                "attribute": "indeterminate",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is invalid."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for label text next to checkbox."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for checkbox `name` attribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It determines whether or not the checkbox is required."
+                },
+                "attribute": "required",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the checkbox that is submitted with a form."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsCheckboxChange",
+                "name": "pdsCheckboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits a boolean indicating whether the checkbox is currently checked or unchecked."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,WAAW;;QA8Dd,yBAAoB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC,CAAA;;;;;;;;;;;;;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAAE;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAAE;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAAE;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,iCACoB,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,UAAU,EACf,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,oBAAoB,GACnC;YACF,EAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,WACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,WACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: 'pds-checkbox.scss',\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop() checked: boolean;\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   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop() indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<boolean>;\n\n  private handleCheckboxChange = (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.pdsCheckboxChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\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.handleCheckboxChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,80 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-checkbox'),
+  args: {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+    invalid: false,
+    required: false,
+  },
+  component: 'pds-checkbox',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsCheckboxChange'],
+    },
+  },
+  title: 'components/Checkbox',
+}
+
+const BaseTemplate = (args) =>
+  html` <pds-checkbox
+    component-id=${args.componentId}
+    checked=${args.checked}
+    disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    indeterminate=${args.indeterminate}
+    invalid=${args.invalid}
+    label=${args.label}
+    name=${args.name}
+    required=${args.required}
+    value=${args.value}
+  />`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default',
+  label: 'Label text',
+};
+
+export const Checked = BaseTemplate.bind();
+Checked.args = {
+  componentId: 'checked',
+  label: 'Label text',
+  checked: true,
+};
+
+export const Disabled = BaseTemplate.bind();
+Disabled.args = {
+  componentId: 'disabled',
+  label: 'Label text',
+  disabled: true,
+};
+
+export const Indeterminate = BaseTemplate.bind();
+Indeterminate.args = {
+  componentId: 'indeterminate',
+  label: 'Label text',
+  indeterminate: true,
+  checked: true,
+};
+
+export const withMessage = BaseTemplate.bind();
+withMessage.args = {
+  componentId: 'with-message',
+  label: 'Label text',
+  helperMessage: "This is short message text",
+};
+
+export const Invalid = BaseTemplate.bind();
+Invalid.args = {
+  componentId: 'invalid',
+  errorMessage: 'This is a short error message',
+  label: 'Label text',
+  invalid: true,
+};