fix: add correct gradient behavior #47 #51

AlaskaAirlines · Nov 5, 2024 · c337420 · c337420
1 parent d6de246
commit c337420
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 33 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -498,4 +498,21 @@ Used for all elements inside the scrolling carousel.
 </auro-carousel>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-carousel-gradient-color-one: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
+  --ds-auro-carousel-gradient-color-two: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+
   </head>
   <body>
     <main></main>
@@ -48,5 +49,13 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://unpkg.com/@aurodesignsystem/auro-pane@latest/dist/auro-pane__bundled.js" type="module"></script>
+
+    <style>
+      /* --ds-color-background-primary-100-default: orange; */
+
+      :host {
+        --ds-color-background-primary-100-default: orange;
+      }
+    </style>
   </body>
 </html>
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -139,3 +139,10 @@ Used for all elements inside the scrolling carousel.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/src/auro-carousel.js b/src/auro-carousel.js
@@ -5,7 +5,7 @@
 
 /* eslint-disable max-lines, lit/no-invalid-html, lit/binding-positions */
 
-import { LitElement, css } from "lit";
+import { LitElement } from "lit";
 import { html } from 'lit/static-html.js';
 
 import { classMap } from 'lit/directives/class-map.js';
@@ -25,6 +25,8 @@ import chevronRight from '@alaskaairux/icons/dist/icons/interface/chevron-right.
 import chevronLeft from '@alaskaairux/icons/dist/icons/interface/chevron-left.mjs';
 
 import styleCss from "./style-css.js";
+import colorCss from "./color-css.js";
+import tokensCss from "./tokens-css.js";
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
@@ -92,7 +94,11 @@ export class AuroCarousel extends LitElement {
   }
 
   static get styles() {
-    return [css`${styleCss}`];
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
   }
 
   /**
@@ -380,7 +386,9 @@ export class AuroCarousel extends LitElement {
           ${this.generateIconHtml(chevronLeft.svg)}<span class="util_displayHiddenVisually">Scroll Left</span>
         </${this.buttonTag}>
         <div class="container">
+          <div class="gradient--left"></div>
           <slot @slotchange=${this.handleSlotChange}></slot>
+          <div class="gradient--right"></div>
         </div>
         <${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>

diff --git a/src/color.scss b/src/color.scss
@@ -0,0 +1,22 @@
+// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable selector-class-pattern */
+
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  .gradient {
+    background: var(--ds-auro-carousel-gradient-color-two);
+  }
+
+  .gradient--left {
+    background: linear-gradient(to right, var(--ds-auro-carousel-gradient-color-one), var(--ds-auro-carousel-gradient-color-two));
+  }
+
+  .gradient--right {
+    background: linear-gradient(to left, var(--ds-auro-carousel-gradient-color-one), var(--ds-auro-carousel-gradient-color-two));
+  }  
+}
diff --git a/src/style.scss b/src/style.scss
@@ -102,20 +102,38 @@
 
 .button--left {
   left: 0;
+  z-index: +1; // Ensure the gradient is behind the button without changing the order of the DOM elements
 }
 
 .button--right {
   right: 0;
 }
 
+[class^='gradient'] {
+  position: absolute;
+  top: 0;
+  width: calc(var(--ds-size-1000, $ds-size-1000) + var(--ds-size-500, $ds-size-500) + var(--ds-size-150, $ds-size-150));
+  height: 100%;
+}
+
+.gradient--left {
+  left: 0;
+}
+
+.gradient--right {
+  right: 0;
+}
+
 .carousel--scrolledToStart {
-  .button--left {
+  .button--left,
+  .gradient--left {
     display: none;
   }
 }
 
 .carousel--scrolledToEnd {
-  .button--right {
+  .button--right,
+  .gradient--right {
     display: none;
   }
 }
diff --git a/src/tokens.scss b/src/tokens.scss
@@ -0,0 +1,7 @@
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-carousel-gradient-color-one: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
+  --ds-auro-carousel-gradient-color-two: transparent;
+}
+