Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement theming support and versioned auro components #49

Merged
merged 3 commits into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](

<!-- AURO-GENERATED-CONTENT:END -->

### CSS Custom Property fallbacks

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
[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.

<!-- AURO-GENERATED-CONTENT:END -->

### Define dependency in project component

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
Expand Down
2 changes: 1 addition & 1 deletion demo/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -498,4 +498,4 @@ Used for all elements inside the scrolling carousel.
</auro-carousel>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
</auro-accordion>
1 change: 0 additions & 1 deletion docs/partials/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,4 +139,3 @@ Used for all elements inside the scrolling carousel.
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

545 changes: 272 additions & 273 deletions package-lock.json

Large diffs are not rendered by default.

25 changes: 14 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@
"node": "^18.x || ^20.x "
},
"dependencies": {
"@alaskaairux/icons": "^4.41.1",
"@alaskaairux/icons": "^4.42.0",
"@aurodesignsystem/auro-button": "^7.3.0-beta.6",
"@aurodesignsystem/auro-icon": "^4.5.0-beta.1",
"chalk": "^5.3.0",
"eslint": "^8.57.0",
"lit": "^3.1.4"
},
"peerDependencies": {
Expand All @@ -30,7 +33,7 @@
},
"devDependencies": {
"@aurodesignsystem/auro-library": "^2.6.0",
"@aurodesignsystem/design-tokens": "^4.7.0",
"@aurodesignsystem/design-tokens": "^4.9.0",
"@aurodesignsystem/eslint-config": "^1.3.1",
"@aurodesignsystem/webcorestylesheets": "^5.1.1",
"@commitlint/cli": "^19.3.0",
Expand All @@ -48,27 +51,26 @@
"concurrently": "^8.2.2",
"copyfiles": "^2.4.1",
"core-js": "^3.37.1",
"eslint": "^8.57.0",
"eslint-plugin-jsdoc": "^48.2.12",
"eslint-plugin-jsdoc": "^48.6.0",
"husky": "^9.0.11",
"lodash": "^4.17.21",
"markdown-magic": "^2.6.1",
"nodemon": "^3.1.4",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.38",
"postcss": "^8.4.39",
"postcss-discard-comments": "^7.0.1",
"postcss-selector-replace": "^1.0.2",
"rollup": "^4.18.0",
"rollup": "^4.18.1",
"rollup-plugin-serve": "^1.1.1",
"sass": "^1.77.6",
"sass": "^1.77.7",
"semantic-release": "^24.0.0",
"stylelint": "^16.6.1",
"stylelint-config-idiomatic-order": "^10.0.0",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-order": "^6.0.4",
"stylelint-scss": "^6.3.2",
"typescript": "^5.5.2",
"stylelint-scss": "^6.4.1",
"typescript": "^5.5.3",
"wc-sass-render": "^1.4.0",
"web-component-analyzer": "^2.0.0",
"whatwg-fetch": "^3.6.20",
Expand Down Expand Up @@ -139,7 +141,7 @@
"web components"
],
"scripts": {
"build": "npm-run-all build:sass sass:render types",
"build": "npm-run-all build:version build:sass sass:render types",
"build:test": "npm-run-all test linters",
"build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
"build:ci": "npm-run-all sweep build:release",
Expand All @@ -148,13 +150,14 @@
"build:docs": "node scripts/generateDocs.mjs",
"build:sass": "npm-run-all build:sass:component postCss:component sass:render",
"build:sass:component": "sass --no-source-map src:src",
"build:version": "node scripts/version.mjs",
"build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
"bundler": "rollup -c",
"bundler:test": "rollup -c -w",
"scssLint": "stylelint \"./src/**/*.scss\"",
"dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
"dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
"esLint": "./node_modules/.bin/eslint src/**/*.js",
"esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
"linters": "npm-run-all scssLint esLint",
"preCommit": "node scripts/pre-commit.mjs",
"postCss:component": "node scripts/postCss.mjs",
Expand Down
4 changes: 4 additions & 0 deletions scripts/version.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';

versionWriter.writeDepVersionFile('@aurodesignsystem/auro-button');
versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
57 changes: 41 additions & 16 deletions src/auro-carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,27 @@

// ---------------------------------------------------------------------

/* eslint-disable jsdoc/no-undefined-types, max-lines */
/* eslint-disable jsdoc/no-undefined-types, max-lines, lit/no-invalid-html, lit/binding-positions */

import { LitElement, css } from "lit";
import { html } from 'lit/static-html.js';

import { LitElement, html, css } from "lit";
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';

import styleCss from "./style-css.js";
import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';

import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
import buttonVersion from './buttonVersion';

import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
import iconVersion from './iconVersion';

import chevronRight from '@alaskaairux/icons/dist/icons/interface/chevron-right.mjs';
import chevronLeft from '@alaskaairux/icons/dist/icons/interface/chevron-left.mjs';

import styleCss from "./style-css.js";

// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
/**
* The auro-carousel component displays a group of elements in a scrollable container.
Expand All @@ -33,6 +44,18 @@ export class AuroCarousel extends LitElement {
super();
this.scrollDistance = 300;

const versioning = new AuroDependencyVersioning();

/**
* @private
*/
this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);

/**
* @private
*/
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);

/**
* Whether or not the carousel is scrolled to the start.
* @private
Expand Down Expand Up @@ -62,9 +85,7 @@ export class AuroCarousel extends LitElement {
}

static get styles() {
return css`
${styleCss}
`;
return [css`${styleCss}`];
}

firstUpdated() {
Expand All @@ -85,7 +106,7 @@ export class AuroCarousel extends LitElement {
* This function is called here so that the tests will pass.
* It's called again on DOMContentLoaded so that it will work when carousel
* content doesn't load until after the carousel component.
* e.g. loading auro-pane after auro-carousel.
* Example is loading auro-pane after auro-carousel.
*/
this.actionOnChildrenReady();

Expand Down Expand Up @@ -131,14 +152,18 @@ export class AuroCarousel extends LitElement {
/**
* Internal function to generate the HTML for the icon to use.
* @private
* @param {string} svgContent - The imported svg icon.
* @returns {TemplateResult} - The html template for the icon.
* @param {string} svgContent - The SVG content to be embedded.
* @returns {Element} The HTML element containing the SVG icon.
*/
generateIconHtml(svgContent) {
const dom = new DOMParser().parseFromString(svgContent, 'text/html'),
svg = dom.body.firstChild;
const dom = new DOMParser().parseFromString(svgContent, 'text/html');
const svg = dom.body.firstChild;

svg.setAttribute('slot', 'svg');

const iconHtml = html`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;

return svg;
return iconHtml;
}

/**
Expand Down Expand Up @@ -329,15 +354,15 @@ export class AuroCarousel extends LitElement {
aria-roledescription="carousel"
class="${classMap(carouselClassMap)}"
@scroll=${() => this.setScrollFlags(true)} >
<button @click=${() => this.handleClick(false)} class="button button--left">
<${this.buttonTag} arialabel="chevron-left" iconOnly rounded variant="secondary" @click=${() => this.handleClick(false)} class="button button--left">
${this.generateIconHtml(chevronLeft.svg)}<span class="util_displayHiddenVisually">Scroll Left</span>
</button>
</${this.buttonTag}>
<div class="container">
<slot @slotchange=${this.handleSlotChange}></slot>
</div>
<button @click=${() => this.handleClick(true)} class="button button--right">
<${this.buttonTag} arialabel="chevron-right" iconOnly rounded variant="secondary" @click=${() => this.handleClick(true)} class="button button--right">
${this.generateIconHtml(chevronRight.svg)}<span class="util_displayHiddenVisually">Scroll Right</span>
</button>
</${this.buttonTag}>
</div>
`;
}
Expand Down
1 change: 1 addition & 0 deletions src/buttonVersion.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default '7.3.0-beta.6'
1 change: 1 addition & 0 deletions src/iconVersion.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default '4.5.0-beta.1'
61 changes: 3 additions & 58 deletions src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,7 @@
}

.carousel {
@include auro_breakpoint--sm {
&:before,
&:after {
position: absolute;
z-index: 0;
top: 50%;

display: block;
width: 8.75rem;
height: 100%;

background-image: var(--ds-color-background-gradient-default, $ds-color-background-gradient-default);

content: '';
pointer-events: none;
}

&:before {
left: 0;

transform: translateY(-50%) rotate(180deg);
}

&:after {
right: 0;

transform: translateY(-50%) ;
}
}

overflow-x: scroll;

scroll-behavior: smooth;
scrollbar-width: none;
white-space: nowrap;
Expand Down Expand Up @@ -92,32 +61,25 @@
// https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
.breakpointDetector {
&:before {
display: none;

@include auro_breakpoint--sm {
content: 'sm';
}

display: none;
}
}

.button {
@include auro_breakpoint--sm {
position: absolute;
z-index: 1;
top: 50%;

display: block;
width: 2.5rem;
height: 2.5rem;

padding: 0;

border: 1px solid var(--ds-color-ui-default-default, $ds-color-ui-default-default);
border-radius: 50%;

background: var(--ds-color-base-white, $ds-color-base-white);
color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);

cursor: pointer;

line-height: 0;
Expand All @@ -126,41 +88,24 @@

&:hover {
border: none;

background: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
color: var(--ds-color-base-white, $ds-color-base-white);
}

&:active {
border: none;

background: var(--ds-color-ui-active-default, $ds-color-ui-active-default);
color: var(--ds-color-base-white, $ds-color-base-white);
}
}

display: none;
}

auro-icon {
[auro-icon] {
margin-top: 3px;
}

.button--left {
left: 0;

auro-icon {
margin-right: 2px;
}
}

.button--right {
z-index: 1;
right: 0;

auro-icon {
margin-left: 2px;
}
}

.carousel--scrolledToStart {
Expand Down