@coveops/abi 0.8.0 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coveops/abi",
   "description": "Abi project",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "private": false,
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/src/components/faq-popup-component/faq-popup-component.css

@@ -1,3 +1,9 @@
 b {
   color: var(--atomic-primary);
 }
+:host {
+  color: #CAA144 !important;
+  font-size: 1.7rem !important;
+  max-height: unset !important;
+  line-height: normal !important;
+}

package/src/components/results-manager/AppTemplate.html

@@ -27,7 +27,7 @@
 
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }

package/src/components/results-manager/DocumentsTemplate.html

@@ -34,7 +34,7 @@
 
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -55,6 +55,9 @@
     display: flex;
     align-items: center;
   }
+  atomic-result-date{
+    font-size:1.0rem;
+  }
 </style>
 
 <atomic-result-section-visual>

package/src/components/results-manager/ELearningTemplate.html

@@ -30,7 +30,7 @@
   }
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }

package/src/components/results-manager/FAQTemplate.html

@@ -11,7 +11,7 @@
 
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -28,7 +28,7 @@
   }
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -70,6 +70,10 @@ atomic-result-section-visual {
         display: grid;
         align-items: center;
     }
+
+    atomic-result-date{
+      font-size:1.0rem;
+    }
 </style>
 
 <atomic-result-section-visual>

package/src/components/results-manager/KATemplate.html

@@ -12,7 +12,7 @@
 
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -29,7 +29,7 @@
     line-height: 18px !important;
     display: grid;
     grid-template-columns: 0.5fr 0.5fr 1fr;
-    gap: 1rem;
+    gap: 5rem;
     align-items: center;
   }
   atomic-result-section-title a {
@@ -52,6 +52,9 @@
         justify-content: center;
 
     }
+    atomic-result-date{
+      font-size:1.0rem;
+    }
 </style>
 
 <atomic-result-section-visual>
@@ -130,9 +133,9 @@
     <atomic-result-date></atomic-result-date>
   </span>   <span>
     <atomic-field-condition class="field" must-match-source="ServiceNow - Knowledge">
-      </a><atomic-text value="Source: ServiceNow"></atomic-text>
+      </a><atomic-text value="Source: ServiceNow Articles"></atomic-text>
     </atomic-field-condition>
-  </span>   <span>
+
     <atomic-field-condition class="field" must-match-source="Salesforce - Guru">
       <atomic-text value="Source: Guru Articles">
     </atomic-field-condition>

package/src/components/results-manager/MediaTemplate.html

@@ -10,7 +10,7 @@
   }
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -21,6 +21,10 @@
     color: #A6A6A6 !important;
   }
 
+  atomic-result-section-bottom-metadata a {
+    color: #A6A6A6 !important;
+  }
+
 
   atomic-result-section-title a {
     color: #CAA144 !important;
@@ -40,16 +44,32 @@
         justify-content: center;
 
     }
+
+  atomic-result-section-bottom-metadata {
+    margin-top: 2px;
+  color: #A6A6A6 !important;
+    font-size: 1rem !important;
+    margin-right: 3px;
+    line-height: 18px !important;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  atomic-result-date{
+    font-size:1.0rem;
+  }
 </style>
 
 <atomic-result-section-visual>
-  <atomic-field-condition class="field" must-match-filetype="mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v">
-    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Images.png" alt="Image" />
+  <atomic-field-condition class="field" must-match-filetype="mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v,mpg">
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Movies.png" alt="Image" />
     <!-- <atomic-icon class="icon"></atomic-icon>
     <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Movies.png" class="thumbnail"> -->
   </atomic-field-condition>
-  <atomic-field-condition class="field" must-match-filetype="gif,jpeg,jpg,png,bmp,Image,mp3,mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v">
-    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Movies.png" alt="Image" />
+  <atomic-field-condition class="field" must-match-filetype="gif,jpeg,jpg,png,bmp,Image">
+    <img src="https://cdn.jsdelivr.net/npm/@coveops/abi@latest/dist/abi/images/Images.png" alt="Image" />
     <!-- <atomic-icon class="icon"></atomic-icon>
     <img src="https://abiglobal--c.vf.force.com/resource/PP_Coveo/img/Images.png" class="thumbnail"> -->
   </atomic-field-condition>
@@ -62,7 +82,14 @@
 
 
 <atomic-result-section-bottom-metadata>
-  <atomic-result-fields-list>
-      <atomic-result-text field="PrintableUri"></atomic-result-text>
-  </atomic-result-fields-list>
+  <span>
+    <atomic-text value="Date: &nbsp;"></atomic-text>
+    <atomic-result-date></atomic-result-date>
+  </span><span>
+    <atomic-text value="Source: &nbsp;"></atomic-text><atomic-result-text field="sourcetype"></atomic-result-text>
+  </span><span> <atomic-text value="Sharepoint: &nbsp;"></atomic-text>
+    <atomic-result-link><a slot="attributes" target="_blank"></a>
+      <atomic-result-text field="spsitename"></atomic-result-text>
+    </atomic-result-link>
+  </span>
 </atomic-result-section-bottom-metadata>

package/src/components/results-manager/PeopleTemplate.html

@@ -2,6 +2,7 @@
   .field {
     display: inline-flex;
     align-items: center;
+    line-height: normal !important;
   }
 
   .field-label {
@@ -12,7 +13,7 @@
   atomic-result-section-bottom-metadata {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    font-size: 1.3rem;
+    font-size: 1.3rem !important;
     width: 100%;
     margin-top: 2px;
     max-height: 25rem !important;
@@ -30,6 +31,13 @@
         display: grid;
         align-items: center;
     }
+    atomic-result-image{
+      width: auto !important;
+      height: auto !important;
+    }
+    atomic-result-image img{
+      border-radius: 20% !important;
+    }
 </style>
 
 <atomic-result-section-visual>

package/src/components/results-manager/QuickLinksTemplate.html

@@ -23,7 +23,7 @@
 
   atomic-result-section-excerpt {
     font-size: 13px;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
   }
 
   atomic-result-section-title a:visited {
@@ -44,6 +44,13 @@
         display: grid;
         align-items: center;
     }
+
+    atomic-result-section-excerpt {
+    font-size: 1.3rem !important;
+    margin-top: 0.875rem !important;
+    max-height: unset !important;
+    line-height: normal !important;
+  }
 </style>
 
 <atomic-result-section-visual>

package/src/components/results-manager/SitePagesTemplate.html

@@ -20,7 +20,7 @@
   }
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top:2px !important;
+    margin-top:0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -41,10 +41,7 @@
     align-items: center;
   }
 
-  atomic-result-date {
-    font-size: 13px;
-    justify-self: end;
-  }
+
 
   atomic-result-section-title a {
     color: #CAA144 !important;
@@ -66,6 +63,9 @@
     display: flex;
     align-items: center;
   }
+  atomic-result-date{
+    font-size:1.0rem;
+  }
 </style>
 
 <atomic-result-section-visual>
@@ -108,7 +108,12 @@
 
 <atomic-result-section-title>
   <div class="title-date">
-    <atomic-result-link> <a slot="attributes" target="_blank"></a></atomic-result-link>
+    <atomic-result-link> 
+      <a slot="attributes" target="_blank"></a>
+      <atomic-result-text field="PrintableUri"></atomic-result-text>
+      &nbsp;-&nbsp;
+      <atomic-result-text field="title"></atomic-result-text>
+    </atomic-result-link>
     </div>
 </atomic-result-section-title>
 

package/src/components/results-manager/results-manager.tsx

@@ -27,7 +27,11 @@ export class ResultsManager {
 
 
     return (
+        
       <atomic-result-list>
+        <atomic-result-template must-match-filetype='mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v,gif,jpeg,jpg,png,bmp,Image,mp3,mp4,wmv,avi,MOV,flv,mkv,webm,ogg,ogv,m4v,mpg'>
+          <template innerHTML={MediaTemplate}></template>
+        </atomic-result-template>
         <atomic-result-template must-match-abicontenttype="Site Pages">
         <template innerHTML={SitePagesTemplate}></template>
       </atomic-result-template>

package/src/components/results-manager/template-1.html

@@ -16,14 +16,19 @@
 
 
   atomic-result-section-bottom-metadata {
+    margin-top: 2px;
     color: #A6A6A6 !important;
-    margin-right: 3px;
     font-size: 1rem !important;
+    margin-right: 3px;
     line-height: 18px !important;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    gap: 1rem;
+    align-items: center;
   }
 
   atomic-result-date {
-    font-size: 13px;
+    font-size: 1.0rem;
     justify-self: end;
   }
 
@@ -35,14 +40,15 @@
   }
 
 
-
-  atomic-result-link a:visited {
+  atomic-result-section-bottom-metadata a {
+    color: #A6A6A6 !important;
+  }
+  atomic-result-section-title a:visited {
     color: black !important;
   }
-
   atomic-result-section-excerpt {
     font-size: 1.3rem !important;
-    margin-top: 2px !important;
+    margin-top: 0.875rem !important;
     max-height: unset !important;
     line-height: normal !important;
   }
@@ -53,6 +59,18 @@
         display: grid;
         align-items: center;
     }
+    atomic-result-section-bottom-metadata span {
+      display: flex;
+      align-items: center;
+    }
+
+    atomic-field-condition{
+    max-width: 100%;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    align-items: center;
+    gap: 1rem;
+    }
 </style>
 
 <atomic-result-section-visual>
@@ -128,10 +146,17 @@
   <atomic-result-text field="excerpt"></atomic-result-text>
 </atomic-result-section-excerpt>
 
-<!-- <atomic-result-section-bottom-metadata>
-  <atomic-result-fields-list>
-    <atomic-result-link> <a slot="attributes" target="_blank"></a>
-      <atomic-result-text field="PrintableUri"></atomic-result-text>
+<atomic-result-section-bottom-metadata>
+  <atomic-field-condition  must-match-sourcetype="SharePointOnline">
+  <span>
+    <atomic-text value="Date: &nbsp;"></atomic-text>
+    <atomic-result-date></atomic-result-date>
+  </span><span>
+    <atomic-text value="Source: &nbsp;"></atomic-text><atomic-result-text field="sourcetype"></atomic-result-text>
+  </span><span> <atomic-text value="Sharepoint: &nbsp;"></atomic-text>
+    <atomic-result-link><a slot="attributes" target="_blank"></a>
+      <atomic-result-text field="spsitename"></atomic-result-text>
     </atomic-result-link>
-  </atomic-result-fields-list>
-</atomic-result-section-bottom-metadata> -->
+  </span>
+  </atomic-field-condition>
+</atomic-result-section-bottom-metadata>

package/src/pages/index.html

@@ -66,12 +66,12 @@
         <atomic-layout-section style="justify-self:center" section="search">
           <atomic-search-box></atomic-search-box>
         </atomic-layout-section>
-        <!-- <atomic-layout-section section="facets">
+        <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>
         <atomic-layout-section section="main">
           <atomic-layout-section section="status">
             <atomic-breadbox></atomic-breadbox>

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;
 }