feat(styles): set up base CSS styles for relatedProducts widget

bundlesize.config.json

@@ -58,7 +58,7 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "4.55 kB"
+      "maxSize": "4.60 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",

packages/instantsearch.css/src/themes/algolia.scss

@@ -26,6 +26,7 @@ a[class^='ais-'] {
 .ais-HierarchicalMenu,
 .ais-Hits,
 .ais-FrequentlyBoughtTogether,
+.ais-RelatedProducts,
 .ais-Results,
 .ais-HitsPerPage,
 .ais-ResultsPerPage,
@@ -288,6 +289,7 @@ a[class^='ais-'] {
 .ais-InfiniteResults-list,
 .ais-Hits-list,
 .ais-FrequentlyBoughtTogether-list,
+.ais-RelatedProducts-list,
 .ais-Results-list {
   margin-top: -1rem;
   margin-left: -1rem;
@@ -303,6 +305,7 @@ a[class^='ais-'] {
 .ais-InfiniteResults-item,
 .ais-Hits-item,
 .ais-FrequentlyBoughtTogether-item,
+.ais-RelatedProducts-item,
 .ais-Results-item {
   margin-top: 1rem;
   margin-left: 1rem;

packages/instantsearch.css/src/themes/reset.scss

@@ -5,6 +5,7 @@
 .ais-HierarchicalMenu-list,
 .ais-Hits-list,
 .ais-FrequentlyBoughtTogether-list,
+.ais-RelatedProducts-list,
 .ais-Results-list,
 .ais-InfiniteHits-list,
 .ais-InfiniteResults-list,

packages/instantsearch.css/src/themes/satellite.scss

@@ -606,12 +606,13 @@ $break-medium: 767px;
 
 /**
  * Hits and InfiniteHits
- * FrequentlyBoughtTogether
+ * FrequentlyBoughtTogether and RelatedProducts
  */
 
 .ais-Hits-item,
 .ais-InfiniteHits-item,
-.ais-FrequentlyBoughtTogether-item {
+.ais-FrequentlyBoughtTogether-item,
+.ais-RelatedProducts-item {
   align-items: center;
   background: $white;
   box-shadow: 0 0 0 1px rgba($grey900, 0.05), 0 1px 3px 0 rgba($grey900, 0.15);
@@ -624,19 +625,22 @@ $break-medium: 767px;
 
 .ais-Hits-item:first-of-type,
 .ais-InfiniteHits-item:first-of-type,
-.ais-FrequentlyBoughtTogether-item:first-of-type {
+.ais-FrequentlyBoughtTogether-item:first-of-type,
+.ais-RelatedProducts-item:first-of-type {
   border-radius: 3px 3px 0 0;
 }
 
 .ais-Hits-item:last-of-type,
 .ais-InfiniteHits-item:last-of-type,
-.ais-FrequentlyBoughtTogether-item:last-of-type {
+.ais-FrequentlyBoughtTogether-item:last-of-type,
+.ais-RelatedProducts-item:last-of-type {
   border-radius: 0 0 3px 3px;
 }
 
 .ais-Hits-item:only-of-type,
 .ais-InfiniteHits-item:only-of-type,
-.ais-FrequentlyBoughtTogether-item:only-of-type {
+.ais-FrequentlyBoughtTogether-item:only-of-type,
+.ais-RelatedProducts-item:only-of-type {
   border-radius: 3px;
 }
 

specs/src/pages/widgets/frequently-bought-together.md

@@ -46,8 +46,8 @@ classes:
   - name: .ais-FrequentlyBoughtTogether-item
     description: the hit list item
 options:
-  - name: objectID
-    description: objectID of the item to get the frequently bought together items from
+  - name: objectIDs
+    description: objectIDs of the items to get the frequently bought together items from
   - name: maxRecommendations
     description: Number of recommendations to retrieve
   - name: queryParameters

specs/src/pages/widgets/related-products.md

@@ -0,0 +1,68 @@
+---
+layout: ../../layouts/WidgetLayout.astro
+title: RelatedProducts
+type: widget
+html: |
+  <div class="ais-RelatedProducts">
+    <h3 class="ais-RelatedProducts-title">Related products</h3>
+    <div class="ais-RelatedProducts-container">
+      <ol class="ais-RelatedProducts-list">
+        <li class="ais-RelatedProducts-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-RelatedProducts-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+      </ol>
+    </div>
+  </div>
+classes:
+  - name: .ais-RelatedProducts
+    description: the root div of the widget
+  - name: .ais-RelatedProducts-title
+    description: the title heading of the widget
+  - name: .ais-RelatedProducts-container
+    description: the container for the list of results
+  - name: .ais-RelatedProducts-list
+    description: the list of results
+  - name: .ais-RelatedProducts-item
+    description: the hit list item
+options:
+  - name: objectIDs
+    description: objectIDs of the items to get the frequently bought together items from
+  - name: maxRecommendations
+    description: Number of recommendations to retrieve
+  - name: fallbackParameters
+    description: List of search parameters to send as additional filters to use as fallback when there aren't enough recommendations.
+  - name: queryParameters
+    description: List of search parameters to send
+  - name: threshold
+    description: Threshold for the recommendations confidence score (between 0 and 100)
+  - name: transformItems
+    description: Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them
+translations:
+  - name: title
+    default: "Related products"
+    description: The text for the header element
+  - name: sliderLabel
+    default: "Related products"
+    description: The label for the horizontal slider
+---