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

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import Shimmer from '../shimmer';
+
+jest.mock('../../../classify');
+jest.mock('../../Button', () => () => <i />);
+
+let inputProps = {};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        width: '100%'
+    };
+};
+
+const givenWidth = () => {
+    inputProps = {
+        width: 200
+    };
+};
+
+const givenHeight = () => {
+    inputProps = {
+        height: '200px'
+    };
+};
+
+const givenButtonType = () => {
+    inputProps = {
+        type: 'button'
+    };
+};
+
+const Component = () => {
+    return <Shimmer {...inputProps} />;
+};
+
+describe('#Shimmer', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders default size', () => {
+        const instance = createTestInstance(<Component />);
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders rectangle of given width', () => {
+        givenWidth();
+        const { root } = createTestInstance(<Component />);
+
+        const styles = root.children[0].children[0].props.style;
+        expect(styles).toHaveProperty('width', '200rem');
+    });
+
+    it('renders rectangle of given height', () => {
+        givenHeight();
+        const { root } = createTestInstance(<Component />);
+
+        const styles = root.children[0].children[0].props.style;
+        expect(styles).toHaveProperty('height', '200px');
+    });
+
+    it('renders Shimmer of given button type', () => {
+        givenButtonType();
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.children[0].children[0].props.className).toContain(
+            '_button'
+        );
+    });
+});

package/lib/components/Shimmer/index.js

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

package/lib/components/Shimmer/shimmer.js

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { node, number, oneOf, oneOfType, shape, string } from 'prop-types';
+
+import { useStyle } from '../../classify';
+import defaultClasses from './shimmer.module.css';
+
+const Shimmer = props => {
+    const {
+        classes: propClasses,
+        borderRadius,
+        height,
+        width,
+        style: customStyles,
+        type,
+        children,
+        ...restProps
+    } = props;
+    const classes = useStyle(defaultClasses, propClasses);
+
+    const style = useMemo(() => {
+        const combinedStyles = {
+            ...customStyles
+        };
+
+        Object.entries({ borderRadius, height, width }).forEach(
+            ([type, value]) => {
+                if (typeof value !== 'undefined') {
+                    combinedStyles[type] =
+                        typeof value === 'number' ? `${value}rem` : value;
+                }
+            }
+        );
+
+        return combinedStyles;
+    }, [customStyles, borderRadius, height, width]);
+
+    const rootClass = `root_${type}`;
+
+    return (
+        <div className={classes[rootClass]} style={style} {...restProps}>
+            {children}
+        </div>
+    );
+};
+
+/**
+ * @typedef props
+ *
+ * @property {Object} classes is an object containing the class names for the
+ * Shimmer component.
+ * @property {string} classes.root is the class for the container
+ * @property {string} classes.root_rectangle is the class for the container
+ * of type rectangle
+ * @property {string} classes.root_button is the class for the container
+ * of type button
+ * @property {string} classes.root_checkbox is the class for the container
+ * of type checkbox
+ * @property {string} classes.root_radio is the class for the container
+ * of type radio
+ * @property {string} classes.root_textArea is the class for the container
+ * of type textArea
+ * @property {string} classes.root_textInput is the class for the container
+ * of type textInput
+ * @property {number | string} borderRadius is the border radius of the Shimmer
+ * @property {number | string} height is the height of the Shimmer
+ * @property {number | string} width is the width of the Shimmer
+ * @property {Object} style is an object of inline styles
+ * @property {string} type is the type of the Shimmer
+ * @property {node} children are the children of the Shimmer
+ */
+Shimmer.propTypes = {
+    classes: shape({
+        root: string,
+        root_rectangle: string,
+        root_button: string,
+        root_checkbox: string,
+        root_radio: string,
+        root_textArea: string,
+        root_textInput: string
+    }),
+    borderRadius: oneOfType([number, string]),
+    height: oneOfType([number, string]),
+    width: oneOfType([number, string]),
+    style: shape({}),
+    type: oneOf([
+        'rectangle',
+        'button',
+        'checkbox',
+        'radio',
+        'textArea',
+        'textInput'
+    ]),
+    children: node
+};
+
+Shimmer.defaultProps = {
+    style: {},
+    type: 'rectangle'
+};
+
+export default Shimmer;

package/lib/components/Shimmer/shimmer.module.css

@@ -0,0 +1,77 @@
+.root {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    background: rgb(var(--venia-global-color-gray));
+    pointer-events: none;
+}
+
+.root::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--venia-global-maxWidth);
+    height: 100%;
+    background: linear-gradient(
+            to right,
+            rgb(var(--venia-global-color-gray-50) / 0%) 0%,
+            rgb(var(--venia-global-color-gray-50)) 40%,
+            rgb(var(--venia-global-color-gray-50) / 0%) 80%,
+            rgb(var(--venia-global-color-gray-50) / 0%) 100%
+        )
+        no-repeat;
+    background-size: var(--venia-global-maxWidth) 100%;
+    -webkit-animation-name: shimmerAnimation;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-fill-mode: forwards;
+    will-change: transform;
+}
+
+.root_rectangle {
+    composes: root;
+    min-height: var(--venia-typography-body-M-fontSize);
+}
+
+.root_button {
+    composes: root from '../Button/button.module.css';
+    composes: root;
+    border: none;
+}
+
+.root_checkbox {
+    composes: input from '../Checkbox/checkbox.module.css';
+    composes: root;
+    border: none;
+}
+
+.root_radio {
+    composes: input from '../RadioGroup/radio.module.css';
+    composes: root;
+    border: none;
+}
+
+.root_textArea {
+    composes: input from '../TextArea/textArea.module.css';
+    composes: root;
+    min-height: 6.75rem;
+    border: none;
+}
+
+.root_textInput {
+    composes: input from '../TextInput/textInput.module.css';
+    composes: root;
+    border: none;
+}
+
+@-webkit-keyframes shimmerAnimation {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}

package/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap

@@ -4,14 +4,14 @@ exports[`displays an error message if there is a sign in error 1`] = `
 <div
   className="root"
 >
-  <h2
+  <span
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Sign-in to Your Account"
       id="signIn.titleText"
     />
-  </h2>
+  </span>
   <FormError
     errors={
       Array [
@@ -136,14 +136,14 @@ exports[`renders correctly 1`] = `
 <div
   className="root"
 >
-  <h2
+  <span
     className="title"
   >
     <mock-FormattedMessage
       defaultMessage="Sign-in to Your Account"
       id="signIn.titleText"
     />
-  </h2>
+  </span>
   <FormError
     errors={
       Array [

package/lib/components/SignIn/signIn.gql.js

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
-
-import { CartPageFragment } from '../CartPage/cartPageFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
 
 export const GET_CART_DETAILS_QUERY = gql`
     query GetCartDetailsAfterSignIn($cartId: String!) {

package/lib/components/SignIn/signIn.js

@@ -10,7 +10,7 @@ import Button from '../Button';
 import Field from '../Field';
 import LoadingIndicator from '../LoadingIndicator';
 import TextInput from '../TextInput';
-import defaultClasses from './signIn.css';
+import defaultClasses from './signIn.module.css';
 import { GET_CART_DETAILS_QUERY } from './signIn.gql';
 import LinkButton from '../LinkButton';
 import Password from '../Password';
@@ -56,12 +56,12 @@ const SignIn = props => {
 
     return (
         <div className={classes.root}>
-            <h2 className={classes.title}>
+            <span className={classes.title}>
                 <FormattedMessage
                     id={'signIn.titleText'}
                     defaultMessage={'Sign-in to Your Account'}
                 />
-            </h2>
+            </span>
             <FormError errors={Array.from(errors.values())} />
             <Form
                 getApi={setFormApi}

package/lib/components/SignIn/{signIn.css → signIn.module.css}

@@ -51,12 +51,13 @@
 }
 
 .forgotPasswordButton {
-    composes: root from '../LinkButton/linkButton.css';
+    composes: root from '../LinkButton/linkButton.module.css';
 
     padding: 0;
 }
 
 .title {
+    font-size: var(--venia-global-fontSize-400);
     padding-top: 0.5rem;
     text-transform: capitalize;
 }

package/lib/components/SignInPage/__tests__/__snapshots__/signInPage.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#SignInPage renders correctly 1`] = `
+<div>
+  Title
+  <h1>
+    <mock-FormattedMessage
+      defaultMessage="Sign In or Create Account"
+      id="signInPage.header"
+    />
+  </h1>
+  <div>
+    <mock-SignIn />
+  </div>
+</div>
+`;

package/lib/components/SignInPage/__tests__/signInPage.spec.js

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

package/lib/components/SignInPage/index.js

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

package/lib/components/SignInPage/signInPage.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useSignInPage } from '@magento/peregrine/lib/talons/SignInPage/useSignInPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import SignIn from '@magento/venia-ui/lib/components/SignIn';
+
+import defaultClasses from './signInPage.module.css';
+
+const SignInPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { signInProps } = useSignInPage(props);
+    const { formatMessage } = useIntl();
+
+    return (
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'signInPage.title',
+                    defaultMessage: 'Sign In'
+                })}
+            </StoreTitle>
+            <h1 className={classes.header}>
+                <FormattedMessage
+                    id="signInPage.header"
+                    defaultMessage="Sign In or Create Account"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                <SignIn {...signInProps} />
+            </div>
+        </div>
+    );
+};
+
+SignInPage.defaultProps = {
+    createAccountPageUrl: '/create-account',
+    forgotPasswordPageUrl: '/forgot-password',
+    signedInRedirectUrl: '/order-history'
+};
+
+SignInPage.propTypes = {
+    classes: shape({
+        root: string,
+        header: string,
+        contentContainer: string
+    }),
+    createAccountPageUrl: string,
+    forgotPasswordPageUrl: string,
+    signedInRedirectUrl: string
+};
+
+export default SignInPage;

package/lib/components/SignInPage/signInPage.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/SortedByContainer/__tests__/sortedByContainer.shimmer.spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { mockShimmer } from '../../Shimmer';
+import ShimmerComponent from '../sortedByContainer.shimmer';
+
+jest.mock('../../Shimmer', () => {
+    const mockedShimmer = jest.fn(() => null);
+
+    return {
+        __esModule: true,
+        default: mockedShimmer,
+        mockShimmer: mockedShimmer
+    };
+});
+
+jest.mock('../../../classify');
+
+let passedProps = {};
+
+const givenDefaultProps = () => {
+    passedProps = {};
+};
+
+describe('#sortedByContainer Shimmer', () => {
+    beforeEach(() => {
+        mockShimmer.mockClear();
+
+        givenDefaultProps();
+    });
+
+    test('renders Shimmer component', () => {
+        createTestInstance(<ShimmerComponent {...passedProps} />);
+
+        expect(mockShimmer).toHaveBeenCalled();
+    });
+});

package/lib/components/SortedByContainer/index.js

@@ -1 +1,4 @@
 export { default } from './sortedByContainer';
+export {
+    default as SortedByContainerShimmer
+} from './sortedByContainer.shimmer';

package/lib/components/SortedByContainer/sortedByContainer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useStyle } from '../../classify';
-import defaultClasses from './sortedByContainer.css';
+import defaultClasses from './sortedByContainer.module.css';
 
 const SortedByContainer = props => {
     const { currentSort } = props;
@@ -10,7 +10,7 @@ const SortedByContainer = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} aria-live="polite" aria-busy="true">
             <FormattedMessage
                 id={'searchPage.sortContainer'}
                 defaultMessage={'Items sorted by '}

package/lib/components/SortedByContainer/sortedByContainer.module.css

@@ -0,0 +1,16 @@
+.root {
+    color: rgb(var(--venia-global-color-gray-700));
+    text-align: center;
+    font-size: var(--venia-global-fontSize-100);
+    padding-bottom: 1rem;
+}
+
+.sortText {
+    font-weight: var(--venia-global-fontWeight-semibold);
+}
+
+@media (min-width: 1024px) {
+    .root {
+        display: none;
+    }
+}

package/lib/components/SortedByContainer/sortedByContainer.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../classify';
+
+import Shimmer from '../Shimmer';
+import defaultClasses from './sortedByContainer.module.css';
+
+const SortedByContainerShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width={10} />
+        </div>
+    );
+};
+
+SortedByContainerShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default SortedByContainerShimmer;

package/lib/components/StockStatusMessage/stockStatusMessage.js

@@ -4,7 +4,7 @@ import { arrayOf, node, shape, string } from 'prop-types';
 import { useStockStatusMessage } from '@magento/peregrine/lib/talons/StockStatusMessage/useStockStatusMessage';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './stockStatusMessage.css';
+import defaultClasses from './stockStatusMessage.module.css';
 
 const StockStatusMessage = props => {
     const { cartItems, messageId, message } = props;

package/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
@@ -13,8 +13,8 @@ const StoreCodeRoute = () => {
     const history = useHistory();
 
     const storeCodes = [];
-    const storeCurrencies = {};
-    const storeSecureBaseMediaUrl = {};
+    const storeCurrencies = useMemo(() => ({}), []);
+    const storeSecureBaseMediaUrl = useMemo(() => ({}), []);
 
     AVAILABLE_STORE_VIEWS.forEach(store => {
         storeCodes.push(store.code);

package/lib/components/TextArea/textArea.js

@@ -1,10 +1,11 @@
 import React, { Fragment } from 'react';
 import { number, node, oneOf, oneOfType, shape, string } from 'prop-types';
-import { TextArea as InformedTextArea, useFieldState } from 'informed';
+import { TextArea as InformedTextArea } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { Message } from '../Field';
-import defaultClasses from './textArea.css';
+import defaultClasses from './textArea.module.css';
 
 const TextArea = props => {
     const { classes: propClasses, field, message, ...rest } = props;

package/lib/components/TextArea/{textArea.css → textArea.module.css}

@@ -1,5 +1,5 @@
 .input {
-    composes: input from '../Field/field.css';
+    composes: input from '../Field/field.module.css';
     height: auto;
     max-width: 100%;
     min-width: 100%;

package/lib/components/TextInput/textInput.js

@@ -1,10 +1,11 @@
 import React, { Fragment } from 'react';
 import { node, shape, string } from 'prop-types';
-import { Text as InformedText, useFieldState } from 'informed';
+import { Text as InformedText } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 import { useStyle } from '../../classify';
 import { FieldIcons, Message } from '../Field';
-import defaultClasses from './textInput.css';
+import defaultClasses from './textInput.module.css';
 
 const TextInput = props => {
     const {

package/lib/components/TextInput/{textInput.css → textInput.module.css}

@@ -1,5 +1,5 @@
 .input {
-    composes: input from '../Field/field.css';
+    composes: input from '../Field/field.module.css';
 }
 
 .input:disabled {
@@ -7,6 +7,6 @@
 }
 
 .input_error {
-    composes: input from '../Field/field.css';
+    composes: input from '../Field/field.module.css';
     border-color: rgb(var(--venia-global-color-red-400));
 }

package/lib/components/ToastContainer/toast.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool, func, number, object, oneOf, string } from 'prop-types';
-import defaultClasses from './toast.css';
+import defaultClasses from './toast.module.css';
 import { useStyle } from '../../classify';
 import Icon from '../Icon';