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

package/lib/components/ProductOptions/swatch.module.css

@@ -1,14 +1,19 @@
+/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
 .root {
+    --venia-swatch-bg: var(--venia-global-color-gray-100);
+
     composes: root from './tile.module.css';
+
+    composes: border-shaded-10 from global;
+    composes: text-white from global;
+    composes: w-[3rem] from global;
     background: var(--venia-swatch-bg);
-    border-color: rgba(0, 0, 0, 0.1);
-    color: white;
-    width: 3rem;
-    --venia-swatch-bg: var(--venia-global-color-gray);
 }
 
+/* TODO @TW: review. This relies on custom prop to set color from JSX "style" prop. */
 .root_selected {
     composes: root;
+
     background: linear-gradient(-45deg, rgba(0, 0, 0, 0.2), transparent),
         var(--venia-swatch-bg);
 }
@@ -16,6 +21,7 @@
 .root_focused {
     composes: root;
 }
+
 .root_selected_focused {
     composes: root_selected;
 }

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

@@ -1,20 +1,27 @@
 .root {
     composes: root from '../clickable.module.css';
-    border: 1px solid rgb(var(--venia-global-color-text));
-    border-radius: 2px;
-    height: 3rem;
-    min-width: 3rem;
-    padding: 0 0.5rem;
+
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-strong from global;
+    composes: h-[3rem] from global;
+    composes: min-w-[3rem] from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: rounded-sm from global;
 }
 
 .root_selected {
     composes: root;
-    background-color: rgb(var(--venia-global-color-text));
-    color: white;
+
+    composes: bg-gray-900 from global;
+    composes: text-white from global;
 }
+
 .root_focused {
     composes: root;
 }
+
 .root_selected_focused {
     composes: root_selected;
 }

package/lib/components/ProductOptions/tileList.module.css

@@ -1,6 +1,6 @@
 .root {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
     grid-template-columns: repeat(auto-fit, minmax(3rem, max-content));
 }

package/lib/components/ProductQuantity/quantity.js

@@ -7,6 +7,9 @@ import Select from '../Select';
 import mockData from './mockData';
 import defaultClasses from './quantity.module.css';
 
+/**
+ * @deprecated
+ */
 const Quantity = props => {
     const { classes: propClasses, selectLabel, ...restProps } = props;
     const { formatMessage } = useIntl();

package/lib/components/ProductQuantity/quantity.module.css

@@ -1,4 +1,4 @@
 .root {
-    display: flex;
-    flex-direction: column;
+    composes: flex from global;
+    composes: flex-col from global;
 }

package/lib/components/ProductSort/productSort.module.css

@@ -1,76 +1,75 @@
 .root {
-    position: relative;
-    margin-left: 0.5rem;
+    composes: relative from global;
+    composes: ml-2xs from global;
 }
 
 .menu {
-    position: absolute;
-    z-index: 2;
-    top: 110%;
-    right: 0;
-    min-width: 10rem;
-    margin: 0.125rem 0 0;
-    font-size: 1rem;
-    color: black;
-    text-align: left;
-    list-style: none;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid rgb(var(--venia-global-color-gray-dark));
-    border-radius: 0.25rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    composes: absolute from global;
+    composes: bg-clip-padding from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: list-none from global;
+    composes: mb-0 from global;
+    composes: min-w-[10rem] from global;
+    composes: mt-0.5 from global;
+    composes: mx-0 from global;
+    composes: right-0 from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: text-colorDefault from global;
+    composes: text-left from global;
+    composes: top-[110%] from global;
+    composes: z-menu from global;
 }
 
 .menuItem {
-    border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark));
-}
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
 
-.menuItem:last-child {
-    border-bottom: none;
-}
+    composes: hover_bg-subtle from global;
 
-.menuItem:hover {
-    background-color: rgb(var(--venia-global-color-gray));
+    composes: last_border-b-0 from global;
 }
 
 .sortButton {
+    /* TODO @TW: review (C2). This is fragile to extend. */
     composes: root_lowPriority from '../../components/Button/button.module.css';
-    min-width: 6.25rem;
+
+    composes: min-w-[6.26rem] from global;
+
+    composes: lg_border-2 from global;
+    composes: lg_border-gray-500 from global;
+    composes: lg_font-normal from global;
+    composes: lg_normal-case from global;
+    composes: lg_rounded-md from global;
 }
 
 .desktopText {
-    display: none;
+    composes: hidden from global;
+
+    composes: lg_inline-flex from global;
 }
 
 .sortText {
-    line-height: 24px;
-    font-size: var(--venia-global-fontSize-200);
+    composes: leading-normal from global;
+    composes: text-colorDefault from global;
 }
 
 .desktopIconWrapper {
     composes: root from '../Icon/icon.module.css';
+
     transform: translateX(10px);
 }
 
 .desktopIcon {
     composes: icon from '../Icon/icon.module.css';
-    stroke: rgb(var(--venia-global-color-gray-500));
-}
 
-@media (min-width: 1024px) {
-    .sortButton {
-        border-width: 2px;
-        border-color: rgb(var(--venia-global-color-gray-500));
-        border-radius: 6px;
-        font-weight: var(--venia-global-fontWeight-normal);
-        text-transform: none;
-    }
-
-    .mobileText {
-        display: none;
-    }
+    composes: stroke-gray-500 from global;
+}
 
-    .desktopText {
-        display: inline-flex;
-    }
+.mobileText {
+    composes: lg_hidden from global;
 }

package/lib/components/ProductSort/productSort.shimmer.module.css

@@ -5,10 +5,6 @@
 .sortButtonShimmer {
     composes: root_button from '../Shimmer/shimmer.module.css';
     composes: sortButton from './productSort.module.css';
-}
 
-@media (min-width: 1024px) {
-    .sortButtonShimmer {
-        min-width: 12rem;
-    }
+    composes: lg_min-w-[12rem] from global;
 }

package/lib/components/ProductSort/sortItem.module.css

@@ -1,21 +1,22 @@
 .root {
-    align-items: center;
-    display: flex;
-    width: 100%;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
 }
 
 .content {
-    align-items: center;
-    display: grid;
-    gap: 0.75rem;
-    grid-auto-flow: column;
-    grid-template-columns: 1fr;
-    height: 2.5rem;
-    padding: 0 0.75rem;
-    width: 100%;
+    composes: items-center from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: gap-3 from global;
+    composes: h-[2.5rem] from global;
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: w-full from global;
 }
 
 .text {
-    text-align: left;
-    white-space: nowrap;
+    composes: text-left from global;
+    composes: whitespace-nowrap from global;
 }

package/lib/components/QuantityStepper/index.js

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

package/lib/components/QuantityStepper/quantityStepper.js

@@ -0,0 +1,94 @@
+import React, { Fragment } from 'react';
+import { useIntl } from 'react-intl';
+import { Minus as MinusIcon, Plus as PlusIcon } from 'react-feather';
+import { useQuantityStepper } from '@magento/peregrine/lib/talons/QuantityStepper/useQuantityStepper';
+
+import { useStyle } from '../../classify';
+import Icon from '../Icon';
+import TextInput from '../TextInput';
+import { Message } from '../Field';
+import defaultClasses from './quantityStepper.module.css';
+
+const QuantityStepper = 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 = useQuantityStepper({
+        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="QuantityStepper-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>
+    );
+};
+
+QuantityStepper.defaultProps = {
+    min: 0,
+    initialValue: 1,
+    onChange: () => {}
+};
+
+export default QuantityStepper;

package/lib/components/QuantityStepper/quantityStepper.module.css

@@ -0,0 +1,80 @@
+.root {
+    --stroke: var(--venia-global-color-gray-600);
+
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: text-center from global;
+    grid-template-columns: 1fr 4rem 1fr;
+}
+
+.wrap {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+}
+
+/* TODO @TW: cannot compose */
+.label:not(:focus):not(:active) {
+    /* composes: sr-only from global; */
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    white-space: nowrap;
+}
+
+.button {
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-button from global;
+    composes: h-[2rem] from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: rounded-full from global;
+    composes: w-[2rem] from global;
+    stroke: rgb(var(--stroke));
+
+    composes: disabled_cursor-not-allowed from global;
+
+    composes: focus_outline-none from global;
+}
+
+.button:hover {
+    --stroke: rgb(var(--venia-global-color-gray-900));
+    border-color: rgb(var(--stroke));
+}
+
+/* TODO @TW: cannot compose */
+.button:disabled,
+.button:disabled:hover {
+    --stroke: rgb(var(--venia-global-color-gray-400));
+    /* composes: border-subtle from global; */
+    border-color: rgb(var(--venia-global-color-gray-400));
+}
+
+.button_decrement {
+    composes: button;
+}
+
+.button_increment {
+    composes: button;
+}
+
+.icon {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
+    touch-action: manipulation;
+}
+
+.input {
+    composes: input from '../TextInput/textInput.module.css';
+
+    composes: text-center from global;
+}

package/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap

@@ -8,6 +8,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
 >
   <div>
     <label
+      aria-label=""
       htmlFor="foo--1"
     >
       <mock-Radio
@@ -39,6 +40,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--2"
     >
       <mock-Radio
@@ -70,6 +72,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--3"
     >
       <mock-Radio
@@ -101,6 +104,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--4"
     >
       <mock-Radio
@@ -132,6 +136,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--5"
     >
       <mock-Radio
@@ -163,6 +168,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--6"
     >
       <mock-Radio
@@ -194,6 +200,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--7"
     >
       <mock-Radio
@@ -225,6 +232,7 @@ exports[`disables all child radios when disable prop is truthy 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--whatever"
     >
       <mock-Radio
@@ -268,6 +276,7 @@ exports[`renders as expected 1`] = `
 >
   <div>
     <label
+      aria-label=""
       htmlFor="foo--1"
     >
       <mock-Radio
@@ -298,6 +307,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--2"
     >
       <mock-Radio
@@ -328,6 +338,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--3"
     >
       <mock-Radio
@@ -358,6 +369,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--4"
     >
       <mock-Radio
@@ -388,6 +400,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--5"
     >
       <mock-Radio
@@ -418,6 +431,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--6"
     >
       <mock-Radio
@@ -448,6 +462,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--7"
     >
       <mock-Radio
@@ -478,6 +493,7 @@ exports[`renders as expected 1`] = `
       </span>
     </label>
     <label
+      aria-label=""
       htmlFor="foo--whatever"
     >
       <mock-Radio

package/lib/components/RadioGroup/radio.js

@@ -10,11 +10,22 @@ import defaultClasses from './radio.module.css';
 /* eslint-disable jsx-a11y/label-has-for */
 
 const RadioOption = props => {
-    const { classes: propClasses, id, label, value, ...rest } = props;
+    const {
+        ariaLabel,
+        classes: propClasses,
+        id,
+        label,
+        value,
+        ...rest
+    } = props;
     const classes = useStyle(defaultClasses, propClasses);
 
     return (
-        <label className={classes.root} htmlFor={id}>
+        <label
+            className={classes.root}
+            htmlFor={id}
+            aria-label={ariaLabel ? ariaLabel : ''}
+        >
             <InformedRadio
                 {...rest}
                 className={classes.input}
@@ -34,6 +45,7 @@ const RadioOption = props => {
 export default RadioOption;
 
 RadioOption.propTypes = {
+    ariaLabel: string,
     classes: shape({
         icon: string,
         input: string,