@magento/venia-ui 11.4.0-beta.1 → 11.5.0-alpha.1

package/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.spec.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`filter button/modal does not render if there are no filters 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -19,7 +19,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -94,16 +96,16 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter button/modal renders when there are filters 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -117,7 +119,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -206,16 +210,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter sidebar does not render if not in viewport 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -229,7 +233,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -318,16 +324,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`filter sidebar renders when in viewport 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -341,7 +347,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -438,16 +446,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders empty page 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -461,7 +469,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Empty Name
+          <div>
+            Empty Name
+          </div>
         </div>
       </h1>
     </div>
@@ -489,16 +499,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders loading indicator if no data and loading 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -512,7 +522,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -558,16 +570,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`renders the correct tree 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -581,7 +593,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -656,16 +670,16 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`sort button/container does not render if there are no products 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -679,7 +693,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -707,16 +723,16 @@ Array [
         />
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;
 
 exports[`sort button/container renders when there are products 1`] = `
-Array [
+<div>
   <Breadcrumbs
     categoryId={42}
-  />,
-  "Title",
+  />
+  Title
   <article
     className="root"
   >
@@ -730,7 +746,9 @@ Array [
         <div
           className="categoryTitle"
         >
-          Name
+          <div>
+            Name
+          </div>
         </div>
       </h1>
     </div>
@@ -805,6 +823,6 @@ Array [
         </div>
       </div>
     </div>
-  </article>,
-]
+  </article>
+</div>
 `;

package/lib/RootComponents/Category/categoryContent.js

@@ -101,13 +101,16 @@ const CategoryContent = props => {
 
     const categoryResultsHeading =
         totalCount > 0 ? (
-            <FormattedMessage
-                id={'categoryContent.resultCount'}
-                values={{
-                    count: totalCount
-                }}
-                defaultMessage={'{count} Results'}
-            />
+            <div>
+                {' '}
+                <FormattedMessage
+                    id={'categoryContent.resultCount'}
+                    values={{
+                        count: totalCount
+                    }}
+                    defaultMessage={'{count} Results'}
+                />{' '}
+            </div>
         ) : isLoading ? (
             <Shimmer width={5} />
         ) : null;
@@ -151,45 +154,50 @@ const CategoryContent = props => {
 
     return (
         <Fragment>
-            <Breadcrumbs categoryId={categoryId} />
-            <StoreTitle>{categoryName}</StoreTitle>
-            <article className={classes.root} data-cy="CategoryContent-root">
-                <div className={classes.categoryHeader}>
-                    <h1 aria-live="polite" className={classes.title}>
-                        <div
-                            className={classes.categoryTitle}
-                            data-cy="CategoryContent-categoryTitle"
-                        >
-                            {categoryTitle}
-                        </div>
-                    </h1>
-                    {categoryDescriptionElement}
-                </div>
-                <div className={classes.contentWrapper}>
-                    <div ref={sidebarRef} className={classes.sidebar}>
-                        <Suspense fallback={<FilterSidebarShimmer />}>
-                            {shouldRenderSidebarContent ? sidebar : null}
-                        </Suspense>
-                    </div>
-                    <div className={classes.categoryContent}>
-                        <div className={classes.heading}>
+            <div>
+                <Breadcrumbs categoryId={categoryId} />
+                <StoreTitle>{categoryName}</StoreTitle>
+                <article
+                    className={classes.root}
+                    data-cy="CategoryContent-root"
+                >
+                    <div className={classes.categoryHeader}>
+                        <h1 aria-live="polite" className={classes.title}>
                             <div
-                                data-cy="CategoryContent-categoryInfo"
-                                className={classes.categoryInfo}
+                                className={classes.categoryTitle}
+                                data-cy="CategoryContent-categoryTitle"
                             >
-                                {categoryResultsHeading}
+                                <div>{categoryTitle}</div>
                             </div>
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
+                        </h1>
+                        {categoryDescriptionElement}
+                    </div>
+                    <div className={classes.contentWrapper}>
+                        <div ref={sidebarRef} className={classes.sidebar}>
+                            <Suspense fallback={<FilterSidebarShimmer />}>
+                                {shouldRenderSidebarContent ? sidebar : null}
+                            </Suspense>
+                        </div>
+                        <div className={classes.categoryContent}>
+                            <div className={classes.heading}>
+                                <div
+                                    data-cy="CategoryContent-categoryInfo"
+                                    className={classes.categoryInfo}
+                                >
+                                    {categoryResultsHeading}
+                                </div>
+                                <div className={classes.headerButtons}>
+                                    {maybeFilterButtons}
+                                    {maybeSortButton}
+                                </div>
+                                {maybeSortContainer}
                             </div>
-                            {maybeSortContainer}
+                            {content}
+                            <Suspense fallback={null}>{filtersModal}</Suspense>
                         </div>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
                     </div>
-                </div>
-            </article>
+                </article>
+            </div>
         </Fragment>
     );
 };

package/lib/components/AccountInformationPage/__tests__/__snapshots__/editForm.spec.js.snap

@@ -194,7 +194,6 @@ exports[`renders form when shouldShowNewPassword is false 1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
-              onKey={true}
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
@@ -467,7 +466,6 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
-              onKey={true}
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
@@ -559,7 +557,6 @@ exports[`renders form when shouldShowNewPassword is true  1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
-              onKey={true}
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseEnter={[Function]}

package/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap

@@ -199,7 +199,6 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
             disabled={false}
             onClick={[Function]}
             onDragStart={[Function]}
-            onKey={true}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseEnter={[Function]}
@@ -530,7 +529,6 @@ exports[`CreateAccount renders errors 1`] = `
             disabled={false}
             onClick={[Function]}
             onDragStart={[Function]}
-            onKey={true}
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseEnter={[Function]}

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

@@ -142,7 +142,6 @@ exports[`renders the correct tree 1`] = `
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
-          onKey={true}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseEnter={[Function]}
@@ -391,7 +390,6 @@ exports[`should not render cancel button if isCancelButtonHidden is true 1`] = `
           disabled={false}
           onClick={[Function]}
           onDragStart={[Function]}
-          onKey={true}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseEnter={[Function]}

package/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap

@@ -109,7 +109,6 @@ exports[`should render formErrors 1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
-              onKey={true}
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseEnter={[Function]}
@@ -264,7 +263,6 @@ exports[`should render properly 1`] = `
               disabled={false}
               onClick={[Function]}
               onDragStart={[Function]}
-              onKey={true}
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseEnter={[Function]}

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

@@ -80,7 +80,6 @@ exports[`should render show button if visible is false 1`] = `
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
-          onKey={true}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseEnter={[Function]}
@@ -162,7 +161,6 @@ exports[`should render toggle button if isToggleButtonHidden is false 1`] = `
           disabled={false}
           onClick={[MockFunction]}
           onDragStart={[Function]}
-          onKey={true}
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseEnter={[Function]}

package/lib/components/Password/password.js

@@ -48,7 +48,6 @@ const Password = props => {
             className={classes.passwordButton}
             onClick={togglePasswordVisibility}
             onKeyDown={handleKeypress}
-            onKey
             type="button"
         >
             {visible ? (

package/lib/targets/__tests__/venia-ui-targets.spec.js

@@ -15,7 +15,7 @@ const thisDep = {
     intercept
 };
 
-const WEBPACK_BUILD_TIMEOUT = 30000;
+const WEBPACK_BUILD_TIMEOUT = 800000;
 
 const mockComponent = name => `function ${name}(props) { return <div className={name}>{props.children}</div>;
 `;

package/lib/util/formatLocale.js

@@ -15,5 +15,5 @@ export const fromReactIntl = string => {
  * @returns {string} A string (e.g. `fr-FR`).
  */
 export const toReactIntl = string => {
-    return string.replace('_', '-');
+    return string.replace(/_/g, '-');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.4.0-beta.1",
+  "version": "11.5.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -79,9 +79,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
-    "@magento/babel-preset-peregrine": "1.3.3-beta.1",
-    "@magento/peregrine": "14.3.1-beta.1",
-    "@magento/pwa-buildpack": "11.5.3-beta.1",
+    "@magento/babel-preset-peregrine": "~1.3.3",
+    "@magento/peregrine": "14.4.1-alpha.1",
+    "@magento/pwa-buildpack": "~11.5.3",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.33.3",
     "graphql": "~15.5.0",

package/upward.yml

@@ -20,6 +20,9 @@ veniaResponse:
         - matches: fileExtension
           pattern: '(js|json|png|jpg|gif|svg|ico|css|txt)'
           use: veniaStatic
+        - matches:  urlResolver.redirect_code
+          pattern: '(301|302)'
+          use: dynamicRedirect
     default: veniaAppShell
 
 # A FileResolver for serving certain files directly from document root,
@@ -195,3 +198,61 @@ veniaStaticIncludes:
     directory:
         resolver: inline
         inline: './venia-static'
+
+urlResolver: urlResolverResult.data.route
+
+urlResolverResult:
+  resolver: service
+  endpoint:
+    resolver: url
+    baseUrl: env.MAGENTO_BACKEND_URL
+    pathname:
+      inline: graphql
+  method:
+    resolver: inline
+    inline: POST
+  headers:
+    resolver: inline
+    inline:
+      'content-type': 'application/json'
+      accept: 'application/json'
+  query:
+    resolver: inline
+    inline: 'query ResolveURL($url: String!) {
+        route(url: $url) {
+          type
+          relative_url
+          redirect_code
+        }
+      }'
+  variables:
+    resolver: inline
+    inline:
+      # This is a barestring indicating a context lookup. It resolves to the
+      # `path` value in the URL query string of the request, using the builtin
+      # `request` context object.
+      url: request.url.pathname
+
+dynamicRedirect:
+    resolver: inline
+    inline:
+        status: urlResolver.redirect_code
+        headers:
+            resolver: inline
+            inline:
+                content-type:
+                    inline: text/html
+                cache-control:
+                    inline: s-maxage=60
+        body:
+          resolver: template
+          engine: mustache
+          provide:
+            pageType: veniaPageType.data
+            pageTypeNonce: veniaPageTypeNonce.nonce
+            webpackChunks: veniaWebpackChunks.scripts
+          template:
+            resolver: file
+            file:
+              resolver: inline
+              inline: './index.html'