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

package/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -87,7 +87,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
               "name": "Test Product 1",
               "price_range": Object {
                 "maximum_price": Object {
-                  "regular_price": Object {
+                  "final_price": Object {
                     "currency": "USD",
                     "value": 100,
                   },
@@ -183,7 +183,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
               "name": "Test Product 2",
               "price_range": Object {
                 "maximum_price": Object {
-                  "regular_price": Object {
+                  "final_price": Object {
                     "currency": "USD",
                     "value": 100,
                   },

package/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

@@ -150,7 +150,7 @@ exports[`renders correctly with valid item data 1`] = `
           "name": "Test Product",
           "price_range": Object {
             "maximum_price": Object {
-              "regular_price": Object {
+              "final_price": Object {
                 "currency": "USD",
                 "value": 21,
               },

package/lib/components/Gallery/__tests__/gallery.spec.js

@@ -39,7 +39,7 @@ const items = [
         __typename: 'SimpleProduct',
         price_range: {
             maximum_price: {
-                regular_price: {
+                final_price: {
                     value: 100,
                     currency: 'USD'
                 }
@@ -59,7 +59,7 @@ const items = [
         __typename: 'SimpleProduct',
         price_range: {
             maximum_price: {
-                regular_price: {
+                final_price: {
                     value: 100,
                     currency: 'USD'
                 }

package/lib/components/Gallery/__tests__/item.spec.js

@@ -49,7 +49,7 @@ const validItem = {
     sku: 'sku-123',
     price_range: {
         maximum_price: {
-            regular_price: {
+            final_price: {
                 value: 21,
                 currency: 'USD'
             }

package/lib/components/Gallery/addToCartButton.module.css

@@ -1,36 +1,26 @@
 .root {
     composes: root_highPriority from '../Button/button.module.css';
-    margin-left: -0.5rem;
+
+    composes: min-w-[6.125rem] from global;
+    composes: -ml-2xs from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: self-center from global;
     min-height: 2rem;
-    padding: 0 0.5rem;
-    align-self: center;
-}
 
-.icon {
-    display: none;
-    stroke: #fff;
+    composes: sm_min-w-[8rem] from global;
+    /* composes: md_min-w-0 from global; */
 }
 
-.text {
-    display: inline;
-}
+.icon {
+    composes: inline from global;
+    composes: stroke-white from global;
 
-@media (max-width: 640px) {
-    .root {
-        min-width: 8rem;
-    }
+    composes: xs_hidden from global;
 }
 
-@media (max-width: 480px) {
-    .root {
-        min-width: 6.125rem;
-    }
-
-    .icon {
-        display: inline;
-    }
+.text {
+    composes: hidden from global;
 
-    .text {
-        display: none;
-    }
+    composes: xs_inline from global;
 }

package/lib/components/Gallery/gallery.module.css

@@ -1,21 +1,21 @@
 .root {
-    display: grid;
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-none from global;
     grid-template-areas:
         'actions'
         'items';
-    grid-template-columns: 1fr;
-    line-height: 1;
 }
 
 .items {
-    display: grid;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: mb-3 from global;
     grid-area: items;
-    grid-gap: 1rem;
     grid-template-columns: repeat(3, 1fr);
-    margin-bottom: 10px;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 639px) {
     .items {
         grid-template-columns: repeat(2, 1fr);
     }

package/lib/components/Gallery/item.js

@@ -112,9 +112,9 @@ const GalleryItem = props => {
             </Link>
             <div data-cy="GalleryItem-price" className={classes.price}>
                 <Price
-                    value={price_range.maximum_price.regular_price.value}
+                    value={price_range.maximum_price.final_price.value}
                     currencyCode={
-                        price_range.maximum_price.regular_price.currency
+                        price_range.maximum_price.final_price.currency
                     }
                 />
             </div>
@@ -152,7 +152,7 @@ GalleryItem.propTypes = {
         sku: string.isRequired,
         price_range: shape({
             maximum_price: shape({
-                regular_price: shape({
+                final_price: shape({
                     value: number.isRequired,
                     currency: string.isRequired
                 }).isRequired
@@ -161,7 +161,7 @@ GalleryItem.propTypes = {
     }),
     storeConfig: shape({
         magento_wishlist_general_is_enabled: string.isRequired,
-        product_url_suffix: string.isRequired
+        product_url_suffix: string
     })
 };
 

package/lib/components/Gallery/item.module.css

@@ -1,11 +1,11 @@
 .root {
-    align-content: start;
-    display: grid;
-    row-gap: 0.5rem;
+    composes: content-start from global;
+    composes: grid from global;
+    composes: gap-y-2xs from global;
 }
 
 .images {
-    display: grid;
+    composes: grid from global;
     grid-template-areas: 'main';
     position: relative;
 }
@@ -15,59 +15,63 @@
 }
 
 .image {
-    display: block;
-    height: 100%;
-    object-fit: contain;
+    composes: block from global;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: w-full from global;
     transition: opacity 512ms ease-out;
-    width: 100%;
 }
 
 .imageLoaded {
     composes: loaded from '../Image/image.module.css';
-    opacity: 1;
+
+    composes: opacity-100 from global;
 }
 
 .imageNotLoaded {
     composes: notLoaded from '../Image/image.module.css';
-    opacity: 0;
+
+    composes: opacity-0 from global;
 }
 
 .imagePlaceholder {
     composes: image;
-    background-color: rgb(var(--venia-global-color-gray));
+
+    composes: bg-subtle from global;
 }
 
 .actionsContainer {
-    column-gap: 1rem;
-    display: grid;
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: pl-2xs from global;
     grid-template-columns: auto auto;
-    padding-left: 0.5rem;
 }
 
+/* TODO @TW: cannot compose */
 .actionsContainer:empty {
     display: none;
 }
 
 .name {
-    font-weight: var(--venia-global-fontWeight-semibold);
+    composes: font-semibold from global;
 }
 
 .name,
 .price {
-    font-size: var(--venia-typography-detail-XL-fontSize);
+    composes: text-colorDefault from global;
     min-height: 1rem;
 }
 
 .unavailableContainer {
-    align-items: center;
-    background-color: rgb(var(--venia-global-color-gray));
-    color: rgb(var(--venia-global-color-gray-700));
-    column-gap: 0.5rem;
-    display: grid;
-    font-style: italic;
-    grid-auto-flow: column;
-    justify-content: start;
-    padding: 0.75rem;
-    width: 100%;
-    font-size: var(--venia-global-fontSize-100);
+    composes: bg-subtle from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: italic from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: p-3 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
 }

package/lib/components/Header/accountTrigger.module.css

@@ -1,26 +1,21 @@
 .root {
-    align-items: center;
-    display: grid;
-    /* The full height of the site header minus (box shadow height * 2). */
-    height: calc(5rem - 8px);
+    composes: hidden from global;
+    composes: items-center from global;
+    composes: h-lg from global;
+
+    composes: sm_grid from global;
 }
 
 .root_open {
     composes: root;
 
-    box-shadow: 0 4px rgb(var(--venia-brand-color-1-700));
+    composes: shadow-headerTrigger from global;
 }
 
 .trigger {
     composes: root from '../clickable.module.css';
 
-    height: 3rem;
-    min-width: 6rem;
-    z-index: 1;
-}
-
-@media (max-width: 640px) {
-    .root {
-        display: none;
-    }
+    composes: h-[3rem] from global;
+    composes: min-w-[6rem] from global;
+    composes: z-foreground from global;
 }

package/lib/components/Header/cartTrigger.module.css

@@ -1,55 +1,48 @@
 .counter {
-    top: 0.375rem;
-    position: absolute;
-    left: 1.5rem;
-    font-weight: 600;
-    box-sizing: border-box;
-    padding: 0 0.25rem;
-    background-color: rgb(var(--venia-brand-color-1-700));
-    border-radius: 100px;
-    color: rgb(var(--venia-global-color-background));
-    line-height: 1.25rem;
-    min-width: 1.25rem;
-    font-size: 0.8125rem;
+    composes: absolute from global;
+    composes: bg-brand-dark from global;
+    composes: font-semibold from global;
+    composes: leading-tight from global;
+    composes: left-sm from global;
+    composes: min-w-[1.25rem] from global;
+    composes: px-1 from global;
+    composes: py-0 from global;
+    composes: rounded-full from global;
+    composes: text-sm from global;
+    composes: text-white from global;
+    composes: top-1.5 from global;
 }
 
 .trigger {
     composes: root from '../clickable.module.css';
-    align-content: center;
-    display: flex;
-    height: 3rem;
-    justify-content: center;
-    min-width: 3rem;
-    position: relative;
-    z-index: 1;
+
+    composes: content-center from global;
+    composes: flex from global;
+    composes: h-[3rem] from global;
+    composes: justify-center from global;
+    composes: min-w-[3rem] from global;
+    composes: relative from global;
+    composes: z-foreground from global;
 }
 
 .triggerContainer {
-    align-items: center;
-    display: grid;
-    /* The full height of the site header minus (box shadow height * 2). */
-    height: calc(5rem - 8px);
+    composes: hidden from global;
+    composes: items-center from global;
+    composes: h-lg from global;
+
+    composes: lg_grid from global;
 }
 
 .triggerContainer_open {
     composes: triggerContainer;
-    box-shadow: 0 4px rgb(var(--venia-brand-color-1-700));
+
+    composes: shadow-headerTrigger from global;
 }
 
 .link {
     composes: trigger;
-    display: none;
-}
 
-/*
- * Mobile-specific styles.
- */
-@media (max-width: 960px) {
-    .triggerContainer {
-        display: none;
-    }
-
-    .link {
-        display: flex;
-    }
+    composes: flex from global;
+
+    composes: lg_hidden from global;
 }

package/lib/components/Header/currencySwitcher.module.css

@@ -1,98 +1,115 @@
 .root {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
     composes: p-0 from global;
-    align-items: center;
-    display: grid;
-    justify-items: end;
-    margin: 0 auto;
-    max-width: var(--venia-global-maxWidth);
-    position: relative;
+    composes: relative from global;
+
+    composes: sm_justify-items-end from global;
 }
 
 .trigger {
-    align-items: center;
-    column-gap: 0.5rem;
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: auto 1fr;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoFirst from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
 }
 
 .menu {
-    background-color: rgb(var(--venia-global-color-gray-50));
-    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);
-    max-height: 24rem;
-    opacity: 0;
-    overflow: auto;
-    position: absolute;
-    right: 1rem;
-    top: 2.5rem;
-    transform: translate3d(0, -8px, 0);
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: bottom-md from global;
+    composes: left-xs from global;
+    composes: max-h-[24rem] from global;
+    composes: opacity-0 from global;
+    composes: overflow-auto from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto from global;
+    composes: z-menu from global;
+    transform: translate3d(0, 8px, 0);
     transition-duration: 192ms;
     transition-timing-function: var(--venia-global-anim-out);
     transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
     visibility: hidden;
-    z-index: 2;
+
+    composes: sm_bottom-auto from global;
+    composes: sm_left-auto from global;
+    composes: sm_right-xs from global;
+    composes: sm_top-md from global;
+}
+
+@media (min-width: 640px) {
+    .menu {
+        transform: translate3d(0, -8px, 0);
+    }
 }
 
 .menu_open {
     composes: menu;
-    opacity: 1;
-    padding: 0;
+
+    composes: opacity-100 from global;
+    composes: p-0 from global;
     transform: translate3d(0, 4px, 0);
     transition-duration: 224ms;
     transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
     visibility: visible;
 }
 
-.menuItem:hover {
-    background-color: rgb(var(--venia-global-color-gray));
-}
+.menuItem {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+
+    composes: hover_bg-subtle from global;
 
-.menuItem:not(:last-child) {
-    border-bottom: 1px solid rgb(var(--venia-global-color-gray-dark));
+    composes: last_border-none from global;
 }
 
 .symbol {
-    margin-right: 0.5rem;
+    composes: mr-2xs from global;
 }
 
+/* TODO @TW: cannot compose */
 .root:last-child:not(:only-child) {
     padding-left: 0;
     grid-auto-flow: column;
 }
 
-.root:last-child:not(:only-child):before {
-    border-left: 1px solid rgb(var(--venia-global-color-gray-darker));
+/* TODO @TW: cannot compose */
+.root:last-child:not(:only-child)::before {
+    /* composes: border from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
     border-left: 1px solid rgb(var(--venia-global-color-border));
     content: '';
     height: 1em;
     width: 1rem;
 }
 
-/*
- * Mobile-specific styles.
- */
-@media (max-width: 640px) {
-    .root {
-        justify-items: start;
-    }
-
-    .menu {
-        bottom: 2.5rem;
-        left: 1rem;
-        right: auto;
-        top: auto;
-        transform: translate3d(0, 8px, 0);
-    }
-
+@media (max-width: 639px) {
     .root:only-child {
         grid-column: 2;
     }
 
+    /* TODO @TW: cannot compose */
     .root:last-child .menu {
-        left: auto;
         right: 1rem;
+        left: auto;
     }
 
     .menu_open {

package/lib/components/Header/header.js

@@ -36,7 +36,10 @@ const Header = props => {
     const searchBarFallback = (
         <div className={classes.searchFallback} ref={searchRef}>
             <div className={classes.input}>
-                <div className={classes.loader} />
+                <div className={classes.loader}>
+                    <div className={classes.loaderBefore} />
+                    <div className={classes.loaderAfter} />
+                </div>
             </div>
         </div>
     );
@@ -68,6 +71,7 @@ const Header = props => {
                     <Link
                         to={resourceUrl('/')}
                         className={classes.logoContainer}
+                        data-cy="Header-logoContainer"
                     >
                         <Logo classes={{ logo: classes.logo }} />
                     </Link>