diff --git a/demo/index.html b/demo/index.html index 8869d13..c07dfc7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,14 +29,7 @@ }); diff --git a/demo/index.js b/demo/index.js index 36d54f6..6f33eb3 100644 --- a/demo/index.js +++ b/demo/index.js @@ -1,3 +1,6 @@ +import { AuroButton } from '../src/auro-button.js'; + +AuroButton.register('custom-button'); export function initExamples(initCount) { initCount = initCount || 0; diff --git a/demo/index.md b/demo/index.md index 824f029..ccad74f 100644 --- a/demo/index.md +++ b/demo/index.md @@ -2,15 +2,15 @@ The index.md file is a compiled document. No edits should be made directly to this file. README.md is created by running `npm run build:docs`. This file is generated based on a template fetched from `./docs/partials/index.md` ---> - +--> + # Button `` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose being a clickable element to trigger a specific action. - - + + ## Auro-Button use cases @@ -21,12 +21,12 @@ The auro-button element should be used in situations where users may: * begin a new task * trigger a new UI element to appear to the page * specificy a new or next step in a process - - + + ## Buttons are not Hyperlinks -In cases were the action of the button would not fit the criteria above, it is most likely a Hyperlink. In that situation it is recommended that the [auro-hyperlink](https://www.alaskaair.com/components/auro/hyperlink) element be used. - +In cases were the action of the button would not fit the criteria above, it is most likely a Hyperlink. In that situation it is recommended that the [auro-hyperlink](https://www.alaskaair.com/components/auro/hyperlink) element be used. + ## Default Example
@@ -36,20 +36,20 @@ In cases were the action of the button would not fit the criteria above, it is m Secondary Tertiary -
+ - See code + See code - - + + ```html Primary Secondary -Tertiary -``` - - - +Tertiary +``` + + + ## On Dark These examples illustrate the core button types and a `disabled` state on dark backgrounds using the `onDark` attribute. @@ -61,20 +61,20 @@ These examples illustrate the core button types and a `disabled` state on dark b Secondary Tertiary - + - See code + See code - - + + ```html Primary Secondary -Tertiary -``` - - - +Tertiary +``` + + + ## Disabled This example demonstrates `auro-button` in it's `disabled` state. @@ -86,19 +86,19 @@ This example demonstrates `auro-button` in it's `disabled` state. Secondary Tertiary - + - See code + See code - - + + ```html Primary Secondary -Tertiary -``` - - +Tertiary +``` + +
@@ -106,20 +106,20 @@ This example demonstrates `auro-button` in it's `disabled` state. Secondary Tertiary -
+ - See code + See code - - + + ```html Primary Secondary -Tertiary -``` - - - +Tertiary +``` + + + ## Icon Support Adding icons to the auro-button component is as easy as nesting any other HTML. The [auro-icon component](https://www.alaskaair.com/components/auro/icon) has access to all the icons listed in the [Auro Icons library](https://www.alaskaair.com/icons/usage) for quick and easy use. @@ -142,12 +142,12 @@ Be sure to use the `customColor` attribute on the auro-icon component to allow c - + - See code + See code - - + + ```html Activate WiFi @@ -160,11 +160,11 @@ Be sure to use the `customColor` attribute on the auro-icon component to allow c Love this ... - -``` - - - + +``` + + + ## Pass a Function to Button These examples illustrate a common use case where a user will want to pass a function into a button to support a click event. See the code examples for how this is achieved. @@ -176,20 +176,20 @@ These examples illustrate a common use case where a user will want to pass a fun Primary Primary - + - See code + See code - - + + ```html Primary Primary -Primary -``` - - - +Primary +``` + + + ## Do's and don'ts Don't combine `disabled` and `loading` attributes on any single instance of `auro-button`. An `auro-button` with `loading` *is* affectively a disabled instance. There is no need for both. @@ -204,34 +204,33 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur Primary - + - See code + See code - - + + ```html Primary Primary - -``` - - - + +``` + + + ## Recommended Use and Version Control -There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-button` custom element is defined automatically. +There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-button` custom element is defined automatically. -To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name. +To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroButton.register(name)` method and pass in a unique name. ```js import { AuroButton } from './src/auro-button.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton); +AuroButton.register('custom-button'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element. @@ -243,16 +242,16 @@ This will create a new custom element that you can use in your HTML that will fu Secondary Tertiary - + - See code + See code - - + + ```html Primary Secondary -Tertiary -``` - +Tertiary +``` + diff --git a/demo/index.min.js b/demo/index.min.js index e250105..b2ec3d0 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -1,3 +1,254 @@ +import { css, LitElement } from 'lit'; +import { html } from 'lit/static-html.js'; +import { classMap } from 'lit/directives/class-map.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; +import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; +import { AuroLoader } from '@aurodesignsystem/auro-loader/src/auro-loader.js'; + +var styleCss = 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_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){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))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; + +var colorCss = css`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`; + +var tokensCss = css`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`; + +var loaderVersion = '3.0.0'; + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +/** + * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user + * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions + * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content + * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled + * @attr {Boolean} onDark - Set value for on-dark version of auro-button + * @attr {Boolean} rounded - If set to true, the button will have a rounded shape + * @attr {Boolean} slim - Set value for slim version of auro-button + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container + * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. + * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. + * @attr {String} id - Set the unique ID of an element. + * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. + * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button` + * @attr {String} value - Defines the value associated with the button which is submitted with the form data. + * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary` + * @attr {Boolean} secondary - DEPRECATED + * @attr {Boolean} tertiary - DEPRECATED + * @prop {Boolean} ready - When false the component API should not be called. + * @event auroButton-ready - Notifies that the component has finished initializing. + * @slot - Default slot for the text of the button. + * @slot icon - Slot to provide auro-icon for the button. + * @csspart button - Apply CSS to HTML5 button. + * @csspart loader - Apply CSS to auro-loader. + * @csspart text - Apply CSS to text slot. + * @csspart icon - Apply CSS to icon slot. + */ + +/* eslint-disable lit/no-invalid-html, lit/binding-positions */ + +class AuroButton extends LitElement { + + constructor() { + super(); + this.autofocus = false; + this.disabled = false; + this.iconOnly = false; + this.loading = false; + this.onDark = false; + this.ready = false; + this.secondary = false; + this.tertiary = false; + this.rounded = false; + this.slim = false; + this.fluid = false; + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning(); + + /** + * @private + */ + this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader); + } + + static get styles() { + return [ + tokensCss, + styleCss, + colorCss + ]; + } + + static get properties() { + return { + autofocus: { + type: Boolean, + reflect: true + }, + disabled: { + type: Boolean, + reflect: true + }, + secondary: { + type: Boolean, + reflect: true + }, + tertiary: { + type: Boolean, + reflect: true + }, + fluid: { + type: Boolean, + reflect: true + }, + iconOnly: { + type: Boolean, + reflect: true + }, + loading: { + type: Boolean, + reflect: true + }, + onDark: { + type: Boolean, + reflect: true + }, + rounded: { + type: Boolean, + reflect: true + }, + slim: { + type: Boolean, + reflect: true + }, + arialabel: { + type: String, + reflect: true + }, + arialabelledby: { + type: String, + reflect: true + }, + title: { + type: String, + reflect: true + }, + type: { + type: String, + reflect: true + }, + value: { + type: String, + reflect: true + }, + variant: { + type: String, + reflect: true + }, + ready: { type: Boolean }, + }; + } + + /** + * This will register this element with the browser. + * @param {string} [name="auro-button"] - The name of element that you want to register to. + * + * @example + * AuroButton.register("custom-button") // this will register this element to + * + */ + static register(name = "auro-button") { + RuntimeUtils.default.prototype.registerComponent(name, AuroButton); + } + + /** + * Internal method to apply focus to the HTML5 button. + * @private + * @returns {void} + */ + focus() { + this.renderRoot.querySelector('button').focus(); + } + + /** + * Marks the component as ready and sends event. + * @private + * @returns {void} + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroButton-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + updated() { + // support the old `secondary` and `tertiary` attributes` that are deprecated + if (this.secondary) { + this.setAttribute('variant', 'secondary'); + } + + if (this.tertiary) { + this.setAttribute('variant', 'tertiary'); + } + } + + firstUpdated() { + this.notifyReady(); + } + + render() { + const classes = { + 'util_insetLg--squish': true, + 'auro-button': true, + 'auro-button--rounded': this.rounded, + 'auro-button--slim': this.slim, + 'auro-button--iconOnly': this.iconOnly, + 'auro-button--iconOnlySlim': this.iconOnly && this.slim, + 'loading': this.loading + }; + + return html` + + `; + } +} + +AuroButton.register('custom-button'); + function initExamples(initCount) { } diff --git a/docs/partials/index.md b/docs/partials/index.md index 8e4cbdf..03e79ce 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -136,15 +136,14 @@ Don't combine `disabled` and `loading` attributes on any single instance of `aur ## Recommended Use and Version Control -There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-button` custom element is defined automatically. +There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-button` custom element is defined automatically. -To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name. +To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroButton.register(name)` method and pass in a unique name. ```js import { AuroButton } from './src/auro-button.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton); +AuroButton.register('custom-button'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element. diff --git a/index.js b/index.js index 3103973..4f151e7 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ import { AuroButton } from './src/auro-button.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton); +AuroButton.register(); diff --git a/package-lock.json b/package-lock.json index 9b1ac8b..95fb5e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aurodesignsystem/auro-button", - "version": "8.0.0", + "version": "8.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-button", - "version": "8.0.0", + "version": "8.0.1", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/src/auro-button.js b/src/auro-button.js index cb3f24a..248bb09 100644 --- a/src/auro-button.js +++ b/src/auro-button.js @@ -5,9 +5,13 @@ import { LitElement } from "lit"; import { html } from 'lit/static-html.js'; + import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; + import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; +import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; + import styleCss from "./style-css.js"; import colorCss from "./color-css.js"; import tokensCss from "./tokens-css.js"; @@ -150,6 +154,18 @@ export class AuroButton extends LitElement { }; } + /** + * This will register this element with the browser. + * @param {string} [name="auro-button"] - The name of element that you want to register to. + * + * @example + * AuroButton.register("custom-button") // this will register this element to + * + */ + static register(name = "auro-button") { + RuntimeUtils.default.prototype.registerComponent(name, AuroButton); + } + /** * Internal method to apply focus to the HTML5 button. * @private @@ -231,8 +247,3 @@ export class AuroButton extends LitElement { `; } } - -// default internal definition -if (!customElements.get("auro-button")) { - customElements.define("auro-button", AuroButton); -} diff --git a/test/auro-button.test.js b/test/auro-button.test.js index 4dbe531..093e059 100644 --- a/test/auro-button.test.js +++ b/test/auro-button.test.js @@ -7,7 +7,6 @@ /* eslint-disable no-undef */ import { fixture, html, expect, elementUpdated } from '@open-wc/testing'; import { AuroButton } from '../src/auro-button.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; import '../index.js'; describe('auro-button', () => { @@ -33,7 +32,7 @@ describe('auro-button', () => { }); it('successfully registers custom component', async () => { - RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton); + AuroButton.register('custom-button'); expect(typeof customElements.get('custom-button')).to.equal(typeof AuroButton); });