@magento/venia-ui 9.3.0-alpha.1 → 9.4.0-alpha.1

package/lib/components/CartPage/PriceSummary/giftOptionsSummary.ce.js

@@ -1,5 +1,5 @@
 /**
- * Gift Options Prices are an EE-only feature.
- * Here in CE, don't render the component at all.
+ * Gift Options Prices are an AC-only feature.
+ * Here in MOS, don't render the component at all.
  */
 export default () => null;

package/lib/components/CartPage/PriceSummary/priceSummary.module.css

@@ -2,47 +2,47 @@
 }
 
 .errorText {
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
+    composes: leading-normal from global;
+    composes: text-error from global;
 }
 
 .lineItems {
-    display: grid;
-    grid-gap: 0.75rem;
-    grid-template-columns: 1fr auto;
-    line-height: 1.5rem;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: leading-normal from global;
 }
 
 .lineItemLabel {
+    composes: justify-self-start from global;
     composes: my-2 from global;
-    justify-self: start;
 }
 
 .price {
+    composes: justify-self-end from global;
     composes: self-center from global;
-    justify-self: end;
 }
 
 .totalLabel {
     composes: lineItemLabel;
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .totalPrice {
     composes: price;
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .priceUpdating {
     composes: price;
-    opacity: 0;
+    composes: opacity-0 from global;
 }
 
 .checkoutButton_container {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    margin-top: 1rem;
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
     min-height: 5.5rem;
-    width: 100%;
 }

package/lib/components/CartPage/ProductListing/EditModal/productDetail.module.css

@@ -1,30 +1,33 @@
 .root {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 1rem;
-    padding-bottom: 1rem;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: pb-xs from global;
 }
 
 .imageContainer {
-    justify-self: center;
+    composes: justify-self-center from global;
 }
 
 .image {
-    padding: 0 2rem;
+    composes: px-md from global;
+    composes: py-0 from global;
 }
 
 .productName {
-    font-size: 1.5rem;
-    font-weight: 600;
+    composes: font-semibold from global;
+    composes: text-xl from global;
 }
 
 .stockRow {
-    display: flex;
-    font-weight: 300;
-    font-size: 0.875rem;
-    justify-content: space-between;
+    composes: flex from global;
+    composes: font-light from global;
+    composes: justify-between from global;
+    composes: text-sm from global;
 }
 
 .price {
-    font-weight: 600;
+    composes: font-semibold from global;
 }

package/lib/components/CartPage/ProductListing/EditModal/productForm.js

@@ -6,7 +6,7 @@ import { useStyle } from '../../../../classify';
 import FormError from '../../../FormError';
 import LoadingIndicator from '../../../LoadingIndicator';
 import Options from '../../../ProductOptions';
-import { QuantityFields } from '../quantity';
+import QuantityStepper from '../../../QuantityStepper';
 import defaultClasses from './productForm.module.css';
 import Dialog from '../../../Dialog';
 import ProductDetail from './productDetail';
@@ -110,7 +110,7 @@ const ProductForm = props => {
                         defaultMessage={'Quantity'}
                     />
                 </h3>
-                <QuantityFields
+                <QuantityStepper
                     classes={{
                         root: classes.quantityRoot
                     }}

package/lib/components/CartPage/ProductListing/EditModal/productForm.module.css

@@ -1,46 +1,52 @@
 .contents {
     composes: contents from '../../../Dialog/dialog.module.css';
-    position: relative;
+
+    composes: relative from global;
 }
 
 .optionRoot {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    padding: 1rem 0;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
 }
 
 .quantityLabel {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5;
-    margin-bottom: 1.5rem;
-    padding-top: 1rem;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
 }
 
 .quantityRoot {
-    composes: root from '../quantity.module.css';
+    composes: root from '../../../QuantityStepper/quantityStepper.module.css';
     grid-template-columns: auto 4rem auto;
-    justify-content: start;
-    padding: 0 1rem;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
 }
 
 .loading {
     composes: root from '../../../LoadingIndicator/indicator.module.css';
-    height: unset;
-    left: 0;
-    position: absolute;
-    text-align: center;
-    top: 50%;
+
+    composes: absolute from global;
+    composes: h-unset from global;
+    composes: left-0 from global;
+    composes: text-center from global;
+    composes: top-2/4 from global;
+    composes: z-mask from global;
     transform: translateY(-50%);
-    z-index: 10;
 }
 
 .dataError {
-    color: rgb(var(--venia-global-color-error));
-    display: inline-block;
-    padding-top: 1rem;
-    line-height: var(--venia-global-lineHeight-300);
+    composes: inline-block from global;
+    composes: leading-normal from global;
+    composes: pt-xs from global;
+    composes: text-error from global;
 }
 
 .errorContainer {
-    padding-top: 1rem;
+    composes: pt-xs from global;
 }

package/lib/components/CartPage/ProductListing/__tests__/__snapshots__/product.spec.js.snap

@@ -266,6 +266,7 @@ exports[`renders configurable product with options 1`] = `
           className="menuItem"
         >
           <button
+            className="button"
             onMouseDown={[MockFunction]}
           >
             <span
@@ -299,6 +300,7 @@ exports[`renders configurable product with options 1`] = `
           className="menuItem"
         >
           <button
+            className="button"
             onMouseDown={[MockFunction]}
           >
             <span
@@ -597,6 +599,7 @@ exports[`renders out of stock product 1`] = `
           className="menuItem"
         >
           <button
+            className="button"
             onMouseDown={[MockFunction]}
           >
             <span
@@ -895,6 +898,7 @@ exports[`renders simple product correctly 1`] = `
           className="menuItem"
         >
           <button
+            className="button"
             onMouseDown={[MockFunction]}
           >
             <span

package/lib/components/CartPage/ProductListing/__tests__/quantity.spec.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
-import { useQuantity } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useQuantity';
+import { useQuantityStepper } from '@magento/peregrine/lib/talons/QuantityStepper/useQuantityStepper';
 import Quantity from '../quantity';
 
 jest.mock('../../../../classify');
-jest.mock('@magento/peregrine/lib/talons/CartPage/ProductListing/useQuantity');
+jest.mock('@magento/peregrine/lib/talons/QuantityStepper/useQuantityStepper');
 
 const mockOnChange = jest.fn();
 const defaultProps = {
@@ -17,7 +17,7 @@ const defaultProps = {
 };
 
 test('renders quantity correctly', () => {
-    useQuantity.mockReturnValueOnce({
+    useQuantityStepper.mockReturnValueOnce({
         isDecrementDisabled: false,
         isIncrementDisabled: false,
         handleBlur: jest.fn(),

package/lib/components/CartPage/ProductListing/errorMessage.module.css

@@ -1,9 +1,13 @@
 .root {
-    border-left: 5px solid rgb(var(--venia-global-color-error));
-    color: rgb(var(--venia-global-color-error));
-    font-size: var(--venia-typography-body-S-fontSize);
-    font-weight: var(--venia-global-fontWeight-semibold);
-    line-height: var(--venia-global-lineHeight-300);
-    padding: 1rem 0 1rem 1rem;
-    margin-bottom: 1rem;
+    composes: border-l-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
+    composes: text-error from global;
+    composes: text-sm from global;
 }

package/lib/components/CartPage/ProductListing/product.module.css

@@ -1,26 +1,28 @@
 .root {
-    display: grid;
-    row-gap: 0.5rem;
+    composes: gap-y-2xs from global;
+    composes: grid from global;
 }
 
 .item {
-    align-items: start;
-    display: grid;
-    grid-gap: 0.5rem 1rem;
+    composes: gap-x-2xs from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: items-start from global;
     grid-template-areas: 'image details kebab';
     grid-template-columns: 100px 1fr min-content;
 }
 
 .item_disabled {
     composes: item;
-    opacity: 0.5;
+    composes: opacity-50 from global;
 }
 
 .errorText {
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
+    composes: leading-normal from global;
+    composes: text-error from global;
 }
 
+/* TODO @TW: cannot compose */
 .errorText:empty {
     display: none;
 }
@@ -30,102 +32,112 @@
 }
 
 .imageRoot {
-    height: 100%;
+    composes: h-full from global;
 }
 
 .image {
-    background-color: rgb(var(--venia-global-color-gray));
-    border: solid 1px rgb(var(--venia-global-color-border));
-    border-radius: 2px;
-    height: 100%;
-    object-fit: contain;
-    object-position: center;
+    composes: bg-subtle from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: object-center from global;
+    composes: rounded-sm from global;
 }
 
 .details {
-    display: grid;
-    gap: 0.5rem;
-    grid-area: details;
-    grid-template-areas:
-        'name name'
-        'options quantity'
-        'price quantity'
-        'stock quantity';
-    grid-template-columns: 2fr 1fr;
-    line-height: 1.5;
+    composes: gap-2xs from global;
+    composes: leading-normal from global;
+
+    composes: sm_grid from global;
+}
+
+@media (min-width: 640px) {
+    .details {
+        grid-area: details;
+        grid-template-areas:
+            'name name'
+            'options quantity'
+            'price quantity'
+            'stock quantity';
+        grid-template-columns: 2fr 1fr;
+    }
 }
 
 .name {
+    composes: font-semibold from global;
     grid-area: name;
-    font-weight: var(--venia-global-fontWeight-semibold);
 }
 
 .price {
+    composes: text-sm from global;
     grid-area: price;
-    font-size: var(--venia-typography-body-S-fontSize);
 }
 
 .quantity {
-    align-items: start;
-    display: grid;
+    composes: grid from global;
+    composes: items-start from global;
+    composes: justify-items-start from global;
     grid-area: quantity;
-    justify-items: center;
+
+    composes: sm_justify-items-center from global;
 }
 
 .kebab {
+    composes: relative from global;
     grid-area: kebab;
-    position: relative;
 }
 
 .sectionText {
-    padding: 0.25rem 0.5rem;
-    font-size: var(--venia-typography-body-S-fontSize);
-    pointer-events: none;
+    composes: pointer-events-none from global;
+    composes: px-2xs from global;
+    composes: py-1 from global;
+    composes: text-sm from global;
 }
 
 .options {
+    composes: gap-0.5 from global;
+    composes: grid from global;
+    composes: text-sm from global;
     grid-area: options;
-    font-size: var(--venia-typography-body-S-fontSize);
-    display: grid;
-    grid-gap: 0.125rem;
 }
 
 .optionLabel {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
 }
 
 .stockStatusMessage {
-    color: rgb(var(--venia-global-color-error));
-    font-size: var(--venia-global-fontSize-100);
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
+    composes: text-error from global;
+    composes: text-sm from global;
     grid-area: stock;
 }
 
+/* TODO @TW: cannot compose */
 .stockStatusMessage:empty {
     display: none;
 }
 
 .addToListButton {
     --stroke: rgb(var(--venia-global-color-teal));
-    align-content: center;
-    column-gap: 1.125rem;
-    display: inline-flex;
-    font-size: var(--venia-typography-body-S-fontSize);
-    padding: 0.875rem 0.625rem;
-    width: 100%;
+
+    composes: content-center from global;
+    composes: gap-x-xs from global;
+    composes: inline-flex from global;
+    composes: px-2.5 from global;
+    composes: py-3.5 from global;
+    composes: text-sm from global;
+    composes: w-full from global;
 }
 
 .addToListButton_selected {
-    display: none;
+    composes: hidden from global;
 }
 
-@media (max-width: 640px) {
-    .details {
-        grid-template: none;
-    }
-
+@media (max-width: 639px) {
     .name,
     .options,
     .price,
@@ -133,8 +145,4 @@
     .quantity {
         grid-area: auto;
     }
-
-    .quantity {
-        justify-items: start;
-    }
 }

package/lib/components/CartPage/ProductListing/productListing.module.css

@@ -1,10 +1,11 @@
 .root {
-    display: grid;
-    grid-gap: 2rem 1rem;
+    composes: gap-x-md from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
 }
 
 .errorText {
-    color: rgb(var(--venia-global-color-error));
-    line-height: var(--venia-global-lineHeight-300);
-    margin-bottom: 1rem;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: text-error from global;
 }

package/lib/components/CartPage/ProductListing/quantity.js

@@ -1,91 +1,7 @@
-import React, { Fragment } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 import { Form } from 'informed';
 import { func, number, string } from 'prop-types';
-import { Minus as MinusIcon, Plus as PlusIcon } from 'react-feather';
-import { useQuantity } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useQuantity';
-
-import { useStyle } from '../../../classify';
-import Icon from '../../Icon';
-import TextInput from '../../TextInput';
-import { Message } from '../../Field';
-import defaultClasses from './quantity.module.css';
-
-export const QuantityFields = props => {
-    const { initialValue, itemId, label, min, onChange, message } = props;
-    const { formatMessage } = useIntl();
-    const classes = useStyle(defaultClasses, props.classes);
-    const iconClasses = { root: classes.icon };
-
-    const talonProps = useQuantity({
-        initialValue,
-        min,
-        onChange
-    });
-
-    const {
-        isDecrementDisabled,
-        isIncrementDisabled,
-        handleBlur,
-        handleDecrement,
-        handleIncrement,
-        maskInput
-    } = talonProps;
-
-    const errorMessage = message ? <Message>{message}</Message> : null;
-
-    return (
-        <Fragment>
-            <div className={classes.root}>
-                <label className={classes.label} htmlFor={itemId}>
-                    {label}
-                </label>
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonDecrement',
-                        defaultMessage: 'Decrease Quantity'
-                    })}
-                    className={classes.button_decrement}
-                    disabled={isDecrementDisabled}
-                    onClick={handleDecrement}
-                    type="button"
-                    data-cy="Quantity-decrementButton"
-                >
-                    <Icon classes={iconClasses} src={MinusIcon} size={22} />
-                </button>
-                <TextInput
-                    aria-label={formatMessage({
-                        id: 'quantity.input',
-                        defaultMessage: 'Item Quantity'
-                    })}
-                    data-cy="QuantityFields-input"
-                    classes={{ input: classes.input }}
-                    field="quantity"
-                    id={itemId}
-                    inputMode="numeric"
-                    mask={maskInput}
-                    min={min}
-                    onBlur={handleBlur}
-                    pattern="[0-9]*"
-                />
-                <button
-                    aria-label={formatMessage({
-                        id: 'quantity.buttonIncrement',
-                        defaultMessage: 'Increase Quantity'
-                    })}
-                    className={classes.button_increment}
-                    disabled={isIncrementDisabled}
-                    onClick={handleIncrement}
-                    type="button"
-                    data-cy="Quantity-incrementButton"
-                >
-                    <Icon classes={iconClasses} src={PlusIcon} size={20} />
-                </button>
-            </div>
-            {errorMessage}
-        </Fragment>
-    );
-};
+import QuantityStepper from '../../QuantityStepper';
 
 const Quantity = props => {
     return (
@@ -94,7 +10,7 @@ const Quantity = props => {
                 quantity: props.initialValue
             }}
         >
-            <QuantityFields {...props} />
+            <QuantityStepper {...props} />
         </Form>
     );
 };
@@ -115,10 +31,10 @@ Quantity.defaultProps = {
     onChange: () => {}
 };
 
-QuantityFields.defaultProps = {
-    min: 0,
-    initialValue: 1,
-    onChange: () => {}
-};
+/**
+ * @deprecated - moved to component directory in 12.4.0
+ * @see QuantityStepper
+ */
+export const QuantityFields = QuantityStepper;
 
 export default Quantity;