@magento/venia-ui 10.3.0 → 11.3.0-alpha.8

package/lib/components/MiniCart/miniCart.module.css

@@ -1,22 +1,25 @@
 .root {
     composes: absolute from global;
     composes: h-0 from global;
-    composes: left-[-100vw] from global;
     composes: max-w-[100vw] from global;
     composes: opacity-0 from global;
     composes: overflow-visible from global;
     composes: top-full from global;
     composes: z-menu from global;
+    composes: -translate-x-1/2 from global;
     transition: opacity 192ms var(--venia-global-anim-out),
         visibility 192ms var(--venia-global-anim-out),
         /* Adding delay to move container off the screen after previous transitions happened */
             left 0s 192ms;
     width: calc(100vw - 2rem); /* TODO @TW: review */
-    transform: translate3d(-50%, 0, 0);
+}
+
+.root_closed {
+    composes: root;
 
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
+    composes: left-[-100vw] from global;
+
+    @apply invisible;
 }
 
 .root_open {
@@ -27,9 +30,7 @@
     transition: opacity 224ms var(--venia-global-anim-in),
         visibility 224ms var(--venia-global-anim-in), left 0s;
 
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
+    @apply visible;
 }
 
 /* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */
@@ -79,11 +80,8 @@
 
 .stockStatusMessageContainer {
     composes: col-end-span2 from global;
-}
 
-/* TODO @TW: cannot compose */
-.stockStatusMessageContainer:empty {
-    display: none;
+    composes: empty_hidden from global;
 }
 
 .body {
@@ -104,7 +102,7 @@
 .quantity_loading {
     composes: quantity;
 
-    composes: opacity-50 from global;
+    @apply opacity-50;
 }
 
 .price {
@@ -116,9 +114,9 @@
 }
 
 .price_loading {
-    composes: quantity;
+    composes: price;
 
-    composes: opacity-50 from global;
+    @apply opacity-50;
 }
 
 .footer {
@@ -141,8 +139,8 @@
 .checkoutButton {
     composes: root_highPriority from '../Button/button.module.css';
 
-    composes: bg-brand-dark from global;
-    composes: border-0 from global;
+    @apply bg-brand-dark;
+    @apply border-0;
     composes: font-bold from global;
     composes: m-auto from global;
     composes: w-[10rem] from global;

package/lib/components/MyAccount/ResetPassword/resetPassword.module.css

@@ -49,5 +49,5 @@
     composes: lg_border-2 from global;
     composes: lg_border-solid from global;
     composes: lg_border-subtle from global;
-    composes: lg_rounded-md from global;
+    composes: lg_rounded-box from global;
 }

package/lib/components/Navigation/navigation.module.css

@@ -10,29 +10,23 @@
     composes: top-0 from global;
     composes: w-full from global;
     composes: z-menu from global;
+    composes: invisible from global;
     grid-template-rows: auto 1fr auto;
     transform: translate3d(-100%, 0, 0);
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: var(--venia-global-anim-out);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .root_open {
     composes: root;
 
-    composes: opacity-100 from global;
+    @apply opacity-100;
     composes: shadow-modal from global;
+    @apply visible;
     transform: translate3d(0, 0, 0);
     transition-duration: 384ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .header {
@@ -53,25 +47,19 @@
     composes: min-h-0 from global;
     composes: opacity-100 from global;
     composes: overflow-auto from global;
+    composes: visible from global;
     transition-duration: 192ms;
     transition-property: opacity, visibility;
     transition-timing-function: var(--venia-global-anim-out);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }
 
 .body_masked {
     composes: body;
 
-    composes: opacity-0 from global;
+    @apply opacity-0;
+    @apply invisible;
     transition-duration: 384ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .footer {
@@ -96,25 +84,19 @@
     composes: overflow-auto from global;
     composes: right-0 from global;
     composes: top-lg from global;
+    composes: invisible from global;
     transform: translate3d(-100%, 0, 0);
     transition-duration: 192ms;
     transition-property: opacity, transform, visibility;
     transition-timing-function: var(--venia-global-anim-out);
-
-    /* TODO @TW: review (B6) */
-    /* composes: invisible from global; */
-    visibility: hidden;
 }
 
 .modal_open {
     composes: modal;
 
-    composes: opacity-100 from global;
+    @apply opacity-100;
+    @apply visible;
     transform: translate3d(0, 0, 0);
     transition-duration: 384ms;
     transition-timing-function: var(--venia-global-anim-in);
-
-    /* TODO @TW: review (B6) */
-    /* composes: visible from global; */
-    visibility: visible;
 }

package/lib/components/Newsletter/newsletter.module.css

@@ -16,25 +16,24 @@
     composes: relative from global;
 }
 
-/* TODO @TW: cannot compose */
 .form input {
-    /* TODO @TW: review */
-    padding-right: calc(1.875rem * var(--iconsAfter) + 5.625rem);
+    padding-right: calc(
+        theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5]) +
+            theme(spacing[20])
+    );
 }
 
-@media (max-width: 799px) {
-    /* TODO @TW: cannot compose */
+@media screen(-md) {
     .form input {
-        /* TODO @TW: review */
-        padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
+        padding-right: calc(
+            theme(spacing[7.5]) * var(--iconsAfter) + theme(spacing[2.5])
+        );
     }
 }
 
-/* TODO @TW: cannot compose */
 .form label {
-    position: absolute;
-    z-index: -1;
-    /* composes: z-behind from global; */
+    @apply absolute;
+    @apply z-behind;
 }
 
 .buttonsContainer {

package/lib/components/OrderHistoryPage/OrderDetails/item.module.css

@@ -8,7 +8,7 @@
     composes: lg_gap-y-1.5 from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .root {
         grid-template-columns: auto repeat(3, 1fr) auto;
         grid-template-rows: repeat(5, auto);

package/lib/components/OrderHistoryPage/OrderDetails/orderDetails.module.css

@@ -64,7 +64,7 @@
  * Mobile-specific styles.
  */
 
-@media (max-width: 959px) {
+@media screen(-lg) {
     .shippingInformationContainer {
         grid-row: 1 / span 1;
         grid-column: 1 / span 1;

package/lib/components/OrderHistoryPage/OrderDetails/orderTotal.module.css

@@ -10,7 +10,7 @@
     composes: lg_border-solid from global;
     composes: lg_border-subtle from global;
     composes: lg_p-md from global;
-    composes: lg_rounded-md from global;
+    composes: lg_rounded-box from global;
 }
 
 .heading {

package/lib/components/OrderHistoryPage/OrderDetails/shippingMethod.module.css

@@ -8,9 +8,8 @@
     composes: pb-1.5 from global;
 }
 
-/* TODO @TW: cannot compose */
-.method:empty {
-    display: none;
+.method {
+    composes: empty_hidden from global;
 }
 
 .tracking {

package/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap

@@ -119,11 +119,10 @@ exports[`it does not render order details if loading is true 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -278,11 +277,10 @@ exports[`it renders collapsed order row 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -565,11 +563,10 @@ exports[`it renders open order row 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -862,11 +859,10 @@ exports[`it renders with missing order information 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Shipped
+      Received
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Shipped"
     />
   </div>
   <button

package/lib/components/OrderHistoryPage/__tests__/orderRow.spec.js

@@ -226,48 +226,6 @@ test('it renders open order row', () => {
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
-test('it renders shipped status', () => {
-    useOrderRow.mockReturnValue({
-        loading: false,
-        imagesData,
-        isOpen: false,
-        handleContentToggle: jest.fn()
-    });
-
-    const orderWithInvoice = {
-        ...mockOrder,
-        invoices: [1]
-    };
-    const tree = createTestInstance(<OrderRow order={orderWithInvoice} />);
-    const { root } = tree;
-    const orderProgressProps = root.findByProps({
-        componentName: 'OrderProgressBar'
-    }).props;
-
-    expect(orderProgressProps.status).toBe('Delivered');
-});
-
-test('it renders delivered status', () => {
-    useOrderRow.mockReturnValue({
-        loading: false,
-        imagesData,
-        isOpen: false,
-        handleContentToggle: jest.fn()
-    });
-
-    const completedOrder = {
-        ...mockOrder,
-        status: 'Complete'
-    };
-    const tree = createTestInstance(<OrderRow order={completedOrder} />);
-    const { root } = tree;
-    const orderProgressProps = root.findByProps({
-        componentName: 'OrderProgressBar'
-    }).props;
-
-    expect(orderProgressProps.status).toBe('Delivered');
-});
-
 test('it renders with missing order information', () => {
     useOrderRow.mockReturnValue({
         loading: false,

package/lib/components/OrderHistoryPage/orderHistoryPage.module.css

@@ -55,7 +55,7 @@
     composes: root_highPriority from '../Button/button.module.css';
 
     composes: h-[2rem] from global;
-    composes: min-w-[5rem] from global;
+    @apply min-w-[5rem];
     composes: w-[5rem] from global;
 }
 

package/lib/components/OrderHistoryPage/orderProgressBar.js

@@ -13,35 +13,49 @@ const OrderProgressBar = props => {
     const statusStepMap = new Map([
         [
             formatMessage({
-                id: 'orderProgressBar.processingText',
-                defaultMessage: 'Processing'
+                id: 'orderProgressBar.newText',
+                defaultMessage: 'new'
             }),
             1
         ],
         [
             formatMessage({
-                id: 'orderProgressBar.readyToShipText',
-                defaultMessage: 'Ready to ship'
+                id: 'orderProgressBar.processingText',
+                defaultMessage: 'Progressing'
             }),
             2
         ],
         [
             formatMessage({
-                id: 'orderProgressBar.shippedText',
-                defaultMessage: 'Shipped'
+                id: 'orderProgressBar.pendingPaymentText',
+                defaultMessage: 'pending_payment'
+            }),
+            3
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.paymentReviewText',
+                defaultMessage: 'payment_review'
             }),
             3
         ],
         [
             formatMessage({
                 id: 'orderProgressBar.deliveredText',
-                defaultMessage: 'Delivered'
+                defaultMessage: 'complete'
             }),
             4
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.closedText',
+                defaultMessage: 'Closed'
+            }),
+            0
         ]
     ]);
-    const currentStep = statusStepMap.get(status);
 
+    const currentStep = statusStepMap.get(status);
     const classes = useStyle(defaultClasses, props.classes);
 
     const stepElements = useMemo(() => {

package/lib/components/OrderHistoryPage/orderRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { arrayOf, number, shape, string } from 'prop-types';
 import { ChevronDown, ChevronUp } from 'react-feather';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useOrderRow } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow';
 
@@ -14,14 +14,12 @@ import defaultClasses from './orderRow.module.css';
 
 const OrderRow = props => {
     const { order } = props;
-    const { formatMessage } = useIntl();
     const {
-        invoices,
         items,
         number: orderNumber,
         order_date: orderDate,
-        shipments,
         status,
+        state,
         total
     } = order;
     const { grand_total: grandTotal } = total;
@@ -38,30 +36,8 @@ const OrderRow = props => {
         }
     );
 
-    const hasInvoice = !!invoices.length;
-    const hasShipment = !!shipments.length;
-    let derivedStatus;
-    if (status === 'Complete') {
-        derivedStatus = formatMessage({
-            id: 'orderRow.deliveredText',
-            defaultMessage: 'Delivered'
-        });
-    } else if (hasShipment) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.shippedText',
-            defaultMessage: 'Shipped'
-        });
-    } else if (hasInvoice) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.readyToShipText',
-            defaultMessage: 'Ready to ship'
-        });
-    } else {
-        derivedStatus = formatMessage({
-            id: 'orderRow.processingText',
-            defaultMessage: 'Processing'
-        });
-    }
+    const derivedStatus = status;
+    const derivedProgress = state;
 
     const talonProps = useOrderRow({ items });
     const { loading, isOpen, handleContentToggle, imagesData } = talonProps;
@@ -88,7 +64,6 @@ const OrderRow = props => {
         ) : (
             '-'
         );
-
     return (
         <li className={classes.root}>
             <div className={classes.orderNumberContainer}>
@@ -125,7 +100,7 @@ const OrderRow = props => {
                 <span className={classes.orderStatusBadge}>
                     {derivedStatus}
                 </span>
-                <OrderProgressBar status={derivedStatus} />
+                <OrderProgressBar status={derivedProgress} />
             </div>
             <button
                 className={classes.contentToggleContainer}
@@ -141,7 +116,6 @@ const OrderRow = props => {
 };
 
 export default OrderRow;
-
 OrderRow.propTypes = {
     classes: shape({
         root: string,

package/lib/components/OrderHistoryPage/orderRow.module.css

@@ -4,10 +4,10 @@
     composes: border-subtle from global;
     composes: grid from global;
     composes: grid-cols-2 from global;
-    composes: rounded-md from global;
+    composes: rounded-box from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .root {
         grid-template-columns:
             minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9rem, 1fr)
@@ -73,6 +73,7 @@
     composes: grid from global;
     composes: overflow-hidden from global;
     composes: p-sm from global;
+    composes: max-lg_empty_hidden from global;
 
     composes: lg_border-b-0 from global;
     composes: lg_border-l from global;
@@ -134,7 +135,7 @@
     composes: justify-self-start from global;
     composes: px-xs from global;
     composes: py-1 from global;
-    composes: rounded-md from global;
+    composes: rounded-badge from global;
     composes: text-2xs from global;
 }
 
@@ -150,12 +151,7 @@
     composes: hidden from global;
 }
 
-@media (max-width: 959px) {
-    /* TODO @TW: cannot compose */
-    .orderItemsContainer:empty {
-        display: none;
-    }
-
+@media screen(-lg) {
     .orderNumberContainer {
         grid-column: 1 / span 2;
         grid-row: 1;

package/lib/components/PageLoadingIndicator/pageLoadingIndicator.module.css

@@ -34,12 +34,12 @@
 
 .indicator_loading {
     composes: indicator_off;
-    composes: opacity-100 from global;
+    @apply opacity-100;
     transform: translateX(-25%);
 }
 
 .indicator_done {
     composes: indicator_off;
-    composes: opacity-100 from global;
+    @apply opacity-100;
     transform: translateX(0%);
 }

package/lib/components/Pagination/tile.module.css

@@ -13,5 +13,5 @@
 .root_active {
     composes: root;
 
-    composes: border-currentColor from global;
+    @apply border-currentColor;
 }

package/lib/components/Password/password.module.css

@@ -8,8 +8,8 @@
     --stroke: var(--venia-global-color-gray-500);
 
     composes: bg-transparent from global;
-    composes: border-none from global;
-    composes: border-0 from global;
+    @apply border-none;
+    @apply border-0;
     composes: min-w-0 from global;
     composes: p-0 from global;
     composes: rounded-none from global;

package/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -9,7 +9,7 @@
     composes: lg_py-md from global;
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .root {
         grid-template-areas:
             'images title'
@@ -55,8 +55,7 @@
     composes: grid from global;
     composes: items-center from global;
     composes: leading-normal from global;
-    composes: px-sm from global;
-    composes: py-xs from global;
+    @apply py-xs;
     grid-area: title;
 }
 
@@ -155,7 +154,7 @@
     list-style: none;
 }
 
-@media (min-width: 1024px) {
+@media screen(xl) {
     .details {
         align-self: stretch;
         border-top-width: 1px;
@@ -170,7 +169,7 @@
 }
 
 .related {
-    composes: border-b-0 from global;
+    @apply border-b-0;
     composes: section;
     grid-column: 1 / span 2;
 }

package/lib/components/ProductImageCarousel/carousel.module.css

@@ -8,7 +8,7 @@
         'thumbs';
 }
 
-@media (min-width: 960px) {
+@media screen(lg) {
     .root {
         grid-template-areas: 'thumbs main';
         /* These values are mirrored in JS for image sizes. Keep them in sync. */
@@ -72,11 +72,10 @@
     composes: self-center from global;
 }
 
-/* TODO @TW: cannot compose */
 .nextButton:focus > .chevron,
 .previousButton:focus > .chevron {
     box-shadow: 0 0 4px 2px rgb(var(--venia-global-color-teal));
-    border-radius: 0.5rem;
+    @apply rounded-lg;
 }
 
 .thumbnailList {

package/lib/components/ProductImageCarousel/thumbnail.module.css

@@ -35,7 +35,7 @@
 }
 
 /* For desktop mode where buttons are an image... */
-@media (min-width: 960px) {
+@media screen(lg) {
     .rootSelected {
         composes: root;