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

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap

@@ -756,3 +756,300 @@ exports[`it renders open order row 1`] = `
   </div>
 </li>
 `;
+
+exports[`it renders with missing order information 1`] = `
+<li
+  className="root"
+>
+  <div
+    className="orderNumberContainer"
+  >
+    <span
+      className="orderNumberLabel"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Order #"
+        id="orderRow.orderNumberText"
+      />
+    </span>
+    <span
+      className="orderNumber"
+    >
+      000000005
+    </span>
+  </div>
+  <div
+    className="orderDateContainer"
+  >
+    <span
+      className="orderDateLabel"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Order Date"
+        id="orderRow.orderDateText"
+      />
+    </span>
+    <span
+      className="orderDate"
+    >
+      May 26, 2020
+    </span>
+  </div>
+  <div
+    className="orderTotalContainer"
+  >
+    <span
+      className="orderTotalLabel"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Order Total"
+        id="orderRow.orderTotalText"
+      />
+    </span>
+    <div
+      className="orderTotal"
+    >
+      -
+    </div>
+  </div>
+  <div
+    className="orderItemsContainer"
+  >
+    <div
+      componentName="CollapsedImageGallery"
+      items={
+        Array [
+          Object {
+            "id": 1094,
+            "sku": "VA03",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "valeria-two-layer-tank",
+            "url_suffix": ".html",
+          },
+          Object {
+            "id": 1103,
+            "sku": "VP08",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "chloe-silk-shell",
+            "url_suffix": ".html",
+          },
+          Object {
+            "id": 1108,
+            "sku": "VSW09",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "helena-cardigan",
+            "url_suffix": ".html",
+          },
+        ]
+      }
+    />
+  </div>
+  <div
+    className="orderStatusContainer"
+  >
+    <span
+      className="orderStatusBadge"
+    >
+      Shipped
+    </span>
+    <div
+      componentName="OrderProgressBar"
+      status="Shipped"
+    />
+  </div>
+  <button
+    className="contentToggleContainer"
+    onClick={[MockFunction]}
+    type="button"
+  >
+    <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>
+  </button>
+  <div
+    className="content_collapsed"
+  >
+    <div
+      componentName="Order Details"
+      imagesData={
+        Array [
+          Object {
+            "id": 1094,
+            "sku": "VA03",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "valeria-two-layer-tank",
+            "url_suffix": ".html",
+          },
+          Object {
+            "id": 1103,
+            "sku": "VP08",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "chloe-silk-shell",
+            "url_suffix": ".html",
+          },
+          Object {
+            "id": 1108,
+            "sku": "VSW09",
+            "thumbnail": Object {
+              "url": "https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw01-rn_main_2.jpg",
+            },
+            "url_key": "helena-cardigan",
+            "url_suffix": ".html",
+          },
+        ]
+      }
+      orderData={
+        Object {
+          "billing_address": Object {
+            "city": "Austin",
+            "country_code": "US",
+            "firstname": "Gooseton",
+            "lastname": "Jr",
+            "postcode": "78759",
+            "region_id": "TX",
+            "street": "Goose Dr",
+            "telephone": "9123456789",
+          },
+          "id": 2,
+          "invoices": Array [
+            Object {
+              "id": 1,
+            },
+          ],
+          "items": Array [
+            Object {
+              "id": "3",
+              "product_name": "Product 3",
+              "product_sale_price": "$100.00",
+              "product_sku": "VA03",
+              "quantity_ordered": 1,
+              "selected_options": Array [
+                Object {
+                  "label": "Color",
+                  "value": "Blue",
+                },
+              ],
+            },
+            Object {
+              "id": "4",
+              "product_name": "Product 4",
+              "product_sale_price": "$100.00",
+              "product_sku": "VP08",
+              "quantity_ordered": 1,
+              "selected_options": Array [
+                Object {
+                  "label": "Color",
+                  "value": "Black",
+                },
+              ],
+            },
+            Object {
+              "id": "5",
+              "product_name": "Product 5",
+              "product_sale_price": "$100.00",
+              "product_sku": "VSW09",
+              "quantity_ordered": 1,
+              "selected_options": Array [
+                Object {
+                  "label": "Color",
+                  "value": "Orange",
+                },
+              ],
+            },
+          ],
+          "number": "000000005",
+          "order_date": "2020-05-26 18:22:35",
+          "payment_methods": Array [
+            Object {
+              "additional_data": Array [
+                Object {
+                  "name": "card_type",
+                  "value": "Visa",
+                },
+                Object {
+                  "name": "last_four",
+                  "value": "1234",
+                },
+              ],
+              "name": "Braintree",
+              "type": "Credit Card",
+            },
+          ],
+          "shipments": Array [
+            Object {
+              "id": "1",
+              "tracking": Array [
+                Object {
+                  "carrier": "Fedex",
+                  "number": "FEDEX5885541235452125",
+                },
+              ],
+            },
+          ],
+          "shipping_address": Object {
+            "city": "Austin",
+            "country_code": "US",
+            "firstname": "Gooseton",
+            "lastname": "Jr",
+            "postcode": "78759",
+            "region_id": "TX",
+            "street": "Goose Dr",
+            "telephone": "9123456789",
+          },
+          "shipping_method": "Free",
+          "status": "Received",
+          "total": Object {
+            "discounts": Array [],
+            "grand_total": Object {
+              "currency": null,
+              "value": 1000,
+            },
+            "subtotal": Object {
+              "currency": null,
+              "value": null,
+            },
+            "total_shipping": Object {
+              "currency": null,
+              "value": null,
+            },
+            "total_tax": Object {
+              "currency": null,
+              "value": null,
+            },
+          },
+        }
+      }
+    />
+  </div>
+</li>
+`;

package/lib/components/OrderHistoryPage/__tests__/orderRow.spec.js

@@ -267,3 +267,39 @@ test('it renders delivered status', () => {
 
     expect(orderProgressProps.status).toBe('Delivered');
 });
+
+test('it renders with missing order information', () => {
+    useOrderRow.mockReturnValue({
+        loading: false,
+        imagesData,
+        isOpen: false,
+        handleContentToggle: jest.fn()
+    });
+
+    const receivedOrder = {
+        ...mockOrder,
+        status: 'Received',
+        total: {
+            discounts: [],
+            grand_total: {
+                currency: null,
+                value: 1000
+            },
+            subtotal: {
+                currency: null,
+                value: null
+            },
+            total_shipping: {
+                currency: null,
+                value: null
+            },
+            total_tax: {
+                currency: null,
+                value: null
+            }
+        }
+    };
+
+    const tree = createTestInstance(<OrderRow order={receivedOrder} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+});

package/lib/components/OrderHistoryPage/collapsedImageGallery.js

@@ -4,7 +4,7 @@ import { arrayOf, object, shape, string } from 'prop-types';
 import { useStyle } from '../../classify';
 import Image from '../Image';
 
-import defaultClasses from './collapsedImageGallery.css';
+import defaultClasses from './collapsedImageGallery.module.css';
 
 const DISPLAY_COUNT = 4;
 

package/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -19,7 +19,7 @@ import LoadingIndicator from '../LoadingIndicator';
 import { StoreTitle } from '../Head';
 import TextInput from '../TextInput';
 
-import defaultClasses from './orderHistoryPage.css';
+import defaultClasses from './orderHistoryPage.module.css';
 import OrderRow from './orderRow';
 import ResetButton from './resetButton';
 

package/lib/components/OrderHistoryPage/{orderHistoryPage.css → orderHistoryPage.module.css}

@@ -38,7 +38,7 @@
 }
 
 .searchButton {
-    composes: root_highPriority from '../Button/button.css';
+    composes: root_highPriority from '../Button/button.module.css';
 
     width: 5rem;
     height: 2rem;
@@ -50,7 +50,7 @@
 }
 
 .loadMoreButton {
-    composes: root_lowPriority from '../Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
     justify-self: center;
 }
 

package/lib/components/OrderHistoryPage/orderProgressBar.js

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './orderProgressBar.css';
+import defaultClasses from './orderProgressBar.module.css';
 
 const TOTAL_STEPS = 4;
 

package/lib/components/OrderHistoryPage/orderRow.js

@@ -10,7 +10,7 @@ import Icon from '../Icon';
 import CollapsedImageGallery from './collapsedImageGallery';
 import OrderProgressBar from './orderProgressBar';
 import OrderDetails from './OrderDetails';
-import defaultClasses from './orderRow.css';
+import defaultClasses from './orderRow.module.css';
 
 const OrderRow = props => {
     const { order } = props;
@@ -82,6 +82,13 @@ const OrderRow = props => {
         <OrderDetails orderData={order} imagesData={imagesData} />
     );
 
+    const orderTotalPrice =
+        currency && orderTotal !== null ? (
+            <Price currencyCode={currency} value={orderTotal} />
+        ) : (
+            '-'
+        );
+
     return (
         <li className={classes.root}>
             <div className={classes.orderNumberContainer}>
@@ -109,9 +116,7 @@ const OrderRow = props => {
                         defaultMessage={'Order Total'}
                     />
                 </span>
-                <div className={classes.orderTotal}>
-                    <Price currencyCode={currency} value={orderTotal} />
-                </div>
+                <div className={classes.orderTotal}>{orderTotalPrice}</div>
             </div>
             <div className={classes.orderItemsContainer}>
                 {collapsedImageGalleryElement}

package/lib/components/PageLoadingIndicator/__tests__/pageLoadingIndicator.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+import PageLoadingIndicator from '../pageLoadingIndicator';
+
+jest.mock(
+    '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator'
+);
+
+jest.mock('../../../classify');
+
+const givenLoadedPage = () => {
+    usePageLoadingIndicator.mockImplementation(() => ({
+        isPageLoading: false
+    }));
+};
+
+const givenPageLoading = () => {
+    usePageLoadingIndicator.mockImplementation(() => ({
+        isPageLoading: true
+    }));
+};
+
+beforeEach(() => {
+    usePageLoadingIndicator.mockClear();
+    givenLoadedPage();
+});
+
+describe('#PageLoadingIndicator does not render', () => {
+    test('when page is not loading', async () => {
+        let tree;
+
+        await act(() => {
+            tree = create(<PageLoadingIndicator />);
+        });
+
+        expect(tree.toJSON()).toBeNull();
+    });
+});
+
+describe('#PageLoadingIndicator displays', () => {
+    test('when page is loading', async () => {
+        givenPageLoading();
+        let tree;
+
+        await act(() => {
+            tree = create(<PageLoadingIndicator />);
+        });
+
+        expect(tree.toJSON()).not.toBeNull();
+    });
+
+    test('when absolute is true and page is not loading', async () => {
+        givenLoadedPage();
+        let tree;
+
+        await act(() => {
+            tree = create(<PageLoadingIndicator absolute />);
+        });
+
+        expect(tree.toJSON()).not.toBeNull();
+    });
+});

package/lib/components/PageLoadingIndicator/index.js

@@ -1 +1 @@
-export { default } from './indicator';
+export { default } from './pageLoadingIndicator';

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { shape, string, bool } from 'prop-types';
+import { useStyle } from '../../classify';
+import defaultClasses from './pageLoadingIndicator.module.css';
+import usePageLoadingIndicator from '@magento/peregrine/lib/talons/PageLoadingIndicator/usePageLoadingIndicator';
+
+const PageLoadingIndicator = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { absolute } = props;
+    const { isPageLoading, loadingState } = usePageLoadingIndicator();
+
+    if (!isPageLoading && !absolute) {
+        return null;
+    }
+
+    return (
+        <div className={absolute ? classes.root_absolute : classes.root}>
+            <div className={classes[`indicator_${loadingState}`]} />
+        </div>
+    );
+};
+
+PageLoadingIndicator.defaultProps = {
+    classes: {},
+    absolute: false
+};
+
+PageLoadingIndicator.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    absolute: bool
+};
+
+export default PageLoadingIndicator;

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css

@@ -0,0 +1,39 @@
+.root {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 2px;
+    background: rgb(var(--venia-global-color-gray-100));
+}
+
+.root_absolute {
+    composes: root;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.indicator_off {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    background: rgb(var(--venia-global-color-blue-600));
+    transform: translateX(-100%);
+    transform-origin: left;
+    transition: transform 0.25s linear;
+}
+
+.indicator_loading {
+    composes: indicator_off;
+    opacity: 1;
+    transform: translateX(-25%);
+}
+
+.indicator_done {
+    composes: indicator_off;
+    opacity: 1;
+    transform: translateX(0%);
+}

package/lib/components/Pagination/navButton.js

@@ -9,7 +9,7 @@ import {
 
 import { useStyle } from '../../classify';
 import Icon from '../Icon';
-import defaultClasses from './navButton.css';
+import defaultClasses from './navButton.module.css';
 
 const icons = new Map()
     .set('ChevronLeft', ChevronLeftIcon)

package/lib/components/Pagination/{navButton.css → navButton.module.css}

@@ -1,9 +1,9 @@
 .root {
-    composes: root from './tile.css';
+    composes: root from './tile.module.css';
 }
 
 .icon {
-    composes: root from '../Icon/icon.css';
+    composes: root from '../Icon/icon.module.css';
 }
 
 .icon_disabled {

package/lib/components/Pagination/pagination.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { usePagination } from '@magento/peregrine/lib/talons/Pagination/usePagination';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './pagination.css';
+import defaultClasses from './pagination.module.css';
 import Tile from './tile';
 import NavButton from './navButton';
 import { navButtons } from './constants';

package/lib/components/Pagination/tile.js

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { bool, func, number, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './tile.css';
+import defaultClasses from './tile.module.css';
 
 const Tile = props => {
     const { isActive, number, onClick } = props;

package/lib/components/Password/__tests__/__snapshots__/password.spec.js.snap

@@ -71,18 +71,29 @@ exports[`should render show button if visible is false 1`] = `
         <button
           disabled={false}
           onClick={[MockFunction]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
           type="button"
         >
           <span>
             <svg
               fill="none"
-              height="24"
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width="24"
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
@@ -137,18 +148,29 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
         <button
           disabled={false}
           onClick={[MockFunction]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
           type="button"
         >
           <span>
             <svg
               fill="none"
-              height="24"
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width="24"
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <path