Merge branch 'type=module' into type=module-headless-types

packages/atomic-react/package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "build": "nx build",
     "clean": "rimraf -rf dist",
-    "build:addExtensions": "fix-esm-import-path src/components/stencil-generated",
+    "build:fixGeneratedImportPaths": "fix-esm-import-path src/components/stencil-generated",
     "build:bundles:esm": "tsc -p tsconfig.esm.json",
     "build:bundles:iife-cjs": "rollup --config rollup.config.mjs --bundleConfigAsCjs",
     "build:bundles": "concurrently \"npm run build:bundles:esm\" \"npm run build:bundles:iife-cjs\"",

packages/atomic-react/project.json

@@ -8,7 +8,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "npm run build:addExtensions",
+          "npm run build:fixGeneratedImportPaths",
           "npm run build:bundles",
           "npm run build:assets"
         ],

packages/atomic/src/components.d.ts

@@ -2109,6 +2109,7 @@ export namespace Components {
         "maxValueInIndex": number;
         /**
           * The field whose value you want to display next to the rating. This field can be used to display the number of reviews or the numerical value of the rating, for example.
+          * @type {string}
          */
         "ratingDetailsField"?: string;
     }
@@ -7978,6 +7979,7 @@ declare namespace LocalJSX {
         "maxValueInIndex"?: number;
         /**
           * The field whose value you want to display next to the rating. This field can be used to display the number of reviews or the numerical value of the rating, for example.
+          * @type {string}
          */
         "ratingDetailsField"?: string;
     }

packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.pcss

@@ -1,5 +1 @@
 @import '../../search/atomic-search-box/atomic-search-box.pcss';
-
-:host {
-  @apply relative z-10;
-}

packages/atomic/src/components/commerce/atomic-commerce-search-box/e2e/atomic-commerce-search-box.e2e.ts

@@ -514,3 +514,10 @@ test.describe('standalone searchbox', () => {
     expect(accessibilityResults.violations).toEqual([]);
   });
 });
+
+test('should have position:relative and z-index:10', async ({searchBox}) => {
+  await searchBox.load();
+
+  await expect(searchBox.hydrated).toHaveCSS('position', 'relative');
+  await expect(searchBox.hydrated).toHaveCSS('z-index', '10');
+});

packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.new.stories.tsx

@@ -0,0 +1,65 @@
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {wrapInCommerceInterface} from '../../../../../storybookUtils/commerce/commerce-interface-wrapper';
+import {wrapInCommerceProductList} from '../../../../../storybookUtils/commerce/commerce-product-list-wrapper';
+import {wrapInProductTemplate} from '../../../../../storybookUtils/commerce/commerce-product-template-wrapper';
+import {parameters} from '../../../../../storybookUtils/common/common-meta-parameters';
+import {renderComponent} from '../../../../../storybookUtils/common/render-component';
+
+const {
+  decorator: commerceInterfaceDecorator,
+  play: initializeCommerceInterface,
+} = wrapInCommerceInterface({
+  skipFirstSearch: false,
+  type: 'product-listing',
+  engineConfig: {
+    context: {
+      view: {
+        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing',
+      },
+      language: 'en',
+      country: 'US',
+      currency: 'USD',
+    },
+  },
+});
+const {decorator: commerceProductListDecorator} = wrapInCommerceProductList();
+const {decorator: productTemplateDecorator} = wrapInProductTemplate();
+
+const meta: Meta = {
+  component: 'atomic-product-rating',
+  title: 'Atomic-Commerce/Product Template Components/ProductRating',
+  id: 'atomic-product-rating',
+  render: renderComponent,
+  decorators: [
+    productTemplateDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  parameters,
+  play: initializeCommerceInterface,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-rating',
+};
+
+export const WithARatingDetailsField: Story = {
+  args: {
+    'attributes-rating-details-field': 'ec_rating',
+  },
+};
+
+export const WithAMaxValueInIndex: Story = {
+  args: {
+    'attributes-max-value-in-index': 10,
+  },
+};
+
+export const WithADifferentIcon: Story = {
+  args: {
+    'attributes-icon':
+      'https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/circle.svg',
+  },
+};

packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/atomic-product-rating.tsx

@@ -40,6 +40,7 @@ export class AtomicProductRating
 
   /**
    * The field whose value you want to display next to the rating. This field can be used to display the number of reviews or the numerical value of the rating, for example.
+   * @type {string}
    */
   @Prop({reflect: true}) public ratingDetailsField?: string;
 

packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/e2e/atomic-product-rating.e2e.ts

@@ -0,0 +1,82 @@
+import {test, expect} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({productRating}) => {
+    await productRating.load();
+  });
+
+  test('should be accessible', async ({productRating, makeAxeBuilder}) => {
+    await expect(productRating.hydrated.first()).toBeVisible();
+
+    expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
+  });
+
+  test('should have the right number of yellow icons', async ({
+    productRating,
+  }) => {
+    await expect(productRating.blueLagoonYellowIcons).toHaveAttribute(
+      'style',
+      'width: 80%;'
+    );
+  });
+});
+
+test.describe('with a rating details field', () => {
+  test.beforeEach(async ({productRating}) => {
+    await productRating.load({story: 'with-a-rating-details-field'});
+  });
+
+  test('should be accessible', async ({productRating, makeAxeBuilder}) => {
+    await expect(productRating.hydrated.first()).toBeVisible();
+
+    expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
+  });
+
+  test('should show the rating details next to the rating', async ({
+    productRating,
+  }) => {
+    await expect(productRating.hydrated.first().getByText('4')).toBeVisible();
+  });
+});
+
+test.describe('with a max value in index of 10', () => {
+  test.beforeEach(async ({productRating}) => {
+    await productRating.load({story: 'with-a-max-value-in-index'});
+  });
+
+  test('should be accessible', async ({productRating, makeAxeBuilder}) => {
+    await expect(productRating.hydrated.first()).toBeVisible();
+
+    expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
+  });
+
+  test('should have the right number of yellow icons', async ({
+    productRating,
+  }) => {
+    await expect(productRating.blueLagoonYellowIcons).toHaveAttribute(
+      'style',
+      'width: 40%;'
+    );
+  });
+});
+
+test.describe('with a different icon', () => {
+  test.beforeEach(async ({productRating}) => {
+    await productRating.load({story: 'with-a-different-icon'});
+  });
+
+  test('should be accessible', async ({productRating, makeAxeBuilder}) => {
+    await expect(productRating.hydrated.first()).toBeVisible();
+
+    expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
+  });
+
+  test('should have the right number of yellow icons', async ({
+    productRating,
+  }) => {
+    await expect(productRating.blueLagoonYellowIcons).toHaveAttribute(
+      'style',
+      'width: 80%;'
+    );
+  });
+});

packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/e2e/fixture.ts

@@ -0,0 +1,19 @@
+import {test as base} from '@playwright/test';
+import {
+  makeAxeBuilder,
+  AxeFixture,
+} from '../../../../../../playwright-utils/base-fixture';
+import {ProductRatingPageObject} from './page-object';
+
+type MyFixtures = {
+  productRating: ProductRatingPageObject;
+};
+
+export const test = base.extend<MyFixtures & AxeFixture>({
+  makeAxeBuilder,
+  productRating: async ({page}, use) => {
+    await use(new ProductRatingPageObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/atomic/src/components/commerce/product-template-components/atomic-product-rating/e2e/page-object.ts

@@ -0,0 +1,15 @@
+import {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class ProductRatingPageObject extends BasePageObject<'atomic-product-rating'> {
+  constructor(page: Page) {
+    super(page, 'atomic-product-rating');
+  }
+
+  get blueLagoonYellowIcons() {
+    return this.page
+      .getByLabel('4 stars out of', {exact: false})
+      .locator('div')
+      .nth(1);
+  }
+}

packages/atomic/src/components/search/atomic-search-box/atomic-search-box.new.stories.tsx

@@ -26,9 +26,6 @@ const meta: Meta = {
   decorators: [decorator],
   parameters,
   play,
-  args: {
-    'attributes-textarea': true,
-  },
 };
 
 export default meta;

packages/atomic/src/components/search/atomic-search-box/atomic-search-box.pcss

@@ -26,6 +26,6 @@
   }
 }
 
-:host([textarea]) {
+:host {
   @apply relative z-10;
 }

packages/atomic/src/components/search/atomic-search-box/e2e/atomic-search-box.e2e.ts

@@ -257,3 +257,10 @@ test.describe('with minimum-query-length=4', () => {
     });
   });
 });
+
+test('should have position:relative and z-index:10', async ({searchBox}) => {
+  await searchBox.load();
+
+  await expect(searchBox.hydrated).toHaveCSS('position', 'relative');
+  await expect(searchBox.hydrated).toHaveCSS('z-index', '10');
+});

packages/atomic/src/pages/examples/csp.html

@@ -135,7 +135,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/examples/external.html

@@ -56,7 +56,7 @@
       <div>
         <h1>External components of interface #2</h1>
         <atomic-external selector="#interface-2">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
           <atomic-query-summary></atomic-query-summary>
           <atomic-facet field="author" label="Author"></atomic-facet>
         </atomic-external>
@@ -73,7 +73,7 @@ <h1>Interface #1, not linked to url</h1>
           <atomic-numeric-facet field="ec_price" label="Cost" with-input="integer">
             <atomic-format-currency currency="USD"></atomic-format-currency>
           </atomic-numeric-facet>
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
           <atomic-result-list></atomic-result-list>
         </atomic-search-interface>
       </div>

packages/atomic/src/pages/examples/fashion.html

@@ -87,7 +87,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea>
+          <atomic-search-box>
             <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
             <atomic-search-box-instant-results image-size="small">
               <atomic-result-template>

packages/atomic/src/pages/examples/folding.html

@@ -56,7 +56,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/examples/genqa.html

@@ -45,7 +45,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search" expanding>
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/examples/headless.html

@@ -47,7 +47,7 @@
   </head>
   <body>
     <atomic-search-interface>
-      <atomic-search-box textarea></atomic-search-box>
+      <atomic-search-box></atomic-search-box>
       <atomic-query-summary></atomic-query-summary>
       <atomic-result-list></atomic-result-list>
     </atomic-search-interface>

packages/atomic/src/pages/examples/horizontal-facets.html

@@ -41,7 +41,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="main">
           <atomic-layout-section section="horizontal-facets">

packages/atomic/src/pages/examples/slack.html

@@ -64,7 +64,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/examples/standalone-results.html

@@ -47,7 +47,7 @@
     <atomic-search-interface>
       <atomic-search-layout>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/examples/standalone.html

@@ -20,7 +20,7 @@
   </head>
   <body>
     <atomic-search-interface>
-      <atomic-search-box textarea redirection-url="/examples/standalone-results.html"></atomic-search-box>
+      <atomic-search-box redirection-url="/examples/standalone-results.html"></atomic-search-box>
     </atomic-search-interface>
     <script src="../header.js" type="text/javascript"></script>
   </body>

packages/atomic/src/pages/examples/suggestions.html

@@ -97,7 +97,7 @@
           </atomic-facet-manager>
         </atomic-layout-section>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea suggestion-timeout="1000">
+          <atomic-search-box suggestion-timeout="1000">
             <custom-suggestions></custom-suggestions>
             <atomic-search-box-query-suggestions> </atomic-search-box-query-suggestions>
             <atomic-search-box-recent-queries icon="assets://xml.svg"> </atomic-search-box-recent-queries>

packages/atomic/src/pages/examples/tabs.html

@@ -140,7 +140,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>

packages/atomic/src/pages/index.html

@@ -135,7 +135,7 @@
       <atomic-search-layout>
         <div class="header-bg"></div>
         <atomic-layout-section section="search">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>