diff --git a/.gitignore b/.gitignore index 3b60a93..dc4fd98 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,15 @@ .DS_Store node_modules/ +docTemplates/ .cache/ +## Demo support files +demo/*.css +demo/*.css.map + ## CSS built from Sass process src/*.css +src/*.css.map ## *-css built from sass-render process *-css.js diff --git a/.npmignore b/.npmignore index 2fa6ce7..67f8098 100644 --- a/.npmignore +++ b/.npmignore @@ -1,6 +1,8 @@ # standard ignore *config* *conf* +LICENSE +NOTICE .github/ .gitignore @@ -11,10 +13,17 @@ coverage/ docs/ scripts/ test/ +apiExamples/ +docTemplates/ demo/**/*.css demo/**/*.scss demo/**/*.html +dist/es5.js +dist/auro-*.js +!dist/auro-*__bundled.js +dist/style-css.js + index.html # ignore src diff --git a/.stylelintrc b/.stylelintrc index 6adf515..74abd10 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,9 +1,109 @@ { - "extends": "stylelint-config-recommended", + "extends": ["stylelint-config-recommended", "stylelint-config-standard-scss"], + "plugins": [ + "stylelint-scss" + ], "rules": { - "no-duplicate-selectors": null, - "font-family-no-duplicate-names": null, - "no-descending-specificity": null, - "selector-type-no-unknown": null + "alpha-value-notation": "number", + "at-rule-empty-line-before": [ "always", { + "except": [ + "after-same-name", + "blockless-after-same-name-blockless", + "first-nested", + ], + "ignore": [ + "after-comment", + "blockless-after-blockless" + ] + } ], + "at-rule-no-unknown": null, + "color-function-notation": "modern", + "color-named": "never", + "declaration-block-no-duplicate-custom-properties": true, + "declaration-block-no-duplicate-properties": true, + "declaration-block-no-redundant-longhand-properties": true, + "declaration-no-important": true, + "font-family-name-quotes": "always-where-recommended", + "font-weight-notation": "numeric", + "function-url-no-scheme-relative": true, + "function-url-quotes": "always", + "hue-degree-notation": "angle", + "max-nesting-depth": 2, + "named-grid-areas-no-invalid": true, + "no-empty-source": null, + "no-unknown-animations": true, + "no-invalid-position-at-import-rule": null, + "scss/at-else-closing-brace-newline-after": "always-last-in-chain", + "scss/at-else-closing-brace-space-after": "always-intermediate", + "scss/at-else-empty-line-before": "never", + "scss/at-else-if-parentheses-space-before": "always", + "scss/at-function-parentheses-space-before": "never", + "scss/at-if-closing-brace-newline-after": "always-last-in-chain", + "scss/at-if-closing-brace-space-after": "always-intermediate", + "scss/at-if-no-null": true, + "scss/at-import-partial-extension": null, + "scss/at-mixin-parentheses-space-before": "never", + "scss/at-rule-conditional-no-parentheses": true, + "scss/at-rule-no-unknown": true, + "scss/comment-no-empty": true, + "scss/declaration-nested-properties-no-divided-groups": true, + "scss/dollar-variable-colon-newline-after": "always-multi-line", + "scss/dollar-variable-colon-space-after": "always-single-line", + "scss/dollar-variable-colon-space-before": "never", + "scss/dollar-variable-empty-line-before": [ + "always", + { + "except": [ + "first-nested", + "after-dollar-variable" + ], + "ignore": [ + "after-comment", + "inside-single-line-block" + ] + } + ], + "scss/dollar-variable-first-in-block": [ + true, + { + "ignore": [ + "comments", + "imports" + ] + } + ], + "scss/dollar-variable-no-missing-interpolation": true, + "scss/double-slash-comment-whitespace-inside": "always", + "scss/map-keys-quotes": "always", + "scss/no-duplicate-dollar-variables": true, + "scss/no-duplicate-mixins": true, + "scss/no-global-function-names": true, + "scss/operator-no-newline-after": true, + "scss/operator-no-newline-before": true, + "scss/operator-no-unspaced": true, + "scss/selector-nest-combinators": "always", + "scss/selector-no-redundant-nesting-selector": true, + "selector-attribute-quotes": "always", + "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$", + "selector-id-pattern": "^[a-z][a-zA-Z0-9]+$", + "selector-max-attribute": 1, + "selector-max-class": 1, + "selector-max-combinators": 1, + "selector-max-compound-selectors": 2, + "selector-max-id": 1, + "selector-max-pseudo-class": 2, + "selector-max-type": 1, + "selector-max-universal": 1, + "selector-no-qualifying-type": true, + "selector-pseudo-element-colon-notation": "single", + "selector-type-no-unknown": [ + true, + { + "ignore": [ + "custom-elements" + ] + } + ], + "shorthand-property-no-redundant-values": true } } diff --git a/README.md b/README.md index 26433d1..cfca26c 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,59 @@ -# auro-button + + +# 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. + + + + + +## Responsive support + +`` is responsive by default. The button will assume 100% of the width of its container for views less than [auro_breakpoint--sm](https://alaskaairlines.github.io/WebCoreStyleSheets/#responsive-mixin-auro_breakpoint--sm). -`` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of containing styling and behavior. +Beyond that breakpoint `` will assume the width of the content or a min-width of `8.75rem`, which ever is greater. +If the desired appearance of the `` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `` element. + +## Multi button support + +When the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons`. + + ## UI development browser support + For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport) + + ## Install + [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) +[![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@aurodesignsystem/auro-button?style=for-the-badge)](https://snyk.io/test/npm/@aurodesignsystem/auro-button?tab=issues) ```shell $ npm i @aurodesignsystem/auro-button @@ -18,132 +61,150 @@ $ npm i @aurodesignsystem/auro-button Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer. + + ### Design Token CSS Custom Property dependency + The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens). + + ### CSS Custom Property fallbacks + [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm. Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties. + + ### Define dependency in project component + Defining the component dependency within each component that is using the `` component. -```javascript + + + +```js import "@aurodesignsystem/auro-button"; ``` + **Reference component in HTML** - + + + ```html -Hello World -``` - -## CDN Use +Primary +Secondary +Tertiary +``` + + +## Install bundled assets from CDN -In cases where the project is not able to process JS assets, there are pre-processed assets available for use. + +In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-button__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported. -### Install +We recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle correctly. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag. -Include the following example HTML code in the `` element of your page. + + +### Bundle example code + + ```html + - - - -``` - -**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. - -## Responsive support - -`` is responsive by default. The button will assume 100% of the width of its container for views less than [auro_breakpoint--sm](https://alaskaairlines.github.io/WebCoreStyleSheets/#responsive-mixin-auro_breakpoint--sm). - -Beyond that breakpoint `` will assume the width of the content or a min-width of `8.75rem`, which ever is greater. - -If the desired appearance of the `` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `` element. - -## Multi button support - -When the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons` . - -## Light DOM Support -`` are included in this package for [light DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom#lightdom) support. - -To pass content to the , use the content prop. - -```html - -``` - -### Native form attribute support - -The auro-button shadow DOM web component does not support all the native form attributes that a ` `; } diff --git a/src/style.scss b/src/style.scss index b7dae46..a32c7ed 100644 --- a/src/style.scss +++ b/src/style.scss @@ -3,6 +3,24 @@ // --------------------------------------------------------------------- +/* stylelint-disable + at-rule-no-unknown, + comment-empty-line-before, + scss/dollar-variable-colon-space-after, + scss/dollar-variable-empty-line-before, + scss/dollar-variable-first-in-block, + scss/dollar-variable-pattern, + color-function-notation, + scss/selector-nest-combinators, + selector-class-pattern, + selector-attribute-quotes, + no-descending-specificity, + max-nesting-depth, + declaration-empty-line-before, + property-no-vendor-prefix, + selector-max-class, + no-duplicate-selectors */ + // Import Auro Sass variables @import "./../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables"; @@ -378,6 +396,7 @@ slot { } } } + // auro-button--slim &--slim { padding: var(--auro-size-xs) var(--auro-size-md); @@ -389,24 +408,66 @@ slot { &--iconOnly { ::slotted(auro-icon) { - width: var(--auro-size-300, 24px); - height: var(--auro-size-300, 24px); + width: var(--auro-size-300); + height: var(--auro-size-300); } - padding-left: calc(var(--auro-size-100, 8px) - 2px); - padding-right: calc(var(--auro-size-100, 8px) - 2px); + padding-left: calc(var(--auro-size-100) - var(--auro-size-25)); + padding-right: calc(var(--auro-size-100) - var(--auro-size-25)); + border-radius: 100px; min-width: unset; } &--iconOnlySlim { ::slotted(auro-icon) { - width: calc(var(--auro-size-300, 24px) - 4px); - height: calc(var(--auro-size-300, 24px) - 4px); + width: calc(var(--auro-size-300) - var(--auro-size-50)); + height: calc(var(--auro-size-300) - var(--auro-size-50)); + } + + padding-left: var(--auro-size-50); + padding-right: var(--auro-size-50); + } + + // auro-button--rounded + &--rounded { + border-radius: 100px; + box-shadow: var(--auro-elevation-300); + + height: var(--auro-size-500); + min-width: unset; + + transition: all 300ms ease-out; + + ::slotted(auro-icon) { + width: var(--auro-size-300); + height: var(--auro-size-300); } + } +} + + +:host([rounded]) { + .textSlot { + transition: opacity 300ms ease-in; + opacity: 1; + } +} + +:host([rounded][iconOnly]) { + .textSlot { + opacity: 0; + } + + .textWrapper { + display: none; + } + + .auro-button { + min-width: unset; + padding: unset; - padding-left: var(--auro-size-50, 4px); - padding-right: var(--auro-size-50, 4px); + width: var(--auro-size-600); } } diff --git a/test/auro-button.test.js b/test/auro-button.test.js index 68bf597..2c9860d 100644 --- a/test/auro-button.test.js +++ b/test/auro-button.test.js @@ -5,7 +5,9 @@ /* eslint-disable lit/attribute-value-entities */ /* eslint-disable one-var */ /* eslint-disable no-undef */ -import { fixture, html, expect } from '@open-wc/testing'; +import { fixture, html, expect, elementUpdated } from '@open-wc/testing'; +import { AuroButton } from '../src/auro-button.js'; +import { registerComponent } from '../index.js'; import '../index.js'; describe('auro-button', () => { @@ -30,6 +32,12 @@ describe('auro-button', () => { expect(classList.includes('auro-button')).to.be.true; }); + it('successfully registers custom component', async () => { + registerComponent('test-button'); + + expect(typeof customElements.get('test-button')).to.equal(typeof AuroButton); + }); + it('tests setting autofocus', async () => { const el = await fixture(html` Click Me! @@ -203,4 +211,16 @@ describe('auro-button', () => { await expect(el).to.be.true; }); + + it('default slot is not in DOM when iconOnly attribute is present', async () => { + const el = await fixture(html` + + + + `); + + const slotElement = el.querySelector('slot:not([name])'); + + expect(slotElement).to.equal(null); + }); });