From 7bb2d1c17e60d4fd924f04b4b319fca3b62e3d8a Mon Sep 17 00:00:00 2001 From: mbenkirane-coveo <97299176+mbenkirane-coveo@users.noreply.github.com> Date: Tue, 21 Jun 2022 12:22:40 -0400 Subject: [PATCH] feat(atomic): add segmented scrollable component basic structure (#2100) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * basic structure https://coveord.atlassian.net/browse/KIT-1722 * draft (doesn't work) https://coveord.atlassian.net/browse/KIT-1722 * add index example, use slot https://coveord.atlassian.net/browse/KIT-1722 * styling shadowroot attempt https://coveord.atlassian.net/browse/KIT-1722 * css for segmented scrollable https://coveord.atlassian.net/browse/KIT-1722 * arrow buttons added https://coveord.atlassian.net/browse/KIT-1722 * adjusted height https://coveord.atlassian.net/browse/KIT-1722 * changed from clickable div to button https://coveord.atlassian.net/browse/KIT-1722 * removed comments https://coveord.atlassian.net/browse/KIT-1722 Co-authored-by: Jean-Félix Thibodeau --- .../atomic-angular.module.ts | 2 + .../src/lib/stencil-generated/components.ts | 19 ++++++++++ .../src/components/stencil-generated/index.ts | 1 + packages/atomic/src/components.d.ts | 13 +++++++ .../atomic/src/components/common/button.tsx | 2 + .../atomic-segmented-facet-scrollable.pcss | 9 +++++ .../atomic-segmented-facet-scrollable.tsx | 37 +++++++++++++++++++ .../atomic-segmented-facet.tsx | 4 +- packages/atomic/src/pages/index.html | 3 ++ 9 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss create mode 100644 packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts index f9005cd625d..aa470784857 100644 --- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts +++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts @@ -69,6 +69,7 @@ AtomicSearchBoxQuerySuggestions, AtomicSearchBoxRecentQueries, AtomicSearchInterface, AtomicSearchLayout, +AtomicSegmentedFacetScrollable, AtomicSmartSnippet, AtomicSmartSnippetFeedbackModal, AtomicSmartSnippetSuggestions, @@ -150,6 +151,7 @@ AtomicSearchBoxQuerySuggestions, AtomicSearchBoxRecentQueries, AtomicSearchInterface, AtomicSearchLayout, +AtomicSegmentedFacetScrollable, AtomicSmartSnippet, AtomicSmartSnippetFeedbackModal, AtomicSmartSnippetSuggestions, diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts index affaecea137..d707f2ad2b6 100644 --- a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts +++ b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts @@ -1331,6 +1331,25 @@ export class AtomicSearchLayout { } +export declare interface AtomicSegmentedFacetScrollable extends Components.AtomicSegmentedFacetScrollable {} + +@ProxyCmp({ + defineCustomElementFn: undefined +}) +@Component({ + selector: 'atomic-segmented-facet-scrollable', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '' +}) +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({ diff --git a/packages/atomic-react/src/components/stencil-generated/index.ts b/packages/atomic-react/src/components/stencil-generated/index.ts index 38f2abfb774..2f05ddbcf02 100644 --- a/packages/atomic-react/src/components/stencil-generated/index.ts +++ b/packages/atomic-react/src/components/stencil-generated/index.ts @@ -70,6 +70,7 @@ export const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/createReactComponent export const AtomicSearchBoxRecentQueries = /*@__PURE__*/createReactComponent('atomic-search-box-recent-queries'); export const AtomicSearchInterface = /*@__PURE__*/createReactComponent('atomic-search-interface'); export const AtomicSearchLayout = /*@__PURE__*/createReactComponent('atomic-search-layout'); +export const AtomicSegmentedFacetScrollable = /*@__PURE__*/createReactComponent('atomic-segmented-facet-scrollable'); export const AtomicSmartSnippet = /*@__PURE__*/createReactComponent('atomic-smart-snippet'); export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent('atomic-smart-snippet-feedback-modal'); export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent('atomic-smart-snippet-suggestions'); diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts index 541f9d3bb3e..df6f529387d 100644 --- a/packages/atomic/src/components.d.ts +++ b/packages/atomic/src/components.d.ts @@ -1014,6 +1014,8 @@ export namespace Components { "sortCriteria": FacetSortCriterion; "withSearch": boolean; } + interface AtomicSegmentedFacetScrollable { + } interface AtomicSmartSnippet { /** * When the answer is partly hidden, how much of its height (in pixels) should be visible. @@ -1593,6 +1595,12 @@ declare global { prototype: HTMLAtomicSegmentedFacetElement; new (): HTMLAtomicSegmentedFacetElement; }; + interface HTMLAtomicSegmentedFacetScrollableElement extends Components.AtomicSegmentedFacetScrollable, HTMLStencilElement { + } + var HTMLAtomicSegmentedFacetScrollableElement: { + prototype: HTMLAtomicSegmentedFacetScrollableElement; + new (): HTMLAtomicSegmentedFacetScrollableElement; + }; interface HTMLAtomicSmartSnippetElement extends Components.AtomicSmartSnippet, HTMLStencilElement { } var HTMLAtomicSmartSnippetElement: { @@ -1739,6 +1747,7 @@ declare global { "atomic-search-interface": HTMLAtomicSearchInterfaceElement; "atomic-search-layout": HTMLAtomicSearchLayoutElement; "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement; + "atomic-segmented-facet-scrollable": HTMLAtomicSegmentedFacetScrollableElement; "atomic-smart-snippet": HTMLAtomicSmartSnippetElement; "atomic-smart-snippet-answer": HTMLAtomicSmartSnippetAnswerElement; "atomic-smart-snippet-expandable-answer": HTMLAtomicSmartSnippetExpandableAnswerElement; @@ -2717,6 +2726,8 @@ declare namespace LocalJSX { "sortCriteria"?: FacetSortCriterion; "withSearch"?: boolean; } + interface AtomicSegmentedFacetScrollable { + } interface AtomicSmartSnippet { /** * When the answer is partly hidden, how much of its height (in pixels) should be visible. @@ -2937,6 +2948,7 @@ declare namespace LocalJSX { "atomic-search-interface": AtomicSearchInterface; "atomic-search-layout": AtomicSearchLayout; "atomic-segmented-facet": AtomicSegmentedFacet; + "atomic-segmented-facet-scrollable": AtomicSegmentedFacetScrollable; "atomic-smart-snippet": AtomicSmartSnippet; "atomic-smart-snippet-answer": AtomicSmartSnippetAnswer; "atomic-smart-snippet-expandable-answer": AtomicSmartSnippetExpandableAnswer; @@ -3028,6 +3040,7 @@ declare module "@stencil/core" { "atomic-search-interface": LocalJSX.AtomicSearchInterface & JSXBase.HTMLAttributes; "atomic-search-layout": LocalJSX.AtomicSearchLayout & JSXBase.HTMLAttributes; "atomic-segmented-facet": LocalJSX.AtomicSegmentedFacet & JSXBase.HTMLAttributes; + "atomic-segmented-facet-scrollable": LocalJSX.AtomicSegmentedFacetScrollable & JSXBase.HTMLAttributes; "atomic-smart-snippet": LocalJSX.AtomicSmartSnippet & JSXBase.HTMLAttributes; "atomic-smart-snippet-answer": LocalJSX.AtomicSmartSnippetAnswer & JSXBase.HTMLAttributes; "atomic-smart-snippet-expandable-answer": LocalJSX.AtomicSmartSnippetExpandableAnswer & JSXBase.HTMLAttributes; diff --git a/packages/atomic/src/components/common/button.tsx b/packages/atomic/src/components/common/button.tsx index 95ef0b70d00..bd4ce1f26af 100644 --- a/packages/atomic/src/components/common/button.tsx +++ b/packages/atomic/src/components/common/button.tsx @@ -22,6 +22,7 @@ export interface ButtonProps { ariaChecked?: string; ariaCurrent?: string; ariaControls?: string; + ariaHidden?: string; title?: string; ref?(element?: HTMLButtonElement): void; } @@ -43,6 +44,7 @@ export const Button: FunctionalComponent = (props, children) => { 'aria-checked': props.ariaChecked, 'aria-current': props.ariaCurrent, 'aria-controls': props.ariaControls, + 'aria-hidden': props.ariaHidden, disabled: props.disabled, ref(buttonEl?: HTMLButtonElement) { if (props.form) { diff --git a/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss b/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss new file mode 100644 index 00000000000..327a90e21da --- /dev/null +++ b/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss @@ -0,0 +1,9 @@ +@import '../../../global/global.pcss'; + +.wrapper-segmented { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.wrapper-segmented::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} diff --git a/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx b/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx new file mode 100644 index 00000000000..8c211bda6b5 --- /dev/null +++ b/packages/atomic/src/components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx @@ -0,0 +1,37 @@ +import {Component, Element, h} from '@stencil/core'; +import ArrowRightIcon from 'coveo-styleguide/resources/icons/svg/arrow-right-rounded.svg'; +import ArrowLeftIcon from 'coveo-styleguide/resources/icons/svg/arrow-left-rounded.svg'; +import {Button} from '../../common/button'; + +@Component({ + tag: 'atomic-segmented-facet-scrollable', + styleUrl: 'atomic-segmented-facet-scrollable.pcss', + shadow: true, +}) +export class AtomicSegmentedFacetScrollable { + @Element() private host!: HTMLElement; + + render() { + return ( +
+ +
+ +
+ +
+ ); + } +} diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx index 626785c5cf9..7918b6659c0 100644 --- a/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx +++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx @@ -143,7 +143,7 @@ export class AtomicSegmentedFacet if (!this.label) { return; } - return {this.label}:; + return {this.label}:; } public render() { @@ -156,7 +156,7 @@ export class AtomicSegmentedFacet } return ( -
+
{this.renderLabel()} {this.renderValues()}
diff --git a/packages/atomic/src/pages/index.html b/packages/atomic/src/pages/index.html index 4b9d3fb657a..696e24151d3 100644 --- a/packages/atomic/src/pages/index.html +++ b/packages/atomic/src/pages/index.html @@ -194,6 +194,9 @@ + + +