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

package/dist/collection/components/pds-input/pds-input.tokens.css

@@ -0,0 +1,3 @@
+:host {
+  --pine-input-color-background-danger: var(--pine-color-red-050);
+}

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

@@ -1,14 +1,24 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-input'),
+
   args: {
+    autocomplete: null,
+    debounce: null,
     disabled: false,
     errorMessage: null,
+    fullWidth: false,
     helperMessage: null,
+    hideLabel: false,
+    highlight: false,
     invalid: false,
+    max: null,
+    maxlength: null,
+    min: null,
+    minlength: null,
+    pattern: null,
+    step: null,
     name: null,
     placeholder: null,
     readonly: false,
@@ -16,28 +26,33 @@ export default {
     type: 'text'
   },
   component: 'pds-input',
-  parameters: {
-    actions: {
-      handles: ['oninput', 'pdsInput'],
-    },
-  },
+  parameters: {},
   title: 'components/Input',
-  decorators: [withActions],
 }
 
 const BaseTemplate = (args) => html`<pds-input
-  disabled="${args.disabled}"
+  autocomplete="${args.autocomplete}"
+  component-id="${args.componentId}"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
+  ?full-width=${args.fullWidth}
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
-  component-id="${args.componentId}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
   label="${args.label}"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="${args.type}"
   value="${args.value}">
+  ${args.prefix || ''}
+  ${args.suffix || ''}
+  ${args.prepend || ''}
+  ${args.append || ''}
+  ${args.action || ''}
 </pds-input>`;
 
 export const Text = BaseTemplate.bind({});
@@ -56,6 +71,14 @@ Email.args = {
   value: 'user123@test.com'
 };
 
+export const Search = BaseTemplate.bind({});
+Search.args = {
+  componentId: 'pds-input-search-example',
+  label: 'Search',
+  type: 'search',
+  placeholder: 'Search...',
+};
+
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-input-required-example',
@@ -108,3 +131,275 @@ Invalid.args = {
   type: 'email',
   value: 'Frank Dux'
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-input-autocomplete',
+  label: 'First name',
+  type: 'text',
+  autocomplete: 'given-name',
+};
+
+export const FullWidth = BaseTemplate.bind({});
+FullWidth.args = {
+  componentId: 'pds-input-full-width-example',
+  label: 'Full Width Input',
+  type: 'text',
+  fullWidth: true,
+  placeholder: 'This input takes full width of its container',
+};
+
+export const Highlight = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-highlight-example"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  ?full-width=${args.fullWidth}
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="${args.label || 'Label'}"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="${args.type || 'text'}"
+  value="${args.value}">
+  <pds-icon slot="prefix" name="mail" size="small"></pds-icon>
+</pds-input>`;
+Highlight.args = {
+  highlight: true,
+  value: 'This input is highlighted',
+};
+
+export const withPrefixIcon = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prefix-icon"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Email"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="email"
+  value="${args.value}">
+  <pds-icon slot="prefix" name="mail" size="small"></pds-icon>
+</pds-input>`;
+
+export const withSuffixButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-suffix-button"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Search"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
+    <pds-icon name="search" size="small"></pds-icon>
+  </pds-button>
+</pds-input>`;
+
+export const withPrependSelect = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prepend-select"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-select hide-label label="Currency" slot="prepend" class="pds-input__prepend" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+</pds-input>`;
+
+export const withPrependButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prepend-secondary-button"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Search Query"
+  name="${args.name}"
+  placeholder="Enter your search terms..."
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-button slot="prepend" variant="secondary" class="pds-input__prepend">
+    Filter
+  </pds-button>
+</pds-input>`;
+
+export const withAppendSelect = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-append-select"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Phone"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="tel"
+  value="${args.value}">
+  <pds-select hide-label slot="append" class="pds-input__append" name="phone-type">
+    <option value="mobile">Mobile</option>
+    <option value="home">Home</option>
+    <option value="work">Work</option>
+  </pds-select>
+</pds-input>`;
+
+export const withAppendButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-append-secondary-button"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Search Query"
+  name="${args.name}"
+  placeholder="Enter your search terms..."
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-button slot="append" variant="secondary" class="pds-input__append">
+    Search
+  </pds-button>
+</pds-input>`;
+
+export const withPrefixAndAppend = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prefix-append"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-icon slot="prefix" name="dollar" size="small"></pds-icon>
+  <pds-select hide-label slot="append" class="pds-input__append" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+</pds-input>`;
+
+export const withPrependAndSuffix = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prepend-suffix"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-select hide-label slot="prepend" class="pds-input__prepend" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
+    <pds-icon name="remove-circle" size="small"></pds-icon>
+  </pds-button>
+</pds-input>`;
+
+export const withActionLink = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-action-link"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Password"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  required
+  type="password"
+  value="${args.value}">
+  <pds-link href="#" slot="action">
+    Forgot password?
+  </pds-link>
+</pds-input>`;
+
+export const withActionButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-action-button"
+  debounce="${args.debounce}"
+  ?disabled=${args.disabled}
+  error-message="${args.errorMessage}"
+  helper-message="Choose a unique username"
+  ?hide-label=${args.hideLabel}
+  ?highlight=${args.highlight}
+  ?invalid=${args.invalid}
+  label="Username"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  type="text"
+  value="${args.value}">
+  <pds-button slot="action" variant="unstyled">
+    <pds-icon name="question-circle"></pds-icon>
+  </pds-button>
+</pds-input>`;

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

@@ -1,68 +1,83 @@
 :host {
-  --border-outline: 4px solid var(--pine-color-blue-200);
-  --border-radius: var(--pine-border-radius-075);
-  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
-  --color-text-default: var(--pine-color-charcoal-400);
-  --font-size: var(--pine-font-size-100);
-  --font-size-sm: var(--pine-font-size-087);
-  --font-size-xs: var(--pine-font-size-075);
-  --font-weight: var(--pine-font-weight-medium);
-  --spacing-inline-start-margin: var(--pine-spacing-050);
-  --sizing-svg-lg: 15px;
-  --sizing-svg-md: 13px;
-  --sizing-svg-sm: 11px;
   display: inline;
 }
 :host pds-icon {
-  margin-inline-start: var(--spacing-inline-start-margin);
+  margin-inline-start: var(--pine-dimension-2xs);
 }
 
 .pds-link {
   align-items: center;
-  color: var(--color-text);
+  color: var(--color, var(--pds-context-link-color, var(--pine-color-text)));
   display: inline-flex;
-  font-weight: inherit;
+  font-weight: var(--pine-font-weight-medium);
 }
 .pds-link:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  border-radius: var(--pine-dimension-2xs);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width-thick);
+  position: relative;
+}
+.pds-link:hover {
+  color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));
+  text-decoration: none;
+}
+:host([color=secondary]) .pds-link {
+  color: var(--pine-color-text-primary);
+}
+:host([color=secondary]) .pds-link:hover {
+  color: var(--pine-color-text-inverse-secondary);
+}
+:host([color=accent]) .pds-link {
+  color: var(--pine-color-accent);
+}
+:host([color=accent]) .pds-link:hover {
+  color: var(--pine-color-accent-hover);
+}
+:host([color=danger]) .pds-link {
+  color: var(--pine-color-danger);
+}
+:host([color=danger]) .pds-link:hover {
+  color: var(--pine-color-danger-hover);
 }
 
 .pds-link--sm {
-  font-size: var(--font-size-xs);
+  font-size: var(--pine-font-size-body-xs);
 }
 .pds-link--sm pds-icon {
-  height: var(--sizing-svg-sm);
-  width: var(--sizing-svg-sm);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--md {
-  font-size: var(--font-size-sm);
+  font-size: var(--pine-font-size-body-sm);
 }
 .pds-link--md pds-icon {
-  height: var(--sizing-svg-md);
-  width: var(--sizing-svg-md);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--lg {
-  font-size: var(--font-size);
+  font-size: var(--pine-font-size-body-md);
 }
 .pds-link--lg pds-icon {
-  height: var(--sizing-svg-lg);
-  width: var(--sizing-svg-lg);
+  height: var(--pine-dimension-sm);
+  width: var(--pine-dimension-sm);
 }
 
 .pds-link--plain {
-  font-weight: var(--font-weight);
   text-decoration: none;
 }
 .pds-link--plain:hover {
+  color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));
   text-decoration: underline;
 }
 
-.pds-link--default {
+:host([active]) .pds-link {
+  color: var(--pds-context-link-color, var(--pine-color-text-strong));
   text-decoration: underline;
 }
-.pds-link--default:hover {
-  text-decoration: none;
+
+:host([active]) .pds-link:hover {
+  color: var(--pds-context-link-color-hover, var(--pine-color-text-strong));
+  text-decoration: underline;
 }