Remove old classes in doc, rename Toggle > ToggleRefinement, fix a few visual bugs

Author: Ronan Levesque

content/widgets/hierarchical-menu.md

@@ -118,10 +118,6 @@ classes:
     description: the root div of the widget
   - name: .ais-HierarchicalMenu--noRefinement
     description: the root div of the widget with no refinement
-  - name: .ais-HierarchicalMenu-header
-    description: the header of the widget (optional)
-  - name: .ais-HierarchicalMenu-body
-    description: the body of the widget
   - name: .ais-HierarchicalMenu-searchBox
     description: the search box of the widget
   - name: .ais-HierarchicalMenu-list
@@ -150,6 +146,4 @@ classes:
     description: the button used to display more categories
   - name: .ais-HierarchicalMenu-showMore--disabled
     description: the disabled button used to display more categories
-  - name: .ais-HierarchicalMenu-footer
-    description: the footer of the widget (optional)
 ---

content/widgets/menu-select.md

@@ -13,14 +13,8 @@ classes:
     description: the root div of the widget
   - name: .ais-MenuSelect--noRefinement
     description: the root div of the widget with no refinement
-  - name: .ais-MenuSelect-header
-    description: the header of the widget (optional)
-  - name: .ais-MenuSelect-body
-    description: the body of the widget
   - name: .ais-MenuSelect-select
     description: the select
   - name: .ais-MenuSelect-option
     description: the select option
-  - name: .ais-MenuSelect-footer
-    description: the footer of the widget (optional)
 ---

content/widgets/toggle-refinement.md

@@ -0,0 +1,31 @@
+---
+title: ToggleRefinement
+type: widget
+html: |
+  <div class="ais-ToggleRefinement">
+    <ul class="ais-ToggleRefinement-list">
+      <li class="ais-ToggleRefinement-item">
+        <label class="ais-ToggleRefinement-label">
+          <input class="ais-ToggleRefinement-checkbox" type="checkbox" value="Free Shipping" />
+          <span class="ais-ToggleRefinement-labelText">Free Shipping</span>
+          <span class="ais-ToggleRefinement-count">18,013</span>
+        </label>
+      </li>
+    </ul>
+  </div>
+classes:
+  - name: .ais-ToggleRefinement
+    description: the root div of the widget
+  - name: .ais-ToggleRefinement-list
+    description: the list of toggles
+  - name: .ais-ToggleRefinement-item
+    description: the toggle list item
+  - name: .ais-ToggleRefinement-label
+    description: the label of each toggle item
+  - name: .ais-ToggleRefinement-checkbox
+    description: the checkbox input of each toggle item
+  - name: .ais-ToggleRefinement-labelText
+    description: the label text of each toggle item
+  - name: .ais-ToggleRefinement-count
+    description: the count of items for each item
+---

content/widgets/toggle.md

@@ -2,8 +2,8 @@
   <label>
     <small>Choose a CSS theme:</small>
     <select name="" id="js-changeTheme">
-      <option value="/assets/css/{{ index .Site.Data.hashcss "reset.css" }}">Reset</option>
       <option value="/assets/css/{{ index .Site.Data.hashcss "algolia.css" }}">Algolia</option>
+      <option value="/assets/css/{{ index .Site.Data.hashcss "reset.css" }}">Reset</option>
       <option value="">None</option>
     </select>
   </label>

layouts/partials/theme-selector.html

@@ -24,6 +24,6 @@ <h3>Widgets:</h3>
     <li><a href="/widgets/snippet">Snippet</a></li>
     <li><a href="/widgets/sort-by">SortBy</a></li>
     <li><a href="/widgets/stats">Stats</a></li>
-    <li><a href="/widgets/toggle">Toggle</a></li>
+    <li><a href="/widgets/toggle-refinement">ToggleRefinement</a></li>
   </ul>
 </aside>

layouts/partials/widgets-list.html

@@ -2,32 +2,27 @@ import './highlight';
 
 const changeThemeSelect = document.getElementById('js-changeTheme');
 const customThemeStyleSheet = document.getElementById('js-customTheme');
-const localStorageTheme = localStorage.getItem('customTheme') || '';
+const localStorageSelectChoice = localStorage.getItem('selectChoice') || 0;
 const hoverClass = document.querySelectorAll('.js-hoverClass');
 const codeWrapperTabs = document.querySelectorAll('.code-wrapper-tab');
 
 // Store current CSS theme in localStorage
 
-customThemeStyleSheet.setAttribute('href', localStorageTheme);
+customThemeStyleSheet.setAttribute(
+  'href',
+  changeThemeSelect.options[localStorageSelectChoice].value
+);
 
 if (changeThemeSelect) {
-  changeThemeSelect.value = localStorageTheme;
-  changeThemeSelect.addEventListener('change', () => {
-    customThemeStyleSheet.setAttribute('href', changeThemeSelect.value);
-    localStorage.setItem('customTheme', changeThemeSelect.value);
+  changeThemeSelect.value =
+    changeThemeSelect.options[localStorageSelectChoice].value;
+  changeThemeSelect.addEventListener('change', e => {
+    customThemeStyleSheet.setAttribute(
+      'href',
+      changeThemeSelect.options[e.target.options.selectedIndex].value
+    );
+    localStorage.setItem('selectChoice', e.target.options.selectedIndex);
   });
-
-  // FIXME
-  // Used to avoid CSS errors when updating themes and reloading
-  // Comment when comitting
-
-  // window.setTimeout(() => {
-  //   changeThemeSelect.value = changeThemeSelect.options[1].value;
-  //   customThemeStyleSheet.setAttribute(
-  //     'href',
-  //     changeThemeSelect.options[1].value
-  //   );
-  // }, 300);
 }
 
 // Hover list of classes to highligh them

src/js/main.js

@@ -23,7 +23,6 @@ a[class^='ais-'] {
 .ais-ClearRefinements,
 .ais-CurrentRefinements,
 .ais-HierarchicalMenu,
-.ais-Highlight,
 .ais-Hits,
 .ais-Results,
 .ais-HitsPerPage,
@@ -42,10 +41,9 @@ a[class^='ais-'] {
 .ais-RatingMenu,
 .ais-RefinementList,
 .ais-SearchBox,
-.ais-Snippet,
 .ais-SortBy,
 .ais-Stats,
-.ais-Toggle {
+.ais-ToggleRefinement {
   color: $port-gore;
 }
 
@@ -203,7 +201,7 @@ a[class^='ais-'] {
 .ais-Menu-count,
 .ais-RatingMenu-count,
 .ais-RefinementList-count,
-.ais-Toggle-count {
+.ais-ToggleRefinement-count {
   font-size: 0.8rem;
 
   &:before {
@@ -231,20 +229,6 @@ a[class^='ais-'] {
   background-color: $koromiko;
 }
 
-.ais-InfiniteHits-header,
-.ais-InfiniteResults-header,
-.ais-Hits-header,
-.ais-Results-header {
-  margin-bottom: 1rem;
-}
-
-.ais-InfiniteHits-footer,
-.ais-InfiniteResults-footer,
-.ais-Hits-footer,
-.ais-Results-footer {
-  margin-top: 1rem;
-}
-
 .ais-InfiniteHits-list,
 .ais-InfiniteResults-list,
 .ais-Hits-list,
@@ -253,6 +237,10 @@ a[class^='ais-'] {
   margin-left: -1rem;
   display: flex;
   flex-wrap: wrap;
+
+  .ais-Panel-body & {
+    margin: 0.5rem 0 0 -1rem;
+  }
 }
 
 .ais-InfiniteHits-item,
@@ -265,6 +253,10 @@ a[class^='ais-'] {
   width: calc(25% - 1rem);
   border: 1px solid $ghost;
   box-shadow: 0 2px 5px 0px lighten($ghost, 10%);
+
+  .ais-Panel-body & {
+    margin: 0.5rem 0 0.5rem 1rem;
+  }
 }
 
 .ais-InfiniteHits-loadMore,
@@ -399,14 +391,18 @@ a[class^='ais-'] {
     border-color: darken($ghost, 20%);
     box-sizing: border-box;
   }
-}
 
-.rheostat-handle {
-  border-color: darken($ghost, 20%);
-}
+  .rheostat-handle {
+    border-color: darken($ghost, 20%);
+  }
+
+  .rheostat-marker {
+    background-color: darken($ghost, 20%);
+  }
 
-.rheostat-marker {
-  background-color: darken($ghost, 20%);
+  .ais-Panel-body & {
+    margin: 2rem 0;
+  }
 }
 
 .ais-RatingMenu-count,

src/scss/themes/algolia.scss

@@ -12,7 +12,7 @@
 .ais-Pagination-list,
 .ais-RatingMenu-list,
 .ais-RefinementList-list,
-.ais-Toggle-list {
+.ais-ToggleRefinement-list {
   margin: 0;
   padding: 0;
   list-style: none;