@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,277 @@
+import { Host, h } from "@stencil/core";
+import { assignDescription, messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsSwitch {
+    constructor() {
+        this.onSwitchUpdate = (e) => {
+            if (this.disabled)
+                return;
+            this.pdsSwitchChange.emit(e);
+        };
+        /**
+         * Generate switch classes
+         */
+        this.switchClassNames = () => {
+            let switchClasses = `pds-switch`;
+            if (this.invalid === true) {
+                switchClasses += " pds-switch--error";
+            }
+            if (this.helperMessage !== undefined) {
+                switchClasses += " pds-switch--message";
+            }
+            return switchClasses;
+        };
+        this.componentId = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.invalid = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.type = 'checkbox';
+        this.value = undefined;
+    }
+    render() {
+        return (h(Host, { class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), h(PdsLabel, { classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+    static get is() { return "pds-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the input 'checked' state"
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the input 'disabled' state, preventing user interaction"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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": "Displays help text for additional description of an input"
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the input 'invalid' state, signifying an error is present"
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays text to describe the input"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies form data and unifies a group of radio inputs for toggling a single property/value"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the 'required' state of the input"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'checkbox' | 'radio'",
+                    "resolved": "\"checkbox\" | \"radio\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'checkbox'"
+                        }],
+                    "text": "Specifies the underlying input element type"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'checkbox'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides input with a string submitted in form data, and can be used to distinguish radio inputs"
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsSwitchChange",
+                "name": "pdsSwitchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event on input change"
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,SAAS;;QAgEZ,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF;;WAEG;QACK,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;gBACzB,aAAa,IAAI,oBAAoB,CAAC;aACvC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;gBACpC,aAAa,IAAI,sBAAsB,CAAC;aACzC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;;uBAvEgB,KAAK;wBAKH,KAAK;;;uBAeN,KAAK;;;wBAeJ,KAAK;oBAMY,UAAU;;;IAgC/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAChF,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,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;YACF,EAAC,QAAQ,IAAC,UAAU,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACvF,IAAI,CAAC,aAAa;gBACjB,WACE,KAAK,EAAE,qBAAqB,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,WACE,KAAK,EAAE,gDAAgD,EACvD,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, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrl: 'pds-switch.scss',\n  shadow: true,\n})\nexport class PdsSwitch {\n  @Element() el: HTMLPdsSwitchElement;\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 the input 'checked' state\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays help text for additional description of an input\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input\n   */\n  @Prop() required? = false;\n\n  /**\n   * Specifies the underlying input element type\n   * @defaultValue 'checkbox'\n   */\n  @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n  /**\n   * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change\n  */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Generate switch classes\n   */\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          checked={this.checked}\n          class=\"pds-switch__input\"\n          disabled={this.disabled}\n          id={this.componentId}\n          name={this.name ? this.name : this.componentId}\n          onChange={this.onSwitchUpdate}\n          required={this.required}\n          type={this.type}\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={`pds-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__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-switch/stories/pds-switch.stories.js

@@ -0,0 +1,102 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  args: {
+    disabled: false,
+    required: false,
+  },
+  argTypes: extractArgTypes('pds-switch'),
+  component: 'pds-switch',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsSwitchChange'],
+    },
+  },
+  title: 'components/Switch',
+}
+
+const BaseTemplate = (args) => html`
+  <pds-switch
+    checked=${args.checked}
+    component-id=${args.componentId}
+    disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    invalid=${args.invalid}
+    label=${args.label}
+    name=${args.name}
+    onChange=${args.onChange}
+    required=${args.required}
+    type=${args.type}
+  />
+`;
+
+export const Default = BaseTemplate.bind({});
+
+Default.args = {
+  checked: false,
+  disabled: false,
+  componentId: 'pds-switch-checkbox-example',
+  invalid: false,
+  label: 'checkbox switch',
+  name: 'pds-switch-checkbox',
+  required: false,
+  type: 'checkbox',
+};
+
+export const Radio = BaseTemplate.bind({});
+
+Radio.args = {
+  checked: false,
+  disabled: false,
+  componentId: 'pds-switch-radio-example',
+  invalid: false,
+  label: 'radio switch',
+  name: 'pds-switch-radio',
+  required: false,
+  type: 'radio',
+};
+
+export const Disabled = BaseTemplate.bind({});
+
+Disabled.args = {
+  checked: false,
+  disabled: true,
+  componentId: 'pds-switch-disabled-example',
+  invalid: false,
+  label: 'Can\'t touch this',
+  name: 'pds-switch-disabled',
+  required: false,
+  type: 'checkbox',
+};
+
+export const HelperMessage = BaseTemplate.bind({});
+
+HelperMessage.args = {
+  checked: true,
+  disabled: false,
+  componentId: 'pds-switch-helper-example',
+  helperMessage: 'Save my login details for next time.',
+  invalid: false,
+  label: 'Remember me!',
+  name: 'pds-switch-message',
+  required: false,
+  type: 'checkbox',
+};
+
+export const Invalid = BaseTemplate.bind({});
+
+Invalid.args = {
+  checked: false,
+  disabled: false,
+  componentId: 'pds-switch-invalid-example',
+  errorMessage: 'Terms and conditions must be accepted to continue',
+  invalid: true,
+  label: 'I agree to the terms and conditions',
+  name: 'pds-switch-invalid',
+  required: true,
+  type: 'checkbox',
+};

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css

@@ -0,0 +1,158 @@
+pds-tab {
+  --background-color-tab: var(--pine-color-neutral-grey-300);
+  --background-color-tab-active: var(--pine-color-neutral-charcoal-400);
+  --background-color-tab-hover: var(--pine-color-neutral-grey-400);
+  --border-radius: var(--pine-border-radius-xs);
+  --color: var(--pine-color-neutral-charcoal-200);
+  --color-active: var(--pine-color-neutral-charcoal-400);
+  --color-focus: var(--pine-color-neutral-charcoal-300);
+  --color-white: var(--pine-color-base-white);
+  --font-size-body: var(--pine-font-size-body);
+  --font-size-sm: var(--pine-font-size-body-sm);
+  --font-size-xs: var(--pine-font-size-body-xs);
+  --font-weight: var(--pine-font-weight-medium);
+  --line-height-md: var(--pine-line-height-md);
+  --line-height-sm: var(--pine-line-height-sm);
+  --line-height-xs: var(--pine-line-height-xs);
+  --outline: 4px solid var(--pine-color-primary-200);
+  display: inline-block;
+  position: relative;
+}
+
+*:focus-visible {
+  border-radius: var(--border-radius);
+  outline: var(--outline);
+}
+
+.pds-tab {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  align-items: center;
+  color: var(--color);
+  display: inline-flex;
+  position: relative;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.pds-tab.is-active, .pds-tab[aria-selected=true] {
+  color: var(--color-active);
+}
+.pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 1;
+}
+.pds-tab:hover {
+  color: var(--color-active);
+}
+.pds-tab:focus-visible {
+  color: var(--color-focus);
+}
+.pds-tab .pds-tab__content {
+  font-family: inherit;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height-md);
+  padding-block-end: 11px;
+  position: relative;
+}
+.pds-tab .pds-tab__content::after {
+  background-color: currentColor;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+}
+.pds-tab .pds-tab-edge {
+  display: none;
+}
+
+.pds-tabs--availability {
+  --tab-background-color: transparent;
+}
+.pds-tabs--availability .pds-tab {
+  background-color: var(--tab-background-color);
+  border-radius: 8px 8px 0 0;
+  padding: 8px 16px 13px;
+}
+.pds-tabs--availability .pds-tab.is-active, .pds-tabs--availability .pds-tab[aria-selected=true] {
+  --tab-background-color: var(--color-white);
+}
+.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after {
+  opacity: 1;
+}
+.pds-tabs--availability .pds-tab.is-active .pds-tab-edge, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge {
+  z-index: 1;
+}
+.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
+  --tab-background-color: var(--background-color-tab);
+}
+.pds-tabs--availability .pds-tab:focus-visible {
+  color: var(--color);
+}
+.pds-tabs--availability .pds-tab__content {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+  padding-bottom: 7px;
+}
+.pds-tabs--availability .pds-tab-edge {
+  bottom: 0;
+  display: block;
+  height: 8px;
+  inset-inline-end: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 8px;
+}
+.pds-tabs--availability .pds-tab-edge::before {
+  border-radius: 50%;
+  bottom: 0;
+  box-shadow: 4px 4px 0 0 var(--tab-background-color);
+  content: "";
+  display: block;
+  height: 200%;
+  inset-inline-end: 0;
+  position: absolute;
+  width: 200%;
+}
+.pds-tabs--availability .pds-tab-edge--end {
+  inset-inline-end: unset;
+  inset-inline-start: 100%;
+}
+.pds-tabs--availability .pds-tab-edge--end::before {
+  box-shadow: -4px 4px 0 0 var(--tab-background-color);
+  inset-inline-end: unset;
+  inset-inline-start: 0;
+}
+
+.pds-tabs--filter {
+  --tab-background-color: var(--background-color-tab);
+}
+.pds-tabs--filter .pds-tab {
+  background-color: var(--tab-background-color);
+  border-radius: 50px;
+  color: var(--color-active);
+  padding: 6px 15px;
+}
+.pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
+  --tab-background-color: var(--background-color-tab-active);
+  color: var(--color-white);
+}
+.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
+  --tab-background-color: var(--background-color-tab-hover);
+}
+.pds-tabs--filter .pds-tab__content {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding-block-end: 0;
+}
+.pds-tabs--filter .pds-tab__content::after {
+  content: unset;
+}