@salesforce/retail-react-app 1.0.0-preview.0

package/app/page-designer/assets/image-tile/index.jsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Box, Image} from '@chakra-ui/react'
+
+/**
+ * Simple ImageTile component that can be used inside any Layout component.
+ * @param image Object containing the image url, _type and focalPoint.
+ * @returns {JSX.Element}
+ */
+export const ImageTile = ({image}) => {
+    return (
+        <Box className={'image-tile'}>
+            <figure className={'image-tile-figure'}>
+                <picture>
+                    <source srcSet={image?.src?.tablet} media="(min-width: 48em)" />
+                    <source srcSet={image?.src?.desktop} media="(min-width: 64em)" />
+                    <Image
+                        className={'image-tile-image'}
+                        data-testid={'image-tile-image'}
+                        src={image?.src?.mobile ? image?.src?.mobile : image?.url}
+                        ignoreFallback={true}
+                        alt={image?.alt}
+                        title={image?.alt}
+                    />
+                </picture>
+            </figure>
+        </Box>
+    )
+}
+
+ImageTile.propTypes = {
+    image: PropTypes.shape({
+        _type: PropTypes.string,
+        focalPoint: PropTypes.shape({
+            _type: PropTypes.string,
+            x: PropTypes.number,
+            y: PropTypes.number
+        }),
+        url: PropTypes.string,
+        alt: PropTypes.string,
+        src: PropTypes.string || PropTypes.object
+    })
+}
+
+export default ImageTile

package/app/page-designer/assets/image-tile/index.test.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import ImageTile from '@salesforce/retail-react-app/app/page-designer/assets/image-tile/index'
+import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
+
+test('ImageTile renders without errors', () => {
+    const {getByTestId} = renderWithProviders(
+        <ImageTile
+            image={{
+                _type: 'Image',
+                focalPoint: {
+                    _type: 'Imagefocalpoint',
+                    x: 0.5,
+                    y: 0.5
+                },
+                url: `${getAssetUrl('static/img/hero.png')}`
+            }}
+        />
+    )
+
+    const image = getByTestId('image-tile-image')
+
+    expect(image).toHaveAttribute('src', `${getAssetUrl('static/img/hero.png')}`)
+})

package/app/page-designer/assets/image-with-text/index.jsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Box, Image, Link as ChakraLink, Text} from '@chakra-ui/react'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import {isAbsoluteURL} from '@salesforce/retail-react-app/app/page-designer/utils'
+
+/**
+ * Image with text component
+ *
+ * @param {object} props
+ * @param {string} - props.ITCLink - Image Link.
+ * @param {string} - props.ITCText - Text Below Image.
+ * @param {image} - props.image - Image.
+ * @param {string} - props.heading - Text Overlay.
+ * @param {string} - props.alt - The image alt text shown by the component.
+ * @returns {React.ReactElement} - ImageWithText component.
+ */
+export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
+    const hasCaption = ITCText || heading
+    const isAbsolute = isAbsoluteURL(ITCLink)
+    const LinkWrapper = isAbsolute ? ChakraLink : Link
+    const linkProps = isAbsolute ? {href: ITCLink} : {to: ITCLink}
+
+    return (
+        <Box className={'image-with-text'}>
+            <Box
+                as="figure"
+                className={'image-with-text-figure'}
+                position={'relative'}
+                margin={0}
+                width={'100%'}
+            >
+                <picture>
+                    <source srcSet={image?.src?.tablet} media="(min-width: 48em)" />
+                    <source srcSet={image?.src?.desktop} media="(min-width: 64em)" />
+                    <LinkWrapper {...linkProps}>
+                        <Image
+                            className={'image-with-text-image'}
+                            data-testid={'image-with-text-image'}
+                            src={image?.src?.mobile ? image?.src?.mobile : image?.url}
+                            ignoreFallback={true}
+                            alt={alt}
+                            title={alt}
+                            filter={'brightness(40%)'}
+                        />
+                    </LinkWrapper>
+                </picture>
+                {hasCaption && (
+                    <Text as="figcaption">
+                        {heading && (
+                            <Box
+                                className={'image-with-text-heading-container'}
+                                position={'absolute'}
+                                top={'50%'}
+                                width={'100%'}
+                                padding={'15px'}
+                                textAlign={{base: 'center', sm: 'left'}}
+                            >
+                                <Text
+                                    as="span"
+                                    className={'image-with-text-heading-text'}
+                                    color={'white'}
+                                >
+                                    {/* The `dangerouslySetInnerHTML` is safe to use in this context. */}
+                                    {/* The HTML in the response from Page Designer API is already sanitized. */}
+                                    <Box
+                                        dangerouslySetInnerHTML={{
+                                            __html: heading
+                                        }}
+                                        sx={{
+                                            ['h1, h2, h3, h4, h5, h6']: {
+                                                fontSize: 'revert',
+                                                fontWeight: 'revert'
+                                            },
+                                            p: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center'
+                                            }
+                                        }}
+                                    />
+                                </Text>
+                            </Box>
+                        )}
+                        {ITCText && (
+                            <Box>
+                                <Text as="span" className={'image-with-text-text-underneath'}>
+                                    {/* The `dangerouslySetInnerHTML` is safe to use in this context. */}
+                                    {/* The HTML in the response from Page Designer API is already sanitized. */}
+                                    <Box
+                                        dangerouslySetInnerHTML={{
+                                            __html: ITCText
+                                        }}
+                                        sx={{
+                                            p: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center'
+                                            }
+                                        }}
+                                    />
+                                </Text>
+                            </Box>
+                        )}
+                    </Text>
+                )}
+            </Box>
+        </Box>
+    )
+}
+
+ImageWithText.propTypes = {
+    ITCLink: PropTypes.string,
+    ITCText: PropTypes.string,
+    image: PropTypes.shape({
+        _type: PropTypes.string,
+        focalPoint: PropTypes.shape({
+            _type: PropTypes.string,
+            x: PropTypes.number,
+            y: PropTypes.number
+        }),
+        metaData: PropTypes.shape({
+            _type: PropTypes.string,
+            height: PropTypes.number,
+            width: PropTypes.number
+        }),
+        url: PropTypes.string,
+        src: PropTypes.string || PropTypes.object
+    }).isRequired,
+    heading: PropTypes.string,
+    alt: PropTypes.string
+}
+
+export default ImageWithText

package/app/page-designer/assets/image-with-text/index.test.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import ImageWithText from '@salesforce/retail-react-app/app/page-designer/assets/image-with-text/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+const SAMPLE_DATA = {
+    ITCLink: 'https://salesforce.com',
+    ITCText:
+        '<p><em>Text</em> <strong>Below</strong> <u>Image</u> <s>test</s> Image With Text Component <a href="https://zzrf-001.dx.commercecloud.salesforce.com/s/RefArchGlobal/homepage-example.html?lang=en_US" target="_self" data-link-type="page" data-link-label="homepage-example" data-content-page-id="homepage-example">Home-page example link</a><img src="https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw89c1031d/images/myaccount_addresses.png" alt="alt tag myaccount_addresses image"></p>',
+    image: {
+        _type: 'Image',
+        focalPoint: {
+            _type: 'Imagefocalpoint',
+            x: 0.5,
+            y: 0.5
+        },
+        metaData: {
+            _type: 'Imagemetadata',
+            height: 1280,
+            width: 1920
+        },
+        url: 'https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw34c389b5/images/SearchBanner/search.jpg'
+    },
+    heading:
+        '<p><em>Text</em> <strong>Overlay</strong> <s>test</s> <u>Image</u> With Text <a href="https://zzrf-001.dx.commercecloud.salesforce.com/s/RefArchGlobal/mens/?lang=en_US" target="_self" data-link-type="category" data-link-label="Mens" data-category-id="mens" data-category-catalog-id="storefront-catalog-m-en">Component Link</a><img src="https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Library-Sites-RefArchSharedLibrary/default/dw2d9142bf/images/myaccount_registry.png" alt="alt text myaccount_registry image"></p>',
+    alt: 'Alt Text test Image With Text Component'
+}
+
+test('Page renders correct component', () => {
+    const {getByText} = renderWithProviders(<ImageWithText {...SAMPLE_DATA} />)
+
+    expect(getByText(/image with text component/i)).toBeInTheDocument()
+})

package/app/page-designer/assets/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+export * from './image-tile'
+export * from './image-with-text'

package/app/page-designer/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {Page, pageType} from '@salesforce/retail-react-app/app/page-designer/core'
+
+export {Page, pageType}

package/app/page-designer/layouts/carousel/index.jsx

@@ -0,0 +1,222 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React, {Fragment, useCallback, useMemo, useRef, useState} from 'react'
+import PropTypes from 'prop-types'
+import {
+    AspectRatio,
+    Box,
+    Heading,
+    IconButton,
+    Stack,
+    useBreakpoint,
+    useBreakpointValue
+} from '@chakra-ui/react'
+import {Component, regionPropType} from '@salesforce/commerce-sdk-react/components'
+import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {useEffect} from 'react'
+
+/**
+ * Display child components in a carousel slider manner. Configurations include the number of
+ * children to display in view as well as whether or not to show controls and position indicators.
+ *
+ * @param {PageProps} props
+ * @param {string} props.textHeading - Heading text for the carousel.
+ * @param {boolean} props.xsCarouselIndicators - Show/Hide carousel indicators/pips on "xs" screens.
+ * @param {boolean} props.smCarouselIndicators - Show/Hide carousel indicators/pips on "sm" screens.
+ * @param {boolean} props.mdCarouselIndicators - Show/Hide carousel indicators/pips on "md" screens.
+ * @param {boolean} props.xsCarouselControls - Show/Hide carousel forward/back controls on "xs" screens.
+ * @param {boolean} props.smCarouselControls - Show/Hide carousel forward/back controls on "sm" screens.
+ * @param {number} props.xsCarouselSlidesToDisplay - Number of children that will be rendered in view on "xs" screens.
+ * @param {number} props.smCarouselSlidesToDisplay - Number of children that will be rendered in view on "sm" screens.
+ * @param {number} props.mdCarouselSlidesToDisplay - Number of children that will be rendered in view on "md" screens.
+ * @param {Object []} props.region - The regions passed internally to this component by the `commerce-sdk-react` Page component.
+ * @returns {React.ReactElement} - Carousel component.
+ */
+export const Carousel = (props = {}) => {
+    const scrollRef = useRef()
+    const breakpoint = useBreakpoint()
+    const [hasOverflow, setHasOverflow] = useState(false)
+
+    const {
+        textHeadline,
+        xsCarouselIndicators = false,
+        smCarouselIndicators = false,
+        mdCarouselIndicators = false,
+        xsCarouselControls = false,
+        smCarouselControls = false,
+        xsCarouselSlidesToDisplay = 1,
+        smCarouselSlidesToDisplay = 1,
+        mdCarouselSlidesToDisplay = 1,
+        // Internally Provided
+        regions
+    } = props
+
+    const controlDisplay = useMemo(() => {
+        return {
+            base: xsCarouselControls && hasOverflow ? 'block' : 'none',
+            sm: xsCarouselControls && hasOverflow ? 'block' : 'none',
+            md: smCarouselControls && hasOverflow ? 'block' : 'none',
+            lg: hasOverflow ? 'block' : 'none'
+        }
+    }, [hasOverflow])
+
+    const itemSpacing = 4
+    // Calculate the width of each item in the carousel, accounting for the spacing between the items.
+    const itemWidth = {
+        base: `calc(${100 / xsCarouselSlidesToDisplay}% - ${
+            ((xsCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / xsCarouselSlidesToDisplay
+        }px)`,
+        sm: `calc(${100 / xsCarouselSlidesToDisplay}% - ${
+            ((xsCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / xsCarouselSlidesToDisplay
+        }px)`,
+        md: `calc(${100 / smCarouselSlidesToDisplay}% - ${
+            ((smCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / smCarouselSlidesToDisplay
+        }px)`,
+        lg: `calc(${100 / mdCarouselSlidesToDisplay}% - ${
+            ((mdCarouselSlidesToDisplay - 1) * (itemSpacing * 4)) / mdCarouselSlidesToDisplay
+        }px)`
+    }
+
+    const overflowXScroll = {
+        base: xsCarouselIndicators ? 'block' : 'none',
+        sm: xsCarouselIndicators ? 'block' : 'none',
+        md: smCarouselIndicators ? 'block' : 'none',
+        lg: mdCarouselIndicators ? 'block' : 'none'
+    }
+    const overflowXScrollValue = useBreakpointValue(overflowXScroll)
+
+    const components = regions[0]?.components || []
+    const itemCount = components.length
+
+    // Scroll the container left or right by 100%. Passing no args or `1`
+    // scrolls to the right, and passing `-1` scrolls left.
+    const scroll = useCallback((direction = 1) => {
+        scrollRef.current?.scrollBy({
+            top: 0,
+            left: (direction * window.innerWidth) / itemCount,
+            behavior: 'smooth'
+        })
+    })
+
+    // Our indicator implementation uses the scrollbar to show the context of the current
+    // item selected. Because MacOS hides scroll bars after they come to rest we need to
+    // force them to show. Please note that this feature only works on web-kit browsers,
+    // for all other browsers the scroller/indicator will be shown.
+    const style = {
+        '.scroll-indicator::-webkit-scrollbar': {
+            display: overflowXScrollValue,
+            ['-webkit-appearance']: `none`,
+            height: `8px`
+        },
+        '.scroll-indicator::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0, 0, 0, 0.5)'
+        }
+    }
+
+    useEffect(() => {
+        const {clientWidth, scrollWidth} = scrollRef.current
+        setHasOverflow(scrollWidth > clientWidth)
+    }, [breakpoint, props])
+
+    return (
+        <Box className={'carousel'} sx={style} position="relative" data-testid="carousel">
+            <Stack className={'carousel-container'} data-testid="carousel-container" spacing={6}>
+                {textHeadline && (
+                    <Heading as="h2" fontSize="xl" textAlign="center">
+                        {textHeadline}
+                    </Heading>
+                )}
+
+                <Stack
+                    ref={scrollRef}
+                    className={'carousel-container-items scroll-indicator'}
+                    data-testid="carousel-container-items"
+                    direction="row"
+                    spacing={itemSpacing}
+                    wrap="nowrap"
+                    overflowX="scroll"
+                    sx={{
+                        scrollPadding: 0,
+                        scrollSnapType: 'x mandatory',
+                        WebkitOverflowScrolling: 'touch'
+                    }}
+                >
+                    {components.map((component, index) => (
+                        <Box
+                            key={component?.id || index}
+                            flex="0 0 auto"
+                            width={itemWidth}
+                            style={{scrollSnapAlign: 'start'}}
+                        >
+                            <AspectRatio ratio={0.75}>
+                                <Component component={component} />
+                            </AspectRatio>
+                        </Box>
+                    ))}
+                </Stack>
+            </Stack>
+
+            {/* Button Controls */}
+            <Fragment>
+                <Box
+                    display={controlDisplay}
+                    position="absolute"
+                    top="50%"
+                    left={{base: 1, lg: 4}}
+                    transform="translateY(-50%)"
+                >
+                    {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
+                    <IconButton
+                        data-testid="carousel-nav-left"
+                        aria-label="Scroll carousel left"
+                        icon={<ChevronLeftIcon color="black" />}
+                        borderRadius="full"
+                        colorScheme="whiteAlpha"
+                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        onClick={() => scroll(-1)}
+                    />
+                </Box>
+
+                <Box
+                    display={controlDisplay}
+                    position="absolute"
+                    top="50%"
+                    right={{base: 1, lg: 4}}
+                    transform="translateY(-50%)"
+                >
+                    {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
+                    <IconButton
+                        data-testid="carousel-nav-right"
+                        aria-label="Scroll carousel right"
+                        icon={<ChevronRightIcon color="black" />}
+                        borderRadius="full"
+                        colorScheme="whiteAlpha"
+                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        onClick={() => scroll(1)}
+                    />
+                </Box>
+            </Fragment>
+        </Box>
+    )
+}
+
+Carousel.propTypes = {
+    regions: PropTypes.arrayOf(regionPropType).isRequired,
+    textHeadline: PropTypes.string,
+    xsCarouselIndicators: PropTypes.bool,
+    smCarouselIndicators: PropTypes.bool,
+    mdCarouselIndicators: PropTypes.bool,
+    xsCarouselControls: PropTypes.bool,
+    smCarouselControls: PropTypes.bool,
+    xsCarouselSlidesToDisplay: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+    smCarouselSlidesToDisplay: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+    mdCarouselSlidesToDisplay: PropTypes.oneOf([1, 2, 3, 4, 5, 6])
+}
+
+Carousel.displayName = 'Carousel'
+
+export default Carousel

package/app/page-designer/layouts/carousel/index.test.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Carousel from '@salesforce/retail-react-app/app/page-designer/layouts/carousel/index'
+
+const SAMPLE_REGION = {
+    id: 'TEST_REGION',
+    components: [
+        {
+            id: 'TEST_COMPONENT',
+            typeId: 'test-component',
+            data: {}
+        }
+    ]
+}
+
+test('Carousel renders without errors', () => {
+    const {getByTestId} = renderWithProviders(<Carousel regions={[]} />)
+
+    expect(getByTestId('carousel')).toBeDefined()
+    expect(getByTestId('carousel-container')).toBeDefined()
+    expect(getByTestId('carousel-container-items')).toBeDefined()
+    expect(getByTestId('carousel-nav-left')).toBeDefined()
+    expect(getByTestId('carousel-nav-left')).toBeDefined()
+})
+
+test('Carousel renders region/children without errors', () => {
+    const CarouselWithPageProvider = withPageProvider(Carousel)
+    const {getByTestId} = renderWithProviders(
+        <CarouselWithPageProvider regions={[SAMPLE_REGION]} />
+    )
+
+    expect(getByTestId('carousel')).toBeDefined()
+    expect(getByTestId('carousel-container-items').childElementCount).toBe(1)
+})

package/app/page-designer/layouts/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+export * from './carousel'
+export * from './mobileGrid1r1c'
+export * from './mobileGrid2r1c'
+export * from './mobileGrid2r2c'
+export * from './mobileGrid2r3c'
+export * from './mobileGrid3r1c'
+export * from './mobileGrid3r2c'

package/app/page-designer/layouts/mobileGrid1r1c/index.jsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import {SimpleGrid} from '@chakra-ui/react'
+import {Region, regionPropType} from '@salesforce/commerce-sdk-react/components'
+
+/**
+ * This layout component displays its children in a 1 x 1 grid on both mobile and desktop.
+ *
+ * @param {componentProps} props
+ * @param {regionType []} props.regions - The page designer regions for this component.
+ * @param {object} props.data - The data for the component.
+ * @param {string} props.typeId - A mapping of typeId's to react components representing the type.
+ * @returns {React.ReactElement} - Grid component.
+ */
+export const MobileGrid1r1c = ({regions}) => (
+    <SimpleGrid className="mobile-1r-1c" columns={1}>
+        {regions.map((region) => (
+            <Region key={region.id} region={region} />
+        ))}
+    </SimpleGrid>
+)
+
+MobileGrid1r1c.displayName = 'MobileGrid1r1c'
+
+MobileGrid1r1c.propTypes = {
+    // Internally Provided
+    regions: PropTypes.arrayOf(regionPropType).isRequired
+}
+
+export default MobileGrid1r1c

package/app/page-designer/layouts/mobileGrid1r1c/index.test.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import React from 'react'
+import {
+    renderWithProviders,
+    withPageProvider
+} from '@salesforce/retail-react-app/app/utils/test-utils'
+import MobileGrid1r1c from '@salesforce/retail-react-app/app/page-designer/layouts/mobileGrid1r1c/index'
+
+test('MobileGrid1r1c renders without errors', () => {
+    const MobileGrid1r1cWithPageProvider = withPageProvider(MobileGrid1r1c)
+    renderWithProviders(
+        <MobileGrid1r1cWithPageProvider
+            regions={[
+                {
+                    components: [
+                        {
+                            data: {
+                                richText: '<p>Column 1</p>'
+                            },
+                            id: '6790e4a41380d31bf54b648e9c',
+                            typeId: 'commerce_assets.editorialRichText'
+                        }
+                    ],
+                    id: 'column1'
+                }
+            ]}
+        />
+    )
+    expect(document.querySelector('.mobile-1r-1c')).not.toBeNull()
+})