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

package/lib/components/SavedPaymentsPage/savedPaymentsPage.js

@@ -8,7 +8,7 @@ import { StoreTitle } from '../Head';
 import PaymentCard from './paymentCard';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 
-import defaultClasses from './savedPaymentsPage.css';
+import defaultClasses from './savedPaymentsPage.module.css';
 
 const SavedPaymentsPage = props => {
     const talonProps = useSavedPaymentsPage();

package/lib/components/ScrollAnchor/scrollAnchor.js

@@ -6,7 +6,7 @@ import React, {
     useRef
 } from 'react';
 
-import classes from './scrollAnchor.css';
+import classes from './scrollAnchor.module.css';
 
 const ScrollAnchor = forwardRef((props, ref) => {
     const anchorRef = useRef();

package/lib/components/SearchBar/__stories__/searchBar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import SearchBar from '../searchBar';
-import defaultClasses from '../searchBar.css';
+import defaultClasses from '../searchBar.module.css';
 
 const stories = storiesOf('Components/SearchBar', module);
 

package/lib/components/SearchBar/__tests__/__snapshots__/suggestedCategories.spec.js.snap

@@ -2,9 +2,29 @@
 
 exports[`renders correctly 1`] = `
 <ul>
-  <li />
-  <li />
-  <li />
-  <li />
+  <li>
+    <SuggestedCategory
+      label="A"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="B"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="C"
+      value="foo"
+    />
+  </li>
+  <li>
+    <SuggestedCategory
+      label="D"
+      value="foo"
+    />
+  </li>
 </ul>
 `;

package/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap

@@ -9,7 +9,7 @@ Array [
       alt="Product Name"
       className="image placeholder"
       loading="eager"
-      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       width={60}
     />
     <img

package/lib/components/SearchBar/__tests__/suggestedCategories.spec.js

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { createTestInstance } from '@magento/peregrine';
 import SuggestedCategories from '../suggestedCategories';
+import SuggestedCategory from '../suggestedCategory';
 
 jest.mock('react-router-dom', () => ({
     Link: jest.fn(() => null),
-    useHistory: jest.fn(),
     useLocation: jest.fn()
 }));
+jest.mock('../suggestedCategory', () => 'SuggestedCategory');
 
-const createHref = jest.fn(path => `${new URL(path, globalThis.location)}`);
-useHistory.mockReturnValue({ createHref });
 useLocation.mockReturnValue(globalThis.location);
 
 const categories = [
@@ -34,7 +33,7 @@ test('renders a max of 4 categories by default', () => {
         <SuggestedCategories categories={categories} value="foo" />
     );
 
-    expect(root.findAllByType(Link)).toHaveLength(4);
+    expect(root.findAllByType(SuggestedCategory)).toHaveLength(4);
 });
 
 test('allows the render limit to be configured', () => {
@@ -42,5 +41,5 @@ test('allows the render limit to be configured', () => {
         <SuggestedCategories categories={categories} limit={2} value="foo" />
     );
 
-    expect(root.findAllByType(Link)).toHaveLength(2);
+    expect(root.findAllByType(SuggestedCategory)).toHaveLength(2);
 });

package/lib/components/SearchBar/autocomplete.js

@@ -4,7 +4,7 @@ import { bool, func, shape, string } from 'prop-types';
 import { useAutocomplete } from '@magento/peregrine/lib/talons/SearchBar';
 import { useIntl } from 'react-intl';
 
-import defaultClasses from './autocomplete.css';
+import defaultClasses from './autocomplete.module.css';
 import { useStyle } from '../../classify';
 import Suggestions from './suggestions';
 

package/lib/components/SearchBar/searchBar.js

@@ -6,7 +6,7 @@ import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
 import { useStyle } from '../../classify';
 import Autocomplete from './autocomplete';
 import SearchField from './searchField';
-import defaultClasses from './searchBar.css';
+import defaultClasses from './searchBar.module.css';
 
 const SearchBar = React.forwardRef((props, ref) => {
     const { isOpen } = props;

package/lib/components/SearchBar/{searchBar.css → searchBar.module.css}

@@ -10,6 +10,7 @@
 .root_open {
     composes: root;
     display: grid;
+    z-index: 3;
 }
 
 .form {

package/lib/components/SearchBar/suggestedCategories.js

@@ -3,7 +3,7 @@ import { arrayOf, func, number, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
 import SuggestedCategory from './suggestedCategory';
-import defaultClasses from './suggestedCategories.css';
+import defaultClasses from './suggestedCategories.module.css';
 
 const SuggestedCategories = props => {
     const { categories, limit, onNavigate, value } = props;

package/lib/components/SearchBar/suggestedCategory.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { useSuggestedCategory } from '@magento/peregrine/lib/talons/SearchBar';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './suggestedCategory.css';
+import defaultClasses from './suggestedCategory.module.css';
 
 const SuggestedCategory = props => {
     const { categoryId, label, onNavigate, value } = props;

package/lib/components/SearchBar/suggestedProduct.js

@@ -6,7 +6,7 @@ import Price from '@magento/venia-ui/lib/components/Price';
 import { useStyle } from '../../classify';
 
 import Image from '../Image';
-import defaultClasses from './suggestedProduct.css';
+import defaultClasses from './suggestedProduct.module.css';
 
 const IMAGE_WIDTH = 60;
 

package/lib/components/SearchBar/suggestedProducts.js

@@ -4,7 +4,7 @@ import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import mapProduct from '../../util/mapProduct';
 import SuggestedProduct from './suggestedProduct';
-import defaultClasses from './suggestedProducts.css';
+import defaultClasses from './suggestedProducts.module.css';
 
 const SuggestedProducts = props => {
     const { limit, onNavigate, products } = props;

package/lib/components/SearchBar/suggestions.js

@@ -6,7 +6,7 @@ import { useSuggestions } from '@magento/peregrine/lib/talons/SearchBar';
 import { useStyle } from '../../classify';
 import SuggestedCategories from './suggestedCategories';
 import SuggestedProducts from './suggestedProducts';
-import defaultClasses from './suggestions.css';
+import defaultClasses from './suggestions.module.css';
 
 const Suggestions = props => {
     const {

package/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap

@@ -245,14 +245,19 @@ exports[`Search Page Component loading indicator does not render when data is pr
       <div
         className="searchInfo"
       >
-        <mock-FormattedMessage
-          defaultMessage="Showing all results:"
-          id="searchPage.searchTermEmpty"
+        <Shimmer
+          width={5}
+        />
+        <Shimmer
+          width={5}
         />
       </div>
       <div
         className="headerButtons"
-      />
+      >
+        <ProductSortShimmer />
+      </div>
+      <SortedByContainerShimmer />
     </div>
     <section
       className="gallery"
@@ -297,88 +302,46 @@ exports[`Search Page Component loading indicator renders when data is not presen
     >
       <div
         className="searchInfo"
-      />
+      >
+        <Shimmer
+          width={5}
+        />
+        <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={
+          Array [
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+          ]
+        }
+      />
+    </section>
+    <section
+      className="pagination"
+    />
   </div>
 </article>
 `;
@@ -399,14 +362,19 @@ exports[`Search Page Component search results does not render if data returned h
       <div
         className="searchInfo"
       >
-        <mock-FormattedMessage
-          defaultMessage="Showing all results:"
-          id="searchPage.searchTermEmpty"
+        <Shimmer
+          width={5}
+        />
+        <Shimmer
+          width={5}
         />
       </div>
       <div
         className="headerButtons"
-      />
+      >
+        <ProductSortShimmer />
+      </div>
+      <SortedByContainerShimmer />
     </div>
     <div
       className="noResult"
@@ -603,14 +571,19 @@ exports[`Search Page Component search results renders if data has items 1`] = `
       <div
         className="searchInfo"
       >
-        <mock-FormattedMessage
-          defaultMessage="Showing all results:"
-          id="searchPage.searchTermEmpty"
+        <Shimmer
+          width={5}
+        />
+        <Shimmer
+          width={5}
         />
       </div>
       <div
         className="headerButtons"
-      />
+      >
+        <ProductSortShimmer />
+      </div>
+      <SortedByContainerShimmer />
     </div>
     <section
       className="gallery"

package/lib/components/SearchPage/__tests__/searchPage.spec.js

@@ -7,13 +7,35 @@ jest.mock('@magento/peregrine/lib/talons/SearchPage/useSearchPage', () => ({
     useSearchPage: jest.fn()
 }));
 
-jest.mock('../../Gallery', () => 'Gallery');
+jest.mock('../../Gallery', () => ({
+    __esModule: true,
+    default: 'Gallery',
+    GalleryShimmer: 'GalleryShimmer'
+}));
 jest.mock('../../FilterModal', () => 'FilterModal');
-jest.mock('../../ProductSort', () => 'ProductSort');
-jest.mock('../../../components/Pagination', () => 'Pagination');
+jest.mock('../../ProductSort', () => ({
+    __esModule: true,
+    default: 'ProductSort',
+    ProductSortShimmer: 'ProductSortShimmer'
+}));
+jest.mock('../../Pagination', () => 'Pagination');
+jest.mock('../../Shimmer', () => 'Shimmer');
 jest.mock('@magento/venia-ui/lib/classify');
-jest.mock('../../SortedByContainer', () => 'SortedByContainer');
-jest.mock('../../FilterModalOpenButton', () => 'FilterModalOpenButton');
+jest.mock('../../SortedByContainer', () => ({
+    __esModule: true,
+    default: 'SortedByContainer',
+    SortedByContainerShimmer: 'SortedByContainerShimmer'
+}));
+jest.mock('../../FilterModalOpenButton', () => ({
+    __esModule: true,
+    default: 'FilterModalOpenButton',
+    FilterModalOpenButtonShimmer: 'FilterModalOpenButtonShimmer'
+}));
+jest.mock('../../FilterSidebar', () => ({
+    __esModule: true,
+    default: 'FilterSidebar',
+    FilterSidebarShimmer: 'FilterSidebarShimmer'
+}));
 
 const talonProps = {
     data: {

package/lib/components/SearchPage/searchPage.js

@@ -6,12 +6,17 @@ import { useSearchPage } from '@magento/peregrine/lib/talons/SearchPage/useSearc
 
 import { useStyle } from '../../classify';
 import Pagination from '../../components/Pagination';
-import Gallery from '../Gallery';
-import { fullPageLoadingIndicator } from '../LoadingIndicator';
-import ProductSort from '../ProductSort';
-import defaultClasses from './searchPage.css';
-import SortedByContainer from '../SortedByContainer';
-import FilterModalOpenButton from '../FilterModalOpenButton';
+import Gallery, { GalleryShimmer } from '../Gallery';
+import ProductSort, { ProductSortShimmer } from '../ProductSort';
+import defaultClasses from './searchPage.module.css';
+import SortedByContainer, {
+    SortedByContainerShimmer
+} from '../SortedByContainer';
+import FilterModalOpenButton, {
+    FilterModalOpenButtonShimmer
+} from '../FilterModalOpenButton';
+import { FilterSidebarShimmer } from '../FilterSidebar';
+import Shimmer from '../Shimmer';
 
 const FilterModal = React.lazy(() => import('../FilterModal'));
 const FilterSidebar = React.lazy(() => import('../FilterSidebar'));
@@ -33,7 +38,18 @@ const SearchPage = props => {
     const { formatMessage } = useIntl();
     const [currentSort] = sortProps;
     const content = useMemo(() => {
-        if (!data && loading) return fullPageLoadingIndicator;
+        if (!data && loading) {
+            return (
+                <Fragment>
+                    <section className={classes.gallery}>
+                        <GalleryShimmer
+                            items={Array.from({ length: 12 }).fill(null)}
+                        />
+                    </section>
+                    <section className={classes.pagination} />
+                </Fragment>
+            );
+        }
 
         if (!data && error) {
             return (
@@ -89,12 +105,16 @@ const SearchPage = props => {
             : 0;
 
     const shouldShowFilterButtons = filters && filters.length;
+    const shouldShowFilterShimmer = filters === null;
 
     // If there are no products we can hide the sort button.
     const shouldShowSortButtons = productsCount;
+    const shouldShowSortShimmer = !productsCount && loading;
 
     const maybeFilterButtons = shouldShowFilterButtons ? (
         <FilterModalOpenButton filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterModalOpenButtonShimmer />
     ) : null;
 
     const maybeFilterModal = shouldShowFilterButtons ? (
@@ -103,17 +123,25 @@ const SearchPage = props => {
 
     const maybeSidebar = shouldShowFilterButtons ? (
         <FilterSidebar filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterSidebarShimmer />
     ) : null;
 
     const maybeSortButton = shouldShowSortButtons ? (
         <ProductSort sortProps={sortProps} />
+    ) : shouldShowSortShimmer ? (
+        <ProductSortShimmer />
     ) : null;
 
     const maybeSortContainer = shouldShowSortButtons ? (
         <SortedByContainer currentSort={currentSort} />
+    ) : shouldShowSortShimmer ? (
+        <SortedByContainerShimmer />
     ) : null;
 
-    const searchResultsHeading = !data ? null : searchTerm ? (
+    const searchResultsHeading = loading ? (
+        <Shimmer width={5} />
+    ) : !data ? null : searchTerm ? (
         <FormattedMessage
             id={'searchPage.searchTerm'}
             values={{
@@ -143,12 +171,16 @@ const SearchPage = props => {
                     { totalCount: productsCount }
                 )}
             </span>
+        ) : loading ? (
+            <Shimmer width={5} />
         ) : null;
 
     return (
         <article className={classes.root}>
             <div className={classes.sidebar}>
-                <Suspense fallback={null}>{maybeSidebar}</Suspense>
+                <Suspense fallback={<FilterSidebarShimmer />}>
+                    {maybeSidebar}
+                </Suspense>
             </div>
             <div className={classes.searchContent}>
                 <div className={classes.heading}>

package/lib/components/Select/select.js

@@ -8,7 +8,7 @@ import {
 
 import { useStyle } from '../../classify';
 import { FieldIcons, Message } from '../Field';
-import defaultClasses from './select.css';
+import defaultClasses from './select.module.css';
 import Icon from '../Icon';
 import { ChevronDown as ChevronDownIcon } from 'react-feather';
 

package/lib/components/Select/{select.css → select.module.css}

@@ -8,7 +8,7 @@
 
 .input,
 .input_error {
-    composes: input from '../Field/field.css';
+    composes: input from '../Field/field.module.css';
     grid-area: input-start / input-start / input-end / icon-end;
     padding-right: calc(2.25rem - 1px);
 }

package/lib/components/Shimmer/__stories__/shimmer.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Shimmer from '../shimmer';
+import Image from '../../Image';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+
+const stories = storiesOf('Components/Shimmer', module);
+
+stories.add('Default', () => <Shimmer width="100%" />);
+
+stories.add('Multiple Shimmer with different widths', () => {
+    return (
+        <div style={{ display: 'grid', gridGap: '0.5rem' }}>
+            <Shimmer width="100%" />
+            <Shimmer width="50%" />
+            <Shimmer width="25%" />
+        </div>
+    );
+});
+
+stories.add('A Shimmer of an Image Component', () => {
+    return (
+        <Shimmer>
+            <Image
+                alt="Image Shimmer"
+                src={transparentPlaceholder}
+                width={200}
+            />
+        </Shimmer>
+    );
+});
+
+stories.add('A Shimmer with fixed dimensions and border radius', () => {
+    return <Shimmer borderRadius={3} height={3} width={3} />;
+});
+
+stories.add('A Shimmer of type button', () => <Shimmer type="button" />);
+
+stories.add('A Shimmer of type textInput', () => <Shimmer type="textInput" />);
+
+stories.add('A Shimmer of type textArea', () => <Shimmer type="textArea" />);
+
+stories.add('A Shimmer of type radio', () => (
+    <Shimmer animationSize="small" type="radio" />
+));
+
+stories.add('A Shimmer of type checkbox', () => (
+    <Shimmer animationSize="small" type="checkbox" />
+));
+
+const loremContentText =
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias consectetur delectus enim est, excepturi fuga, in ipsam molestiae necessitatibus non nostrum quam rerum sequi voluptatem. Nemo neque perferendis quaerat.';
+const buttonContentText = 'Flexible Shimmer Button with content';
+
+stories.add('Multiple Shimmer with different types and content', () => {
+    return (
+        <div style={{ display: 'grid', gridGap: '0.5rem' }}>
+            <Shimmer>
+                <p>{loremContentText}</p>
+            </Shimmer>
+            <Shimmer width="25%" />
+            <Shimmer width="50%" />
+            <div style={{ display: 'flex' }}>
+                <Shimmer style={{ marginRight: '0.5rem' }} type="button">
+                    {buttonContentText}
+                </Shimmer>
+                <Shimmer type="button" />
+            </div>
+        </div>
+    );
+});

package/lib/components/Shimmer/__tests__/__snapshots__/shimmer.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Shimmer renders default size 1`] = `
+<div
+  className="root_rectangle"
+  style={
+    Object {
+      "width": "100%",
+    }
+  }
+/>
+`;