@magento/venia-ui 9.0.0 → 9.2.0-alpha.1

package/lib/components/FilterModal/FilterList/__tests__/filterItem.spec.js

@@ -6,9 +6,10 @@ import FilterItem from '../filterItem';
 const mockOnApply = jest.fn();
 
 jest.mock('../filterDefault', () => {
-    const mockedFilterDefault = jest.fn(({ onClick }) => {
-        onClick();
-
+    const mockedFilterDefault = jest.fn(({ onMouseDown }) => {
+        onMouseDown({
+            button: 0
+        });
         return null;
     });
 
@@ -85,7 +86,8 @@ describe('#FilterItem', () => {
         expect(mockFilterDefault).toHaveBeenCalledWith(
             expect.objectContaining({
                 isSelected: false,
-                onClick: expect.any(Function)
+                onKeyDown: expect.any(Function),
+                onMouseDown: expect.any(Function)
             }),
             {}
         );
@@ -117,10 +119,37 @@ describe('#FilterItem', () => {
 
         expect(mockFilterDefault).toHaveBeenCalledWith(
             expect.objectContaining({
-                onClick: expect.any(Function),
+                onMouseDown: expect.any(Function),
+                onKeyDown: expect.any(Function),
                 isSelected: true
             }),
             {}
         );
     });
+
+    it('calls onApply when keyboard Enter or space is pressed', () => {
+        givenOnApply();
+        mockFilterDefault.mockImplementationOnce(({ onKeyDown }) => {
+            onKeyDown({
+                key: 'Enter',
+                preventDefault: jest.fn()
+            });
+            return null;
+        });
+
+        createTestInstance(<Component />);
+        expect(mockOnApply).toHaveBeenCalled();
+    });
+
+    it('does not call onApply with right mouse click', () => {
+        givenOnApply();
+        mockFilterDefault.mockImplementationOnce(({ onMouseDown }) => {
+            onMouseDown({
+                button: 1
+            });
+            return null;
+        });
+        createTestInstance(<Component />);
+        expect(mockOnApply).not.toHaveBeenCalled();
+    });
 });

package/lib/components/FilterModal/FilterList/filterDefault.js

@@ -17,7 +17,7 @@ const FilterDefault = props => {
         ? formatMessage(
               {
                   id: 'filterModal.item.applyFilter',
-                  defaultMessage: 'Apply filter'
+                  defaultMessage: 'Apply filter "{optionName}".'
               },
               {
                   optionName: label
@@ -26,7 +26,7 @@ const FilterDefault = props => {
         : formatMessage(
               {
                   id: 'filterModal.item.clearFilter',
-                  defaultMessage: 'Remove filter'
+                  defaultMessage: 'Remove filter "{optionName}".'
               },
               {
                   optionName: label
@@ -40,6 +40,7 @@ const FilterDefault = props => {
             fieldValue={!!isSelected}
             label={label}
             ariaLabel={ariaLabel}
+            data-cy="FilterDefault-checkbox"
             {...restProps}
         />
     );

package/lib/components/FilterModal/FilterList/filterItem.js

@@ -19,19 +19,39 @@ const FilterItem = props => {
         [title, value]
     );
 
-    const handleClick = useCallback(() => {
-        toggleItem({ group, item });
+    const handleClick = useCallback(
+        e => {
+            // use only left click for selection
+            if (e.button !== 0) return;
 
-        if (typeof onApply === 'function') {
-            onApply(group, item);
-        }
-    }, [group, item, toggleItem, onApply]);
+            toggleItem({ group, item });
+
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, toggleItem, onApply]
+    );
+
+    const handleKeyDown = useCallback(
+        e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleItem({ group, item });
+                if (typeof onApply === 'function') {
+                    onApply(group, item);
+                }
+            }
+        },
+        [group, item, onApply, toggleItem]
+    );
 
     return (
         <FilterDefault
             isSelected={isSelected}
             item={tileItem}
-            onClick={handleClick}
+            onMouseDown={handleClick}
+            onKeyDown={handleKeyDown}
             title={title}
             value={value}
         />

package/lib/components/FilterModal/FilterList/filterList.js

@@ -38,7 +38,11 @@ const FilterList = props => {
 
                 // create an element for each item
                 const element = (
-                    <li key={key} className={classes.item}>
+                    <li
+                        key={key}
+                        className={classes.item}
+                        data-cy="FilterList-item"
+                    >
                         <FilterItem
                             filterApi={filterApi}
                             filterState={filterState}
@@ -87,6 +91,7 @@ const FilterList = props => {
                 <button
                     onClick={handleListToggle}
                     className={classes.showMoreLessButton}
+                    data-cy="FilterList-showMoreLessButton"
                 >
                     {label}
                 </button>

package/lib/components/FilterModal/filterBlock.js

@@ -36,7 +36,7 @@ const FilterBlock = props => {
     const itemAriaLabel = formatMessage(
         {
             id: 'filterModal.item.ariaLabel',
-            defaultMessage: 'Filter products by'
+            defaultMessage: 'Filter products by "{itemName}"'
         },
         {
             itemName: name
@@ -47,7 +47,7 @@ const FilterBlock = props => {
         ? formatMessage(
               {
                   id: 'filterModal.item.hideOptions',
-                  defaultMessage: 'Hide filter item options.'
+                  defaultMessage: 'Hide "{itemName}" filter item options.'
               },
               {
                   itemName: name
@@ -56,7 +56,7 @@ const FilterBlock = props => {
         : formatMessage(
               {
                   id: 'filterModal.item.showOptions',
-                  defaultMessage: 'Show filter item options.'
+                  defaultMessage: 'Show "{itemName}" filter item options.'
               },
               {
                   itemName: name
@@ -76,10 +76,15 @@ const FilterBlock = props => {
     ) : null;
 
     return (
-        <li className={classes.root} aria-label={itemAriaLabel}>
+        <li
+            className={classes.root}
+            aria-label={itemAriaLabel}
+            data-cy="FilterBlock-root"
+        >
             <button
                 className={classes.trigger}
                 onClick={handleClick}
+                data-cy="FilterBlock-triggerButton"
                 type="button"
                 aria-expanded={isExpanded}
                 aria-label={toggleItemOptionsAriaLabel}

package/lib/components/FilterModal/filterFooter.js

@@ -26,6 +26,7 @@ const FilterFooter = props => {
             <Button
                 disabled={!touched}
                 onClick={applyFilters}
+                data-cy="FilterFooter-button"
                 aria-label={buttonLabel}
                 aria-disabled={!touched}
                 priority="high"

package/lib/components/FilterModal/filterModal.js

@@ -79,6 +79,7 @@ const FilterModal = props => {
                 type="button"
                 onClick={handleReset}
                 ariaLabel={clearAllAriaLabel}
+                data-cy="FilterModal-clearButton"
             >
                 <FormattedMessage
                     id={'filterModal.action'}
@@ -97,7 +98,11 @@ const FilterModal = props => {
             {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
             <FocusScope contain restoreFocus autoFocus>
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-                <aside className={modalClass} onKeyDown={handleKeyDownActions}>
+                <aside
+                    className={modalClass}
+                    onKeyDown={handleKeyDownActions}
+                    data-cy="FilterModal-root"
+                >
                     <div className={classes.body}>
                         <div className={classes.header}>
                             <h2 className={classes.headerTitle}>

package/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -17,6 +17,7 @@ const FilterModalOpenButton = props => {
             classes={{
                 root_lowPriority: classes.filterButton
             }}
+            data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
             type="button"
             aria-live="polite"

package/lib/components/FilterSidebar/filterSidebar.js

@@ -80,7 +80,11 @@ const FilterSidebar = props => {
 
     const clearAll = filterState.size ? (
         <div className={classes.action}>
-            <LinkButton type="button" onClick={handleReset}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                data-cy="FilterSidebar-clearButton"
+            >
                 <FormattedMessage
                     id={'filterModal.action'}
                     defaultMessage={'Clear all'}
@@ -93,6 +97,7 @@ const FilterSidebar = props => {
         <aside
             className={classes.root}
             ref={filterRef}
+            data-cy="FilterSidebar-root"
             aria-live="polite"
             aria-busy="false"
         >

package/lib/components/Footer/__tests__/__snapshots__/footer.spec.js.snap

@@ -38,6 +38,20 @@ exports[`footer renders copyright 1`] = `
           />
         </a>
       </li>
+      <li
+        className="linkItem"
+      >
+        <a
+          className="link"
+          href="/comp"
+          onClick={[Function]}
+        >
+          <mock-FormattedMessage
+            defaultMessage="comp"
+            id="comp"
+          />
+        </a>
+      </li>
     </ul>
     <ul
       className="linkGroup"
@@ -160,6 +174,7 @@ exports[`footer renders copyright 1`] = `
         </li>
       </ul>
     </div>
+    <i />
   </div>
   <div
     className="branding"

package/lib/components/Footer/__tests__/footer.spec.js

@@ -17,8 +17,20 @@ jest.mock('@magento/venia-ui/lib/components/Logo', () => {
     return props => <i {...props} />;
 });
 
+jest.mock('@magento/venia-ui/lib/components/Newsletter', () => {
+    return props => <i {...props} />;
+});
+
+const mockLinkComponent = ({ children }) => {
+    return children;
+};
+
 const links = new Map()
-    .set('ab', [['a', '/a'], ['b', '/b']])
+    .set('ab', [
+        ['a', '/a'],
+        ['b', '/b'],
+        ['comp', { path: '/comp', Component: mockLinkComponent }]
+    ])
     .set('12', [['1', '/1'], ['2', '/2']]);
 
 test('footer renders copyright', () => {

package/lib/components/Footer/footer.js

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Facebook, Instagram, Twitter } from 'react-feather';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
 
-import Logo from '@magento/venia-ui/lib/components/Logo';
+import Logo from '../Logo';
+import Newsletter from '../Newsletter';
 import { useStyle } from '../../classify';
 import defaultClasses from './footer.module.css';
 import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
@@ -18,10 +19,17 @@ const Footer = props => {
     const { copyrightText } = talonProps;
 
     const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
-        const linkElements = Array.from(linkProps, ([text, path]) => {
+        const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
+            let path = pathInfo;
+            let Component = Fragment;
+            if (pathInfo && typeof pathInfo === 'object') {
+                path = pathInfo.path;
+                Component = pathInfo.Component;
+            }
+
             const itemKey = `text: ${text} path:${path}`;
             const child = path ? (
-                <Link className={classes.link} to={path}>
+                <Link className={classes.link} to={path} data-cy="Footer-link">
                     <FormattedMessage id={text} defaultMessage={text} />
                 </Link>
             ) : (
@@ -31,9 +39,9 @@ const Footer = props => {
             );
 
             return (
-                <li key={itemKey} className={classes.linkItem}>
-                    {child}
-                </li>
+                <Component key={itemKey}>
+                    <li className={classes.linkItem}>{child}</li>
+                </Component>
             );
         });
 
@@ -45,7 +53,7 @@ const Footer = props => {
     });
 
     return (
-        <footer className={classes.root}>
+        <footer className={classes.root} data-cy="Footer-root">
             <div className={classes.links}>
                 {linkGroups}
                 <div className={classes.callout}>
@@ -73,6 +81,7 @@ const Footer = props => {
                         </li>
                     </ul>
                 </div>
+                <Newsletter />
             </div>
             <div className={classes.branding}>
                 <ul className={classes.legal}>

package/lib/components/Footer/footer.module.css

@@ -27,7 +27,7 @@
     display: grid;
     gap: 2rem;
     grid-area: links;
-    grid-auto-columns: 12rem;
+    grid-auto-columns: 18rem;
     grid-auto-flow: column;
     grid-template-columns: repeat(3, 1.5fr) 3fr;
     padding: 0 2rem;
@@ -55,8 +55,8 @@
     font-size: var(--venia-typography-body-S-fontSize);
     justify-self: center;
     line-height: var(--venia-global-lineHeight-300);
-    max-width: 16rem;
-    min-width: 12rem;
+    max-width: 20rem;
+    min-width: 20rem;
 }
 
 @media (max-width: 960px) {
@@ -138,3 +138,18 @@
         margin-top: 2.5rem;
     }
 }
+@media screen and (min-width: 768px) and (max-width: 991px) {
+    .callout {
+        min-width: 10rem;
+    }
+}
+@media screen and (max-width: 767px) {
+    .links {
+        padding: 0 1rem;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem 10px;
+    }
+    .callout {
+        min-width: 100%;
+    }
+}

package/lib/components/Footer/sampleData.js

@@ -1,3 +1,5 @@
+import { ContactLink } from '../ContactPage';
+
 const accountLinks = new Map()
     .set('Account', null)
     .set('Sign In', null)
@@ -6,15 +8,18 @@ const accountLinks = new Map()
     .set('Returns', null);
 
 const aboutLinks = new Map()
-    .set('About Us', null)
+    .set('About Us', '/about-us')
     .set('Our Story', null)
     .set('Email Signup', null)
     .set('Give Back', null);
 
 const helpLinks = new Map()
     .set('Help', null)
-    .set('Live Chat', null)
-    .set('Contact Us', null)
+    .set('Customer Service', '/customer-service')
+    .set('Contact Us', {
+        path: '/contact-us',
+        Component: ContactLink
+    })
     .set('Order Status', null)
     .set('Returns', null);
 

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

@@ -21,6 +21,7 @@ const ForgotPasswordForm = props => {
             className={classes.root}
             initialValues={initialValues}
             onSubmit={onSubmit}
+            data-cy="forgotPasswordForm-root"
         >
             <Field
                 label={formatMessage({
@@ -32,6 +33,7 @@ const ForgotPasswordForm = props => {
                     autoComplete="email"
                     field="email"
                     validate={isRequired}
+                    data-cy="email"
                 />
             </Field>
             <div className={classes.buttonContainer}>
@@ -52,6 +54,7 @@ const ForgotPasswordForm = props => {
                     disabled={isResettingPassword}
                     type="submit"
                     priority="high"
+                    data-cy="forgotPasswordForm-submitButton"
                 >
                     <FormattedMessage
                         id={'forgotPasswordForm.submitButtonText'}

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

@@ -14,7 +14,7 @@ const FormSubmissionSuccessful = props => {
         {
             id: 'formSubmissionSuccessful.textMessage',
             defaultMessage:
-                'If there is an account associated with your email address, you will receive an email with a link to change your password.'
+                'If there is an account associated with {email} you will receive an email with a link to change your password.'
         },
         { email }
     );
@@ -27,7 +27,9 @@ const FormSubmissionSuccessful = props => {
                     defaultMessage={'Recover Password'}
                 />
             </h2>
-            <p className={classes.text}>{textMessage}</p>
+            <p className={classes.text} data-cy="formSubmissionSuccessful-text">
+                {textMessage}
+            </p>
         </div>
     );
 };

package/lib/components/ForgotPassword/forgotPassword.gql.js

@@ -3,7 +3,6 @@ import gql from 'graphql-tag';
 export const REQUEST_PASSWORD_RESET_EMAIL_MUTATION = gql`
     mutation requestPasswordResetEmail($email: String!) {
         requestPasswordResetEmail(email: $email)
-            @connection(key: "requestPasswordResetEmail")
     }
 `;
 

package/lib/components/FormError/formError.js

@@ -9,9 +9,14 @@ import ErrorMessage from '../ErrorMessage';
 import defaultClasses from './formError.module.css';
 
 const FormError = props => {
-    const { classes: propClasses, errors, scrollOnError } = props;
-
-    const talonProps = useFormError({ errors });
+    const {
+        classes: propClasses,
+        errors,
+        scrollOnError,
+        allowErrorMessages
+    } = props;
+
+    const talonProps = useFormError({ errors, allowErrorMessages });
     const { errorMessage } = talonProps;
 
     const errorRef = useRef(null);
@@ -35,7 +40,8 @@ FormError.propTypes = {
         errorMessage: string
     }),
     errors: arrayOf(instanceOf(Error)),
-    scrollOnError: bool
+    scrollOnError: bool,
+    allowErrorMessages: bool
 };
 
 FormError.defaultProps = {

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

@@ -21,7 +21,6 @@ exports[`should render add to cart if in stock 1`] = `
   <span>
     <span>
       <svg
-        className="icon"
         fill="none"
         height={16}
         stroke="currentColor"
@@ -77,7 +76,6 @@ exports[`should render out of cart if not in stock 1`] = `
   <span>
     <span>
       <svg
-        className="icon"
         fill="none"
         height={16}
         stroke="currentColor"
@@ -141,7 +139,6 @@ exports[`should render properly 1`] = `
   <span>
     <span>
       <svg
-        className="icon"
         fill="none"
         height={16}
         stroke="currentColor"

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

@@ -149,6 +149,7 @@ exports[`renders correctly with valid item data 1`] = `
           "url_suffix": ".html",
         }
       }
+      urlSuffix=".html"
     />
   </div>
 </div>

package/lib/components/Gallery/addToCartButton.js

@@ -5,32 +5,35 @@ import { useAddToCartButton } from '@magento/peregrine/lib/talons/Gallery/useAdd
 import { ShoppingBag, XSquare } from 'react-feather';
 import Icon from '../Icon';
 import Button from '../Button';
-import { mergeClasses } from '../../classify';
+import { useStyle } from '../../classify';
 import defaultClasses from './addToCartButton.module.css';
 
-const AddToCartIcon = (
-    <Icon
-        classes={{ icon: defaultClasses.icon }}
-        src={ShoppingBag}
-        attrs={{ width: 16 }}
-    />
-);
-const OutOfStockIcon = (
-    <Icon
-        classes={{ icon: defaultClasses.icon }}
-        src={XSquare}
-        attrs={{ width: 16 }}
-    />
-);
-
 const AddToCartButton = props => {
+    const { item, urlSuffix } = props;
     const talonProps = useAddToCartButton({
-        item: props.item
+        item,
+        urlSuffix
     });
     const { handleAddToCart, isDisabled, isInStock } = talonProps;
     const { formatMessage } = useIntl();
 
-    const classes = mergeClasses(defaultClasses, props.classes);
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const AddToCartIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={ShoppingBag}
+            attrs={{ width: 16 }}
+        />
+    );
+
+    const OutOfStockIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={XSquare}
+            attrs={{ width: 16 }}
+        />
+    );
 
     const buttonInStock = (
         <Button
@@ -87,13 +90,14 @@ AddToCartButton.propTypes = {
         root_selected: string
     }),
     item: shape({
-        id: number,
-        name: string,
+        id: number.isRequired,
+        uid: string.isRequired,
+        name: string.isRequired,
         small_image: shape({
             url: string
         }),
         stock_status: string.isRequired,
-        type_id: string.isRequired,
+        __typename: string.isRequired,
         url_key: string.isRequired,
         url_suffix: string,
         sku: string.isRequired,
@@ -105,5 +109,6 @@ AddToCartButton.propTypes = {
                 })
             })
         })
-    })
+    }),
+    urlSuffix: string
 };