Skip to content

Commit 705e1b0

Browse files
adamrayavmarta
adamraya
and
vmarta
authored
Simplified homepage for Retail React App (#201)
* Add page sections and icons * Update home page Hero * Add links and responsive styles * Clean up * Update packages/pwa/app/pages/home/index.jsx Co-authored-by: Vincent Marta <vmarta@salesforce.com> * PR Feedback use URL shortener sfdc.co * PR Feedback. Design pass * PR Feedback. Design pass fix link styles * Add GitHub logo Co-authored-by: Vincent Marta <vmarta@salesforce.com>
1 parent 96b9892 commit 705e1b0

File tree

19 files changed

+630
-353
lines changed

19 files changed

+630
-353
lines changed

‎packages/pwa/app/assets/svg/dashboard.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎packages/pwa/app/assets/svg/figma-logo.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎packages/pwa/app/assets/svg/github-logo.svg‎

Lines changed: 40 additions & 0 deletions
Loading

‎packages/pwa/app/assets/svg/like.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎packages/pwa/app/assets/svg/plug.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/pwa/app/components/hero/index.jsx‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,63 @@
77

88
import React from 'react'
99
import PropTypes from 'prop-types'
10-
import {AspectRatio, Box, Flex, Heading, Img, Text, VStack, useTheme} from '@chakra-ui/react'
10+
import {Box, Flex, Heading, Stack, Image} from '@chakra-ui/react'
1111

12-
const Hero = ({title, label, img, actions, ...props}) => {
12+
const Hero = ({title, img, actions, ...props}) => {
1313
const {src, alt} = img
14-
const theme = useTheme()
1514

1615
return (
17-
<Box height={{lg: 'xl'}} position={{lg: 'relative'}} {...props}>
18-
<Flex
19-
marginBottom="8"
20-
bgGradient={theme.gradients.imageBackground}
21-
justifyContent={{lg: 'flex-end'}}
22-
height="full"
23-
paddingRight={{lg: '16'}}
24-
borderRadius="base"
16+
<Box
17+
marginBottom={{base: 0, md: 10}}
18+
height={{lg: 'xl'}}
19+
position={{lg: 'relative'}}
20+
{...props}
21+
>
22+
<Stack
23+
align={'center'}
24+
spacing={{base: 8, md: 10}}
25+
paddingTop={{base: 12, md: 10}}
26+
paddingBottom={{base: 6, md: 10}}
27+
direction={{base: 'column', lg: 'row'}}
2528
>
26-
<AspectRatio ratio={1} width="full" maxWidth={{lg: 'lg'}}>
27-
<Img alt={alt} src={src} />
28-
</AspectRatio>
29-
</Flex>
30-
<VStack
31-
alignItems="flex-start"
32-
position={{lg: 'absolute'}}
33-
top={{lg: '50%'}}
34-
transform={{lg: 'translateY(-50%)'}}
35-
paddingLeft={{lg: '16'}}
36-
>
37-
<Text fontSize={{base: 'sm', lg: 'md'}} fontWeight="semibold">
38-
{label}
39-
</Text>
40-
<Heading
41-
as="h1"
42-
fontSize={{base: '4xl', lg: '5xl'}}
43-
maxWidth={{base: '75%', md: '50%', lg: 'md'}}
29+
<Stack flex={1} spacing={{base: 5, md: 8}}>
30+
<Heading
31+
as="h1"
32+
fontSize={{base: '4xl', md: '5xl', lg: '6xl'}}
33+
maxWidth={{base: '75%', md: '50%', lg: 'md'}}
34+
>
35+
{title}
36+
</Heading>
37+
38+
{actions && <Box width={{base: 'full', lg: 'inherit'}}>{actions}</Box>}
39+
</Stack>
40+
<Flex
41+
flex={1}
42+
justify={'center'}
43+
align={'center'}
44+
position={'relative'}
45+
width={'full'}
46+
paddingTop={{base: 4, lg: 0}}
4447
>
45-
{title}
46-
</Heading>
47-
{actions && (
48-
<Box paddingTop="2" width={{base: 'full', lg: 'inherit'}}>
49-
{actions}
48+
<Box position={'relative'} width={{base: 'full', md: '80%', lg: 'full'}}>
49+
<Image
50+
fit={'cover'}
51+
align={'center'}
52+
width={'100%'}
53+
height={'100%'}
54+
src={src}
55+
alt={alt}
56+
/>
5057
</Box>
51-
)}
52-
</VStack>
58+
</Flex>
59+
</Stack>
5360
</Box>
5461
)
5562
}
5663

5764
Hero.displayName = 'Hero'
5865

5966
Hero.propTypes = {
60-
/**
61-
* Promotion label
62-
*/
63-
label: PropTypes.string,
6467
/**
6568
* Hero component image
6669
*/

‎packages/pwa/app/components/hero/index.test.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import Hero from './index'
1212
test('Hero renders without errors', () => {
1313
const data = {
1414
title: 'title',
15-
label: 'label',
1615
actions: undefined,
1716
img: {
1817
src: 'src',
@@ -27,7 +26,6 @@ test('Hero renders actions and event handlers', () => {
2726
const onClick = jest.fn()
2827
const data = {
2928
title: 'title',
30-
label: 'label',
3129
actions: <button data-testid="button" onClick={onClick}></button>,
3230
img: {
3331
src: 'src',

‎packages/pwa/app/components/icons/index.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import '../../assets/svg/chevron-right.svg'
2323
import '../../assets/svg/chevron-left.svg'
2424
import '../../assets/svg/chevron-right.svg'
2525
import '../../assets/svg/chevron-up.svg'
26+
import '../../assets/svg/dashboard.svg'
27+
import '../../assets/svg/figma-logo.svg'
2628
import '../../assets/svg/filter.svg'
2729
import '../../assets/svg/file.svg'
2830
import '../../assets/svg/flag-ca.svg'
@@ -32,14 +34,17 @@ import '../../assets/svg/flag-fr.svg'
3234
import '../../assets/svg/flag-it.svg'
3335
import '../../assets/svg/flag-cn.svg'
3436
import '../../assets/svg/flag-jp.svg'
37+
import '../../assets/svg/github-logo.svg'
3538
import '../../assets/svg/hamburger.svg'
3639
import '../../assets/svg/info.svg'
3740
import '../../assets/svg/social-facebook.svg'
3841
import '../../assets/svg/social-instagram.svg'
3942
import '../../assets/svg/social-twitter.svg'
4043
import '../../assets/svg/social-youtube.svg'
44+
import '../../assets/svg/like.svg'
4145
import '../../assets/svg/lock.svg'
4246
import '../../assets/svg/payment.svg'
47+
import '../../assets/svg/plug.svg'
4348
import '../../assets/svg/plus.svg'
4449
import '../../assets/svg/receipt.svg'
4550
import '../../assets/svg/search.svg'
@@ -113,7 +118,9 @@ export const ChevronLeftIcon = icon('chevron-left')
113118
export const ChevronRightIcon = icon('chevron-right')
114119
export const ChevronUpIcon = icon('chevron-up')
115120
export const CVVIcon = icon('cc-cvv', {viewBox: CVVSymbol.viewBox})
121+
export const DashboardIcon = icon('dashboard')
116122
export const DiscoverIcon = icon('cc-discover', {viewBox: DiscoverSymbol.viewBox})
123+
export const FigmaLogo = icon('figma-logo')
117124
export const FilterIcon = icon('filter')
118125
export const FileIcon = icon('file')
119126
export const FlagCAIcon = icon('flag-ca')
@@ -123,12 +130,15 @@ export const FlagFRIcon = icon('flag-fr')
123130
export const FlagITIcon = icon('flag-it')
124131
export const FlagCNIcon = icon('flag-cn')
125132
export const FlagJPIcon = icon('flag-jp')
133+
export const GithubLogo = icon('github-logo')
126134
export const HamburgerIcon = icon('hamburger')
127135
export const InfoIcon = icon('info')
136+
export const LikeIcon = icon('like')
128137
export const LockIcon = icon('lock')
129138
export const LocationIcon = icon('location')
130139
export const PaymentIcon = icon('payment')
131140
export const PaypalIcon = icon('paypal', {viewBox: PaypalSymbol.viewBox})
141+
export const PlugIcon = icon('plug')
132142
export const PlusIcon = icon('plus')
133143
export const MastercardIcon = icon('cc-mastercard', {viewBox: MastercardSymbol.viewBox})
134144
export const ReceiptIcon = icon('receipt')

‎packages/pwa/app/components/section/index.jsx‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,34 @@
77

88
import React from 'react'
99
import PropTypes from 'prop-types'
10-
import {Box, Heading} from '@chakra-ui/react'
10+
import {Box, Heading, Stack, Text, Container} from '@chakra-ui/react'
1111

1212
/**
1313
* Section component used on content pages like home page.
1414
* This component helps with creating a consistent layout and
1515
* consistent typography styles for section headings.
1616
*/
17-
const Section = ({title, children, ...props}) => {
17+
const Section = ({title, subtitle, actions, maxWidth, children, ...props}) => {
18+
const sectionMaxWidth = maxWidth || '3xl'
1819
return (
19-
<Box paddingBottom="16" {...props}>
20-
<Heading as="h2" fontSize="xl" textAlign="center" marginBottom="8">
21-
{title}
22-
</Heading>
20+
<Box as={'section'} paddingBottom="16" {...props}>
21+
<Stack spacing={4} as={Container} maxW={sectionMaxWidth} textAlign={'center'}>
22+
{title && (
23+
<Heading as="h2" fontSize={40} textAlign="center">
24+
{title}
25+
</Heading>
26+
)}
27+
{subtitle && (
28+
<Text color={'gray.700'} fontWeight={600}>
29+
{subtitle}
30+
</Text>
31+
)}
32+
{actions && (
33+
<Box paddingTop="2" width={{base: 'full', md: 'auto'}}>
34+
{actions}
35+
</Box>
36+
)}
37+
</Stack>
2338
{children}
2439
</Box>
2540
)
@@ -28,8 +43,26 @@ const Section = ({title, children, ...props}) => {
2843
Section.displayName = 'Section'
2944

3045
Section.propTypes = {
46+
/**
47+
* Section component main title
48+
*/
3149
title: PropTypes.string,
32-
children: PropTypes.node
50+
/**
51+
* Section component subtitle
52+
*/
53+
subtitle: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
54+
/**
55+
* Section children node(s)
56+
*/
57+
children: PropTypes.node,
58+
/**
59+
* Call to action component(s)
60+
*/
61+
actions: PropTypes.element,
62+
/**
63+
* Section maximum width
64+
*/
65+
maxWidth: PropTypes.string
3366
}
3467

3568
export default Section

0 commit comments

Comments
 (0)