@coveops/abi 0.9.0 → 1.0.1

package/src/pages/index.html

@@ -33,66 +33,73 @@
   <style>
   </style>
   <atomic-hosted-page>
-    <atomic-search-interface id="search" fields-to-include='[
-      "sfcaseid", "sfppcustomlinkcpplinkurlc", "sfcaseppstatus", "sfcaseppstatusc", "sfcasestatus", 
-      "sfppcustomlinkcppiconc", "sfcasenumber", "sfcaseppprocessc", "sfppleaveabsencecppactiontypec", 
-      "sfppleaveabsencecppactionreasonc", "sfppleaveabsencecppenddatecfq", "sfppleaveabsencecppenddatecfy", 
-      "sfppleaveabsencecppstartdatecfq", "sfppleaveabsencecppstartdatecfy", "sfppleaveabsencecppstartdatec", 
-      "sfppleaveabsencecppenddatec", "sfrecordtypename", "sfcasepprequesterc", "sfcaseemployeec", 
-      "sfppourcompanylinkdetailcppcontentc", "sfppourcompanylinkdetailcid", "sfppcustomlinkname", "sfppcustomlinkid", 
-      "sfppmyteamcppemployeenumberc", "sfppmyteamcpppositionc", "sfppmyteamcppemailc", "sfppmyteamcppphonenumberc", 
-      "sfppmyteamcppmanagersemployeenumberc", "sfppmyteamcppmanagersnamec", "function", "owner", "businessunit", 
-      "datesubmitted", "bestpracticezone", "connectortype", "clickUri", "zone", "roadmap", "strategy", "sfkeywordc", 
-      "spitemtype", "splistbasetype", "splisttype", "title", "searchablemeta", "totalNumberOfChildResults", 
-      "moreinformation", "picture", "targettab", "targettemplate", "metatype", "resultimage", "sfppzonec", 
-      "sfppemployeeworklocationc", "sfppbusinessfunctionc", "sfpersonemail", "sfpppositontitlec", "istailoredmappingtype", 
-      "resultpicture", "abicontenttype", "containsattachment", "spsitename", "spsiteuri", "attachmentfilename", "parents", 
-      "sysparents", "description", "answer","newmoreinfo", "filetype","sfppcustomlinkcppdescriptionc","trainingsource","function","category","sfpersonemail","sfppbusinessfunctionc","sfppemployeeworklocationc","duration"
-  ]'><atomic-modal id="faq-modal" is-open="false">
-    <div slot="header" style="display: grid;grid-template-columns: 5fr 01fr; width:100%;">
-      <div class="header-title" style="padding-top:2%;">This is a title</div>
-      <div id="faq-modal-close"  style="text-align: end;">
-        <svg width="48" height="49" viewBox="0 0 48 49" fill="black" xmlns="http://www.w3.org/2000/svg">
-          <rect y="0.5" width="48" height="48" rx="24" fill="white"/>
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5382 24.5L15 16.9618L16.4618 15.5L24 23.0382L31.5382 15.5L33 16.9618L25.4618 24.5L33 32.0382L31.5382 33.5L24 25.9618L16.4618 33.5L15 32.0382L22.5382 24.5Z" fill="#17171A"/>
-        </svg>
+    <section style="height: 50px;">
+      <atomic-search-interface id="searchbox" search-hub="communityCoveo">
+            <atomic-layout-section style="justify-self:center" section="search">
+                <atomic-search-box></atomic-search-box>
+            </atomic-layout-section>
+      </atomic-search-interface>
+    </section>
+    <section>
+      <atomic-search-interface id="search" fields-to-include='[
+        "sfcaseid", "sfppcustomlinkcpplinkurlc", "sfcaseppstatus", "sfcaseppstatusc", "sfcasestatus", 
+        "sfppcustomlinkcppiconc", "sfcasenumber", "sfcaseppprocessc", "sfppleaveabsencecppactiontypec", 
+        "sfppleaveabsencecppactionreasonc", "sfppleaveabsencecppenddatecfq", "sfppleaveabsencecppenddatecfy", 
+        "sfppleaveabsencecppstartdatecfq", "sfppleaveabsencecppstartdatecfy", "sfppleaveabsencecppstartdatec", 
+        "sfppleaveabsencecppenddatec", "sfrecordtypename", "sfcasepprequesterc", "sfcaseemployeec", 
+        "sfppourcompanylinkdetailcppcontentc", "sfppourcompanylinkdetailcid", "sfppcustomlinkname", "sfppcustomlinkid", 
+        "sfppmyteamcppemployeenumberc", "sfppmyteamcpppositionc", "sfppmyteamcppemailc", "sfppmyteamcppphonenumberc", 
+        "sfppmyteamcppmanagersemployeenumberc", "sfppmyteamcppmanagersnamec", "function", "owner", "businessunit", 
+        "datesubmitted", "bestpracticezone", "connectortype", "clickUri", "zone", "roadmap", "strategy", "sfkeywordc", 
+        "spitemtype", "splistbasetype", "splisttype", "title", "searchablemeta", "totalNumberOfChildResults", 
+        "moreinformation", "picture", "targettab", "targettemplate", "metatype", "resultimage", "sfppzonec", 
+        "sfppemployeeworklocationc", "sfppbusinessfunctionc", "sfpersonemail", "sfpppositontitlec", "istailoredmappingtype", 
+        "resultpicture", "abicontenttype", "containsattachment", "spsitename", "spsiteuri", "attachmentfilename", "parents", 
+        "sysparents", "description", "answer","newmoreinfo", "filetype","sfppcustomlinkcppdescriptionc","trainingsource","function","category","sfpersonemail","sfppbusinessfunctionc","sfppemployeeworklocationc","duration"
+    ]'><atomic-modal id="faq-modal" is-open="false">
+      <div slot="header" style="display: grid;grid-template-columns: 5fr 01fr; width:100%;">
+        <div class="header-title" style="padding-top:2%;">This is a title</div>
+        <div id="faq-modal-close"  style="text-align: end;">
+          <svg width="48" height="49" viewBox="0 0 48 49" fill="black" xmlns="http://www.w3.org/2000/svg">
+            <rect y="0.5" width="48" height="48" rx="24" fill="white"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5382 24.5L15 16.9618L16.4618 15.5L24 23.0382L31.5382 15.5L33 16.9618L25.4618 24.5L33 32.0382L31.5382 33.5L24 25.9618L16.4618 33.5L15 32.0382L22.5382 24.5Z" fill="#17171A"/>
+          </svg>
+        </div>
+      
       </div>
-     
-    </div>
-    <div slot="body" style="max-width: none;">This is the body</div>
-    <div slot="footer"><button id="btn-done">Done</button></div>
-  </atomic-modal>
-      <atomic-search-layout>
-        <atomic-layout-section style="justify-self:center" section="search">
-          <atomic-search-box></atomic-search-box>
-        </atomic-layout-section>
-        <!-- <atomic-layout-section section="facets">
-            <atomic-facet-manager>
-              <atomic-facet field="abicontenttype" label="Filetype"></atomic-facet>
-              <atomic-facet field="source" label="Source"></atomic-facet>
-            </atomic-facet-manager>
-        </atomic-layout-section> -->
-        <atomic-layout-section section="main">
-          <atomic-layout-section section="status">
-            <atomic-breadbox></atomic-breadbox>
-            <atomic-query-summary enable-duration="true"></atomic-query-summary>
-            <atomic-refine-toggle></atomic-refine-toggle>
-            <atomic-sort-dropdown>
-              <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
-            </atomic-sort-dropdown>
-            <atomic-did-you-mean></atomic-did-you-mean>
+      <div slot="body" style="max-width: none;">This is the body</div>
+      <div slot="footer"><button id="btn-done">Done</button></div>
+    </atomic-modal>
+        <atomic-search-layout>
+          <atomic-layout-section section="facets">
+              <atomic-facet-manager>
+                <atomic-facet field="abicontenttype" label="Filetype"></atomic-facet>
+                <atomic-facet field="source" label="Source"></atomic-facet>
+              </atomic-facet-manager>
           </atomic-layout-section>
-          <atomic-layout-section section="results">
-            <results-manager></results-manager>
-            <atomic-query-error></atomic-query-error>
-            <atomic-no-results></atomic-no-results>
+          <atomic-layout-section section="main">
+            <atomic-layout-section section="status">
+              <atomic-breadbox></atomic-breadbox>
+              <atomic-query-summary enable-duration="true"></atomic-query-summary>
+              <atomic-refine-toggle></atomic-refine-toggle>
+              <atomic-sort-dropdown>
+                <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
+              </atomic-sort-dropdown>
+              <atomic-did-you-mean></atomic-did-you-mean>
+            </atomic-layout-section>
+            <atomic-layout-section section="results">
+              <results-manager></results-manager>
+              <atomic-query-error></atomic-query-error>
+              <atomic-no-results></atomic-no-results>
+            </atomic-layout-section>
+            <atomic-layout-section section="pagination">
+              <atomic-pager></atomic-pager>
+            </atomic-layout-section>
           </atomic-layout-section>
-          <atomic-layout-section section="pagination">
-            <atomic-pager></atomic-pager>
-          </atomic-layout-section>
-        </atomic-layout-section>
-      </atomic-search-layout>
-    </atomic-search-interface>
+        </atomic-search-layout>
+        <standalone-searchbox-listener></standalone-searchbox-listener>
+      </atomic-search-interface>
+    </section>
   </atomic-hosted-page>
 </body>
 

package/src/pages/recs.html

@@ -0,0 +1,59 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!--
+        Modifying any <head> attributes of the page locally (including the title attribute) will have no effect when the page is uploaded to the Coveo platform.
+        If you wish to modify the page title, you should modify the `name` property defined in the coveo.deploy.json configuration file.
+      -->
+  <title>Recs-Atomic</title>
+  <link href="/atomic/themes/coveo.css" rel="stylesheet" />
+  <link href="/build/abi.css" rel="stylesheet" />
+  <!-- 
+        When using the Coveo CDN - Make sure you're using the same minor version as the packaged Atomic.
+        E.g., if you have "@coveo/atomic@2.0.0" installed, use the "/atomic/v2.0.0/" path.
+        When deploying with the Coveo CLI, the Atomic CDN defined in the coveo.deploy.json configuration file will be used.
+      
+        <script type="module" src="https://static.cloud.coveo.com/atomic/vMAJOR.MINOR/atomic.esm.js"></script> 
+      -->
+      <script type="module" src="/atomic/atomic.esm.js"></script>
+      <!-- Custom Elements Lazy Loading -->
+      <script type="module" src="/build/abi.esm.js"></script>
+      <!-- Global initialization script -->
+      <script type="module" src="/build/index.esm.js"></script>
+</head>
+
+
+<body>
+    <div class="atomic-recs-layout">
+      <!-- Carousel -->
+      <atomic-recs-interface 
+        class="atomic-recs-carousel"
+        search-hub="ContentRecs">
+
+        <atomic-recs-list display="list" number-of-recommendations="10"
+          number-of-recommendations-per-page="5">
+          <atomic-recs-result-template>
+            <template>
+
+ 
+              <atomic-result-section-title>
+                <atomic-result-link></atomic-result-link>
+              </atomic-result-section-title>
+              <atomic-result-section-excerpt>
+                <atomic-result-text field="excerpt"></atomic-result-text>
+             </atomic-result-section-excerpt>
+             <atomic-result-section-bottom-metadata>
+              <rec-add-to-cart></rec-add-to-cart>
+            </atomic-result-section-bottom-metadata>
+  
+            </template>
+          </atomic-recs-result-template>
+        </atomic-recs-list>
+      </atomic-recs-interface>
+    </div>
+  </body>
+  
+  </html>

package/src/style/index.css

@@ -19,6 +19,10 @@ atomic-search-box::part(submit-icon) {
   color: black;
 }
 
+atomic-pager {
+  margin-top: 5rem !important;
+}
+
 atomic-pager::part(page-button) {
   color: #a6a6a6;
   border: thin solid #a6a6a6;
@@ -54,7 +58,7 @@ atomic-modal#faq-modal::part(header-wrapper) {
   display: none;
 }
 atomic-modal::part(backdrop){
-  grid-template-columns: none !important;
+  grid-template-columns: 1fr min(60%) 1fr;
 }
 atomic-modal::part(header){
   max-width: none;
@@ -90,6 +94,9 @@ atomic-modal#faq-modal table tr {
 atomic-modal#faq-modal table tr td {
   padding: 1.5rem;
 }
+atomic-modal#faq-modal table tr td:nth-child(2) {
+  word-break: break-word;
+}
 atomic-modal#faq-modal table tr td a {
   color: #caa144;
 }