Add optional gradient to SwirlCarousel

.changeset/seven-taxis-refuse.md

@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add optional gradient to SwirlCarousel

packages/swirl-components/src/components.d.ts

@@ -409,6 +409,7 @@ export namespace Components {
      * slot - The slides
      */
     interface SwirlCarousel {
+        "fade"?: boolean;
         "label": string;
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;
@@ -6086,6 +6087,7 @@ declare namespace LocalJSX {
      * slot - The slides
      */
     interface SwirlCarousel {
+        "fade"?: boolean;
         "label": string;
         "loopAround"?: boolean;
         "nextSlideButtonLabel"?: string;

packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css

@@ -2,20 +2,17 @@
 
 :host {
   --swirl-carousel-spacing: var(--s-space-16);
+  --swirl-carousel-padding-block: var(--s-space-24);
 
   position: relative;
   display: block;
   overflow: hidden;
   width: 100%;
-  margin-top: calc(-1 * var(--s-space-24));
-  margin-bottom: calc(-1 * var(--s-space-24));
+  margin-top: calc(-1 * var(--swirl-carousel-padding-block));
+  margin-bottom: calc(-1 * var(--swirl-carousel-padding-block));
 
   &(:hover) {
-    & .carousel__previous-slide-button {
-      pointer-events: auto;
-      opacity: 1;
-    }
-
+    & .carousel__previous-slide-button,
     & .carousel__next-slide-button {
       pointer-events: auto;
       opacity: 1;
@@ -31,6 +28,41 @@
   position: relative;
   overflow: hidden;
   width: 100%;
+
+  &:before,
+  &:after {
+    content: '';
+    width: var(--s-space-32);
+    height: calc(100% - var(--swirl-carousel-padding-block) * 2);
+    position: absolute;
+    top: var(--swirl-carousel-padding-block);
+    z-index: 1;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    opacity: 0;
+  }
+
+  &:before {
+    left: 0;
+    background: linear-gradient(90deg, var(--s-background-default) 0%, transparent 100%);
+  }
+
+  &:after {
+    right: 0;
+    background: linear-gradient(270deg, var(--s-background-default) 0%, transparent 100%);
+  }
+}
+
+.carousel--fade {
+  &:before,
+  &:after {
+    opacity: 1;
+  }
+}
+
+.carousel--is-at-start:before,
+.carousel--is-at-end:after {
+  opacity: 0;
 }
 
 .carousel__slides {
@@ -39,7 +71,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  padding: var(--s-space-24) var(--s-space-16);
+  padding: var(--swirl-carousel-padding-block) var(--s-space-16);
   scroll-padding: var(--s-space-16);
   scrollbar-width: none;
   scroll-snap-type: x mandatory;
@@ -49,19 +81,22 @@
     display: none;
   }
 
-  & ::slotted(*) {
+  & ::slotted(*:not(:first-of-type)) {
     margin-left: var(--swirl-carousel-spacing);
+  }
+
+  & ::slotted(*) {
     flex-grow: 0;
     flex-shrink: 0;
     scroll-snap-align: start;
   }
 }
 
-.carousel__previous-slide-button {
+.carousel__previous-slide-button,
+.carousel__next-slide-button {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   top: calc(50% - var(--s-space-12));
-  left: var(--s-space-4);
   visibility: hidden;
   transition: opacity 0.2s;
   transform: translateY(-50%) scale(0.72);
@@ -73,18 +108,10 @@
   }
 }
 
+.carousel__previous-slide-button {
+  left: var(--s-space-4);
+}
+
 .carousel__next-slide-button {
-  position: absolute;
-  z-index: 1;
-  top: calc(50% - var(--s-space-12));
   right: var(--s-space-4);
-  visibility: hidden;
-  transition: opacity 0.2s;
-  transform: translateY(-50%) scale(0.72);
-  pointer-events: none;
-  opacity: 0;
-
-  @media (--from-tablet) {
-    visibility: visible;
-  }
 }

packages/swirl-components/src/components/swirl-carousel/swirl-carousel.spec.tsx

@@ -12,7 +12,7 @@ describe("swirl-carousel", () => {
     expect(page.root).toEqualHtml(`
       <swirl-carousel aria-roledescription="carousel" role="group" style="--swirl-carousel-spacing: 16px;">
         <mock:shadow-root>
-          <div class="carousel">
+          <div class="carousel carousel--is-at-end carousel--is-at-start">
             <div aria-live="polite" class="carousel__slides">
               <slot></slot>
             </div>

packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx

@@ -11,6 +11,7 @@ import {
   State,
 } from "@stencil/core";
 import { debounce } from "../../utils";
+import classnames from "classnames";
 
 export type SwirlCarouselSpacing =
   | "0"
@@ -52,6 +53,7 @@ export class SwirlCarousel {
   @Prop() label!: string;
   @Prop() nextSlideButtonLabel?: string = "Next slide";
   @Prop() previousSlideButtonLabel?: string = "Previous slide";
+  @Prop() fade?: boolean = false;
   @Prop() loopAround?: boolean = false;
   @Prop() paddingInlineEnd?: SwirlCarouselPadding;
   @Prop() paddingInlineStart?: SwirlCarouselPadding;
@@ -208,13 +210,19 @@ export class SwirlCarousel {
         : undefined,
     };
 
+    const className = classnames("carousel", {
+      "carousel--fade": this.fade,
+      "carousel--is-at-start": this.isAtStart,
+      "carousel--is-at-end": this.isAtEnd,
+    });
+
     return (
       <Host
         aria-label={this.label}
         aria-roledescription="carousel"
         role="group"
       >
-        <div class="carousel">
+        <div class={className}>
           {this.isScrollable && !this.isAtStart && (
             <swirl-button
               class="carousel__previous-slide-button"

packages/swirl-components/vscode-data.json

@@ -1626,6 +1626,10 @@
         "value": "slot - The slides"
       },
       "attributes": [
+        {
+          "name": "fade",
+          "description": ""
+        },
         {
           "name": "label",
           "description": ""