@aurodesignsystem/auro-formkit 1.6.0-beta.10

package/components/radio/src/auro-radio.js

@@ -0,0 +1,247 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { LitElement, html } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+
+// Import touch detection lib
+import "focus-visible/dist/focus-visible.min.js";
+
+import styleCss from "./styles/style-css.js";
+import colorCss from './styles/color-css.js';
+import tokenCss from './styles/tokens-css.js';
+
+// Import library runtime utils
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+/**
+ * @attr {Boolean} checked - If set to true, the radio button will be filled.
+ * @attr {Boolean} disabled - If set to true, the radio button will be non-clickable.
+ * @attr {Boolean} required - Defines element as required.
+ * @attr {Boolean} error - If set to true, sets an error state on the radio button.
+ * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ * @event focusSelected - Notifies that the component has gained focus.
+ * @event auroRadio-blur - Notifies that the component has lost focus.
+ * @event resetRadio - Notifies that the component has reset the checked/selected state.
+ * @event auroRadio-selected - Notifies that the component has been marked as checked/selected.
+ */
+
+// build the component class
+export class AuroRadio extends LitElement {
+  constructor() {
+    super();
+    this.checked = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.tabIndex = -1;
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokenCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      checked: {
+        type: Boolean,
+        reflect: true
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
+      required: {
+        type: Boolean,
+        reflect: true
+      },
+      error: {
+        type: Boolean,
+        reflect: true
+      },
+      id:       { type: String },
+      label:    { type: String },
+      name:     { type: String },
+      value:    { type: String },
+      tabIndex: {
+        type: Number,
+        reflect: true
+      }
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-radio"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroRadio.register("custom-radio") // This will resgiter this element to <custom-radio/>
+   *
+   */
+  static register(name = "auro-radio") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroRadio);
+  }
+
+  /**
+   * Method for handling content when change event is fired.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleChange(event) {
+    this.checked = event.target.checked;
+    const customEvent = new CustomEvent(event.type, event);
+
+    this.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Method for handling content when input event is fired.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleInput(event) {
+    this.checked = event.target.checked;
+    this.dispatchEvent(new CustomEvent('toggleSelected', {
+      bubbles: true,
+      composed: true,
+      target: this
+    }));
+  }
+
+  /**
+   * Method for handling focus event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleFocus(event) {
+    this.dispatchEvent(new CustomEvent('focusSelected', {
+      bubbles: true,
+      composed: true,
+      target: event.target
+    }));
+  }
+
+  /**
+   * Method for handling blur event.
+   * @private
+   * @param {Event} event - The trigger event tied to this function.
+   * @returns {void}
+   */
+  handleBlur(event) {
+    this.dispatchEvent(new CustomEvent('auroRadio-blur', {
+      bubbles: true,
+      composed: true,
+      target: event.target
+    }));
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('checked')) {
+      this.dispatchEvent(new CustomEvent('resetRadio', {
+        bubbles: true,
+        composed: true
+      }));
+
+      if (this.checked) {
+        this.dispatchEvent(new CustomEvent('auroRadio-selected', {
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  }
+
+  /**
+   * Method for handling content when it is invalid accessibility wise.
+   * @private
+   * @param {Boolean} error - The element's error attribute.
+   * @returns {void}
+   */
+  invalid(error) {
+    if (error) {
+      return 'true';
+    }
+
+    return 'false';
+  }
+
+  /**
+   * Method for handling passing the required status to aria.
+   * @private
+   * @param {Boolean} required - The element's required attribute.
+   * @returns {void}
+   */
+  isRequired(required) {
+    if (required) {
+      return 'true';
+    }
+
+    return 'false';
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-radio');
+
+    this.addEventListener('blur', this.handleBlur);
+
+    this.input = this.shadowRoot.querySelector('input');
+
+    this.addEventListener('click', () => {
+      this.input.click();
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    const labelClasses = {
+      'ods-inputLabel': true,
+      'ods-inputLabel--radio': true,
+      'label': true,
+      'label--rdo': true,
+      'errorBorder': this.error
+    };
+
+    return html`
+      <div class="ods-inputGroup rdoGroup">
+        <input
+          class="util_displayHiddenVisually ods-inputOption rdo--input"
+          @focus="${this.handleFocus}"
+          @input="${this.handleInput}"
+          @change="${this.handleChange}"
+          ?disabled="${this.disabled}"
+          aria-invalid="${this.invalid(this.error)}"
+          aria-required="${this.isRequired(this.required)}"
+          .checked="${this.checked}"
+          id="${ifDefined(this.id)}"
+          name="${ifDefined(this.name)}"
+          type="radio"
+          .value="${this.value}"
+          tabIndex="-1"
+        />
+
+        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}">
+          <slot>${this.label}</slot>
+        </label>
+
+      </div>
+      <slot name="content" class="slotContent"></slot>
+    `;
+  }
+}

package/components/radio/src/index.js

@@ -0,0 +1,8 @@
+import { AuroRadio } from './auro-radio.js';
+import { AuroRadioGroup } from './auro-radio-group.js';
+
+AuroRadio.register();
+AuroRadioGroup.register();
+
+// Enable TypeScript support
+export { AuroRadio, AuroRadioGroup };

package/components/radio/src/styles/auro-radio-group-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;

package/components/radio/src/styles/auro-radio-group.css

@@ -0,0 +1,23 @@
+/* stylelint-disable
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+:host {
+  display: block;
+  padding-bottom: var(--ds-size-150, 0.75rem);
+}
+
+fieldset {
+  all: unset;
+}
+
+.displayFlex legend + slot {
+  display: flex;
+  white-space: nowrap;
+}
+
+legend {
+  margin-bottom: var(--ds-size-150, 0.75rem);
+}

package/components/radio/src/styles/auro-radio-group.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+
+// Import Auro tokens
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
+
+// container styles - defines the look of the outer custom component
+:host {
+  display: block;
+  padding-bottom: var(--ds-size-150, $ds-size-150);
+}
+
+fieldset {
+  all: unset;
+}
+
+.displayFlex {
+  legend + slot {
+    display: flex;
+    white-space: nowrap;
+  }
+}
+
+legend {
+  margin-bottom: var(--ds-size-150, $ds-size-150);
+}

package/components/radio/src/styles/color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.label{color:var(--ds-auro-radio-label-color)}.label:after{background-color:var(--ds-auro-radio-btn-fill-color);border-color:var(--ds-auro-radio-btn-border-color);box-shadow:inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);outline-color:var(--ds-auro-radio-btn-border-color);-webkit-tap-highlight-color:var(--ds-auro-radio-tap-color)}:host([checked]){--ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #ffffff);--ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default)}:host([error]){--ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #cc1816)}:host([checked][error]){--ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #cc1816)}:host([disabled]){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}:host(.focus-visible){--ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}`;

package/components/radio/src/styles/color.css

@@ -0,0 +1,45 @@
+/* stylelint-disable
+   no-duplicate-selectors,
+   declaration-empty-line-before,
+   selector-max-class,
+   scss/selector-nest-combinators,
+   order/properties-order,
+   selector-class-pattern,
+   max-nesting-depth,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   scss/selector-no-redundant-nesting-selector,
+   no-descending-specificity,
+   rule-empty-line-before */
+.label {
+  color: var(--ds-auro-radio-label-color);
+}
+.label:after {
+  background-color: var(--ds-auro-radio-btn-fill-color);
+  border-color: var(--ds-auro-radio-btn-border-color);
+  box-shadow: inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);
+  outline-color: var(--ds-auro-radio-btn-border-color);
+  -webkit-tap-highlight-color: var(--ds-auro-radio-tap-color);
+}
+
+:host([checked]) {
+  --ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #ffffff);
+  --ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default);
+}
+
+:host([error]) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #cc1816);
+}
+
+:host([checked][error]) {
+  --ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #cc1816);
+}
+
+:host([disabled]) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #adadad);
+}
+
+:host(.focus-visible) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
+}

package/components/radio/src/styles/color.scss

@@ -0,0 +1,56 @@
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable
+   no-duplicate-selectors,
+   declaration-empty-line-before,
+   selector-max-class,
+   scss/selector-nest-combinators,
+   order/properties-order,
+   selector-class-pattern,
+   max-nesting-depth,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   scss/selector-no-redundant-nesting-selector,
+   no-descending-specificity,
+   rule-empty-line-before */
+
+// Import Auro tokens
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+.label {
+  color: var(--ds-auro-radio-label-color);
+
+  &:after {
+    background-color: var(--ds-auro-radio-btn-fill-color);
+    border-color: var(--ds-auro-radio-btn-border-color);
+    box-shadow: inset 0 0 0 3px var(--ds-auro-radio-btn-inset-color);
+    outline-color: var(--ds-auro-radio-btn-border-color);
+    
+    -webkit-tap-highlight-color: var(--ds-auro-radio-tap-color);
+  }
+}
+
+:host([checked]) {
+  --ds-auro-radio-btn-inset-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
+  --ds-auro-radio-btn-fill-color: var(--ds-color-border-ui-default-default);
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default);
+}
+
+:host([error]) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+}
+
+:host([checked][error]) {
+  --ds-auro-radio-btn-fill-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
+}
+
+:host([disabled]) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
+}
+
+:host(.focus-visible) {
+  --ds-auro-radio-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
+}

package/components/radio/src/styles/groupColor-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default)}.radioGroupElement-helpText{color:var(--ds-auro-radio-group-help-text-color)}:host([validity]:not([validity=valid])){--ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #df0b37)}`;

package/components/radio/src/styles/groupColor.css

@@ -0,0 +1,21 @@
+/* stylelint-disable
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+:host legend {
+  color: var(--ds-auro-radio-group-label-color);
+}
+
+:host([disabled]) {
+  --ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
+}
+
+.radioGroupElement-helpText {
+  color: var(--ds-auro-radio-group-help-text-color);
+}
+
+:host([validity]:not([validity=valid])) {
+  --ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #df0b37);
+}

package/components/radio/src/styles/groupColor.scss

@@ -0,0 +1,33 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   selector-max-type,
+   scss/selector-nest-combinators,
+   selector-class-pattern */
+
+// Import Auro tokens
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import "@aurodesignsystem/webcorestylesheets/src/breakpoints";
+
+:host {
+  legend {
+    color: var(--ds-auro-radio-group-label-color);
+  }
+}
+
+:host([disabled]) {
+  --ds-auro-radio-group-label-color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default);
+}
+
+.radioGroupElement-helpText {
+  color: var(--ds-auro-radio-group-help-text-color);
+}
+
+:host([validity]:not([validity='valid'])) {
+  --ds-auro-radio-group-help-text-color: var(--ds-color-alert-error-default, #{$ds-color-alert-error-default});
+}

package/components/radio/src/styles/style-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;outline:unset}:host(.focus-visible) .displayFlex .inputGroup:focus-within{width:auto}:host(.focus-visible) .rdoGroup{display:block;padding-right:var(--ds-size-100, 0.5rem);outline:3px solid transparent}:host(.focus-visible) .rdoGroup .label:after{outline-width:1px;outline-style:solid}.rdoGroup{position:relative;padding-right:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.label{display:block;margin-left:var(--ds-size-300, 1.5rem)}.label:hover{cursor:pointer}.label:after{position:absolute;z-index:1;top:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));content:"";border-radius:50%;border:1px solid}.slotContent{display:block;margin-left:var(--ds-size-400, 2rem);padding-left:var(--ds-size-100, 0.5rem)}`;

package/components/radio/src/styles/style.css

@@ -0,0 +1,113 @@
+/* stylelint-disable
+   no-duplicate-selectors,
+   declaration-empty-line-before,
+   selector-max-class,
+   scss/selector-nest-combinators,
+   order/properties-order,
+   selector-class-pattern,
+   max-nesting-depth,
+   selector-max-combinators,
+   selector-max-compound-selectors,
+   scss/selector-no-redundant-nesting-selector,
+   no-descending-specificity,
+   rule-empty-line-before */
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *:before, *:after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+*:focus-visible {
+  outline: 0;
+}
+*:focus-visible {
+  outline: 0;
+}
+
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
+
+.util_displayInline {
+  display: inline;
+}
+
+.util_displayInlineBlock {
+  display: inline-block;
+}
+
+.util_displayBlock {
+  display: block;
+}
+
+.util_displayFlex {
+  display: flex;
+}
+
+.util_displayHidden {
+  display: none;
+}
+
+.util_displayHiddenVisually {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+}
+
+:host {
+  display: block;
+  outline: unset;
+}
+
+:host(.focus-visible) .displayFlex .inputGroup:focus-within {
+  width: auto;
+}
+:host(.focus-visible) .rdoGroup {
+  display: block;
+  padding-right: var(--ds-size-100, 0.5rem);
+  outline: 3px solid transparent;
+}
+:host(.focus-visible) .rdoGroup .label:after {
+  outline-width: 1px;
+  outline-style: solid;
+}
+
+.rdoGroup {
+  position: relative;
+  padding-right: var(--ds-size-100, 0.5rem);
+  padding-left: var(--ds-size-100, 0.5rem);
+  line-height: var(--ds-size-400, 2rem);
+}
+
+.label {
+  display: block;
+  margin-left: var(--ds-size-300, 1.5rem);
+}
+.label:hover {
+  cursor: pointer;
+}
+.label:after {
+  position: absolute;
+  z-index: 1;
+  top: var(--ds-size-50, 0.25rem);
+  left: var(--ds-size-50, 0.25rem);
+  width: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
+  height: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
+  content: "";
+  border-radius: 50%;
+  border: 1px solid;
+}
+
+.slotContent {
+  display: block;
+  margin-left: var(--ds-size-400, 2rem);
+  padding-left: var(--ds-size-100, 0.5rem);
+}