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

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

@@ -1,36 +1,67 @@
 import { html } from 'lit';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 import { customArgsWithIconControl } from '../../../stories/_helpers';
 
 export default {
   argTypes: customArgsWithIconControl({ component: 'pds-button', property: 'icon' }),
   component: 'pds-button',
-  title: 'components/Button'
+  decorators: [withActions],
+  title: 'components/Button',
+  parameters: {
+    actions: {
+      handles: ['pdsClick'],
+    }
+  }
 }
 
 const BaseTemplate = (args) => html`
   <pds-button
     component-id=${args.componentId}
     disabled=${args.disabled}
+    full-width=${args.fullWidth}
+    href=${args.href}
+    icon-only=${args.iconOnly}
     icon=${args.icon}
+    loading=${args.loading}
     name=${args.name}
+    target=${args.target}
     type=${args.type}
     value=${args.value}
-    variant=${args.variant}>
+    variant=${args.variant}
+  >
       ${args.slot}
     </pds-button> `;
 
 export const Accent = BaseTemplate.bind();
 Accent.args = {
   disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
   slot: 'Accent',
   type: 'button',
   variant: 'accent',
 };
 
+export const ButtonLink = BaseTemplate.bind();
+ButtonLink.args = {
+  disabled: false,
+  fullWidth: false,
+  href: 'https://pine-design-system.netlify.app/',
+  iconOnly: false,
+  loading: false,
+  slot: 'Link Button',
+  target: '_blank',
+  variant: 'primary',
+};
+
 export const Destructive = BaseTemplate.bind({});
 Destructive.args = {
   disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
   slot: 'Destructive',
   type: 'button',
   variant: 'destructive',
@@ -39,6 +70,9 @@ Destructive.args = {
 export const Disclosure = BaseTemplate.bind({});
 Disclosure.args = {
   disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
   slot: 'Disclosure',
   type: 'button',
   variant: 'disclosure'
@@ -49,9 +83,46 @@ Disclosure.parameters = {
   controls: { exclude: 'icon' }
 }
 
+export const FullWidth = BaseTemplate.bind({});
+FullWidth.args = {
+  disabled: false,
+  fullWidth: true,
+  iconOnly: false,
+  loading: false,
+  slot: 'Full Width',
+  type: 'button',
+  variant: 'primary'
+}
+
+export const IconOnly = BaseTemplate.bind();
+IconOnly.args = {
+  disabled: false,
+  fullWidth: false,
+  icon: 'favorite',
+  iconOnly: true,
+  loading: false,
+  slot: 'Icon Only',
+  type: 'button',
+  variant: 'secondary',
+};
+
+export const Loading = BaseTemplate.bind({});
+Loading.args = {
+  disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: true,
+  slot: 'Loading',
+  type: 'button',
+  variant: 'primary',
+}
+
 export const Primary = BaseTemplate.bind({});
 Primary.args = {
   disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
   slot: 'Primary',
   type: 'button',
   variant: 'primary'
@@ -60,7 +131,10 @@ Primary.args = {
 export const Secondary = BaseTemplate.bind({});
 Secondary.args = {
   disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
   slot: 'Secondary',
-  variant: 'secondary',
   type: 'button',
+  variant: 'secondary',
 }

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

@@ -1,30 +1,20 @@
 :host {
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);
-  --border-radius: var(--pine-border-radius-050);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);
-  --color-background: var(--pine-color-white);
-  --color-background-disabled: var(--pine-color-grey-200);
-  --color-background-hover: var(--pine-color-grey-100);
-  --color-border-disabled: var(--pine-color-grey-600);
-  --color-border-icon: var(--pine-color-white);
-  --color-checked: var(--pine-color-grey-950);
-  --color-disabled: var(--pine-color-grey-300);
-  --color-invalid: var(--pine-color-red-300);
-  --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-message: var(--pine-color-grey-700);
-  --sizing-input: var(--pine-font-size-100);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   align-items: center;
   display: flex;
   flex-flow: row wrap;
 }
 
 :host(.is-invalid) input {
-  border-color: var(--color-invalid);
+  border-color: var(--pine-color-border-danger);
 }
 :host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+  background: var(--pine-color-danger);
+}
+:host(.is-invalid) input:checked:hover {
+  background: var(--pine-color-danger-hover);
+  border-color: var(--pine-color-border-danger-hover);
 }
 :host(.is-invalid) input:focus-visible {
   box-shadow: var(--box-shadow-focus-invalid);
@@ -32,15 +22,19 @@
 }
 :host(.is-invalid) label,
 :host(.is-invalid) .pds-checkbox__message--error {
-  color: var(--color-invalid);
+  color: var(--pine-color-text-message-danger);
 }
 
 :host(.is-indeterminate) input {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
+}
+:host(.is-indeterminate) input:hover {
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent-hover);
 }
 :host(.is-indeterminate) input::after {
-  border: 1px solid var(--color-border-icon);
+  border: 1px solid var(--pine-color-secondary);
   border-bottom: 0;
   border-left: 0;
   border-top: 0;
@@ -50,30 +44,36 @@
   left: 50%;
   position: absolute;
   top: 50%;
-  transform: rotate(87deg) translate3d(-114%, 25%, 0);
+  transform: rotate(90deg) translate3d(-103%, 32%, 0);
   width: 4px;
 }
 
 input {
   appearance: none;
-  background-color: var(--color-background);
-  border: var(--border-default);
-  border-radius: var(--border-radius);
-  height: var(--sizing-input);
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);
+  flex: none;
+  height: var(--pine-dimension-sm);
   margin: 0;
+  margin-block-start: var(--pine-dimension-025);
   position: relative;
-  width: var(--sizing-input);
+  width: var(--pine-dimension-sm);
 }
 input:hover {
-  background: var(--color-background-hover);
-  border: var(--border-color-interactive-hover);
+  background: var(--pine-color-background-container-hover);
+  border: var(--pine-border-hover);
 }
 input:checked {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
+}
+input:checked:hover {
+  background: var(--pine-color-accent-hover);
+  border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  border: 1px solid var(--color-border-icon);
+  border: 1px solid var(--pine-color-secondary);
   border-left: 0;
   border-top: 0;
   content: "";
@@ -86,23 +86,22 @@ input:checked::after {
   width: 4px;
 }
 input:disabled {
-  background: var(--color-background-disabled);
-  border-color: var(--color-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
   cursor: not-allowed;
 }
 input:disabled:checked {
-  background: var(--color-disabled);
-  border-color: var(--color-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--color-border-disabled);
+  border-color: var(--pine-color-grey-300);
 }
 input:disabled + label {
-  color: var(--color-text-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-checkbox__message {
-  color: var(--color-text-disabled);
+  color: var(--pine-color-text-disabled);
 }
 input:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -110,7 +109,8 @@ input:focus-visible {
 }
 
 label {
-  margin-inline-start: 10px;
+  display: flex;
+  gap: var(--pine-dimension-xs);
 }
 
 .visually-hidden {
@@ -127,9 +127,15 @@ label {
 }
 
 .pds-checkbox__message {
-  color: var(--color-text-message);
-  font-size: 14px;
+  color: var(--pine-color-text-message);
   margin-block-start: 6px;
-  margin-inline-start: 26px;
+  margin-inline-start: var(--pine-dimension-md);
   width: 100%;
+}
+
+.pds-checkbox__message--error {
+  align-items: center;
+  display: flex;
+  font-size: var(--pine-font-size-085);
+  gap: var(--pine-spacing-050);
 }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsCheckbox {
     constructor() {
         this.handleCheckboxChange = (e) => {
@@ -50,20 +50,20 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'ad7d0dd8ce09b69abc0024541ff2b2d69a8db0b0', class: this.classNames() }, h("input", { key: 'fbc513372055e685d3beb16fba9c404db3d0528a', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '12444bd716bc8ae952a0bf38471d00e6d3a9fe3b', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: 'e85ffb338c44a3f924b75d1869c781db9a93350b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '8071425f43f89ff44ce8bdb608737b1f574e2440', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: '9e2789028b697aa440ff90f44e6899d19403b825', class: this.classNames() }, h("label", { key: '79fdb66797651cc5cf0c7059495df8d7ce61a2af', htmlFor: this.componentId }, h("input", { key: '755975e58732cf844a641faf81f89adc6331c8b8', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h("span", { key: 'ef7401eb659719a2d5dc0d9d5b85e112497e4cf6', class: this.labelHidden ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '76a928518577f4b41c6ff38c9fdf5d6a82022a1e', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'd656cc52b4c02bc7f021ff33649a4f0e9b10cb5d', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '59fb3ffc4271ef36a5530bdf8db870a99c876fa7', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-checkbox.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-checkbox.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-checkbox.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\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({ mutable: true }) checked?: boolean = 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   * 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({ mutable: true }) 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   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\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   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\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          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\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          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\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"]}
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = 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   * 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({ mutable: true }) 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   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\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   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\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        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\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            onInput={this.handleInput}\n          />\n          <span class={this.labelHidden ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </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            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}