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

package/lib/components/SearchBar/suggestedCategories.module.css

@@ -1,10 +1,13 @@
 .root {
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 0.75rem;
-    padding-top: 0.75rem;
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: pt-3 from global;
 }
 
+/* TODO @TW: cannot compose */
 .root:empty {
     display: none;
 }

package/lib/components/SearchBar/suggestedProduct.js

@@ -12,7 +12,15 @@ const IMAGE_WIDTH = 60;
 
 const SuggestedProduct = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { url_key, small_image, name, onNavigate, price, url_suffix } = props;
+    const {
+        url_key,
+        small_image,
+        name,
+        onNavigate,
+        price,
+        price_range,
+        url_suffix
+    } = props;
 
     const handleClick = useCallback(() => {
         if (typeof onNavigate === 'function') {
@@ -25,6 +33,16 @@ const SuggestedProduct = props => {
         url_suffix
     ]);
 
+    // fall back to deprecated field if price range is unavailable
+    const priceProps = {
+        currencyCode:
+            price_range?.maximum_price?.final_price?.currency ||
+            price.regularPrice.amount.currency,
+        value:
+            price_range?.maximum_price?.final_price?.value ||
+            price.regularPrice.amount.value
+    };
+
     return (
         <Link
             className={classes.root}
@@ -37,13 +55,11 @@ const SuggestedProduct = props => {
                 classes={{ image: classes.thumbnail, root: classes.image }}
                 resource={small_image}
                 width={IMAGE_WIDTH}
+                data-cy="SuggestedProduct-image"
             />
             <span className={classes.name}>{name}</span>
             <span data-cy="SuggestedProduct-price" className={classes.price}>
-                <Price
-                    currencyCode={price.regularPrice.amount.currency}
-                    value={price.regularPrice.amount.value}
-                />
+                <Price {...priceProps} />
             </span>
         </Link>
     );
@@ -62,6 +78,14 @@ SuggestedProduct.propTypes = {
             })
         })
     }).isRequired,
+    price_range: shape({
+        maximum_price: shape({
+            final_price: shape({
+                currency: string,
+                value: number
+            })
+        })
+    }),
     classes: shape({
         root: string,
         image: string,

package/lib/components/SearchBar/suggestedProduct.module.css

@@ -1,24 +1,24 @@
 .root {
-    align-items: center;
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: column;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
     grid-template-columns: 60px 1fr;
 }
 
 .image {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
 }
 
 .thumbnail {
-    height: 75px;
-    max-height: 75px;
-    object-fit: contain;
-    object-position: center;
+    composes: h-[75px] from global;
+    composes: max-h-[75px] from global;
+    composes: object-contain from global;
+    composes: object-center from global;
 }
 
 .name {
-    word-break: break-word;
+    composes: break-words from global;
 }

package/lib/components/SearchBar/suggestedProducts.module.css

@@ -1,10 +1,13 @@
 .products {
-    border-top: 1px solid rgb(var(--venia-global-color-border));
-    display: grid;
-    gap: 0.75rem;
-    padding-top: 0.75rem;
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: pt-3 from global;
 }
 
+/* TODO @TW: cannot compose */
 .products:empty {
     display: none;
 }

package/lib/components/SearchBar/suggestions.module.css

@@ -1,6 +1,6 @@
 .heading {
-    color: rgb(var(--venia-global-color-text-alt));
-    font-size: 0.875rem;
-    padding-top: 0.75rem;
-    text-transform: uppercase;
+    composes: pt-3 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: uppercase from global;
 }

package/lib/components/SearchPage/searchPage.module.css

@@ -1,75 +1,68 @@
-:root {
-    --search-sidebar-width: 325px;
-}
-
 .root {
-    padding: 1rem;
+    composes: p-xs from global;
+
+    composes: lg_flex from global;
+    composes: lg_flex-nowrap from global;
 }
 
 .noResult {
-    display: flex;
+    composes: flex from global;
 }
 
 .headerButtons {
-    display: flex;
     flex-basis: 100%;
-    justify-content: center;
-    margin: 1rem 0;
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: mx-0 from global;
+    composes: my-xs from global;
+
+    composes: lg_justify-end from global;
 }
 
 .heading {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-center from global;
 
-.searchInfo {
-    line-height: var(--venia-global-typography-heading-lineHeight);
-    margin: 2.5rem 0 1rem;
-    max-width: 75vw;
+    composes: lg_flex-nowrap from global;
+    composes: lg_items-center from global;
+    composes: lg_justify-between from global;
 }
 
-.totalPages {
-    margin-left: 0.5rem;
+.searchContent {
+    composes: lg_flex-grow from global;
 }
 
-.headingHighlight {
-    font-weight: var(--venia-global-fontWeight-bold);
-}
+.searchInfo {
+    composes: leading-tight from global;
+    composes: max-w-[75vw] from global;
+    composes: mb-xs from global;
+    composes: ml-0 from global;
+    composes: mr-0 from global;
+    composes: mt-10 from global;
 
-.sidebar {
-    display: none;
+    composes: lg_m-0 from global;
 }
 
-@media (min-width: 1024px) {
-    .root {
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
-    .heading {
-        justify-content: space-between;
-        flex-wrap: nowrap;
-        align-items: center;
-    }
-
+@media (min-width: 960px) {
     .searchInfo {
-        margin: 0;
         flex-basis: 100%;
     }
+}
 
-    .headerButtons {
-        justify-content: flex-end;
-    }
+.totalPages {
+    composes: ml-2xs from global;
+}
 
-    .sidebar {
-        display: flex;
-        align-self: flex-start;
-        width: var(--search-sidebar-width);
-        padding-top: 4rem;
-    }
+.headingHighlight {
+    composes: font-bold from global;
+}
 
-    .searchContent {
-        flex-grow: 1;
-    }
+.sidebar {
+    composes: hidden from global;
+
+    composes: lg_flex from global;
+    composes: lg_self-start from global;
+    composes: lg_pt-16 from global;
+    composes: lg_w-filterSidebarWidth from global;
 }

package/lib/components/Select/select.module.css

@@ -1,23 +1,24 @@
 .wrapper {
-    display: inline-grid;
-    grid-auto-flow: column;
+    composes: grid-flow-col from global;
+    composes: h-[2.25rem] from global;
+    composes: inline-grid from global;
     grid-template-areas: 'input icon';
     grid-template-columns: auto 2.25rem;
-    height: 2.25rem;
 }
 
 .input,
 .input_error {
     composes: input from '../Field/field.module.css';
     grid-area: input-start / input-start / input-end / icon-end;
-    padding-right: calc(2.25rem - 1px);
+    padding-right: calc(2.25rem - 1px); /* TODO @TW: review */
+
+    composes: disabled_text-subtle from global;
 }
 
-.input:disabled {
-    pointer-events: none;
-    color: rgb(var(--venia-global-color-gray-darker));
+.input {
+    composes: disabled_pointer-events-none from global;
 }
 
 .input_error {
-    border-color: rgb(var(--venia-global-color-red-400));
+    composes: border-error from global;
 }

package/lib/components/Shimmer/shimmer.module.css

@@ -1,26 +1,30 @@
 .root {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    background: rgb(var(--venia-global-color-gray));
-    pointer-events: none;
+    composes: bg-gray-100 from global;
+    composes: inline-block from global;
+    composes: overflow-hidden from global;
+    composes: pointer-events-none from global;
+    composes: relative from global;
 }
 
+/* TODO @TW: cannot compose */
 .root::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
-    width: var(--venia-global-maxWidth);
+    width: var(
+        --venia-global-maxWidth
+    ); /* TODO @TW: review. this should use TW theme value "maxWidth.site" */
     height: 100%;
-    background: linear-gradient(
-            to right,
-            rgb(var(--venia-global-color-gray-50) / 0%) 0%,
-            rgb(var(--venia-global-color-gray-50)) 40%,
-            rgb(var(--venia-global-color-gray-50) / 0%) 80%,
-            rgb(var(--venia-global-color-gray-50) / 0%) 100%
-        )
-        no-repeat;
+    background-image: linear-gradient(
+        to right,
+        rgb(var(--venia-global-color-gray-50) / 0%) 0%,
+        rgb(var(--venia-global-color-gray-50)) 40%,
+        rgb(var(--venia-global-color-gray-50) / 0%) 80%,
+        rgb(var(--venia-global-color-gray-50) / 0%) 100%
+    );
+    /* composes: bg-no-repeat from global; */
+    background-repeat: none;
     background-size: var(--venia-global-maxWidth) 100%;
     -webkit-animation-name: shimmerAnimation;
     -webkit-animation-duration: 1s;
@@ -32,34 +36,44 @@
 
 .root_rectangle {
     composes: root;
-    min-height: var(--venia-typography-body-M-fontSize);
+
+    min-height: 1rem;
 }
 
 .root_button {
     composes: root from '../Button/button.module.css';
     composes: root;
-    border: none;
+
+    composes: border-0 from global;
 }
 
 .root_checkbox {
     composes: input_shimmer from '../Checkbox/checkbox.module.css';
     composes: root;
+
+    composes: border-0 from global;
 }
 
 .root_radio {
     composes: input_shimmer from '../RadioGroup/radio.module.css';
     composes: root;
-    border: none;
+
+    composes: border-0 from global;
 }
 
 .root_textArea {
     composes: input_shimmer from '../TextArea/textArea.module.css';
     composes: root;
+
+    min-height: 6.75rem;
+    composes: border-0 from global;
 }
 
 .root_textInput {
     composes: input_shimmer from '../TextInput/textInput.module.css';
     composes: root;
+
+    composes: border-0 from global;
 }
 
 @-webkit-keyframes shimmerAnimation {

package/lib/components/SignIn/signIn.module.css

@@ -1,63 +1,70 @@
 .root {
-    display: grid;
-    gap: 1.5rem;
-    justify-items: stretch;
-    padding: 1rem 1.5rem;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
 }
 
 .forgotPassword {
-    display: block;
-    text-decoration: underline;
-    color: rgb(var(--venia-global-color-error));
-    font-size: 0.8rem;
+    composes: block from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+    composes: underline from global;
 }
 
 .form {
-    display: grid;
-    row-gap: 0.9375rem;
+    composes: grid from global;
+    composes: gap-y-xs from global;
 }
 
 .modal {
+    composes: absolute from global;
+    composes: bg-subtle from global;
+    composes: bottom-0 from global;
+    composes: h-full from global;
+    composes: text-center from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
-    height: 100%;
-    width: 100%;
-    background-color: rgb(var(--venia-global-color-gray));
-    text-align: center;
-    position: absolute;
-    bottom: 0;
 }
 
 .modal_active {
-    visibility: visible;
     composes: modal;
-    opacity: 0.9;
+    composes: opacity-90 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
 }
 
 .buttonsContainer {
-    display: grid;
-    gap: 1.5rem;
-    grid-auto-flow: row;
-    justify-content: center;
-    margin-top: 1rem;
-    width: 100%;
+    composes: gap-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: w-full from global;
 }
 
 .forgotPasswordButtonContainer {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    justify-self: start;
-    text-align: center;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: justify-self-start from global;
+    composes: text-center from global;
 }
 
 .forgotPasswordButton {
     composes: root from '../LinkButton/linkButton.module.css';
 
-    padding: 0;
+    composes: p-0 from global;
 }
 
 .title {
-    font-size: var(--venia-global-fontSize-400);
-    padding-top: 0.5rem;
-    text-transform: capitalize;
+    composes: capitalize from global;
+    composes: pt-2xs from global;
+    composes: text-lg from global;
 }

package/lib/components/SignInPage/signInPage.module.css

@@ -1,20 +1,21 @@
 .root {
-    display: grid;
-    justify-content: center;
-    padding: 2.5rem 0;
-    text-align: center;
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: justify-center from global;
+    composes: px-0 from global;
+    composes: py-lg from global;
+    composes: text-center from global;
     grid-template-columns: minmax(auto, 512px);
-    row-gap: 2rem;
 }
 
 .header {
-    font-family: var(--venia-global-fontFamily-serif);
+    composes: font-serif from global;
 }
 
-@media (min-width: 961px) {
-    .contentContainer {
-        padding-bottom: 2rem;
-        border: 2px solid rgb(var(--venia-global-color-border));
-        border-radius: 0.375rem;
-    }
+.contentContainer {
+    composes: lg_border-2 from global;
+    composes: lg_border-solid from global;
+    composes: lg_border-subtle from global;
+    composes: lg_pb-md from global;
+    composes: lg_rounded-md from global;
 }

package/lib/components/SortedByContainer/sortedByContainer.module.css

@@ -1,16 +1,12 @@
 .root {
-    color: rgb(var(--venia-global-color-gray-700));
-    text-align: center;
-    font-size: var(--venia-global-fontSize-100);
-    padding-bottom: 1rem;
-}
+    composes: pb-xs from global;
+    composes: text-center from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
 
-.sortText {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: lg_hidden from global;
 }
 
-@media (min-width: 1024px) {
-    .root {
-        display: none;
-    }
+.sortText {
+    composes: font-semibold from global;
 }

package/lib/components/StockStatusMessage/stockStatusMessage.module.css

@@ -1,8 +1,12 @@
 .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;
+    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: 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/TextArea/textArea.module.css

@@ -1,16 +1,22 @@
 .input {
     composes: input from '../Field/field.module.css';
-    height: auto;
-    max-width: 100%;
-    min-width: 100%;
-    padding: 12px 15px;
+
+    composes: h-auto from global;
+    composes: max-w-full from global;
+    composes: min-w-full from global;
+    composes: px-xs from global;
+    composes: py-3 from global;
 }
 
 .input_shimmer {
-    composes: input_base from '../Field/field.module.css';
-    height: auto;
-    min-height: 6.75rem;
-    max-width: 100%;
-    min-width: 100%;
-    padding: 12px 15px;
+    composes: h-auto from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: min-h-[6.75rem] from global;
+    composes: min-w-full from global;
+    composes: px-[15px] from global;
+    composes: py-[12px] from global;
+    composes: rounded-md from global;
+    composes: w-full from global;
+    font-size: 1rem;
 }

package/lib/components/TextInput/textInput.module.css

@@ -1,12 +1,21 @@
 .input {
     composes: input from '../Field/field.module.css';
+
+    composes: disabled_text-subtle from global;
 }
 
 .input_error {
     composes: input from '../Field/field.module.css';
-    border-color: rgb(var(--venia-global-color-red-400));
+
+    composes: border-error from global;
 }
 
 .input_shimmer {
-    composes: input_base from '../Field/field.module.css';
+    composes: h-[2.5rem] from global;
+    composes: m-0 from global;
+    composes: max-w-full from global;
+    composes: rounded-md from global;
+    composes: w-full from global;
+    font-size: 1rem;
+    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
 }