From 5005f6529e71c4893d09235b3365d79da7204128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-F=C3=A9lix=20Thibodeau?= <thibodeaujf@gmail.com>
Date: Thu, 24 Feb 2022 20:27:51 -0500
Subject: [PATCH] feat: add search layout and remove CSS

---
 index.html | 649 +++++++++++++++++++++++------------------------------
 1 file changed, 281 insertions(+), 368 deletions(-)

diff --git a/index.html b/index.html
index d7b5e85..7f3164a 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,12 @@
     <script>
       (async () => {
         await customElements.whenDefined("atomic-search-interface");
-        const searchInterface = document.querySelector("#search");
+        const searchInterface = document.querySelector("atomic-search-interface");
 
         // Initialization
         await searchInterface.initialize({
           accessToken: "xx564559b1-0045-48e1-953c-3addd1ee4457",
-          organizationId: "searchuisamples"
+          organizationId: "searchuisamples",
         });
 
         // Trigger a first search
@@ -52,7 +52,7 @@
         // });
 
         searchInterface.i18n.addResourceBundle("en", "caption-filetype", {
-          ".html": "html"
+          ".html": "html",
         });
       })();
     </script>
@@ -112,389 +112,302 @@
       }
     </style>
     <style>
-      /* Example of generic layout styling, mobile-first  */
-      :root {
-        --spacing: 16px;
-        --search-box-width: 648px;
-      }
-
       body {
         margin: 0;
       }
 
-      body.atomic-modal-opened {
-        overflow-y: hidden;
-      }
-
-      atomic-search-interface {
-        display: grid;
-        grid-template-columns: var(--spacing) 1fr var(--spacing);
-        grid-template-areas:
-          ". search      ."
-          ". status      ."
-          ". breadbox    ."
-          ". topbar      ."
-          ". results     ."
-          ". pagination  ."
-          ". .           .";
-      }
-
       .header-bg {
         background-color: var(--atomic-neutral-light);
         grid-area: 1 / -1 / 1 / 1;
       }
 
-      atomic-facet-manager {
-        display: none;
-      }
-
-      atomic-sort-dropdown {
-        display: none;
-      }
-
-      atomic-search-box {
-        grid-area: search;
-        margin: var(--spacing) 0;
-        max-width: var(--search-box-width);
-        height: 3rem;
-      }
-
-      .status {
-        grid-area: status;
-      }
-
-      atomic-facet-manager {
-        grid-area: facets;
-        margin-top: var(--spacing);
-      }
-
-      atomic-facet-manager > * {
-        margin-bottom: var(--spacing);
-      }
-
-      atomic-breadbox {
-        grid-area: breadbox;
-        margin-top: var(--spacing);
-        padding-bottom: var(--spacing);
-        border-bottom: 1px solid var(--atomic-neutral);
-      }
-
-      .topbar {
-        grid-area: topbar;
-        margin: var(--spacing) 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .results {
-        grid-area: results;
-      }
-
-      .pagination {
-        grid-area: pagination;
-        margin: var(--spacing) 0;
-      }
-
-      .atomic-search-interface-no-results .topbar,
-      .atomic-search-interface-no-results .results,
-      .atomic-search-interface-no-results .pagination {
-        display: none;
-      }
-
-      @media only screen and (min-width: 1024px) {
-        atomic-search-interface {
-          column-gap: var(--spacing);
-          grid-template-columns: 1fr minmax(150px, 325px) minmax(500px, 1100px) 1fr;
-          grid-template-areas:
-            ". .      search      ."
-            ". facets breadbox ."
-            ". facets topbar      ."
-            ". facets results     ."
-            ". facets pagination  ."
-            ". facets status      ."
-            ". facets .           .";
-        }
-
-        atomic-facet-manager {
-          display: block;
-        }
-
-        atomic-refine-toggle {
-          display: none;
-        }
-
-        atomic-sort-dropdown {
-          display: block;
-        }
-
-        .status {
-          max-width: var(--search-box-width);
-        }
+      atomic-search-layout {
+        row-gap: var(--atomic-layout-spacing-y);
       }
+      
     </style>
   </head>
 
   <body>
-    <atomic-search-interface id="search">
-      <div class="header-bg"></div>
-      <atomic-search-box></atomic-search-box>
-      <atomic-facet-manager>
-        <atomic-category-facet
-          field="geographicalhierarchy"
-          label="World Atlas"
-          with-search
-        >
-        </atomic-category-facet>
-        <atomic-facet field="author" label="Authors"></atomic-facet>
-        <atomic-facet field="language" label="Language"></atomic-facet>
-        <atomic-facet
-          field="objecttype"
-          label="Type"
-          display-values-as="link"
-        ></atomic-facet>
-        <atomic-facet
-          field="year"
-          label="Year"
-          display-values-as="box"
-        ></atomic-facet>
-        <atomic-numeric-facet
-          field="ytviewcount"
-          label="Youtube Views"
-          with-input="integer"
-        ></atomic-numeric-facet>
-        <atomic-numeric-facet
-          field="ytlikecount"
-          label="Youtube Likes"
-          display-values-as="link"
-        >
-          <atomic-numeric-range
-            start="0"
-            end="1000"
-            label="Unpopular"
-          ></atomic-numeric-range>
-          <atomic-numeric-range
-            start="1000"
-            end="8000"
-            label="Well liked"
-          ></atomic-numeric-range>
-          <atomic-numeric-range
-            start="8000"
-            end="100000"
-            label="Popular"
-          ></atomic-numeric-range>
-          <atomic-numeric-range
-            start="100000"
-            end="999999999"
-            label="Treasured"
-          ></atomic-numeric-range>
-        </atomic-numeric-facet>
-        <atomic-numeric-facet field="sncost" label="Cost">
-          <atomic-format-currency currency="CAD"></atomic-format-currency>
-        </atomic-numeric-facet>
-        <atomic-timeframe-facet label="Timeframe" with-date-picker>
-          <atomic-timeframe unit="hour"></atomic-timeframe>
-          <atomic-timeframe unit="day"></atomic-timeframe>
-          <atomic-timeframe unit="week"></atomic-timeframe>
-          <atomic-timeframe unit="month"></atomic-timeframe>
-          <atomic-timeframe unit="quarter"></atomic-timeframe>
-          <atomic-timeframe unit="year"></atomic-timeframe>
-        </atomic-timeframe-facet>
-        <atomic-rating-facet
-          field="snrating"
-          label="Rating"
-          number-of-intervals="5"
-        >
-        </atomic-rating-facet>
-        <atomic-rating-range-facet
-          facet-id="snrating_range"
-          field="snrating"
-          label="Rating Range"
-          number-of-intervals="5"
-        >
-        </atomic-rating-range-facet>
-        <atomic-color-facet
-          field="filetype"
-          label="Files"
-          number-of-values="6"
-          sort-criteria="occurrences"
-        ></atomic-color-facet>
-      </atomic-facet-manager>
-      <atomic-breadbox></atomic-breadbox>
-      <div class="topbar">
-        <atomic-query-summary enable-duration="false"></atomic-query-summary>
-        <atomic-refine-toggle></atomic-refine-toggle>
-        <atomic-sort-dropdown>
-          <atomic-sort-expression
-            label="relevance"
-            expression="relevancy"
-          ></atomic-sort-expression>
-          <atomic-sort-expression
-            label="most-recent"
-            expression="date descending"
-          ></atomic-sort-expression>
-        </atomic-sort-dropdown>
-      </div>
-      <div class="results">
-        <atomic-did-you-mean></atomic-did-you-mean>
-        <atomic-result-list fields-to-include="snrating,sncost">
-          <atomic-result-template>
-            <template>
-              <style>
-                .field {
-                  display: inline-flex;
-                  white-space: nowrap;
-                  align-items: center;
-                }
-
-                .field-label {
-                  font-weight: bold;
-                  margin-right: 0.25rem;
-                }
-
-                .thumbnail {
-                  display: none;
-                  width: 100%;
-                  height: 100%;
-                }
-
-                .icon {
-                  display: none;
-                }
-
-                .result-root.image-small .thumbnail,
-                .result-root.image-large .thumbnail {
-                  display: inline-block;
-                }
-
-                .result-root.image-icon .icon {
-                  display: inline-block;
-                }
-
-                atomic-result-section-badges {
-                  display: flex;
-                }
-
-                atomic-result-section-badges > atomic-field-condition {
-                  display: inline-block;
-                  height: 100%;
-                }
-
-                .salesforce-badge::part(result-badge-element) {
-                  background-color: #44a1da;
-                  color: white;
-                }
-              </style>
-              <atomic-result-section-visual>
-                <atomic-result-icon class="icon"></atomic-result-icon>
-                <img src="https://picsum.photos/350" class="thumbnail" />
-              </atomic-result-section-visual>
-              <atomic-result-section-badges>
-                <atomic-field-condition must-match-sourcetype="Salesforce">
-                  <atomic-result-badge
-                    label="Salesforce"
-                    class="salesforce-badge"
-                  ></atomic-result-badge>
-                </atomic-field-condition>
-                <atomic-result-badge
-                  field="language"
-                  icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
-                ></atomic-result-badge>
-              </atomic-result-section-badges>
-              <atomic-result-section-title
-                ><atomic-result-link></atomic-result-link
-              ></atomic-result-section-title>
-              <atomic-result-section-title-metadata>
-                <atomic-field-condition class="field" if-defined="snrating">
-                  <atomic-result-rating field="snrating"></atomic-result-rating>
-                </atomic-field-condition>
-                <atomic-field-condition class="field" if-not-defined="snrating">
-                  <atomic-result-printable-uri
-                    max-number-of-parts="3"
-                  ></atomic-result-printable-uri>
-                </atomic-field-condition>
-              </atomic-result-section-title-metadata>
-              <atomic-result-section-excerpt
-                ><atomic-result-text field="excerpt"></atomic-result-text
-              ></atomic-result-section-excerpt>
-              <atomic-result-section-bottom-metadata>
-                <atomic-result-fields-list>
-                  <atomic-field-condition class="field" if-defined="author">
-                    <span class="field-label"
-                      ><atomic-text value="author"></atomic-text>:</span
+    <atomic-aria-live></atomic-aria-live>
+    <atomic-search-interface>
+      <atomic-search-layout>
+        <div class="header-bg"></div>
+        <atomic-layout-section section="search">
+          <atomic-search-box></atomic-search-box>
+        </atomic-layout-section>
+        <atomic-layout-section section="facets">
+          <atomic-facet-manager>
+            <atomic-category-facet
+              field="geographicalhierarchy"
+              label="World Atlas"
+              with-search
+            >
+            </atomic-category-facet>
+            <atomic-facet field="author" label="Authors"></atomic-facet>
+            <atomic-facet field="language" label="Language"></atomic-facet>
+            <atomic-facet
+              field="objecttype"
+              label="Type"
+              display-values-as="link"
+            ></atomic-facet>
+            <atomic-facet
+              field="year"
+              label="Year"
+              display-values-as="box"
+            ></atomic-facet>
+            <atomic-numeric-facet
+              field="ytviewcount"
+              label="Youtube Views"
+              with-input="integer"
+            ></atomic-numeric-facet>
+            <atomic-numeric-facet
+              field="ytlikecount"
+              label="Youtube Likes"
+              display-values-as="link"
+            >
+              <atomic-numeric-range
+                start="0"
+                end="1000"
+                label="Unpopular"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="1000"
+                end="8000"
+                label="Well liked"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="8000"
+                end="100000"
+                label="Popular"
+              ></atomic-numeric-range>
+              <atomic-numeric-range
+                start="100000"
+                end="999999999"
+                label="Treasured"
+              ></atomic-numeric-range>
+            </atomic-numeric-facet>
+            <atomic-numeric-facet field="sncost" label="Cost">
+              <atomic-format-currency currency="CAD"></atomic-format-currency>
+            </atomic-numeric-facet>
+            <atomic-timeframe-facet label="Timeframe" with-date-picker>
+              <atomic-timeframe unit="hour"></atomic-timeframe>
+              <atomic-timeframe unit="day"></atomic-timeframe>
+              <atomic-timeframe unit="week"></atomic-timeframe>
+              <atomic-timeframe unit="month"></atomic-timeframe>
+              <atomic-timeframe unit="quarter"></atomic-timeframe>
+              <atomic-timeframe unit="year"></atomic-timeframe>
+            </atomic-timeframe-facet>
+            <atomic-rating-facet
+              field="snrating"
+              label="Rating"
+              number-of-intervals="5"
+            >
+            </atomic-rating-facet>
+            <atomic-rating-range-facet
+              facet-id="snrating_range"
+              field="snrating"
+              label="Rating Range"
+              number-of-intervals="5"
+            >
+            </atomic-rating-range-facet>
+            <atomic-color-facet
+              field="filetype"
+              label="Files"
+              number-of-values="6"
+              sort-criteria="occurrences"
+            ></atomic-color-facet>
+          </atomic-facet-manager>
+        </atomic-layout-section>
+        <atomic-layout-section section="main">
+          <atomic-layout-section section="status">
+            <atomic-breadbox></atomic-breadbox>
+            <atomic-query-summary></atomic-query-summary>
+            <atomic-refine-toggle></atomic-refine-toggle>
+            <atomic-sort-dropdown>
+              <atomic-sort-expression
+                label="relevance"
+                expression="relevancy"
+              ></atomic-sort-expression>
+              <atomic-sort-expression
+                label="most-recent"
+                expression="date descending"
+              ></atomic-sort-expression>
+            </atomic-sort-dropdown>
+            <atomic-did-you-mean></atomic-did-you-mean>
+          </atomic-layout-section>
+          <atomic-layout-section section="results">
+            <atomic-result-list fields-to-include="snrating,sncost">
+              <atomic-result-template>
+                <template>
+                  <style>
+                    .field {
+                      display: inline-flex;
+                      white-space: nowrap;
+                      align-items: center;
+                    }
+
+                    .field-label {
+                      font-weight: bold;
+                      margin-right: 0.25rem;
+                    }
+
+                    .thumbnail {
+                      display: none;
+                      width: 100%;
+                      height: 100%;
+                    }
+
+                    .icon {
+                      display: none;
+                    }
+
+                    .result-root.image-small .thumbnail,
+                    .result-root.image-large .thumbnail {
+                      display: inline-block;
+                    }
+
+                    .result-root.image-icon .icon {
+                      display: inline-block;
+                    }
+
+                    atomic-result-section-badges {
+                      display: flex;
+                    }
+
+                    atomic-result-section-badges > atomic-field-condition {
+                      display: inline-block;
+                      height: 100%;
+                    }
+
+                    .salesforce-badge::part(result-badge-element) {
+                      background-color: #44a1da;
+                      color: white;
+                    }
+                  </style>
+                  <atomic-result-section-visual>
+                    <atomic-result-icon class="icon"></atomic-result-icon>
+                    <img src="https://picsum.photos/350" class="thumbnail" />
+                  </atomic-result-section-visual>
+                  <atomic-result-section-badges>
+                    <atomic-field-condition must-match-sourcetype="Salesforce">
+                      <atomic-result-badge
+                        label="Salesforce"
+                        class="salesforce-badge"
+                      ></atomic-result-badge>
+                    </atomic-field-condition>
+                    <atomic-result-badge
+                      field="language"
+                      icon="https://raw.githubusercontent.com/Rush/Font-Awesome-SVG-PNG/master/black/svg/language.svg"
+                    ></atomic-result-badge>
+                  </atomic-result-section-badges>
+                  <atomic-result-section-title
+                    ><atomic-result-link></atomic-result-link
+                  ></atomic-result-section-title>
+                  <atomic-result-section-title-metadata>
+                    <atomic-field-condition class="field" if-defined="snrating">
+                      <atomic-result-rating
+                        field="snrating"
+                      ></atomic-result-rating>
+                    </atomic-field-condition>
+                    <atomic-field-condition
+                      class="field"
+                      if-not-defined="snrating"
                     >
+                      <atomic-result-printable-uri
+                        max-number-of-parts="3"
+                      ></atomic-result-printable-uri>
+                    </atomic-field-condition>
+                  </atomic-result-section-title-metadata>
+                  <atomic-result-section-excerpt
+                    ><atomic-result-text field="excerpt"></atomic-result-text
+                  ></atomic-result-section-excerpt>
+                  <atomic-result-section-bottom-metadata>
+                    <atomic-result-fields-list>
+                      <atomic-field-condition class="field" if-defined="author">
+                        <span class="field-label"
+                          ><atomic-text value="author"></atomic-text>:</span
+                        >
+                        <atomic-result-text field="author"></atomic-result-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition class="field" if-defined="source">
+                        <span class="field-label"
+                          ><atomic-text value="source"></atomic-text>:</span
+                        >
+                        <atomic-result-text field="source"></atomic-result-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition
+                        class="field"
+                        if-defined="language"
+                      >
+                        <span class="field-label"
+                          ><atomic-text value="language"></atomic-text>:</span
+                        >
+                        <atomic-result-multi-value-text
+                          field="language"
+                        ></atomic-result-multi-value-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition
+                        class="field"
+                        if-defined="filetype"
+                      >
+                        <span class="field-label"
+                          ><atomic-text value="fileType"></atomic-text>:</span
+                        >
+                        <atomic-result-text
+                          field="filetype"
+                        ></atomic-result-text>
+                      </atomic-field-condition>
+
+                      <atomic-field-condition class="field" if-defined="sncost">
+                        <span class="field-label">Cost:</span>
+                        <atomic-result-number field="sncost">
+                          <atomic-format-currency
+                            currency="CAD"
+                          ></atomic-format-currency>
+                        </atomic-result-number>
+                      </atomic-field-condition>
+
+                      <span class="field">
+                        <span class="field-label">Date:</span>
+                        <atomic-result-date></atomic-result-date>
+                      </span>
+                    </atomic-result-fields-list>
+                  </atomic-result-section-bottom-metadata>
+                  <atomic-table-element label="Description">
+                    <atomic-result-link field="title"></atomic-result-link>
+                    <atomic-result-text field="excerpt"></atomic-result-text>
+                  </atomic-table-element>
+                  <atomic-table-element label="author">
                     <atomic-result-text field="author"></atomic-result-text>
-                  </atomic-field-condition>
-
-                  <atomic-field-condition class="field" if-defined="source">
-                    <span class="field-label"
-                      ><atomic-text value="source"></atomic-text>:</span
-                    >
+                  </atomic-table-element>
+                  <atomic-table-element label="source">
                     <atomic-result-text field="source"></atomic-result-text>
-                  </atomic-field-condition>
-
-                  <atomic-field-condition class="field" if-defined="language">
-                    <span class="field-label"
-                      ><atomic-text value="language"></atomic-text>:</span
-                    >
-                    <atomic-result-multi-value-text
-                      field="language"
-                    ></atomic-result-multi-value-text>
-                  </atomic-field-condition>
-
-                  <atomic-field-condition class="field" if-defined="filetype">
-                    <span class="field-label"
-                      ><atomic-text value="fileType"></atomic-text>:</span
-                    >
+                  </atomic-table-element>
+                  <atomic-table-element label="language">
+                    <atomic-result-text field="language"></atomic-result-text>
+                  </atomic-table-element>
+                  <atomic-table-element label="file-type">
                     <atomic-result-text field="filetype"></atomic-result-text>
-                  </atomic-field-condition>
-
-                  <atomic-field-condition class="field" if-defined="sncost">
-                    <span class="field-label">Cost:</span>
-                    <atomic-result-number field="sncost">
-                      <atomic-format-currency
-                        currency="CAD"
-                      ></atomic-format-currency>
-                    </atomic-result-number>
-                  </atomic-field-condition>
-
-                  <span class="field">
-                    <span class="field-label">Date:</span>
-                    <atomic-result-date></atomic-result-date>
-                  </span>
-                </atomic-result-fields-list>
-              </atomic-result-section-bottom-metadata>
-              <atomic-table-element label="Description">
-                <atomic-result-link field="title"></atomic-result-link>
-                <atomic-result-text field="excerpt"></atomic-result-text>
-              </atomic-table-element>
-              <atomic-table-element label="author">
-                <atomic-result-text field="author"></atomic-result-text>
-              </atomic-table-element>
-              <atomic-table-element label="source">
-                <atomic-result-text field="source"></atomic-result-text>
-              </atomic-table-element>
-              <atomic-table-element label="language">
-                <atomic-result-text field="language"></atomic-result-text>
-              </atomic-table-element>
-              <atomic-table-element label="file-type">
-                <atomic-result-text field="filetype"></atomic-result-text>
-              </atomic-table-element>
-            </template>
-          </atomic-result-template>
-        </atomic-result-list>
-      </div>
-      <div class="pagination">
-        <atomic-load-more-results></atomic-load-more-results>
-        <!-- Alternative pagination
-        <atomic-pager></atomic-pager>
-        <atomic-results-per-page></atomic-results-per-page>
-        -->
-      </div>
-      <div class="status">
-        <atomic-query-error></atomic-query-error>
-        <atomic-no-results></atomic-no-results>
-      </div>
+                  </atomic-table-element>
+                </template>
+              </atomic-result-template>
+            </atomic-result-list>
+            <atomic-query-error></atomic-query-error>
+            <atomic-no-results></atomic-no-results>
+          </atomic-layout-section>
+          <atomic-layout-section section="pagination">
+            <atomic-load-more-results></atomic-load-more-results>
+            <!-- Alternative pagination
+              <atomic-pager></atomic-pager>
+              <atomic-results-per-page></atomic-results-per-page>
+              -->
+          </atomic-layout-section>
+        </atomic-layout-section>
+      </atomic-search-layout>
     </atomic-search-interface>
   </body>
 </html>