Merge branch 'master' into refactor/atomic-product-template-stories

coveo · Aug 6, 2024 · 5989423 · 5989423
2 parents 9a29f77 + bc2f42a
commit 5989423
Show file tree

Hide file tree

Showing 158 changed files with 903 additions and 341 deletions.
diff --git a/.github/actions/merge-playwright-reports/action.yml b/.github/actions/merge-playwright-reports/action.yml
@@ -15,7 +15,7 @@ runs:
       shell: bash
 
     - name: Upload HTML report
-      uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+      uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       with:
         name: atomic-playwright-report
         path: packages/atomic/playwright-report

diff --git a/.github/actions/playwright-atomic-hosted-pages/action.yml b/.github/actions/playwright-atomic-hosted-pages/action.yml
@@ -11,7 +11,7 @@ runs:
       run: npx playwright test
       working-directory: packages/atomic-hosted-page
       shell: bash
-    - uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+    - uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       if: always()
       with:
         name: atomic-hosted-page-playwright-report

diff --git a/.github/actions/playwright-atomic/action.yml b/.github/actions/playwright-atomic/action.yml
@@ -18,7 +18,7 @@ runs:
       run: npx playwright test --shard=${{ inputs.shardIndex }}/${{ inputs.shardTotal }}
       working-directory: packages/atomic
       shell: bash
-    - uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+    - uses: actions/upload-artifact@89ef406dd8d7e03cfd12d9e0a4a378f454709029 # v4
       if: always()
       with:
         name: blob-report-${{ matrix.shardIndex }}

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -5,7 +5,10 @@ const decoratorPlugin = JSON.stringify([
 
 /** @type {import('prettier').Config} */
 module.exports = {
-  plugins: ['@trivago/prettier-plugin-sort-imports'],
+  plugins: [
+    '@trivago/prettier-plugin-sort-imports',
+    'prettier-plugin-tailwindcss',
+  ],
   bracketSpacing: false,
   singleQuote: true,
   trailingComma: 'es5',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "nx": "19.0.4",
     "patch-package": "8.0.0",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.5",
     "react-syntax-highlighter": "15.5.0",
     "rimraf": "5.0.9",
     "semver": "7.6.3",

diff --git a/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
@@ -103,6 +103,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,
@@ -213,6 +214,7 @@ AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
 AtomicSortDropdown,
 AtomicSortExpression,
+AtomicTabManager,
 AtomicTableElement,
 AtomicText,
 AtomicTimeframe,

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
@@ -2223,6 +2223,28 @@ export class AtomicSortExpression {
 export declare interface AtomicSortExpression extends Components.AtomicSortExpression {}
 
 
+@ProxyCmp({
+  inputs: ['clearFiltersOnTabChange']
+})
+@Component({
+  selector: 'atomic-tab-manager',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['clearFiltersOnTabChange'],
+})
+export class AtomicTabManager {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicTabManager extends Components.AtomicTabManager {}
+
+
 @ProxyCmp({
   inputs: ['label']
 })

diff --git a/packages/atomic-react/src/components/stencil-generated/search/index.ts b/packages/atomic-react/src/components/stencil-generated/search/index.ts
@@ -90,6 +90,7 @@ export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');
 export const AtomicSortDropdown = /*@__PURE__*/createReactComponent<JSX.AtomicSortDropdown, HTMLAtomicSortDropdownElement>('atomic-sort-dropdown');
 export const AtomicSortExpression = /*@__PURE__*/createReactComponent<JSX.AtomicSortExpression, HTMLAtomicSortExpressionElement>('atomic-sort-expression');
+export const AtomicTabManager = /*@__PURE__*/createReactComponent<JSX.AtomicTabManager, HTMLAtomicTabManagerElement>('atomic-tab-manager');
 export const AtomicTableElement = /*@__PURE__*/createReactComponent<JSX.AtomicTableElement, HTMLAtomicTableElementElement>('atomic-table-element');
 export const AtomicText = /*@__PURE__*/createReactComponent<JSX.AtomicText, HTMLAtomicTextElement>('atomic-text');
 export const AtomicTimeframe = /*@__PURE__*/createReactComponent<JSX.AtomicTimeframe, HTMLAtomicTimeframeElement>('atomic-timeframe');

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -3356,6 +3356,9 @@ export namespace Components {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -5490,6 +5493,9 @@ declare global {
         prototype: HTMLAtomicTabElement;
         new (): HTMLAtomicTabElement;
     };
+    /**
+     * @alpha 
+     */
     interface HTMLAtomicTabManagerElement extends Components.AtomicTabManager, HTMLStencilElement {
     }
     var HTMLAtomicTabManagerElement: {
@@ -8879,6 +8885,9 @@ declare namespace LocalJSX {
          */
         "name": string;
     }
+    /**
+     * @alpha 
+     */
     interface AtomicTabManager {
         /**
           * Whether to clear the filters when the active tab changes.
@@ -9917,6 +9926,9 @@ declare module "@stencil/core" {
              */
             "atomic-sort-expression": LocalJSX.AtomicSortExpression & JSXBase.HTMLAttributes<HTMLAtomicSortExpressionElement>;
             "atomic-tab": LocalJSX.AtomicTab & JSXBase.HTMLAttributes<HTMLAtomicTabElement>;
+            /**
+             * @alpha 
+             */
             "atomic-tab-manager": LocalJSX.AtomicTabManager & JSXBase.HTMLAttributes<HTMLAtomicTabManagerElement>;
             /**
              * The `atomic-table-element` element defines a table column in a result list.

diff --git a/...ponents/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss b/...ponents/commerce/atomic-commerce-products-per-page/atomic-commerce-products-per-page.pcss
@@ -1,5 +1,5 @@
 @import '../../../global/global.pcss';
 
 .btn-page {
-  @apply w-10 h-10;
+  @apply h-10 w-10;
 }
diff --git a/.../atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx b/.../atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.tsx
@@ -535,7 +535,7 @@ export class AtomicCommerceSearchBox
             ? 'suggestions-double-list'
             : 'suggestions-single-list'
         }`}
-        class={`flex w-full z-10 absolute left-0 top-full rounded-md bg-background border border-neutral ${
+        class={`bg-background border-neutral absolute left-0 top-full z-10 flex w-full rounded-md border ${
           this.suggestionManager.hasSuggestions &&
           this.isExpanded &&
           !this.isSearchDisabledForEndUser(this.searchBoxState.value)
@@ -604,7 +604,7 @@ export class AtomicCommerceSearchBox
       <textarea
         aria-hidden
         part="textarea-spacer"
-        class="invisible text-lg py-3.5 px-4 w-full"
+        class="invisible w-full px-4 py-3.5 text-lg"
         rows={1}
       ></textarea>
     );

diff --git a/...onents/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss b/...onents/commerce/facets/atomic-commerce-category-facet/atomic-commerce-category-facet.pcss
@@ -11,9 +11,9 @@
 
 [part~='all-categories-button'],
 [part~='parent-button'] {
-  @apply w-full py-2.5 pr-2 pl-7 text-left relative flex items-center;
+  @apply relative flex w-full items-center py-2.5 pl-7 pr-2 text-left;
 }
 
 [part~='back-arrow'] {
-  @apply h-5 w-5 absolute left-1;
+  @apply absolute left-1 h-5 w-5;
 }
diff --git a/.../src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx b/.../src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx
@@ -79,7 +79,7 @@ export class FacetNumberInput {
 
     return (
       <form
-        class="mt-4 px-2 gap-y-0.5"
+        class="mt-4 gap-y-0.5 px-2"
         part="input-form"
         onSubmit={(e) => {
           e.preventDefault();
@@ -133,7 +133,7 @@ export class FacetNumberInput {
           style="outline-primary"
           type="submit"
           part="input-apply-button"
-          class="p-2.5 flex-none truncate"
+          class="flex-none truncate p-2.5"
           ariaLabel={applyAria}
           text={apply}
         ></Button>

diff --git a/.../commerce/product-template-components/atomic-product-children/atomic-product-children.tsx b/.../commerce/product-template-components/atomic-product-children/atomic-product-children.tsx
@@ -146,7 +146,7 @@ export class AtomicProductChildren
 
   private renderLabel() {
     return (
-      <div class="my-2 font-semibold text-neutral-dark">
+      <div class="text-neutral-dark my-2 font-semibold">
         <atomic-commerce-text
           value={this.bindings.i18n.t(this.label)}
         ></atomic-commerce-text>

diff --git a/...rce/product-template-components/atomic-product-description/atomic-product-description.tsx b/...rce/product-template-components/atomic-product-description/atomic-product-description.tsx
@@ -128,7 +128,7 @@ export class AtomicProductDescription
       >
         <atomic-icon
           icon={PlusIcon}
-          class="w-2 ml-1 align-baseline"
+          class="ml-1 w-2 align-baseline"
         ></atomic-icon>{' '}
         {this.bindings.i18n.t('show-more')}
       </Button>

diff --git a/...onents/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx b/...onents/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx
@@ -46,14 +46,14 @@ export class AtomicProductPrice
     return (
       <div class="flex flex-wrap">
         <atomic-product-numeric-field-value
-          class={`truncate break-keep mx-1 ${hasPromotionalPrice && 'text-error'}`}
+          class={`mx-1 truncate break-keep ${hasPromotionalPrice && 'text-error'}`}
           field={hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'}
         >
           <atomic-format-currency currency={currency}></atomic-format-currency>
         </atomic-product-numeric-field-value>
         {hasPromotionalPrice && (
           <atomic-product-numeric-field-value
-            class="truncate break-keep mx-1 text-xl line-through"
+            class="mx-1 truncate break-keep text-xl line-through"
             field="ec_price"
           >
             <atomic-format-currency

diff --git a/...ents/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx b/...ents/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx
@@ -119,7 +119,7 @@ export class AtomicProductRating
         ></Rating>
 
         {this.ratingDetails !== null && (
-          <span class="pl-1 text-neutral-dark rating-details">
+          <span class="text-neutral-dark rating-details pl-1">
             ({this.ratingDetails})
           </span>
         )}

diff --git a/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss b/packages/atomic/src/components/common/atomic-modal/atomic-modal.pcss
@@ -75,7 +75,7 @@ atomic-focus-trap {
   }
 
   [part='body-wrapper'] {
-    @apply px-6 pt-8 pb-5;
+    @apply px-6 pb-5 pt-8;
   }
 
   [part='footer-wrapper'] {