feat(recommend): set up base CSS styles for lookingSimilar widget (a…

…lgolia#6210)

bundlesize.config.json

@@ -58,11 +58,11 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "4.60 kB"
+      "maxSize": "4.7 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",
-      "maxSize": "4.25 kB"
+      "maxSize": "4.3 kB"
     }
   ]
 }

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

@@ -31,6 +31,7 @@ a[class^='ais-'] {
 .ais-ResultsPerPage,
 .ais-InfiniteHits,
 .ais-InfiniteResults,
+.ais-LookingSimilar,
 .ais-Menu,
 .ais-MenuSelect,
 .ais-NumericMenu,
@@ -290,6 +291,7 @@ a[class^='ais-'] {
 .ais-InfiniteResults-list,
 .ais-Hits-list,
 .ais-FrequentlyBoughtTogether-list,
+.ais-LookingSimilar-list,
 .ais-RelatedProducts-list,
 .ais-TrendingItems-list,
 .ais-Results-list {
@@ -307,6 +309,7 @@ a[class^='ais-'] {
 .ais-InfiniteResults-item,
 .ais-Hits-item,
 .ais-FrequentlyBoughtTogether-item,
+.ais-LookingSimilar-item,
 .ais-RelatedProducts-item,
 .ais-TrendingItems-item,
 .ais-Results-item {

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

@@ -5,6 +5,7 @@
 .ais-HierarchicalMenu-list,
 .ais-Hits-list,
 .ais-FrequentlyBoughtTogether-list,
+.ais-LookingSimilar-list,
 .ais-RelatedProducts-list,
 .ais-TrendingItems-list,
 .ais-Results-list,

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

@@ -605,12 +605,14 @@ $break-medium: 767px;
 }
 
 /**
- * Hits, InfiniteHits, FrequentlyBoughtTogether, RelatedProducts and TrendingItems
+ * Hits, InfiniteHits, FrequentlyBoughtTogether, LookingSimilar,
+ * RelatedProducts and TrendingItems
  */
 
 .ais-Hits-item,
 .ais-InfiniteHits-item,
 .ais-FrequentlyBoughtTogether-item,
+.ais-LookingSimilar-item,
 .ais-RelatedProducts-item,
 .ais-TrendingItems-item {
   align-items: center;
@@ -626,6 +628,7 @@ $break-medium: 767px;
 .ais-Hits-item:first-of-type,
 .ais-InfiniteHits-item:first-of-type,
 .ais-FrequentlyBoughtTogether-item:first-of-type,
+.ais-LookingSimilar-item:first-of-type,
 .ais-RelatedProducts-item:first-of-type,
 .ais-TrendingItems-item:first-of-type {
   border-radius: 3px 3px 0 0;
@@ -634,6 +637,7 @@ $break-medium: 767px;
 .ais-Hits-item:last-of-type,
 .ais-InfiniteHits-item:last-of-type,
 .ais-FrequentlyBoughtTogether-item:last-of-type,
+.ais-LookingSimilar-item:last-of-type,
 .ais-RelatedProducts-item:last-of-type,
 .ais-TrendingItems-item:last-of-type {
   border-radius: 0 0 3px 3px;
@@ -642,6 +646,7 @@ $break-medium: 767px;
 .ais-Hits-item:only-of-type,
 .ais-InfiniteHits-item:only-of-type,
 .ais-FrequentlyBoughtTogether-item:only-of-type,
+.ais-LookingSimilar-item:only-of-type,
 .ais-RelatedProducts-item:only-of-type,
 .ais-TrendingItems-item:only-of-type {
   border-radius: 3px;

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

@@ -48,7 +48,7 @@ classes:
 options:
   - name: objectIDs
     description: objectIDs of the items to get the Frequently Bought Together items from
-  - name: maxRecommendations
+  - name: limit
     description: Number of recommendations to retrieve
   - name: queryParameters
     description: List of search parameters to send

specs/src/pages/widgets/looking-similar.md

@@ -0,0 +1,68 @@
+---
+layout: ../../layouts/WidgetLayout.astro
+title: LookingSimilar
+type: widget
+html: |
+  <div class="ais-LookingSimilar">
+    <h3 class="ais-LookingSimilar-title">Looking Similar</h3>
+    <div class="ais-LookingSimilar-container">
+      <ol class="ais-LookingSimilar-list">
+        <li class="ais-LookingSimilar-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+        </li>
+        <li class="ais-LookingSimilar-item">
+          Hit 4397400: Google - Chromecast - Black
+        </li>
+      </ol>
+    </div>
+  </div>
+classes:
+  - name: .ais-LookingSimilar
+    description: the root div of the widget
+  - name: .ais-LookingSimilar-title
+    description: the title heading of the widget
+  - name: .ais-LookingSimilar-container
+    description: the container for the list of results
+  - name: .ais-LookingSimilar-list
+    description: the list of results
+  - name: .ais-LookingSimilar-item
+    description: the hit list item
+options:
+  - name: objectIDs
+    description: objectIDs of the items to get the Looking Similar items from
+  - name: limit
+    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: "Looking Similar"
+    description: The text for the header element
+  - name: sliderLabel
+    default: "Looking Similar"
+    description: The label for the horizontal slider
+---

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

@@ -48,7 +48,7 @@ classes:
 options:
   - name: objectIDs
     description: objectIDs of the items to get the Related Products items from
-  - name: maxRecommendations
+  - name: limit
     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.

specs/src/pages/widgets/trending-items.md

@@ -48,7 +48,7 @@ classes:
 options:
   - name: objectIDs
     description: objectIDs of the items to get the Trending Items from
-  - name: maxRecommendations
+  - name: limit
     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.