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

package/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap

@@ -54,6 +54,17 @@ exports[`renders correctly 1`] = `
     <button
       className="cancelButton"
       disabled={false}
+      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
@@ -68,6 +79,18 @@ exports[`renders correctly 1`] = `
     <button
       className="submitButton"
       disabled={false}
+      onClick={[Function]}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="submit"
     >
       <span

package/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js

@@ -8,7 +8,7 @@ import { isRequired } from '../../../util/formValidators';
 import Button from '../../Button';
 import Field from '../../Field';
 import TextInput from '../../TextInput';
-import defaultClasses from './forgotPasswordForm.css';
+import defaultClasses from './forgotPasswordForm.module.css';
 
 const ForgotPasswordForm = props => {
     const classes = useStyle(defaultClasses, props.classes);

package/lib/components/ForgotPassword/ForgotPasswordForm/{forgotPasswordForm.css → forgotPasswordForm.module.css}

@@ -14,13 +14,13 @@
 }
 
 .cancelButton {
-    composes: root_lowPriority from '../../Button/button.css';
+    composes: root_lowPriority from '../../Button/button.module.css';
 
     min-width: 9rem;
 }
 
 .submitButton {
-    composes: root_highPriority from '../../Button/button.css';
+    composes: root_highPriority from '../../Button/button.module.css';
 
     min-width: 9rem;
 }

package/lib/components/ForgotPassword/FormSubmissionSuccessful/formSubmissionSuccessful.js

@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
 
 import { useStyle } from '../../../classify';
-import defaultClasses from './formSubmissionSuccessful.css';
+import defaultClasses from './formSubmissionSuccessful.module.css';
 
 const FormSubmissionSuccessful = props => {
     const { email } = props;

package/lib/components/ForgotPassword/forgotPassword.js

@@ -11,7 +11,7 @@ import FormSubmissionSuccessful from './FormSubmissionSuccessful';
 
 import forgotPasswordOperations from './forgotPassword.gql';
 
-import defaultClasses from './forgotPassword.css';
+import defaultClasses from './forgotPassword.module.css';
 
 const ForgotPassword = props => {
     const { initialValues, onCancel } = props;

package/lib/components/ForgotPasswordPage/__tests__/__snapshots__/forgotPasswordPage.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#ForgotPasswordPage renders correctly 1`] = `
+<div>
+  Title
+  <h1>
+    <mock-FormattedMessage
+      defaultMessage="Forgot Your Password?"
+      id="forgotPasswordPage.header"
+    />
+  </h1>
+  <div>
+    <mock-ForgotPassword />
+  </div>
+</div>
+`;

package/lib/components/ForgotPasswordPage/__tests__/forgotPasswordPage.spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import ForgotPasswordPage from '../forgotPasswordPage';
+
+jest.mock(
+    '@magento/peregrine/lib/talons/ForgotPasswordPage/useForgotPasswordPage',
+    () => ({
+        useForgotPasswordPage: jest.fn(() => ({
+            forgotPasswordProps: {}
+        }))
+    })
+);
+
+jest.mock('@magento/venia-ui/lib/components/ForgotPassword', () => props => (
+    <mock-ForgotPassword {...props} />
+));
+
+jest.mock('@magento/venia-ui/lib/components/Head', () => ({
+    StoreTitle: () => 'Title'
+}));
+
+const Component = () => {
+    return <ForgotPasswordPage />;
+};
+
+describe('#ForgotPasswordPage', () => {
+    it('renders correctly', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ForgotPasswordPage/forgotPasswordPage.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useForgotPasswordPage } from '@magento/peregrine/lib/talons/ForgotPasswordPage/useForgotPasswordPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import ForgotPassword from '@magento/venia-ui/lib/components/ForgotPassword';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+
+import defaultClasses from './forgotPasswordPage.module.css';
+
+const ForgotPasswordPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { forgotPasswordProps } = useForgotPasswordPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'forgotPasswordPage.title',
+                    defaultMessage: 'Forgot Your Password?'
+                })}
+            </StoreTitle>
+            <h1 className={classes.header}>
+                <FormattedMessage
+                    id="forgotPasswordPage.header"
+                    defaultMessage="Forgot Your Password?"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                <ForgotPassword {...forgotPasswordProps} />
+            </div>
+        </div>
+    );
+};
+
+ForgotPasswordPage.defaultProps = {
+    signedInRedirectUrl: '/order-history',
+    signInPageUrl: '/sign-in'
+};
+
+ForgotPasswordPage.propTypes = {
+    classes: shape({
+        root: string,
+        header: string,
+        contentContainer: string
+    }),
+    signedInRedirectUrl: string,
+    signInPageUrl: string
+};
+
+export default ForgotPasswordPage;

package/lib/components/ForgotPasswordPage/forgotPasswordPage.module.css

@@ -0,0 +1,20 @@
+.root {
+    display: grid;
+    justify-content: center;
+    padding: 2.5rem 0;
+    text-align: center;
+    grid-template-columns: minmax(auto, 512px);
+    row-gap: 2rem;
+}
+
+.header {
+    font-family: var(--venia-global-fontFamily-serif);
+}
+
+@media (min-width: 961px) {
+    .contentContainer {
+        padding-bottom: 2rem;
+        border: 2px solid rgb(var(--venia-global-color-border));
+        border-radius: 0.375rem;
+    }
+}

package/lib/components/ForgotPasswordPage/index.js

@@ -0,0 +1 @@
+export { default } from './forgotPasswordPage';

package/lib/components/FormError/formError.js

@@ -6,7 +6,7 @@ import { useScrollIntoView } from '@magento/peregrine/lib/hooks/useScrollIntoVie
 
 import { useStyle } from '../../classify';
 import ErrorMessage from '../ErrorMessage';
-import defaultClasses from './formError.css';
+import defaultClasses from './formError.module.css';
 
 const FormError = props => {
     const { classes: propClasses, errors, scrollOnError } = props;

package/lib/components/Gallery/__tests__/__snapshots__/addToCartButton.spec.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render add to cart if in stock 1`] = `
+<button
+  aria-label="Add to cart"
+  disabled={false}
+  onClick={[Function]}
+  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>
+    <span>
+      <svg
+        className="icon"
+        fill="none"
+        height={16}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={16}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
+        />
+        <line
+          x1="3"
+          x2="21"
+          y1="6"
+          y2="6"
+        />
+        <path
+          d="M16 10a4 4 0 0 1-8 0"
+        />
+      </svg>
+    </span>
+    <span>
+      <mock-FormattedMessage
+        defaultMessage="ADD TO CART"
+        id="addToCartButton.addItemToCart"
+      />
+    </span>
+  </span>
+</button>
+`;
+
+exports[`should render out of cart if not in stock 1`] = `
+<button
+  aria-label="Out of stock"
+  disabled={true}
+  onClick={[Function]}
+  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>
+    <span>
+      <svg
+        className="icon"
+        fill="none"
+        height={16}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={16}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="3"
+        />
+        <line
+          x1="9"
+          x2="15"
+          y1="9"
+          y2="15"
+        />
+        <line
+          x1="15"
+          x2="9"
+          y1="9"
+          y2="15"
+        />
+      </svg>
+    </span>
+    <span>
+      <mock-FormattedMessage
+        defaultMessage="OUT OF STOCK"
+        id="addToCartButton.itemOutOfStock"
+      />
+    </span>
+  </span>
+</button>
+`;
+
+exports[`should render properly 1`] = `
+<button
+  aria-label="Add to cart"
+  disabled={false}
+  onClick={[Function]}
+  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>
+    <span>
+      <svg
+        className="icon"
+        fill="none"
+        height={16}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width={16}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
+        />
+        <line
+          x1="3"
+          x2="21"
+          y1="6"
+          y2="6"
+        />
+        <path
+          d="M16 10a4 4 0 0 1-8 0"
+        />
+      </svg>
+    </span>
+    <span>
+      <mock-FormattedMessage
+        defaultMessage="ADD TO CART"
+        id="addToCartButton.addItemToCart"
+      />
+    </span>
+  </span>
+</button>
+`;

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -2,12 +2,16 @@
 
 exports[`renders if \`items\` is an array of objects 1`] = `
 <div
+  aria-busy="false"
+  aria-live="polite"
   className="root"
 >
   <div
     className="items"
   >
     <div
+      aria-busy="false"
+      aria-live="polite"
       className="root"
     >
       <div
@@ -18,7 +22,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={100}
         />
         <img
@@ -62,9 +66,37 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       </div>
       <div
         className="actionsContainer"
-      />
+      >
+         
+        <mock-AddToCartButton
+          item={
+            Object {
+              "__typename": "SimpleProduct",
+              "id": 1,
+              "name": "Test Product 1",
+              "price_range": Object {
+                "maximum_price": Object {
+                  "regular_price": Object {
+                    "currency": "USD",
+                    "value": 100,
+                  },
+                },
+              },
+              "sku": "sku-test-product1",
+              "small_image": Object {
+                "url": "/test/product/1.png",
+              },
+              "stock_status": "IN_STOCK",
+              "type_id": "simple",
+              "url_key": "test-product1",
+            }
+          }
+        />
+      </div>
     </div>
     <div
+      aria-busy="false"
+      aria-live="polite"
       className="root"
     >
       <div
@@ -75,7 +107,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
           className="image placeholder_layoutOnly"
           height={375}
           loading="eager"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+          src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
           width={100}
         />
         <img
@@ -119,7 +151,33 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       </div>
       <div
         className="actionsContainer"
-      />
+      >
+         
+        <mock-AddToCartButton
+          item={
+            Object {
+              "__typename": "SimpleProduct",
+              "id": 2,
+              "name": "Test Product 2",
+              "price_range": Object {
+                "maximum_price": Object {
+                  "regular_price": Object {
+                    "currency": "USD",
+                    "value": 100,
+                  },
+                },
+              },
+              "sku": "sku-test-product2",
+              "small_image": Object {
+                "url": "/test/product/2.png",
+              },
+              "stock_status": "OUT_OF_STOCK",
+              "type_id": "simple",
+              "url_key": "test-product2",
+            }
+          }
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -127,6 +185,8 @@ exports[`renders if \`items\` is an array of objects 1`] = `
 
 exports[`renders if \`items\` is an empty array 1`] = `
 <div
+  aria-busy="false"
+  aria-live="polite"
   className="root"
 >
   <div

package/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

@@ -2,10 +2,13 @@
 
 exports[`renders a placeholder item while awaiting item 1`] = `
 <div
-  className="root_pending"
+  aria-busy="true"
+  aria-live="polite"
+  className="root"
 >
   <div
-    className="images_pending"
+    className="root_rectangle"
+    style={Object {}}
   >
     <div
       className="root container"
@@ -14,7 +17,7 @@ exports[`renders a placeholder item while awaiting item 1`] = `
         alt="Placeholder for gallery item image"
         className="image placeholder_layoutOnly"
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -23,21 +26,37 @@ exports[`renders a placeholder item while awaiting item 1`] = `
         loading="lazy"
         onError={[MockFunction]}
         onLoad={[MockFunction]}
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
       />
     </div>
   </div>
   <div
-    className="name_pending"
+    className="root_rectangle"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  />
+  <div
+    className="root_rectangle"
+    style={
+      Object {
+        "width": "3rem",
+      }
+    }
   />
   <div
-    className="price_pending"
+    className="root_button"
+    style={Object {}}
   />
 </div>
 `;
 
 exports[`renders correctly with valid item data 1`] = `
 <div
+  aria-busy="false"
+  aria-live="polite"
   className="root"
 >
   <a
@@ -53,7 +72,7 @@ exports[`renders correctly with valid item data 1`] = `
         className="image placeholder_layoutOnly"
         height={375}
         loading="eager"
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
         width={100}
       />
       <img
@@ -104,6 +123,33 @@ exports[`renders correctly with valid item data 1`] = `
   </div>
   <div
     className="actionsContainer"
-  />
+  >
+     
+    <mock-AddToCartButton
+      item={
+        Object {
+          "__typename": "SimpleProduct",
+          "id": 1,
+          "name": "Test Product",
+          "price_range": Object {
+            "maximum_price": Object {
+              "regular_price": Object {
+                "currency": "USD",
+                "value": 21,
+              },
+            },
+          },
+          "sku": "sku-123",
+          "small_image": Object {
+            "url": "/foo/bar/pic.png",
+          },
+          "stock_status": "IN_STOCK",
+          "type_id": "simple",
+          "url_key": "strive-shoulder-pack",
+          "url_suffix": ".html",
+        }
+      }
+    />
+  </div>
 </div>
 `;

package/lib/components/Gallery/__tests__/addToCartButton.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useAddToCartButton } from '@magento/peregrine/lib/talons/Gallery/useAddToCartButton';
+
+import AddToCartButton from '../addToCartButton';
+
+jest.mock('@magento/peregrine/lib/talons/Gallery/useAddToCartButton', () => ({
+    useAddToCartButton: jest.fn().mockReturnValue({
+        handleAddToCart: jest.fn().mockName('handleAddToCart'),
+        isDisabled: false,
+        isInStock: true
+    })
+}));
+
+test('should render properly', () => {
+    const wrapper = createTestInstance(<AddToCartButton item={{}} />);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+});
+
+test('should render add to cart if in stock', () => {
+    useAddToCartButton.mockReturnValueOnce({
+        handleAddToCart: jest.fn(),
+        isDisabled: false,
+        isInStock: true
+    });
+
+    const wrapper = createTestInstance(<AddToCartButton item={{}} />);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+});
+
+test('should render out of cart if not in stock', () => {
+    useAddToCartButton.mockReturnValueOnce({
+        handleAddToCart: jest.fn(),
+        isDisabled: true,
+        isInStock: false
+    });
+
+    const wrapper = createTestInstance(<AddToCartButton item={{}} />);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+});