feat(atomic): add functionality arrow button scroll

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -69,7 +69,6 @@ AtomicSearchBoxQuerySuggestions,
 AtomicSearchBoxRecentQueries,
 AtomicSearchInterface,
 AtomicSearchLayout,
-AtomicSegmentedFacetScrollable,
 AtomicSmartSnippet,
 AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
@@ -151,7 +150,6 @@ AtomicSearchBoxQuerySuggestions,
 AtomicSearchBoxRecentQueries,
 AtomicSearchInterface,
 AtomicSearchLayout,
-AtomicSegmentedFacetScrollable,
 AtomicSmartSnippet,
 AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -1331,25 +1331,6 @@ export class AtomicSearchLayout {
 }
 
 
-export declare interface AtomicSegmentedFacetScrollable extends Components.AtomicSegmentedFacetScrollable {}
-
-@ProxyCmp({
-  defineCustomElementFn: undefined
-})
-@Component({
-  selector: 'atomic-segmented-facet-scrollable',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>'
-})
-export class AtomicSegmentedFacetScrollable {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
 export declare interface AtomicSmartSnippet extends Components.AtomicSmartSnippet {}
 
 @ProxyCmp({

packages/atomic-react/src/components/stencil-generated/index.ts

@@ -70,7 +70,6 @@ export const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/createReactComponent
 export const AtomicSearchBoxRecentQueries = /*@__PURE__*/createReactComponent<JSX.AtomicSearchBoxRecentQueries, HTMLAtomicSearchBoxRecentQueriesElement>('atomic-search-box-recent-queries');
 export const AtomicSearchInterface = /*@__PURE__*/createReactComponent<JSX.AtomicSearchInterface, HTMLAtomicSearchInterfaceElement>('atomic-search-interface');
 export const AtomicSearchLayout = /*@__PURE__*/createReactComponent<JSX.AtomicSearchLayout, HTMLAtomicSearchLayoutElement>('atomic-search-layout');
-export const AtomicSegmentedFacetScrollable = /*@__PURE__*/createReactComponent<JSX.AtomicSegmentedFacetScrollable, HTMLAtomicSegmentedFacetScrollableElement>('atomic-segmented-facet-scrollable');
 export const AtomicSmartSnippet = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippet, HTMLAtomicSmartSnippetElement>('atomic-smart-snippet');
 export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetFeedbackModal, HTMLAtomicSmartSnippetFeedbackModalElement>('atomic-smart-snippet-feedback-modal');
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');

packages/atomic/src/components/common/button.tsx

@@ -50,6 +50,9 @@ export const Button: FunctionalComponent<ButtonProps> = (props, children) => {
       if (props.form) {
         buttonEl?.setAttribute('form', props.form);
       }
+      if (props.ariaHidden) {
+        buttonEl?.setAttribute('aria-hidden', props.ariaHidden);
+      }
       props.ref?.(buttonEl);
     },
   };

packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss

@@ -1,9 +1,8 @@
 @import '../../../global/global.pcss';
 
 .wrapper-segmented {
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
+  @mixin hide-scrollbar;
 }
 .wrapper-segmented::-webkit-scrollbar {
-  display: none; /* Safari and Chrome */
+  @mixin hide-scrollbar;
 }

packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx

@@ -3,32 +3,81 @@ import ArrowRightIcon from 'coveo-styleguide/resources/icons/svg/arrow-right-rou
 import ArrowLeftIcon from 'coveo-styleguide/resources/icons/svg/arrow-left-rounded.svg';
 import {Button} from '../../common/button';
 
+type ArrowDirection = 'right' | 'left';
+
+/**
+ * @internal
+ * An 'atomic-segmented-facet-scrollable' wraps around one or several 'atomic-segmented-facet' to provide horizontal scrolling capabilities
+ * @part scrollableContainer - wrapper for the entire component including the horizontalScroll and the arrow buttons
+ * @part horizontalScroll - The scrollable container for the segmented facets
+ * @part left-arrow-box - The left arrow box containing both the left arrow button and the fade
+ * @part right-arrow-box - The right arrow box containing both the right arrow button and the fade
+ * @part arrow-button - The arrow button used to scroll left or right
+ * @part fade - The white to transparent gradient
+ */
+
 @Component({
   tag: 'atomic-segmented-facet-scrollable',
   styleUrl: 'atomic-segmented-facet-scrollable.pcss',
   shadow: true,
 })
 export class AtomicSegmentedFacetScrollable {
-  render() {
+  private horizontalScroll?: HTMLDivElement;
+
+  private slideHorizontally(direction: ArrowDirection) {
+    const container = this.horizontalScroll;
+    const pixelsToScroll = container ? container.clientWidth * 0.75 : 700;
+
+    if (container === null || !container) {
+      return;
+    }
+    if (direction === 'left') {
+      container.scrollLeft -= pixelsToScroll;
+    } else {
+      container.scrollLeft += pixelsToScroll;
+    }
+  }
+
+  private renderArrow(direction: ArrowDirection) {
+    const isLeft: boolean = direction === 'left';
     return (
-      <div class="flex h-9">
+      <div part={`${direction}-arrow-box`}>
         <Button
+          part="arrow-button"
           style="square-neutral"
-          class="flex shrink-0 basis-8 justify-center items-center rounded"
+          class={`flex shrink-0 basis-8 justify-center items-center rounded absolute z-10 w-10 top-0 bottom-0 ${
+            isLeft ? 'left-0' : 'right-0'
+          }`}
           ariaHidden="true"
+          onClick={() => this.slideHorizontally(direction)}
         >
-          <atomic-icon class="w-3.5" icon={ArrowLeftIcon}></atomic-icon>
+          <atomic-icon
+            class="w-3.5"
+            icon={isLeft ? ArrowLeftIcon : ArrowRightIcon}
+          ></atomic-icon>
         </Button>
-        <div class="wrapper-segmented flex flex-row overflow-x-scroll">
+        <div
+          part="fade"
+          class={`w-16 h-10 absolute top-0  z-[5] pointer-events-none from-background-80 ${
+            isLeft ? 'bg-gradient-to-r left-0' : 'bg-gradient-to-l right-0'
+          }`}
+        ></div>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div part="scrollableContainer" class="flex h-10 relative">
+        {this.renderArrow('left')}
+        <div
+          part="horizontalScroll"
+          class="wrapper-segmented flex flex-row ml-10 mr-10 overflow-x-scroll scroll-smooth"
+          ref={(el) => (this.horizontalScroll = el as HTMLDivElement)}
+        >
           <slot></slot>
         </div>
-        <Button
-          style="square-neutral"
-          class="flex shrink-0 basis-8 justify-center items-center rounded"
-          ariaHidden="true"
-        >
-          <atomic-icon class="w-3.5" icon={ArrowRightIcon}></atomic-icon>
-        </Button>
+        {this.renderArrow('right')}
       </div>
     );
   }

packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx

@@ -25,6 +25,8 @@ import {Bindings} from '../../atomic-search-interface/atomic-search-interface';
 
 /**
  * @internal
+ * An `atomic-segmented-facet` displays a facet of the results for the current query in a horizontal aspect
+ * @part segmentedContainer - A container that holds the segmented facets
  */
 @Component({
   tag: 'atomic-segmented-facet',
@@ -101,7 +103,7 @@ export class AtomicSegmentedFacet
   }
 
   private renderValuesContainer(children: VNode[]) {
-    const classes = 'box-container flex';
+    const classes = 'box-container flex h-10';
     return (
       <FacetValuesGroup i18n={this.bindings.i18n} label={this.label}>
         <ul class={classes} part="values">
@@ -156,7 +158,10 @@ export class AtomicSegmentedFacet
     }
 
     return (
-      <div class="flex whitespace-nowrap h-9 items-center">
+      <div
+        part="segmentedContainer"
+        class="flex whitespace-nowrap h-10 items-center"
+      >
         {this.renderLabel()}
         {this.renderValues()}
       </div>

packages/atomic/src/global/polyfills.pcss

@@ -18,3 +18,12 @@
     height: $fallback-height;
   }
 }
+
+@define-mixin hide-scrollbar {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+}

packages/atomic/tailwind.config.js

@@ -50,6 +50,10 @@ module.exports = {
         'desktop-only': {min: '1024px'},
         'mobile-only': {raw: 'not all and (min-width: 1024px)'},
       },
+      gradientColorStops: (theme) => ({
+        ...theme("colors"),
+        'background-80': 'var(--atomic-background) 80%',
+      }),
       gridTemplateColumns: {
         'min-1fr': 'min-content 1fr',
       },