@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap

@@ -40,63 +40,18 @@ Array [
           <div
             className="headerButtons"
           >
-            <div
-              className="root"
-            >
-              <button
-                className="root_lowPriority"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="content"
-                >
-                  <span
-                    className="mobileText"
-                  >
-                    <mock-FormattedMessage
-                      defaultMessage="Sort"
-                      id="productSort.sortButton"
-                    />
-                  </span>
-                  <span
-                    className="desktopText"
-                  >
-                    <span
-                      className="sortText"
-                    >
-                      <mock-FormattedMessage
-                        defaultMessage="Sort by"
-                        id="productSort.sortByButton"
-                      />
-                       
-                      
-                    </span>
-                    <span
-                      className="root"
-                    >
-                      <svg
-                        className="icon"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <polyline
-                          points="6 9 12 15 18 9"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
           </div>
           <SortedByContainer
             currentSort={
@@ -133,6 +88,208 @@ Array [
 `;
 
 exports[`filter button/modal renders when there are filters 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <div
+      className="categoryHeader"
+    >
+      <h1
+        className="title"
+      >
+        <div
+          className="categoryTitle"
+        >
+          Name
+        </div>
+      </h1>
+    </div>
+    <div
+      className="contentWrapper"
+    >
+      <div
+        className="sidebar"
+      />
+      <div
+        className="categoryContent"
+      >
+        <div
+          className="heading"
+        >
+          <div
+            className="categoryInfo"
+          />
+          <div
+            className="headerButtons"
+          >
+            <FilterModalOpenButton
+              filters={
+                Array [
+                  Object {},
+                ]
+              }
+            />
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
+          </div>
+          <SortedByContainer
+            currentSort={
+              Object {
+                "sortAttribute": "",
+                "sortDirection": "",
+                "sortText": "",
+              }
+            }
+          />
+        </div>
+        <section
+          className="gallery"
+        >
+          <Gallery
+            items={
+              Object {
+                "id": 1,
+              }
+            }
+          />
+        </section>
+        <div
+          className="pagination"
+        >
+          <Pagination
+            pageControl={Object {}}
+          />
+        </div>
+        <require('../../components/FilterModal')
+          filters={
+            Array [
+              Object {},
+            ]
+          }
+        />
+      </div>
+    </div>
+  </article>,
+]
+`;
+
+exports[`filter sidebar does not render if not in viewport 1`] = `
+Array [
+  <Breadcrumbs
+    categoryId={42}
+  />,
+  "Title",
+  <article
+    className="root"
+  >
+    <div
+      className="categoryHeader"
+    >
+      <h1
+        className="title"
+      >
+        <div
+          className="categoryTitle"
+        >
+          Name
+        </div>
+      </h1>
+    </div>
+    <div
+      className="contentWrapper"
+    >
+      <div
+        className="sidebar"
+      />
+      <div
+        className="categoryContent"
+      >
+        <div
+          className="heading"
+        >
+          <div
+            className="categoryInfo"
+          />
+          <div
+            className="headerButtons"
+          >
+            <FilterModalOpenButton
+              filters={
+                Array [
+                  Object {},
+                ]
+              }
+            />
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
+          </div>
+          <SortedByContainer
+            currentSort={
+              Object {
+                "sortAttribute": "",
+                "sortDirection": "",
+                "sortText": "",
+              }
+            }
+          />
+        </div>
+        <section
+          className="gallery"
+        >
+          <Gallery
+            items={
+              Object {
+                "id": 1,
+              }
+            }
+          />
+        </section>
+        <div
+          className="pagination"
+        >
+          <Pagination
+            pageControl={Object {}}
+          />
+        </div>
+        <require('../../components/FilterModal')
+          filters={
+            Array [
+              Object {},
+            ]
+          }
+        />
+      </div>
+    </div>
+  </article>,
+]
+`;
+
+exports[`filter sidebar renders when in viewport 1`] = `
 Array [
   <Breadcrumbs
     categoryId={42}
@@ -187,63 +344,18 @@ Array [
                 ]
               }
             />
-            <div
-              className="root"
-            >
-              <button
-                className="root_lowPriority"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="content"
-                >
-                  <span
-                    className="mobileText"
-                  >
-                    <mock-FormattedMessage
-                      defaultMessage="Sort"
-                      id="productSort.sortButton"
-                    />
-                  </span>
-                  <span
-                    className="desktopText"
-                  >
-                    <span
-                      className="sortText"
-                    >
-                      <mock-FormattedMessage
-                        defaultMessage="Sort by"
-                        id="productSort.sortByButton"
-                      />
-                       
-                      
-                    </span>
-                    <span
-                      className="root"
-                    >
-                      <svg
-                        className="icon"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <polyline
-                          points="6 9 12 15 18 9"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
           </div>
           <SortedByContainer
             currentSort={
@@ -372,88 +484,32 @@ Array [
         >
           <div
             className="categoryInfo"
-          />
+          >
+            <Shimmer
+              width={5}
+            />
+          </div>
           <div
             className="headerButtons"
-          />
-        </div>
-        <div
-          className="global"
-        >
-          <span
-            className="root"
           >
-            <svg
-              className="icon"
-              fill="none"
-              height={64}
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width={64}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <line
-                x1="12"
-                x2="12"
-                y1="2"
-                y2="6"
-              />
-              <line
-                x1="12"
-                x2="12"
-                y1="18"
-                y2="22"
-              />
-              <line
-                x1="4.93"
-                x2="7.76"
-                y1="4.93"
-                y2="7.76"
-              />
-              <line
-                x1="16.24"
-                x2="19.07"
-                y1="16.24"
-                y2="19.07"
-              />
-              <line
-                x1="2"
-                x2="6"
-                y1="12"
-                y2="12"
-              />
-              <line
-                x1="18"
-                x2="22"
-                y1="12"
-                y2="12"
-              />
-              <line
-                x1="4.93"
-                x2="7.76"
-                y1="19.07"
-                y2="16.24"
-              />
-              <line
-                x1="16.24"
-                x2="19.07"
-                y1="7.76"
-                y2="4.93"
-              />
-            </svg>
-          </span>
-          <span
-            className="message"
-          >
-            <mock-FormattedMessage
-              defaultMessage="Fetching Data..."
-              id="loadingIndicator.message"
-            />
-          </span>
+            <ProductSortShimmer />
+          </div>
+          <SortedByContainerShimmer />
         </div>
+        <section
+          className="gallery"
+        >
+          <GalleryShimmer
+            items={
+              Object {
+                "id": 1,
+              }
+            }
+          />
+        </section>
+        <div
+          className="pagination"
+        />
       </div>
     </div>
   </article>,
@@ -500,63 +556,18 @@ Array [
           <div
             className="headerButtons"
           >
-            <div
-              className="root"
-            >
-              <button
-                className="root_lowPriority"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="content"
-                >
-                  <span
-                    className="mobileText"
-                  >
-                    <mock-FormattedMessage
-                      defaultMessage="Sort"
-                      id="productSort.sortButton"
-                    />
-                  </span>
-                  <span
-                    className="desktopText"
-                  >
-                    <span
-                      className="sortText"
-                    >
-                      <mock-FormattedMessage
-                        defaultMessage="Sort by"
-                        id="productSort.sortByButton"
-                      />
-                       
-                      
-                    </span>
-                    <span
-                      className="root"
-                    >
-                      <svg
-                        className="icon"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <polyline
-                          points="6 9 12 15 18 9"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
           </div>
           <SortedByContainer
             currentSort={
@@ -682,63 +693,18 @@ Array [
           <div
             className="headerButtons"
           >
-            <div
-              className="root"
-            >
-              <button
-                className="root_lowPriority"
-                disabled={false}
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="content"
-                >
-                  <span
-                    className="mobileText"
-                  >
-                    <mock-FormattedMessage
-                      defaultMessage="Sort"
-                      id="productSort.sortButton"
-                    />
-                  </span>
-                  <span
-                    className="desktopText"
-                  >
-                    <span
-                      className="sortText"
-                    >
-                      <mock-FormattedMessage
-                        defaultMessage="Sort by"
-                        id="productSort.sortByButton"
-                      />
-                       
-                      
-                    </span>
-                    <span
-                      className="root"
-                    >
-                      <svg
-                        className="icon"
-                        fill="none"
-                        height="24"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <polyline
-                          points="6 9 12 15 18 9"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </span>
-              </button>
-            </div>
+            <ProductSort
+              sortProps={
+                Array [
+                  Object {
+                    "sortAttribute": "",
+                    "sortDirection": "",
+                    "sortText": "",
+                  },
+                  [MockFunction],
+                ]
+              }
+            />
           </div>
           <SortedByContainer
             currentSort={

package/lib/RootComponents/Category/__tests__/categoryContent.shimmer.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import CategoryContentShimmer from '../categoryContent.shimmer';
+
+jest.mock('@magento/venia-ui/lib/classify');
+
+test('renders correctly', () => {
+    const instance = createTestInstance(<CategoryContentShimmer />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});