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

package/lib/components/ProductFullDetail/__tests__/productFullDetail.spec.js

@@ -22,13 +22,11 @@ jest.mock(
     }
 );
 
+jest.mock('../../QuantityStepper', () => () => 'QuantityStepper');
 jest.mock('../../Breadcrumbs', () => 'Breadcrumbs');
 jest.mock('../../FormError', () => 'FormError');
 jest.mock('../../ProductImageCarousel', () => 'ProductImageCarousel');
 jest.mock('../../ProductOptions', () => () => 'ProductOptions');
-jest.mock('../../CartPage/ProductListing/quantity', () => ({
-    QuantityFields: () => 'QuantityFields'
-}));
 jest.mock('../../RichContent/richContent', () => 'RichContent');
 jest.mock('../CustomAttributes', () => 'CustomAttributes');
 

package/lib/components/ProductFullDetail/productFullDetail.js

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense } from 'react';
+import React, { useMemo, Fragment, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { arrayOf, bool, number, shape, string } from 'prop-types';
 import { Form } from 'informed';
@@ -13,7 +13,7 @@ import Breadcrumbs from '../Breadcrumbs';
 import Button from '../Button';
 import Carousel from '../ProductImageCarousel';
 import FormError from '../FormError';
-import { QuantityFields } from '../CartPage/ProductListing/quantity';
+import QuantityStepper from '../QuantityStepper';
 import RichContent from '../RichContent/richContent';
 import { ProductOptionsShimmer } from '../ProductOptions';
 import CustomAttributes from './CustomAttributes';
@@ -54,6 +54,7 @@ const ProductFullDetail = props => {
         customAttributes,
         wishlistButtonProps
     } = talonProps;
+
     const { formatMessage } = useIntl();
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -128,6 +129,44 @@ const ProductFullDetail = props => {
         }
     }
 
+    const customAttributesDetails = useMemo(() => {
+        const list = [];
+        const pagebuilder = [];
+        const skuAttribute = {
+            attribute_metadata: {
+                uid: 'attribute_sku',
+                used_in_components: ['PRODUCT_DETAILS_PAGE'],
+                ui_input: {
+                    ui_input_type: 'TEXT'
+                },
+                label: formatMessage({
+                    id: 'global.sku',
+                    defaultMessage: 'SKU'
+                })
+            },
+            entered_attribute_value: {
+                value: productDetails.sku
+            }
+        };
+        if (Array.isArray(customAttributes)) {
+            customAttributes.forEach(customAttribute => {
+                if (
+                    customAttribute.attribute_metadata.ui_input
+                        .ui_input_type === 'PAGEBUILDER'
+                ) {
+                    pagebuilder.push(customAttribute);
+                } else {
+                    list.push(customAttribute);
+                }
+            });
+        }
+        list.unshift(skuAttribute);
+        return {
+            list: list,
+            pagebuilder: pagebuilder
+        };
+    }, [customAttributes, productDetails.sku, formatMessage]);
+
     const cartCallToActionText = !isOutOfStock ? (
         <FormattedMessage
             id="productFullDetail.addItemToCart"
@@ -163,6 +202,20 @@ const ProductFullDetail = props => {
         </div>
     );
 
+    const shortDescription = productDetails.shortDescription ? (
+        <RichContent html={productDetails.shortDescription.html} />
+    ) : null;
+
+    const pageBuilderAttributes = customAttributesDetails.pagebuilder.length ? (
+        <section className={classes.detailsPageBuilder}>
+            <CustomAttributes
+                classes={{ list: classes.detailsPageBuilderList }}
+                customAttributes={customAttributesDetails.pagebuilder}
+                showLabels={false}
+            />
+        </section>
+    ) : null;
+
     return (
         <Fragment>
             {breadcrumbs}
@@ -187,6 +240,7 @@ const ProductFullDetail = props => {
                             value={productDetails.price.value}
                         />
                     </p>
+                    {shortDescription}
                 </section>
                 <section className={classes.imageCarousel}>
                     <Carousel images={mediaGalleryEntries} />
@@ -208,7 +262,7 @@ const ProductFullDetail = props => {
                             defaultMessage={'Quantity'}
                         />
                     </span>
-                    <QuantityFields
+                    <QuantityStepper
                         classes={{ root: classes.quantityRoot }}
                         min={1}
                         message={errors.get('quantity')}
@@ -226,22 +280,27 @@ const ProductFullDetail = props => {
                         className={classes.descriptionTitle}
                     >
                         <FormattedMessage
-                            id={'productFullDetail.productDescription'}
-                            defaultMessage={'Product Description'}
+                            id={'productFullDetail.description'}
+                            defaultMessage={'Description'}
                         />
                     </span>
                     <RichContent html={productDetails.description} />
                 </section>
                 <section className={classes.details}>
-                    <span className={classes.detailsTitle}>
+                    <span
+                        data-cy="ProductFullDetail-detailsTitle"
+                        className={classes.detailsTitle}
+                    >
                         <FormattedMessage
-                            id={'global.sku'}
-                            defaultMessage={'SKU'}
+                            id={'productFullDetail.details'}
+                            defaultMessage={'Details'}
                         />
                     </span>
-                    <strong>{productDetails.sku}</strong>
-                    <CustomAttributes customAttributes={customAttributes} />
+                    <CustomAttributes
+                        customAttributes={customAttributesDetails.list}
+                    />
                 </section>
+                {pageBuilderAttributes}
             </Form>
         </Fragment>
     );
@@ -253,6 +312,8 @@ ProductFullDetail.propTypes = {
         description: string,
         descriptionTitle: string,
         details: string,
+        detailsPageBuilder: string,
+        detailsPageBuilderList: string,
         detailsTitle: string,
         imageCarousel: string,
         options: string,
@@ -260,6 +321,7 @@ ProductFullDetail.propTypes = {
         productPrice: string,
         quantity: string,
         quantityTitle: string,
+        quantityRoot: string,
         root: string,
         title: string,
         unavailableContainer: string
@@ -286,7 +348,11 @@ ProductFullDetail.propTypes = {
                 file: string.isRequired
             })
         ),
-        description: string
+        description: string,
+        short_description: shape({
+            html: string,
+            __typename: string
+        })
     }).isRequired
 };
 

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

@@ -1,12 +1,16 @@
 .root {
-    padding: 1rem 0;
+    composes: px-0 from global;
+    composes: py-xs from global;
+
+    composes: lg_grid from global;
+    composes: lg_grid-flow-row from global;
+    composes: lg_items-start from global;
+    composes: lg_px-xs from global;
+    composes: lg_py-md from global;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 960px) {
     .root {
-        align-items: start;
-        display: grid;
-        grid-auto-flow: row;
         grid-template-areas:
             'images title'
             'images errors'
@@ -14,75 +18,69 @@
             'images quantity'
             'images cart'
             'images .';
-        grid-template-columns: 1.5625fr 1fr;
+        grid-template-columns: minmax(0, 1.5625fr) minmax(0, 1fr);
         grid-template-rows: repeat(5, min-content) 1fr [fold];
-        padding: 2.5rem 1rem;
     }
 }
 
 .section {
-    border-color: rgb(var(--venia-global-color-border));
-    border-style: solid;
-    border-width: 0 0 1px;
-    margin: 0 1.5rem;
-    padding: 1.5rem 0;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: border-t-0 from global;
+    composes: border-r-0 from global;
+    composes: border-b from global;
+    composes: border-l-0 from global;
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: px-0 from global;
+    composes: py-sm from global;
 }
 
 .sectionTitle {
-    align-items: center;
-    display: flex;
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5;
-    margin-bottom: 1.5rem;
+    composes: flex from global;
+    composes: font-semibold from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: text-colorDefault from global;
 }
 
 .title {
-    align-items: center;
-    display: grid;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
     grid-area: title;
-    grid-gap: 1rem;
     grid-template-columns: 1fr max-content;
-    line-height: 1.5;
-    padding: 1rem 1.5rem;
-}
 
-@media (min-width: 1024px) {
-    .title {
-        padding: 1.5rem;
-    }
+    composes: lg_p-sm from global;
 }
 
 .productName {
-    font-size: 1rem;
-    font-weight: 600;
-}
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
 
-@media (min-width: 1024px) {
-    .productName {
-        font-size: 1.3125rem;
-        font-weight: 400;
-    }
+    composes: lg_font-normal from global;
+    composes: lg_text-xl from global;
 }
 
 .productPrice {
-    display: block;
+    composes: block from global;
 }
 
 .imageCarousel {
     grid-area: images;
     grid-column: 1 / 2;
     grid-row: 1 / fold;
-    margin: 0 auto;
-    max-width: 640px;
-}
+    composes: max-w-[640px] from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
 
-@media (min-width: 1024px) {
-    .imageCarousel {
-        margin: 0;
-        max-width: 800px;
-        padding: 1.5rem 0;
-    }
+    composes: lg_m-0 from global;
+    composes: lg_px-0 from global;
+    composes: lg_py-sm from global;
 }
 
 .options {
@@ -104,34 +102,26 @@
 }
 
 .actions {
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-center from global;
     composes: section;
-    align-items: center;
-    display: grid;
     grid-area: cart;
-    row-gap: 1.5rem;
-    justify-items: center;
-}
 
-@media (min-width: 1024px) {
-    .actions {
-        border-bottom-width: 0;
-    }
+    composes: lg_border-b-0 from global;
 }
 
 .description {
     composes: section;
     grid-column: 1 / span 1;
     grid-row: fold / span 1;
-}
 
-@media (min-width: 1024px) {
-    .description {
-        align-self: stretch;
-        border-top-width: 1px;
-        margin: 0;
-        padding-left: 1.5rem;
-        padding-right: 1.5rem;
-    }
+    composes: lg_border-t from global;
+    composes: lg_m-0 from global;
+    composes: lg_pl-sm from global;
+    composes: lg_pr-sm from global;
+    composes: lg_self-stretch from global;
 }
 
 .descriptionTitle {
@@ -142,6 +132,24 @@
     composes: section;
     grid-column: 2 / span 1;
     grid-row: fold / span 1;
+
+    composes: lg_border-t from global;
+    composes: lg_m-0 from global;
+    composes: lg_pl-sm from global;
+    composes: lg_pr-sm from global;
+    composes: lg_self-stretch from global;
+}
+
+.detailsPageBuilder {
+    composes: my-0 from global;
+    composes: mx-sm from global;
+    composes: px-0 from global;
+    composes: py-sm from global;
+    grid-column: 1 / span 2;
+}
+
+.detailsPageBuilderList {
+    list-style: none;
 }
 
 @media (min-width: 1024px) {
@@ -159,8 +167,8 @@
 }
 
 .related {
+    composes: border-b-0 from global;
     composes: section;
-    border-bottom-width: 0;
     grid-column: 1 / span 2;
 }
 
@@ -169,20 +177,20 @@
 }
 
 .quantityRoot {
-    composes: root from '../CartPage/ProductListing/quantity.module.css';
+    composes: root from '../QuantityStepper/quantityStepper.module.css';
     grid-template-columns: auto 4rem auto;
-    justify-content: start;
+    composes: justify-start from global;
 }
 
 .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%;
+    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-subtle from global;
+    composes: w-full from global;
 }

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

@@ -1,14 +1,23 @@
 .root {
-    display: grid;
+    composes: lg_gap-sm from global;
+    composes: grid from global;
+    composes: grid-cols-auto from global;
+    composes: grid-rows-auto from global;
     grid-template-areas:
         'main'
         'thumbs';
-    grid-template-columns: auto;
-    grid-template-rows: auto;
+}
+
+@media (min-width: 960px) {
+    .root {
+        grid-template-areas: 'thumbs main';
+        /* These values are mirrored in JS for image sizes. Keep them in sync. */
+        grid-template-columns: 17fr 80fr;
+    }
 }
 
 .carouselContainer {
-    display: grid;
+    composes: grid from global;
     grid-area: main;
     grid-template-columns: repeat(3, 1fr);
 }
@@ -18,43 +27,52 @@
 }
 
 .currentImage {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    object-position: center;
+    composes: block from global;
+    composes: h-full from global;
+    composes: object-center from global;
+    composes: object-contain from global;
+    composes: w-full from global;
+
+    composes: lg_object-top from global;
 }
 
 .currentImage_placeholder {
     composes: currentImage;
-    background-color: rgb(var(--venia-global-color-gray));
+
+    composes: bg-subtle from global;
 }
 
 .previousButton,
 .nextButton {
-    display: flex;
-    outline: none;
-    z-index: 1;
+    composes: flex from global;
+    composes: outline-none from global;
+    composes: z-foreground from global;
+
+    composes: lg_hidden from global;
 }
 
 .previousButton {
-    justify-content: flex-start;
+    composes: justify-start from global;
+    composes: ml-sm from global;
     grid-area: 1 / 1 / 2 / 2;
-    margin-left: 1.625rem;
 }
 
 .nextButton {
-    justify-content: flex-end;
+    composes: justify-end from global;
+    composes: mr-sm from global;
     grid-area: 1 / 3 / 2 / 4;
-    margin-right: 1.625rem;
 }
 
 .chevron {
     composes: root from '../Icon/icon.module.css';
-    align-self: center;
-    border: 2px solid transparent;
+
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-transparent from global;
+    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));
@@ -62,38 +80,18 @@
 }
 
 .thumbnailList {
-    align-content: stretch;
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, 1rem);
-    justify-content: center;
-    margin-top: 1rem;
-    z-index: 1;
-}
+    composes: content-stretch from global;
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-cols-carouselThumbnailList from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: mt-xs from global;
+    composes: z-foreground from global;
 
-@media (min-width: 1024px) {
-    .root {
-        grid-gap: 1.5rem;
-        grid-template-areas: 'thumbs main';
-        /* These values are mirrored in JS for image sizes. Keep them in sync. */
-        grid-template-columns: 17fr 80fr;
-    }
-
-    .previousButton,
-    .nextButton {
-        display: none;
-    }
-
-    .thumbnailList {
-        align-content: start;
-        grid-auto-flow: row;
-        grid-gap: 1.5rem;
-        grid-template-columns: 1fr;
-        margin-top: 0;
-    }
-
-    .currentImage {
-        object-position: top center;
-    }
+    composes: lg_content-start from global;
+    composes: lg_gap-sm from global;
+    composes: lg_grid-cols-[1fr] from global;
+    composes: lg_grid-flow-row from global;
+    composes: lg_mt-0 from global;
 }

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

@@ -2,45 +2,48 @@
  * as a thumbnail to the left of the product image in desktop.
  */
 .root {
-    border: 1px solid rgb(var(--venia-global-color-text));
-    border-radius: 50%;
-    height: 0.875rem;
-    width: 0.875rem;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-strong from global;
+    composes: h-[0.875rem] from global;
+    composes: outline-none from global;
+    composes: rounded-full from global;
+    composes: w-[0.875rem] from global;
     box-shadow: 0 0 0 1px #ffffff;
-    outline: none;
+
+    composes: lg_border-0 from global;
+    composes: lg_h-auto from global;
+    composes: lg_rounded-none from global;
+    composes: lg_w-auto from global;
 }
 
 .rootSelected {
     composes: root;
-    background-color: rgb(var(--venia-global-color-text));
+
+    composes: bg-gray-900 from global;
 }
 
 .image {
-    display: none;
+    composes: hidden from global;
+
+    composes: lg_bg-subtle from global;
+    composes: lg_block from global;
+    composes: lg_h-full from global;
+    composes: lg_object-center from global;
+    composes: lg_object-contain from global;
+    composes: lg_rounded-sm from global;
+    composes: lg_w-full from global;
 }
 
 /* For desktop mode where buttons are an image... */
-@media (min-width: 1024px) {
-    .root {
-        border: 0;
-        border-radius: 0;
-        height: auto;
-        width: auto;
-    }
+@media (min-width: 960px) {
     .rootSelected {
         composes: root;
+
         box-shadow: 0 0 10px 0 rgb(var(--venia-global-color-teal));
-        background-color: rgb(var(--venia-global-color-text));
     }
 
     .image {
-        background-color: rgb(var(--venia-global-color-gray));
-        border-radius: 2px;
         box-shadow: 0 0 0 1px white;
-        display: block;
-        height: 100%;
-        object-fit: contain;
-        object-position: center;
-        width: 100%;
     }
 }

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

@@ -1,24 +1,28 @@
 .root {
-    border-bottom: 1px solid rgb(var(--venia-global-color-border));
-    margin: 0 1.5rem;
-    padding: 1.75rem 0;
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: mx-sm from global;
+    composes: my-0 from global;
+    composes: px-0 from global;
+    composes: py-sm from global;
 }
 
 .title {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5;
-    margin-bottom: 1.5rem;
-    display: block;
+    composes: block from global;
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: text-colorDefault from global;
 }
 
 .selection {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-top: 1rem;
-    display: flex;
+    composes: flex from global;
+    composes: leading-normal from global;
+    composes: mt-xs from global;
+    composes: text-colorDefault from global;
 }
 
 .selectionLabel {
-    margin-right: 1rem;
+    composes: mr-xs from global;
 }