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

package/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -18,8 +18,7 @@ jest.mock('@apollo/client', () => ({
 jest.mock('../../../util/formValidators');
 jest.mock('@magento/peregrine/lib/context/user', () => {
     const userState = {
-        isGettingDetails: false,
-        isSignedIn: false
+        isGettingDetails: false
     };
     const userApi = {
         getUserDetails: jest.fn(),

package/lib/components/CreateAccount/createAccount.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Form } from 'informed';
 import { func, shape, string, bool } from 'prop-types';
-import { Redirect } from 'react-router-dom';
 import { useCreateAccount } from '@magento/peregrine/lib/talons/CreateAccount/useCreateAccount';
 
 import { useStyle } from '../../classify';
@@ -16,7 +15,7 @@ import Button from '../Button';
 import Checkbox from '../Checkbox';
 import Field from '../Field';
 import TextInput from '../TextInput';
-import defaultClasses from './createAccount.css';
+import defaultClasses from './createAccount.module.css';
 import FormError from '../FormError';
 import Password from '../Password';
 
@@ -32,16 +31,11 @@ const CreateAccount = props => {
         handleCancel,
         handleSubmit,
         isDisabled,
-        isSignedIn,
         initialValues
     } = talonProps;
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
 
-    if (isSignedIn) {
-        return <Redirect to="/" />;
-    }
-
     const cancelButton = props.isCancelButtonHidden ? null : (
         <Button
             className={classes.cancelButton}

package/lib/components/CreateAccount/{createAccount.css → createAccount.module.css}

@@ -27,11 +27,11 @@
 }
 
 .cancelButton {
-    composes: root_lowPriority from '../Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
 }
 
 .submitButton {
-    composes: root_highPriority from '../Button/button.css';
+    composes: root_highPriority from '../Button/button.module.css';
     grid-column-start: 2;
 }
 

package/lib/components/CreateAccountPage/__tests__/__snapshots__/createAccountPage.spec.js.snap

@@ -1,13 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`it renders correctly 1`] = `
-<div
-  className="container"
->
-  <CreateAccountForm
-    initialValues={Object {}}
-    isCancelButtonHidden={true}
-    onSubmit={[MockFunction handleCreateAccount]}
-  />
+exports[`#CreateAccountPage renders correctly 1`] = `
+<div>
+  Title
+  <h1>
+    <mock-FormattedMessage
+      defaultMessage="Create an Account"
+      id="createAccountPage.header"
+    />
+  </h1>
+  <div>
+    <mock-CreateAccount />
+  </div>
 </div>
 `;

package/lib/components/CreateAccountPage/__tests__/createAccountPage.spec.js

@@ -1,28 +1,34 @@
 import React from 'react';
+
 import { createTestInstance } from '@magento/peregrine';
-import { useCreateAccountPage } from '@magento/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage';
+
 import CreateAccountPage from '../createAccountPage';
 
-jest.mock('../../../classify');
 jest.mock(
-    '@magento/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage'
+    '@magento/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage',
+    () => ({
+        useCreateAccountPage: jest.fn(() => ({
+            createAccountProps: {}
+        }))
+    })
 );
-jest.mock('../../CreateAccount', () => 'CreateAccountForm');
 
-const handleCreateAccount = jest.fn().mockName('handleCreateAccount');
+jest.mock('@magento/venia-ui/lib/components/CreateAccount', () => props => (
+    <mock-CreateAccount {...props} />
+));
 
-const props = {
-    initialValues: {}
-};
+jest.mock('@magento/venia-ui/lib/components/Head', () => ({
+    StoreTitle: () => 'Title'
+}));
 
-const talonProps = {
-    handleCreateAccount,
-    initialValues: {}
+const Component = () => {
+    return <CreateAccountPage />;
 };
 
-test('it renders correctly', () => {
-    useCreateAccountPage.mockReturnValueOnce(talonProps);
-    const tree = createTestInstance(<CreateAccountPage {...props} />);
+describe('#CreateAccountPage', () => {
+    it('renders correctly', () => {
+        const tree = createTestInstance(<Component />);
 
-    expect(tree.toJSON()).toMatchSnapshot();
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
 });

package/lib/components/CreateAccountPage/createAccountPage.js

@@ -1,32 +1,53 @@
 import React from 'react';
 import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 import { useCreateAccountPage } from '@magento/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CreateAccount from '@magento/venia-ui/lib/components/CreateAccount';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
 
-import CreateAccountForm from '../CreateAccount';
-import { useStyle } from '../../classify';
-import defaultClasses from './createAccountPage.css';
+import defaultClasses from './createAccountPage.module.css';
 
 const CreateAccountPage = props => {
-    const talonProps = useCreateAccountPage();
-    const { initialValues, handleCreateAccount } = talonProps;
     const classes = useStyle(defaultClasses, props.classes);
+    const { createAccountProps } = useCreateAccountPage(props);
+    const { formatMessage } = useIntl();
 
     return (
-        <div className={classes.container}>
-            <CreateAccountForm
-                initialValues={initialValues}
-                isCancelButtonHidden={true}
-                onSubmit={handleCreateAccount}
-            />
+        <div className={classes.root}>
+            <StoreTitle>
+                {formatMessage({
+                    id: 'createAccountPage.title',
+                    defaultMessage: 'Create an Account'
+                })}
+            </StoreTitle>
+            <h1 className={classes.header}>
+                <FormattedMessage
+                    id="createAccountPage.header"
+                    defaultMessage="Create an Account"
+                />
+            </h1>
+            <div className={classes.contentContainer}>
+                <CreateAccount {...createAccountProps} />
+            </div>
         </div>
     );
 };
 
+CreateAccountPage.defaultProps = {
+    signedInRedirectUrl: '/order-history',
+    signInPageUrl: '/sign-in'
+};
+
 CreateAccountPage.propTypes = {
     classes: shape({
-        container: string
+        root: string,
+        header: string,
+        contentContainer: string
     }),
-    initialValues: shape({})
+    signedInRedirectUrl: string,
+    signInPageUrl: string
 };
 
 export default CreateAccountPage;

package/lib/components/CreateAccountPage/createAccountPage.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/Dialog/__stories__/dialog.js

@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 
 import Dialog from '../dialog';
 import TextInput from '../../TextInput';
-import classes from './dialog.css';
+import classes from './dialog.module.css';
 
 const stories = storiesOf('Components/Dialog', module);
 

package/lib/components/Dialog/__tests__/__snapshots__/dialog.spec.js.snap

@@ -40,6 +40,17 @@ exports[`does not render a close X button in modal mode 1`] = `
             <button
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -54,6 +65,18 @@ exports[`does not render a close X button in modal mode 1`] = `
             <button
               className="root_highPriority"
               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
@@ -111,13 +134,13 @@ exports[`renders a Dialog with disabled buttons 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -148,6 +171,17 @@ exports[`renders a Dialog with disabled buttons 1`] = `
             <button
               className="root_lowPriority"
               disabled={true}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -162,6 +196,18 @@ exports[`renders a Dialog with disabled buttons 1`] = `
             <button
               className="root_highPriority"
               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="submit"
             >
               <span
@@ -219,13 +265,13 @@ exports[`renders a Dialog with no buttons 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -295,13 +341,13 @@ exports[`renders a basic Dialog 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -332,6 +378,17 @@ exports[`renders a basic Dialog 1`] = `
             <button
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -346,6 +403,18 @@ exports[`renders a basic Dialog 1`] = `
             <button
               className="root_highPriority"
               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
@@ -403,13 +472,13 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -440,6 +509,17 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
             <button
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -454,6 +534,18 @@ exports[`renders a dialog with only the confirm button disabled 1`] = `
             <button
               className="root_highPriority"
               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="submit"
             >
               <span
@@ -511,13 +603,13 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -552,6 +644,17 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
             <button
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -566,6 +669,18 @@ exports[`should render children even if dialog is hidden and if shouldUnmountOnH
             <button
               className="root_highPriority"
               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
@@ -631,13 +746,13 @@ exports[`supports modifying title and button texts 1`] = `
               <svg
                 className="icon"
                 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"
               >
                 <line
@@ -668,6 +783,17 @@ exports[`supports modifying title and button texts 1`] = `
             <button
               className="root_lowPriority"
               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="reset"
             >
               <span
@@ -682,6 +808,18 @@ exports[`supports modifying title and button texts 1`] = `
             <button
               className="root_highPriority"
               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/Dialog/dialog.js

@@ -10,7 +10,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '../Button';
 import Icon from '../Icon';
 import { Portal } from '../Portal';
-import defaultClasses from './dialog.css';
+import defaultClasses from './dialog.module.css';
 
 /**
  * The Dialog component shows its children content in a dialog,

package/lib/components/Dialog/{dialog.css → dialog.module.css}

@@ -138,11 +138,11 @@
 }
 
 .confirmButton {
-    composes: root_highPriority from '../Button/button.css';
+    composes: root_highPriority from '../Button/button.module.css';
 }
 
 .cancelButton {
-    composes: root_lowPriority from '../Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
 }
 
 /*

package/lib/components/ErrorMessage/errorMessage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { node, shape, string } from 'prop-types';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from './errorMessage.css';
+import defaultClasses from './errorMessage.module.css';
 
 const ErrorMessage = React.forwardRef((props, ref) => {
     const { children } = props;

package/lib/components/ErrorView/errorView.js

@@ -5,7 +5,7 @@ import { func, shape, string } from 'prop-types';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Button from '@magento/venia-ui/lib/components/Button';
-import defaultClasses from './errorView.css';
+import defaultClasses from './errorView.module.css';
 import backgroundUrl from './errorViewBackground-1400x600.png';
 import mobileBackgroundUrl from './errorViewBackground-380x600.png';
 

package/lib/components/Field/field.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { bool, node, shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './field.css';
+import defaultClasses from './field.module.css';
 
 const Field = props => {
     const { children, id, label, optional } = props;

package/lib/components/Field/fieldIcons.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shape, string } from 'prop-types';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './fieldIcons.css';
+import defaultClasses from './fieldIcons.module.css';
 
 const FieldIcons = props => {
     const { after, before, children } = props;

package/lib/components/Field/message.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { node, number, oneOfType, shape, string } from 'prop-types';
 
-import defaultClasses from './message.css';
+import defaultClasses from './message.module.css';
 import { useStyle } from '../../classify';
 
 const Message = props => {