@graphcommerce/magento-product 4.0.4 → 4.1.0

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -6,11 +6,13 @@ import {
   MessageSnackbar,
   TextInputNumber,
   iconChevronRight,
-  SvgIcon,
+  IconSvg,
   extendableComponent,
+  AnimatedRow,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Divider, Typography, ButtonProps, Box } from '@mui/material'
+import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
+import { AnimatePresence } from 'framer-motion'
 import PageLink from 'next/link'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -24,7 +26,7 @@ const { classes, selectors } = extendableComponent('ProductAddToCart', [
 
 export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
 
-export default function ProductAddToCart(
+export function ProductAddToCart(
   props: Pick<ProductInterface, 'name'> & {
     variables: Omit<ProductAddToCartMutationVariables, 'cartId'>
     name: string
@@ -38,7 +40,7 @@ export default function ProductAddToCart(
     defaultValues: { ...variables },
   })
 
-  const { handleSubmit, formState, error, muiRegister, required } = form
+  const { handleSubmit, formState, error, muiRegister, required, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -85,8 +87,21 @@ export default function ProductAddToCart(
 
       <ApolloCartErrorAlert error={error} />
 
+      <AnimatePresence initial={false}>
+        {data?.addProductsToCart?.user_errors.map((e) => (
+          <AnimatedRow key={e?.code}>
+            <Alert severity='error'>{e?.message}</Alert>
+          </AnimatedRow>
+        ))}
+      </AnimatePresence>
+
       <MessageSnackbar
-        open={!formState.isSubmitting && formState.isSubmitSuccessful && !error?.message}
+        open={
+          !formState.isSubmitting &&
+          formState.isSubmitSuccessful &&
+          !error?.message &&
+          !data?.addProductsToCart?.user_errors?.length
+        }
         variant='pill'
         action={
           <PageLink href='/cart' passHref>
@@ -94,7 +109,7 @@ export default function ProductAddToCart(
               size='medium'
               variant='pill'
               color='secondary'
-              endIcon={<SvgIcon src={iconChevronRight} />}
+              endIcon={<IconSvg src={iconChevronRight} />}
             >
               <Trans>View shopping cart</Trans>
             </Button>

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,16 +1,17 @@
 import { cloneDeep } from '@graphcommerce/graphql'
-import { iconCancelAlt, SvgIcon } from '@graphcommerce/next-ui'
+import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
 import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { FilterIn } from './FilterEqualType'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
-export type FilterCheckboxTypeProps = Filter & Omit<ChipProps, 'selected'> & { sx?: SxProps<Theme> }
+export type FilterCheckboxTypeProps = Filter &
+  Omit<ChipProps<'button'>, 'selected' | 'onDelete' | 'component'> & { sx?: SxProps<Theme> }
 
-export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
+export function FilterCheckboxType(props: FilterCheckboxTypeProps) {
   const { attribute_code, count, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const currentFilter = params.filters[attribute_code]
@@ -32,7 +33,8 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       link={{ scroll: false, replace: true }}
     >
       <Chip
-        color={isActive ? undefined : 'default'}
+        component='button'
+        color={isActive ? 'primary' : 'default'}
         onDelete={
           isActive
             ? () => {
@@ -45,7 +47,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
               }
             : undefined
         }
-        deleteIcon={isActive ? <SvgIcon src={iconCancelAlt} size='small' /> : undefined}
+        deleteIcon={isActive ? <IconSvg src={iconCancelAlt} size='small' /> : undefined}
         label={label}
         clickable
         {...chipProps}

package/components/ProductListFilters/FilterEqualType.tsx

@@ -11,7 +11,7 @@ import {
 import { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type OwnerState = {
@@ -44,7 +44,7 @@ type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']
 
 type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
 
-export default function FilterEqualType(props: FilterEqualTypeProps) {
+export function FilterEqualType(props: FilterEqualTypeProps) {
   const { attribute_code, count, label, options, __typename, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const replaceRoute = useProductListLinkReplace({ scroll: false })

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,6 +1,7 @@
 import { cloneDeep, FilterRangeTypeInput } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
@@ -12,11 +13,9 @@ type FilterRangeTypeProps = NonNullable<
 > &
   Omit<ChipMenuProps, 'selected'>
 
-const sliderThumbWidth = 28
-
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 
-export default function FilterRangeType(props: FilterRangeTypeProps) {
+export function FilterRangeType(props: FilterRangeTypeProps) {
   const { attribute_code, label, options, ...chipProps } = props
   const { params } = useProductListParamsContext()
   const replaceRoute = useProductListLinkReplace({ scroll: false })
@@ -79,16 +78,16 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
 
     if (from === min && to !== max)
       currentLabel = (
-        <>
-          {'Below '} <Money round value={Number(currentFilter?.to)} />
-        </>
+        <Trans>
+          Below <Money round value={Number(currentFilter?.to)} />
+        </Trans>
       )
 
     if (from !== min && to === max)
       currentLabel = (
-        <>
-          {'Above '} <Money round value={Number(currentFilter?.from)} />
-        </>
+        <Trans>
+          Above <Money round value={Number(currentFilter?.from)} />
+        </Trans>
       )
 
     if (from !== min && to !== max)
@@ -128,6 +127,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
         <Slider
           min={min}
           max={max}
+          size='large'
           aria-labelledby='range-slider'
           value={value}
           onChange={(e, newValue) => {
@@ -142,23 +142,6 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
           }}
           valueLabelDisplay='off'
           className={classes.slider}
-          sx={(theme) => ({
-            maxWidth: `calc(100% - ${sliderThumbWidth}px)`,
-            margin: `${theme.spacings.xxs} auto`,
-            display: 'block',
-            paddingBottom: '32px',
-            '& .MuiSlider-rail': {
-              height: 4,
-              borderRadius: '10px',
-            },
-            '& .MuiSlider-track': {
-              height: 4,
-            },
-            '& .MuiSlider-thumb': {
-              width: sliderThumbWidth,
-              height: sliderThumbWidth,
-            },
-          })}
         />
       </Box>
     </ChipMenu>

package/components/ProductListFilters/ProductListFilters.tsx

@@ -1,15 +1,15 @@
 import { ChipMenuProps } from '@graphcommerce/next-ui'
 import { FilterTypes } from '../ProductListItems/filterTypes'
-import FilterCheckboxType from './FilterCheckboxType'
-import FilterEqualType from './FilterEqualType'
-import FilterRangeType from './FilterRangeType'
+import { FilterCheckboxType } from './FilterCheckboxType'
+import { FilterEqualType } from './FilterEqualType'
+import { FilterRangeType } from './FilterRangeType'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 export type ProductFiltersProps = ProductListFiltersFragment & {
   filterTypes: FilterTypes
 } & Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'>
 
-export default function ProductListFilters(props: ProductFiltersProps) {
+export function ProductListFilters(props: ProductFiltersProps) {
   const { aggregations, filterTypes, ...chipMenuProps } = props
 
   return (
@@ -52,7 +52,7 @@ export default function ProductListFilters(props: ProductFiltersProps) {
               />
             )
         }
-        console.log(
+        console.error(
           'Filter not recognized',
           aggregation.attribute_code,
           filterTypes[aggregation.attribute_code],

package/components/ProductListFiltersContainer/{index.tsx → ProductListFiltersContainer.tsx}

@@ -3,7 +3,7 @@ import {
   iconChevronLeft,
   iconChevronRight,
   responsiveVal,
-  SvgIcon,
+  IconSvg,
   useScrollY,
   extendableComponent,
 } from '@graphcommerce/next-ui'
@@ -32,8 +32,8 @@ const parts = [
 
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
-  const { children } = props
+export function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
+  const { children, sx = [] } = props
   const scrollY = useScrollY()
 
   const [isSticky, setIsSticky] = useState<boolean>(false)
@@ -83,31 +83,33 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
     <MotionDiv
       className={classes.wrapper}
       ref={wrapperRef}
-      sx={(theme) => ({
-        display: 'flex',
-        justifyContent: 'center',
-        height: responsiveVal(44, 52),
-        marginBottom: theme.spacings.sm,
-        position: 'sticky',
-        top: theme.page.vertical,
-        zIndex: 9,
-        margin: '0 auto',
-        maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
-        [theme.breakpoints.down('md')]: {
-          textAlign: 'center',
-          maxWidth: 'unset',
-          margin: `0 calc(${theme.page.horizontal} * -1)`,
-        },
-      })}
+      sx={[
+        (theme) => ({
+          display: 'flex',
+          justifyContent: 'center',
+          marginBottom: theme.spacings.sm,
+          position: 'sticky',
+          top: theme.page.vertical,
+          zIndex: 9,
+          margin: '0 auto',
+          maxWidth: `calc(100% - 96px - ${theme.spacings.sm} * 2)`,
+          [theme.breakpoints.down('md')]: {
+            textAlign: 'center',
+            maxWidth: 'unset',
+            margin: `0 calc(${theme.page.horizontal} * -1)`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <ScrollerButton
           direction='left'
           className={classes.sliderPrev}
           size='small'
-          sx={{ position: 'absolute', top: 2, left: 2, zIndex: 10 }}
+          sx={{ position: 'absolute', top: 4, left: 2, zIndex: 10 }}
         >
-          <SvgIcon src={iconChevronLeft} />
+          <IconSvg src={iconChevronLeft} />
         </ScrollerButton>
         <Box
           className={classes.container}
@@ -121,6 +123,8 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
               background: theme.palette.background.default,
               borderRadius: '99em',
             },
+            display: 'grid',
+            alignItems: 'center',
           })}
         >
           <Scroller
@@ -163,9 +167,9 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
           direction='right'
           className={classes.sliderNext}
           size='small'
-          sx={{ position: 'absolute', top: 2, right: 2, zIndex: 10 }}
+          sx={{ position: 'absolute', top: 4, right: 2, zIndex: 10 }}
         >
-          <SvgIcon src={iconChevronRight} />
+          <IconSvg src={iconChevronRight} />
         </ScrollerButton>
       </ScrollerProvider>
     </MotionDiv>

package/components/ProductListItem/{index.tsx → ProductListItem.tsx}

@@ -7,7 +7,7 @@ import { useRouter } from 'next/router'
 import React, { PropsWithChildren, useMemo } from 'react'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { useProductLink } from '../../hooks/useProductLink'
-import ProductListPrice from '../ProductListPrice'
+import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
 
 const { classes, selectors } = extendableComponent('ProductListItem', [
   'root',
@@ -47,7 +47,7 @@ export type ProductListItemProps = BaseProps & { sx?: SxProps<Theme> }
 
 const StyledImage = styled(Image)({})
 
-export default function ProductListItem(props: ProductListItemProps) {
+export function ProductListItem(props: ProductListItemProps) {
   const {
     subTitle,
     topLeft,

package/components/ProductListItems/ProductListItems.tsx

@@ -0,0 +1,6 @@
+import { ProductListItemsBase, ProductItemsGridProps } from './ProductListItemsBase'
+import { renderer } from './renderer'
+
+export function ProductListItems(props: Omit<ProductItemsGridProps, 'renderers'>) {
+  return <ProductListItemsBase renderers={renderer} {...props} />
+}

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,7 +1,7 @@
 import { RenderType, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { ProductListItemProps } from '../ProductListItem'
+import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 
 export type ProductItemsGridProps = {
@@ -15,7 +15,7 @@ export type ProductItemsGridProps = {
   sx?: BoxProps['sx']
 }
 
-export default function ProductListItemsBase(props: ProductItemsGridProps) {
+export function ProductListItemsBase(props: ProductItemsGridProps) {
   const { items, sx = [], renderers, loadingEager = 0, size = 'normal' } = props
 
   return (

package/components/ProductListItems/ProductListParamsProvider.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, useState, useEffect, useMemo } from 'react'
 import { productListParamsContext } from '../../context/productListParamsContext'
 import { ProductListParams } from './filterTypes'
 
-export default function ProductListParamsProvider({
+export function ProductListParamsProvider({
   children,
   value,
 }: PropsWithChildren<{ value: ProductListParams }>) {

package/components/ProductListItems/filterTypes.tsx

@@ -21,7 +21,7 @@ export type ProductListParams = Exact<{
 
 type AnyFilterType = FilterEqualTypeInput | FilterMatchTypeInput | FilterRangeTypeInput | undefined
 
-export function isFilterTypeEqual(filter: AnyFilterType): filter is FilterEqualTypeInput {
+export function isFilterTypeEqual(filter?: unknown): filter is FilterEqualTypeInput {
   return Boolean(
     filter && ((filter as FilterEqualTypeInput).eq || (filter as FilterEqualTypeInput).in),
   )

package/components/ProductListItems/getFilterTypes.ts

@@ -1,5 +1,4 @@
-import { gql, ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
-import { Exact } from '@graphcommerce/graphql'
+import { gql, ApolloClient, NormalizedCacheObject , Exact } from '@graphcommerce/graphql'
 import { AllFilterInputTypes, FilterTypes } from './filterTypes'
 
 const allFilterInputTypes: AllFilterInputTypes[] = [

package/components/ProductListItems/renderer.tsx

@@ -1,10 +1,10 @@
 import { TypeRenderer } from '@graphcommerce/next-ui'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import ProductListItem from '../ProductListItem'
+import { ProductListItem } from '../ProductListItem/ProductListItem'
 
 export type ProductListItemRenderer = TypeRenderer<ProductListItemFragment>
 
-const renderer: ProductListItemRenderer = {
+export const renderer: ProductListItemRenderer = {
   SimpleProduct: ProductListItem,
   ConfigurableProduct: ProductListItem,
   BundleProduct: ProductListItem,
@@ -12,5 +12,3 @@ const renderer: ProductListItemRenderer = {
   DownloadableProduct: ProductListItem,
   GroupedProduct: ProductListItem,
 }
-
-export default renderer

package/components/ProductListLink/ProductListLink.tsx

@@ -13,41 +13,41 @@ export type ProductListLinkProps = PropsWithChildren<
     }
 >
 
-const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>((props, ref) => {
-  const { setParams } = useProductListParamsContext()
-  const {
-    children,
-    url,
-    sort,
-    currentPage,
-    pageSize,
-    filters,
-    search,
-    noLink,
-    link,
-    ...linkProps
-  } = props
-  const newParams = { filters, sort, url, currentPage, pageSize, search }
+export const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLinkProps>(
+  (props, ref) => {
+    const { setParams } = useProductListParamsContext()
+    const {
+      children,
+      url,
+      sort,
+      currentPage,
+      pageSize,
+      filters,
+      search,
+      noLink,
+      link,
+      ...linkProps
+    } = props
+    const newParams = { filters, sort, url, currentPage, pageSize, search }
 
-  const productListLink = useProductListLink(newParams)
-  const updateParams = () => setParams(newParams)
+    const productListLink = useProductListLink(newParams)
+    const updateParams = () => setParams(newParams)
 
-  // We're setting nofollow if a custom sort, pageSize, filters or search is set.
-  let rel: string | undefined
-  if (Object.keys(sort).length || pageSize || Object.keys(filters).length || search)
-    rel = 'nofollow'
+    // We're setting nofollow if a custom sort, pageSize, filters or search is set.
+    let rel: string | undefined
+    if (Object.keys(sort).length || pageSize || Object.keys(filters).length || search)
+      rel = 'nofollow'
 
-  return (
-    <PageLink href={productListLink} passHref {...link}>
-      {noLink ? (
-        children
-      ) : (
-        <Link rel={rel} {...linkProps} ref={ref} onClick={updateParams} underline='hover'>
-          {children}
-        </Link>
-      )}
-    </PageLink>
-  )
-})
-
-export default ProductListLink
+    return (
+      <PageLink href={productListLink} passHref {...link}>
+        {noLink ? (
+          children
+        ) : (
+          <Link rel={rel} underline='hover' {...linkProps} ref={ref} onClick={updateParams}>
+            {children}
+          </Link>
+        )}
+      </PageLink>
+    )
+  },
+)

package/components/ProductListPagination/{index.tsx → ProductListPagination.tsx}

@@ -1,17 +1,13 @@
 import { Pagination } from '@graphcommerce/next-ui'
 import { PaginationProps } from '@mui/material'
-import React from 'react'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { ProductListPaginationFragment } from './ProductListPagination.gql'
 
 export type ProductPaginationProps = ProductListPaginationFragment &
   Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'>
 
-export default function ProductListPagination({
-  page_info,
-  ...paginationProps
-}: ProductPaginationProps) {
+export function ProductListPagination({ page_info, ...paginationProps }: ProductPaginationProps) {
   const { params } = useProductListParamsContext()
 
   if (!page_info || !page_info.total_pages || !page_info.current_page) return null
@@ -20,7 +16,7 @@ export default function ProductListPagination({
     <Pagination
       count={page_info?.total_pages}
       page={page_info?.current_page ?? 1}
-      renderLink={(page: number, icon: React.ReactNode, btnProps: any) => (
+      renderLink={(_, icon, btnProps) => (
         <ProductListLink {...btnProps} {...params} currentPage={btnProps.page} color='inherit'>
           {icon}
         </ProductListLink>

package/components/ProductListPrice/{index.tsx → ProductListPrice.tsx}

@@ -10,7 +10,7 @@ const { classes, selectors } = extendableComponent('ProductListPrice', [
 
 type ProductListPriceProps = ProductListPriceFragment & Pick<TypographyProps, 'sx'>
 
-export default function ProductListPrice(props: ProductListPriceProps) {
+export function ProductListPrice(props: ProductListPriceProps) {
   const { regular_price, final_price, sx } = props
 
   return (

package/components/ProductListSort/{index.tsx → ProductListSort.tsx}

@@ -5,13 +5,13 @@ import { ListItem, ListItemText } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import ProductListLink from '../ProductListLink/ProductListLink'
+import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { ProductListSortFragment } from './ProductListSort.gql'
 
 export type ProductListSortProps = ProductListSortFragment &
   Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'>
 
-export default function ProductListSort(props: ProductListSortProps) {
+export function ProductListSort(props: ProductListSortProps) {
   const { sort_fields, total_count, ...filterMenuProps } = props
   const { params } = useProductListParamsContext()
   const replaceRoute = useProductListLinkReplace()

package/components/ProductPageCategory/{index.ts → productPageCategory.ts}

@@ -6,7 +6,7 @@ import { ProductPageCategoryFragment } from './ProductPageCategory.gql'
  * - Prefers categories that are included in the menu
  * - Prefers categories that have a longer path than shorter ones.
  */
-export default function productPageCategory(product?: ProductPageCategoryFragment | null) {
+export function productPageCategory(product?: ProductPageCategoryFragment | null) {
   if (!product?.categories?.length) return undefined
   return product?.categories?.reduce((carry, value) => {
     if (!value?.include_in_menu) return carry

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -0,0 +1,72 @@
+import {
+  ColumnTwoWithTop,
+  ColumnTwoWithTopProps,
+  extendableComponent,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
+import { Variant } from '@mui/material/styles/createTypography'
+import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
+
+export type ProductPageDescriptionProps = ProductPageDescriptionFragment &
+  Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {
+    sx?: SxProps<Theme>
+    fontSize: 'responsive' | Variant
+  }
+
+const componentName = 'ProductPageDescription'
+const parts = ['root', 'description'] as const
+
+const { classes } = extendableComponent(componentName, parts)
+
+export function ProductPageDescription(props: ProductPageDescriptionProps) {
+  const { description, name, right, fontSize = 'subtitle1', sx = [] } = props
+
+  return (
+    <ColumnTwoWithTop
+      className={classes.root}
+      sx={sx}
+      top={
+        <Typography variant='h1' component='h2'>
+          {name}
+        </Typography>
+      }
+      left={
+        description && (
+          <Box
+            className={classes.description}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: description.html }}
+            sx={[
+              {
+                '& p:first-of-type': {
+                  marginTop: 0,
+                },
+                '& ul': {
+                  padding: 0,
+                  margin: 0,
+                  display: 'inline',
+                  listStyleType: 'none',
+                },
+                '& li': {
+                  display: 'inline',
+                },
+              },
+              fontSize === 'responsive' && {
+                '& p, & li': {
+                  fontSize: responsiveVal(16, 30),
+                },
+              },
+              fontSize !== 'responsive' && {
+                '& p, & li': {
+                  fontSize,
+                },
+              },
+            ]}
+          />
+        )
+      }
+      right={right}
+    />
+  )
+}

package/components/ProductPageGallery/ProductImage.tsx

@@ -1,7 +1,7 @@
 import { Image } from '@graphcommerce/image'
 import { ProductImageFragment } from './ProductImage.gql'
 
-export default function ProductImage(props: ProductImageFragment) {
+export function ProductImage(props: ProductImageFragment) {
   const { url, label } = props
 
   if (!url) return null

package/components/ProductPageGallery/{index.tsx → ProductPageGallery.tsx}

@@ -9,7 +9,7 @@ export type ProductPageGalleryRenderers = TypeRenderer<
 type ProductPageGalleryProps = PropsWithChildren<ProductPageGalleryFragment> &
   Omit<SidebarGalleryProps, 'sidebar' | 'images'>
 
-export default function ProductPageGallery(props: ProductPageGalleryProps) {
+export function ProductPageGallery(props: ProductPageGalleryProps) {
   const {
     media_gallery,
     children,