diff --git a/components/checkbox/apiExamples/basic.html b/components/checkbox/apiExamples/basic.html
new file mode 100644
index 00000000..e60ffbfa
--- /dev/null
+++ b/components/checkbox/apiExamples/basic.html
@@ -0,0 +1,7 @@
+
+
+ ${this.setCustomValidity} +
` + } + `; + } +} + +AuroCheckbox.register(); // registering to `auro-checkbox` +AuroCheckboxGroup.register(); // registering to `auro-checkbox-group` + +AuroCheckbox.register('custom-checkbox'); +AuroCheckboxGroup.register('custom-checkbox-group'); diff --git a/components/checkbox/demo/index.html b/components/checkbox/demo/index.html new file mode 100644 index 00000000..1335d2a2 --- /dev/null +++ b/components/checkbox/demo/index.html @@ -0,0 +1,49 @@ + + + + + + + +
+
+ ${this.setCustomValidity} +
` + } + `; + } +} + +AuroCheckbox.register(); // registering to `auro-checkbox` +AuroCheckboxGroup.register(); // registering to `auro-checkbox-group` + +AuroCheckbox.register('custom-checkbox'); +AuroCheckboxGroup.register('custom-checkbox-group'); diff --git a/components/checkbox/docs/api.md b/components/checkbox/docs/api.md new file mode 100644 index 00000000..c92e9073 --- /dev/null +++ b/components/checkbox/docs/api.md @@ -0,0 +1,72 @@ +# auro-checkbox-group + +The auro-checkbox-group element is a wrapper for auro-checkbox element. + +## Properties + +| Property | Attribute | Type | Default | Description | +|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------| +| `disabled` | `disabled` | `boolean` | "undefined" | | +| `error` | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | +| `horizontal` | `horizontal` | `Boolean` | false | If set, checkboxes will be aligned horizontally. | +| `noValidate` | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | +| `required` | `required` | `Boolean` | false | Populates the `required` attribute on the element. Used for client-side validation. | +| `setCustomValidity` | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | +| `setCustomValidityCustomError` | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. | +| `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. | +| `validity` | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. | +| `value` | `value` | `array` | "undefined" | | + +## Events + +| Event | Type | Description | +|-----------------------------|--------------------|--------------------------------------------------| +| `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. | +| `input` | `CustomEvent
+
+ ${this.setCustomValidity} +
` + } + `; + } +} diff --git a/components/checkbox/src/auro-checkbox-group.scss b/components/checkbox/src/auro-checkbox-group.scss new file mode 100644 index 00000000..5be25184 --- /dev/null +++ b/components/checkbox/src/auro-checkbox-group.scss @@ -0,0 +1,38 @@ +// 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-descending-specificity, + no-duplicate-selectors + declaration-empty-line-before, + comment-whitespace-inside, + selector-max-combinators, + selector-max-compound-selectors, + selector-max-type, + scss/selector-nest-combinators, + selector-class-pattern */ + +@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; + +:host { + display: block; + padding-bottom: var(--ds-size-150, $ds-size-150); +} + +.displayFlex { + legend + slot { + display: flex; + white-space: nowrap; + } +} + +fieldset { + all: unset; + +} + +legend { + margin-bottom: var(--ds-size-150, $ds-size-150); +} + diff --git a/components/checkbox/src/auro-checkbox.js b/components/checkbox/src/auro-checkbox.js new file mode 100644 index 00000000..c592f2dc --- /dev/null +++ b/components/checkbox/src/auro-checkbox.js @@ -0,0 +1,184 @@ +// 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 styleCss from "./auro-checkbox-css.js"; +import colorCss from "./color-css.js"; +import tokensCss from "./tokens-css.js"; + +import checkLg from '@alaskaairux/icons/dist/icons/interface/check-lg.mjs'; + +import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; + +/** + * Custom element for the purpose of allowing users to select one or more options of a limited number of choices. + * + * @attr {Boolean} checked - If set to true, the checkbox will be filled with a checkmark. + * @attr {Boolean} disabled - If set to true, the checkbox will not be clickable. + * @attr {Boolean} error - If set to true, sets an error state on the checkbox. + * @attr {String} id - Sets the individual `id` per element. + * @attr {String} name - Accepts any string, `DOMString` representing the value of the input. + * @attr {String} value - Sets the element's input value. + * @csspart checkbox - apply css to a specific checkbox. + * @csspart checkbox-input - apply css to a specific checkbox's input. + * @csspart checkbox-label - apply css to a specific checkbox's label. + */ + +// build the component class +export class AuroCheckbox extends LitElement { + constructor() { + super(); + this.checked = false; + this.disabled = false; + this.error = false; + + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + static get styles() { + return [ + styleCss, + colorCss, + tokensCss + ]; + } + + // 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 + }, + error: { + type: Boolean, + reflect: true + }, + id: { type: String }, + name: { type: String }, + value: { type: String } + }; + } + + /** + * This will register this element with the browser. + * @param {string} [name="auro-checkbox"] - The name of element that you want to register to. + * + * @example + * AuroCheckbox.register("custom-checkbox") // this will register this element to
+
+ ${this.errorMessage} +
` + + } + `; + } +} + +AuroInput.register(); +AuroInput.register('custom-input'); + function initExamples(initCount) { initCount = initCount || 0; diff --git a/components/input/demo/index.html b/components/input/demo/index.html index 433d4de6..a292d445 100644 --- a/components/input/demo/index.html +++ b/components/input/demo/index.html @@ -28,12 +28,7 @@ }); - + + + + +