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

package/app/components/hero/index.jsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2021, 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 PropTypes from 'prop-types'
+import {Box, Flex, Heading, Stack, Image} from '@chakra-ui/react'
+
+const Hero = ({title, img, actions, ...props}) => {
+    const {src, alt} = img
+
+    return (
+        <Box
+            marginBottom={{base: 0, md: 10}}
+            height={{lg: 'xl'}}
+            position={{lg: 'relative'}}
+            {...props}
+        >
+            <Stack
+                align={'center'}
+                spacing={{base: 8, md: 10}}
+                paddingTop={{base: 12, md: 10}}
+                paddingBottom={{base: 6, md: 10}}
+                direction={{base: 'column', lg: 'row'}}
+            >
+                <Stack flex={1} spacing={{base: 5, md: 8}}>
+                    <Heading
+                        as="h1"
+                        fontSize={{base: '4xl', md: '5xl', lg: '6xl'}}
+                        maxWidth={{base: '75%', md: '50%', lg: 'md'}}
+                    >
+                        {title}
+                    </Heading>
+
+                    {actions && <Box width={{base: 'full', lg: 'inherit'}}>{actions}</Box>}
+                </Stack>
+                <Flex
+                    flex={1}
+                    justify={'center'}
+                    align={'center'}
+                    position={'relative'}
+                    width={'full'}
+                    paddingTop={{base: 4, lg: 0}}
+                >
+                    <Box position={'relative'} width={{base: 'full', md: '80%', lg: 'full'}}>
+                        <Image
+                            fit={'cover'}
+                            align={'center'}
+                            width={'100%'}
+                            height={'100%'}
+                            src={src}
+                            alt={alt}
+                        />
+                    </Box>
+                </Flex>
+            </Stack>
+        </Box>
+    )
+}
+
+Hero.displayName = 'Hero'
+
+Hero.propTypes = {
+    /**
+     * Hero component image
+     */
+    img: PropTypes.shape({
+        src: PropTypes.string,
+        alt: PropTypes.string
+    }),
+    /**
+     * Hero component main title
+     */
+    title: PropTypes.string,
+    /**
+     * Call to action component(s)
+     */
+    actions: PropTypes.element
+}
+
+export default Hero

package/app/components/hero/index.test.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021, 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 {fireEvent} from '@testing-library/react'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import Hero from '@salesforce/retail-react-app/app/components/hero/index'
+
+test('Hero renders without errors', () => {
+    const data = {
+        title: 'title',
+        actions: undefined,
+        img: {
+            src: 'src',
+            alt: 'alt'
+        }
+    }
+    const {getByText} = renderWithProviders(<Hero {...data} />)
+    expect(getByText(/title/i)).toBeInTheDocument()
+})
+
+test('Hero renders actions and event handlers', () => {
+    const onClick = jest.fn()
+    const data = {
+        title: 'title',
+        actions: <button data-testid="button" onClick={onClick}></button>,
+        img: {
+            src: 'src',
+            alt: 'alt'
+        }
+    }
+    const {getByTestId} = renderWithProviders(<Hero {...data} />)
+    const button = getByTestId('button')
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+})

package/app/components/icons/index.jsx

@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2021, 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, {forwardRef} from 'react'
+import {Icon, useTheme} from '@chakra-ui/react'
+
+// Our own SVG imports. These will be extracted to a single sprite sheet by the
+// svg-sprite-loader webpack plugin at build time and injected in the <body> tag
+// during SSR.
+// NOTE: Another solution would be to use `require-context.macro` package to accomplish
+// importing icon svg's.
+import '@salesforce/retail-react-app/app/assets/svg/alert.svg'
+import '@salesforce/retail-react-app/app/assets/svg/account.svg'
+import '@salesforce/retail-react-app/app/assets/svg/basket.svg'
+import '@salesforce/retail-react-app/app/assets/svg/check.svg'
+import '@salesforce/retail-react-app/app/assets/svg/check-circle.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-up.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-down.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-right.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-left.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-right.svg'
+import '@salesforce/retail-react-app/app/assets/svg/chevron-up.svg'
+import '@salesforce/retail-react-app/app/assets/svg/dashboard.svg'
+import '@salesforce/retail-react-app/app/assets/svg/figma-logo.svg'
+import '@salesforce/retail-react-app/app/assets/svg/filter.svg'
+import '@salesforce/retail-react-app/app/assets/svg/file.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-ca.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-us.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-gb.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-fr.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-it.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-cn.svg'
+import '@salesforce/retail-react-app/app/assets/svg/flag-jp.svg'
+import '@salesforce/retail-react-app/app/assets/svg/github-logo.svg'
+import '@salesforce/retail-react-app/app/assets/svg/hamburger.svg'
+import '@salesforce/retail-react-app/app/assets/svg/info.svg'
+import '@salesforce/retail-react-app/app/assets/svg/social-facebook.svg'
+import '@salesforce/retail-react-app/app/assets/svg/social-instagram.svg'
+import '@salesforce/retail-react-app/app/assets/svg/social-twitter.svg'
+import '@salesforce/retail-react-app/app/assets/svg/social-youtube.svg'
+import '@salesforce/retail-react-app/app/assets/svg/like.svg'
+import '@salesforce/retail-react-app/app/assets/svg/lock.svg'
+import '@salesforce/retail-react-app/app/assets/svg/plug.svg'
+import '@salesforce/retail-react-app/app/assets/svg/plus.svg'
+import '@salesforce/retail-react-app/app/assets/svg/receipt.svg'
+import '@salesforce/retail-react-app/app/assets/svg/search.svg'
+import '@salesforce/retail-react-app/app/assets/svg/signout.svg'
+import '@salesforce/retail-react-app/app/assets/svg/user.svg'
+import '@salesforce/retail-react-app/app/assets/svg/visibility.svg'
+import '@salesforce/retail-react-app/app/assets/svg/visibility-off.svg'
+import '@salesforce/retail-react-app/app/assets/svg/heart.svg'
+import '@salesforce/retail-react-app/app/assets/svg/heart-solid.svg'
+import '@salesforce/retail-react-app/app/assets/svg/close.svg'
+
+// For non-square SVGs, we can use the symbol data from the import to set the
+// proper viewBox attribute on the Icon wrapper.
+import AmexSymbol from '@salesforce/retail-react-app/app/assets/svg/cc-amex.svg'
+import BrandLogoSymbol from '@salesforce/retail-react-app/app/assets/svg/brand-logo.svg'
+import CVVSymbol from '@salesforce/retail-react-app/app/assets/svg/cc-cvv.svg'
+import DiscoverSymbol from '@salesforce/retail-react-app/app/assets/svg/cc-discover.svg'
+import LocationSymbol from '@salesforce/retail-react-app/app/assets/svg/location.svg'
+import MastercardSymbol from '@salesforce/retail-react-app/app/assets/svg/cc-mastercard.svg'
+import PaypalSymbol from '@salesforce/retail-react-app/app/assets/svg/paypal.svg'
+import SocialPinterestSymbol from '@salesforce/retail-react-app/app/assets/svg/social-pinterest.svg'
+import VisaSymbol from '@salesforce/retail-react-app/app/assets/svg/cc-visa.svg'
+
+// TODO: We're hardcoding the `viewBox` for these imported SVGs temporarily as the
+// SVG loader plugin is not properly providing us the symbol data on the client side.
+AmexSymbol.viewBox = AmexSymbol.viewBox || '0 0 38 22'
+BrandLogoSymbol.viewBox = BrandLogoSymbol.viewBox || '0 0 46 32'
+CVVSymbol.viewBox = CVVSymbol.viewBox || '0 0 41 24'
+DiscoverSymbol.viewBox = DiscoverSymbol.viewBox || '0 0 38 22'
+LocationSymbol.viewBox = LocationSymbol.viewBox || '0 0 16 21'
+MastercardSymbol.viewBox = MastercardSymbol.viewBox || '0 0 38 22'
+PaypalSymbol.viewBox = PaypalSymbol.viewBox || '0 0 80 20'
+SocialPinterestSymbol.viewBox = SocialPinterestSymbol.viewBox || '0 0 21 20'
+VisaSymbol.viewBox = VisaSymbol.viewBox || '0 0 38 22'
+
+/**
+ * A helper for creating a Chakra-wrapped icon from our own SVG imports via sprite sheet.
+ * @param {string} name - the filename of the imported svg (does not include extension)
+ */
+/* istanbul ignore next */
+const icon = (name, passProps) => {
+    const displayName = name
+        .toLowerCase()
+        .replace(/(?:^|[\s-/])\w/g, (match) => match.toUpperCase())
+        .replace(/-/g, '')
+    const component = forwardRef((props, ref) => {
+        const theme = useTheme()
+        const baseStyle = theme?.components?.Icon?.baseStyle
+        return (
+            <Icon ref={ref} {...baseStyle} {...passProps} {...props}>
+                <use role="presentation" xlinkHref={`#${name}`} />
+            </Icon>
+        )
+    })
+    component.displayName = `${displayName}Icon`
+    return component
+}
+
+// Export Chakra icon components that use our SVG sprite symbol internally
+// For non-square SVGs, we can use the symbol data from the import to set the
+// proper viewBox attribute on the Icon wrapper.
+export const AmexIcon = icon('cc-amex', {viewBox: AmexSymbol.viewBox})
+export const AlertIcon = icon('alert')
+export const AccountIcon = icon('account')
+export const BrandLogo = icon('brand-logo', {viewBox: BrandLogoSymbol.viewBox})
+export const BasketIcon = icon('basket')
+export const CheckIcon = icon('check')
+export const CheckCircleIcon = icon('check-circle')
+export const ChevronDownIcon = icon('chevron-down')
+export const ChevronLeftIcon = icon('chevron-left')
+export const ChevronRightIcon = icon('chevron-right')
+export const ChevronUpIcon = icon('chevron-up')
+export const CVVIcon = icon('cc-cvv', {viewBox: CVVSymbol.viewBox})
+export const DashboardIcon = icon('dashboard')
+export const DiscoverIcon = icon('cc-discover', {viewBox: DiscoverSymbol.viewBox})
+export const FigmaLogo = icon('figma-logo')
+export const FilterIcon = icon('filter')
+export const FileIcon = icon('file')
+export const FlagCAIcon = icon('flag-ca')
+export const FlagUSIcon = icon('flag-us')
+export const FlagGBIcon = icon('flag-gb')
+export const FlagFRIcon = icon('flag-fr')
+export const FlagITIcon = icon('flag-it')
+export const FlagCNIcon = icon('flag-cn')
+export const FlagJPIcon = icon('flag-jp')
+export const GithubLogo = icon('github-logo')
+export const HamburgerIcon = icon('hamburger')
+export const InfoIcon = icon('info')
+export const LikeIcon = icon('like')
+export const LockIcon = icon('lock')
+export const LocationIcon = icon('location')
+export const PaypalIcon = icon('paypal', {viewBox: PaypalSymbol.viewBox})
+export const PlugIcon = icon('plug')
+export const PlusIcon = icon('plus')
+export const MastercardIcon = icon('cc-mastercard', {viewBox: MastercardSymbol.viewBox})
+export const ReceiptIcon = icon('receipt')
+export const SearchIcon = icon('search')
+export const SocialFacebookIcon = icon('social-facebook')
+export const SocialInstagramIcon = icon('social-instagram')
+export const SocialPinterestIcon = icon('social-pinterest', {
+    viewBox: SocialPinterestSymbol.viewBox
+})
+export const SocialTwitterIcon = icon('social-twitter')
+export const SocialYoutubeIcon = icon('social-youtube')
+export const SignoutIcon = icon('signout')
+export const UserIcon = icon('user')
+export const VisaIcon = icon('cc-visa', {viewBox: VisaSymbol.viewBox})
+export const VisibilityIcon = icon('visibility')
+export const VisibilityOffIcon = icon('visibility-off')
+export const HeartIcon = icon('heart')
+export const HeartSolidIcon = icon('heart-solid')
+export const CloseIcon = icon('close')

package/app/components/icons/index.test.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021, 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 {within} from '@testing-library/dom'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+import * as Icons from '@salesforce/retail-react-app/app/components/icons/index'
+
+test('renders svg icons with Chakra Icon component', () => {
+    renderWithProviders(<Icons.CheckIcon />)
+    const svg = document.querySelector('.chakra-icon')
+    const use = within(svg).getByRole('presentation')
+    expect(svg).toBeInTheDocument()
+    expect(use).toBeInTheDocument()
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
+    expect(use).toHaveAttribute('xlink:href', '#check')
+})

package/app/components/image-gallery/index.jsx

@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2021, 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, {useState, useMemo, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import {useLocation} from 'react-router-dom'
+
+// Chakra Components
+import {
+    AspectRatio,
+    Box,
+    Img,
+    Flex,
+
+    // Hooks
+    Skeleton as ChakraSkeleton,
+    ListItem,
+    List,
+    useMultiStyleConfig
+} from '@chakra-ui/react'
+import {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'
+import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
+
+const EnterKeyNumber = 13
+
+const LARGE = 'large'
+const SMALL = 'small'
+
+/**
+ * The skeleton representation of the image gallery component. Use this component while
+ * you are waiting for product data to be returnd from the server.
+ */
+export const Skeleton = ({size}) => {
+    const styles = useMultiStyleConfig('ImageGallery', {size})
+
+    return (
+        <Box data-testid="sf-image-gallery-skeleton">
+            <Flex flexDirection="column">
+                <AspectRatio ratio={1} {...styles.heroImageSkeleton}>
+                    <ChakraSkeleton />
+                </AspectRatio>
+                <Flex>
+                    {new Array(4).fill(0).map((_, index) => (
+                        <AspectRatio ratio={1} {...styles.thumbnailImageSkeleton} key={index}>
+                            <ChakraSkeleton />
+                        </AspectRatio>
+                    ))}
+                </Flex>
+            </Flex>
+        </Box>
+    )
+}
+
+Skeleton.propTypes = {
+    size: PropTypes.bool
+}
+
+/**
+ * The image gallery displays a hero image and thumbnails below it. You can control which
+ * image groups that are use by passing in the current selected variation values.
+ */
+const ImageGallery = ({imageGroups = [], selectedVariationAttributes = {}, size, lazy = false}) => {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const styles = useMultiStyleConfig('ImageGallery', {size})
+    const location = useLocation()
+
+    // Get the 'hero' image for the current variation.
+    const heroImageGroup = useMemo(
+        () =>
+            findImageGroupBy(imageGroups, {
+                viewType: LARGE,
+                selectedVariationAttributes
+            }),
+        [selectedVariationAttributes]
+    )
+
+    useEffect(() => {
+        // reset the selected index when location search changes
+        setSelectedIndex(0)
+    }, [location.search])
+
+    // Get a memoized image group used for the thumbnails. We use the `useMemo` hook
+    // so we don't have to waste time filtering the image groups each render if the
+    // selected variation attributes haven't changed.
+    const thumbnailImageGroup = useMemo(
+        () =>
+            findImageGroupBy(imageGroups, {
+                viewType: SMALL,
+                selectedVariationAttributes
+            }),
+        [selectedVariationAttributes]
+    )
+
+    const heroImage = heroImageGroup?.images?.[selectedIndex]
+    const thumbnailImages = thumbnailImageGroup?.images || []
+    const loadingStrategy = lazy ? 'lazy' : 'eager'
+
+    const heroImageMaxWidth = styles.heroImage.maxWidth[3] // in px
+
+    return (
+        <Flex direction="column">
+            {heroImage && (
+                <Box {...styles.heroImageGroup}>
+                    <AspectRatio {...styles.heroImage} ratio={1}>
+                        <DynamicImage
+                            src={`${heroImage.disBaseLink || heroImage.link}[?sw={width}&q=60]`}
+                            widths={{
+                                base: '100vw',
+                                lg: heroImageMaxWidth
+                            }}
+                            imageProps={{
+                                alt: heroImage.alt,
+                                loading: loadingStrategy
+                            }}
+                        />
+                    </AspectRatio>
+                </Box>
+            )}
+
+            <List display={'flex'} flexWrap={'wrap'}>
+                {thumbnailImages.map((image, index) => {
+                    const selected = index === selectedIndex
+                    return (
+                        <ListItem
+                            {...styles.thumbnailImageItem}
+                            tabIndex={0}
+                            key={index}
+                            data-testid="image-gallery-thumbnails"
+                            onKeyDown={(e) => {
+                                if (e.keyCode === EnterKeyNumber) {
+                                    return setSelectedIndex(index)
+                                }
+                            }}
+                            onClick={() => setSelectedIndex(index)}
+                            borderColor={`${selected ? 'black' : ''}`}
+                            borderWidth={`${selected ? '1px' : 0}`}
+                        >
+                            <AspectRatio ratio={1}>
+                                <Img
+                                    alt={image.alt}
+                                    src={image.disBaseLink || image.link}
+                                    loading={loadingStrategy}
+                                />
+                            </AspectRatio>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Flex>
+    )
+}
+
+ImageGallery.propTypes = {
+    /**
+     * The images array to be rendered
+     */
+    imageGroups: PropTypes.array,
+    /**
+     * The current selected variation values
+     */
+    selectedVariationAttributes: PropTypes.object,
+    /**
+     * Size of the Image gallery, this will be used to determined the max width from styles
+     */
+    size: PropTypes.string,
+    /**
+     * Determines whether the image will be lazy loaded or not
+     */
+    lazy: PropTypes.bool
+}
+
+export default ImageGallery