-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(api): add register static method #77
- Update dependency versions
- `AuroCard.register` is to easily register the element without extra importing
- `import "@aurodesignsystem/auro-card"` will still register this element to <auro-card>
- `import { AuroCard } from '../src/auro-card` wont register this element until `AuroCard.register` gets called
- Fixed the typo on Recommended Use and Version Control: `clement` -> `element`- Loading branch information
Showing
12 changed files
with
4,290 additions
and
2,048 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ | ||
| import { AuroCard } from '../src/auro-card.js'; | ||
|
|
||
| AuroCard.register(); | ||
| AuroCard.register('custom-card'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { css, LitElement } from 'lit'; | ||
| import { html } from 'lit/static-html.js'; | ||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; | ||
| import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; | ||
| import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/src/auro-hyperlink.js'; | ||
|
|
||
| var hyperlinkVersion = '4.0.2'; | ||
|
|
||
| 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}:host{display:inline-flex;flex-direction:column}:host ::slotted(img){display:block;object-fit:cover;width:100%}:host::part(imageWrapper){display:flex;justify-content:center;align-items:center}:host .imageWrapper{display:flex;justify-content:center;align-items:center}:host .content{padding:var(--ds-size-200, 1rem) 0;padding-top:0}:host([center]){text-align:center}:host([variant=inset-content])::part(content),:host([href])::part(content){padding:var(--ds-size-200, 1rem);padding-top:0;overflow:hidden;text-wrap:wrap}:host([variant=inset-container]){padding:var(--ds-size-400, 2rem) var(--ds-size-200, 1rem)}:host([variant=inset-stretch])::part(imageWrapper){margin-top:var(--ds-size-400, 2rem)}:host([variant=inset-stretch])::part(content){margin-bottom:var(--ds-size-400, 2rem);padding-bottom:0}:host([border]){border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);overflow:hidden}:host([href]) [auro-hyperlink]{border-radius:var(--ds-border-radius, 0.375rem);overflow:hidden;box-shadow:var(--ds-elevation-100, 0px 0px 5px rgba(0, 0, 0, 0.15));position:relative}:host([href]) [auro-hyperlink]::part(link){text-decoration:none;color:inherit}:host([href]) [auro-hyperlink]::part(targetIcon){position:absolute;top:unset;bottom:var(--ds-size-50, 0.25rem);right:var(--ds-size-50, 0.25rem)}:host([href]) [auro-hyperlink]:focus{outline-width:1px;outline-style:solid;border-radius:var(--ds-border-radius, 0.375rem);color:inherit}:host([href]) [auro-hyperlink]:hover{outline-width:1px;outline-style:solid;outline-offset:-1px;box-shadow:var(--ds-elevation-200, 0px 0px 5px rgba(0, 0, 0, 0.15));color:inherit}`; | ||
|
|
||
| var tokensCss = css`:host{--ds-auro-card-border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-card-link-border-color: transparent}`; | ||
|
|
||
| var colorCss = css`:host([border]){border-color:var(--ds-auro-card-border-color)}:host([href]) [auro-hyperlink]{outline-color:var(--ds-auro-card-link-border-color);color:inherit}:host([href]) [auro-hyperlink]:focus{--ds-auro-card-link-border-color: var(--ds-color-border-ui-active-default, #225296)}`; | ||
|
|
||
| // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license | ||
| // See LICENSE in the project root for license information. | ||
|
|
||
|
|
||
| // See https://git.io/JJ6SJ for "How to document your components using JSDoc" | ||
| /** | ||
| * The `<auro-card>` element provides users a flexible way to convey a summary of information. | ||
| * | ||
| * @attr {String} variant - Sets the variant of the card. Options `inset-content`, `inset-container`, `inset-stretch`. | ||
| * @attr {Boolean} border - Adds desired UI border to the `auro-card` element. | ||
| * @attr {Boolean} center - Centers content within the scope of the `auro-card`. | ||
| * @attr {String} href - Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot. | ||
| * @attr {String} rel - Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel). | ||
| * @attr {String} role - Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role). | ||
| * @attr {String} target - Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target). | ||
| * @slot image - Content slot for image content. | ||
| * @slot header - Content slot for string text header content. | ||
| * @slot description - Content slot for string text description content. | ||
| * @slot cta - Content slot for call-to-action content. | ||
| * @csspart content - Apply styles to the outer string text container. | ||
| * @csspart link - Apply styles to the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#link) element. | ||
| * @csspart imageWrapper - Apply styles to the outer image slot container. | ||
| * @csspart image - Apply styles to the named image slot container. | ||
| * @csspart header - Apply styles to the named header slot container. | ||
| * @csspart description - Apply styles to the named description slot container. | ||
| * @csspart cta - Apply styles to the named cta slot container. | ||
| */ | ||
|
|
||
| class AuroCard extends LitElement { | ||
| constructor () { | ||
| super(); | ||
|
|
||
| // Properly defines the role of this new custom element for screen readers. | ||
| this.setAttribute('role', 'article'); | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| this.runtimeUtils = new AuroLibraryRuntimeUtils(); | ||
|
|
||
| const versioning = new AuroDependencyVersioning(); | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| this.hyperlinkTag = versioning.generateTag('auro-hyperlink', hyperlinkVersion, AuroHyperlink); | ||
| } | ||
|
|
||
| static get styles() { | ||
| return [ | ||
| styleCss, | ||
| tokensCss, | ||
| colorCss | ||
| ]; | ||
| } | ||
|
|
||
| static get properties() { | ||
| return { | ||
| variant: { | ||
| type: String, | ||
| reflect: true, | ||
| }, | ||
| href: { | ||
| type: String, | ||
| reflect: true, | ||
| }, | ||
| rel: { | ||
| type: String, | ||
| reflect: true, | ||
| }, | ||
| role: { | ||
| type: String, | ||
| reflect: true, | ||
| }, | ||
| target: { | ||
| type: String, | ||
| reflect: true, | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * This will register this element with the browser. | ||
| * @param {string} [name="auro-card"] - The name of element that you want to register to. | ||
| * | ||
| * @example | ||
| * AuroCard.register("custom-card") // this will register this element to <custom-card/> | ||
| * | ||
| */ | ||
| static register(name = "auro-card") { | ||
| AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCard); | ||
| } | ||
|
|
||
| firstUpdated() { | ||
| // Add the tag name as an attribute if it is different than the component name | ||
| this.runtimeUtils.handleComponentTagRename(this, 'auro-card'); | ||
| } | ||
|
|
||
| // function that renders the HTML and CSS into the scope of the component | ||
| render() { | ||
| const cardContent = html` | ||
| <div class="imageWrapper" part="imageWrapper"> | ||
| <slot name="image" part="image"></slot> | ||
| </div> | ||
| <div id="content-within" class="content" part="content"> | ||
| <slot name="header" part="header"></slot> | ||
| <slot name="description" part="description"></slot> | ||
| <slot name="cta" part="cta"></slot> | ||
| </div> | ||
| `; | ||
|
|
||
| return html` | ||
| ${this.href | ||
| ? html` | ||
| <${this.hyperlinkTag} | ||
| aria-labelledby="content-within" | ||
| href="${ifDefined(this.href ? this.href : undefined)}" | ||
| rel="${ifDefined(this.rel ? this.rel : undefined)}" | ||
| role="${ifDefined(this.role ? this.role : undefined)}" | ||
| target="${ifDefined(this.target ? this.target : undefined)}" | ||
| > | ||
| ${cardContent} | ||
| </${this.hyperlinkTag}>` | ||
| : cardContent | ||
| } | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ | ||
|
|
||
| AuroCard.register(); | ||
| AuroCard.register('custom-card'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| import { AuroCard } from './src/auro-card.js'; | ||
| import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; | ||
|
|
||
| RuntimeUtils.default.prototype.registerComponent('custom-card', AuroCard); | ||
| AuroCard.register(); |
Oops, something went wrong.