Skip to content

Commit 01c1c43

Browse files
alexvuongalexvuong
committed
update theme and component styles
1 parent 192aef4 commit 01c1c43

File tree

9 files changed

+237
-137
lines changed

9 files changed

+237
-137
lines changed

‎packages/extension-chakra-storefront/src/components/header/index.jsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import React, {useRef, useState} from 'react'
88
import PropTypes from 'prop-types'
99
import {useIntl} from 'react-intl'
1010
import {
11-
useMultiStyleConfig,
1211
Box,
1312
Flex,
1413
IconButton,
@@ -38,7 +37,7 @@ import {useCurrentBasket} from '../../hooks/use-current-basket'
3837

3938
import Link from '../../components/link'
4039
import Search from '../../components/search'
41-
import withRegistration from '../../components/with-registration'
40+
// import withRegistration from '../../components/with-registration'
4241
import {
4342
AccountIcon,
4443
BrandLogo,
@@ -56,7 +55,7 @@ import LoadingSpinner from '../../components/loading-spinner'
5655
import {HideOnDesktop, HideOnMobile} from '../../components/responsive'
5756
import {isHydrated, noop} from '../../utils/utils'
5857

59-
const IconButtonWithRegistration = withRegistration(IconButton)
58+
// const IconButtonWithRegistration = withRegistration(IconButton)
6059

6160
/**
6261
* Search bar for the header.
@@ -69,7 +68,6 @@ const IconButtonWithRegistration = withRegistration(IconButton)
6968
* @returns {Element} the search bar element
7069
*/
7170
const SearchBar = (props) => {
72-
// const styles = useMultiStyleConfig('Header')
7371
const recipe = useSlotRecipe({key: 'header'})
7472
const styles = recipe()
7573

@@ -131,7 +129,7 @@ const Header = ({
131129
onClose: onAccountMenuClose,
132130
onOpen: onAccountMenuOpen
133131
} = useDisclosure()
134-
const [isDesktop] = useMediaQuery('(min-width: 992px)')
132+
const [isDesktop] = useMediaQuery('(min-width: 992px)', {fallback: [false]})
135133
const storeLocatorExtension = useApplicationExtension(
136134
'@salesforce/extension-chakra-store-locator'
137135
)
@@ -147,7 +145,6 @@ const Header = ({
147145

148146
const recipe = useSlotRecipe({key: 'header'})
149147
const styles = recipe()
150-
151148
const onSignoutClick = async () => {
152149
setShowLoading(true)
153150
await logout.mutateAsync()
@@ -171,8 +168,8 @@ const Header = ({
171168
}
172169

173170
return (
174-
<Box {...styles.container} {...props}>
175-
<Box {...styles.content}>
171+
<Box css={styles.container} {...props}>
172+
<Box css={styles.content}>
176173
{showLoading && <LoadingSpinner wrapperStyles={{height: '100vh'}} />}
177174
<Flex wrap="wrap" alignItems={['baseline', 'baseline', 'baseline', 'center']}>
178175
<IconButton
@@ -204,18 +201,18 @@ const Header = ({
204201
<HideOnMobile>
205202
<SearchBar />
206203
</HideOnMobile>
207-
<IconButtonWithRegistration
208-
icon={<AccountIcon />}
209-
aria-label={intl.formatMessage({
210-
id: 'header.button.assistive_msg.my_account',
211-
defaultMessage: 'My account'
212-
})}
213-
variant="unstyled"
214-
{...styles.icons}
215-
{...styles.accountIcon}
216-
onClick={onMyAccountClick}
217-
onMouseOver={isDesktop ? onAccountMenuOpen : noop}
218-
/>
204+
{/*<IconButtonWithRegistration*/}
205+
{/* icon={<AccountIcon />}*/}
206+
{/* aria-label={intl.formatMessage({*/}
207+
{/* id: 'header.button.assistive_msg.my_account',*/}
208+
{/* defaultMessage: 'My account'*/}
209+
{/* })}*/}
210+
{/* variant="unstyled"*/}
211+
{/* {...styles.icons}*/}
212+
{/* {...styles.accountIcon}*/}
213+
{/* onClick={onMyAccountClick}*/}
214+
{/* onMouseOver={isDesktop ? onAccountMenuOpen : noop}*/}
215+
{/*/>*/}
219216
{/*{isRegistered && isHydrated() && (*/}
220217
{/* <Popover*/}
221218
{/* isLazy*/}
@@ -355,9 +352,9 @@ const Header = ({
355352
{/* {...styles.icons}*/}
356353
{/* onClick={onMyCartClick}*/}
357354
{/*/>*/}
358-
{/*<HideOnDesktop display={{base: 'contents', lg: 'none'}}>*/}
359-
{/* <SearchBar />*/}
360-
{/*</HideOnDesktop>*/}
355+
<HideOnDesktop display={{base: 'contents', lg: 'none'}}>
356+
<SearchBar />
357+
</HideOnDesktop>
361358
</Flex>
362359
</Box>
363360
</Box>

‎packages/extension-chakra-storefront/src/components/input-group/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type {BoxProps, InputElementProps} from '@chakra-ui/react'
2+
import {Group, InputElement} from '@chakra-ui/react'
3+
import * as React from 'react'
4+
5+
export interface InputGroupProps extends BoxProps {
6+
startElementProps?: InputElementProps
7+
endElementProps?: InputElementProps
8+
startElement?: React.ReactNode
9+
endElement?: React.ReactNode
10+
children: React.ReactElement<InputElementProps>
11+
startOffset?: InputElementProps['paddingStart']
12+
endOffset?: InputElementProps['paddingEnd']
13+
}
14+
15+
const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(
16+
props,
17+
ref
18+
) {
19+
const {
20+
startElement,
21+
startElementProps,
22+
endElement,
23+
endElementProps,
24+
children,
25+
startOffset = '6px',
26+
endOffset = '6px',
27+
...rest
28+
} = props
29+
30+
const child = React.Children.only<React.ReactElement<InputElementProps>>(children)
31+
32+
return (
33+
<Group ref={ref} {...rest}>
34+
{startElement && (
35+
<InputElement pointerEvents="none" {...startElementProps}>
36+
{startElement}
37+
</InputElement>
38+
)}
39+
{React.cloneElement(child, {
40+
...(startElement && {
41+
ps: `calc(var(--input-height) - ${startOffset})`
42+
}),
43+
...(endElement && {pe: `calc(var(--input-height) - ${endOffset})`}),
44+
...children.props
45+
})}
46+
{endElement && (
47+
<InputElement placement="end" {...endElementProps}>
48+
{endElement}
49+
</InputElement>
50+
)}
51+
</Group>
52+
)
53+
})
54+
55+
export default InputGroup

‎packages/extension-chakra-storefront/src/components/search/index.jsx‎

Lines changed: 55 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ import React, {useEffect, useMemo, useRef, useState} from 'react'
88
import {useSearchSuggestions} from '@salesforce/commerce-sdk-react'
99
import {
1010
Input,
11-
InputGroup,
12-
InputLeftElement,
1311
Popover,
12+
PopoverRoot,
1413
PopoverTrigger,
1514
PopoverContent,
1615
Button,
@@ -19,6 +18,7 @@ import {
1918
HStack,
2019
Spinner
2120
} from '@chakra-ui/react'
21+
import InputGroup from '../input-group'
2222
import SearchSuggestions from '../../components/search/partials/search-suggestions'
2323
import {SearchIcon} from '../../components/icons'
2424
import {capitalize, boldString, getSessionJSONItem, setSessionJSONItem} from '../../utils/utils'
@@ -183,14 +183,11 @@ const Search = (props) => {
183183

184184
return (
185185
<Box>
186-
<Popover isOpen={isOpen} isLazy initialFocusRef={searchInputRef}>
186+
<PopoverRoot isOpen={isOpen} isLazy initialFocusRef={searchInputRef}>
187187
<PopoverTrigger>
188188
<form onSubmit={onSubmitSearch}>
189189
<HStack>
190-
<InputGroup>
191-
<InputLeftElement pointerEvents="none">
192-
<SearchIcon />
193-
</InputLeftElement>
190+
<InputGroup startElement={<SearchIcon />}>
194191
<Input
195192
autoComplete="off"
196193
id="search-input"
@@ -203,61 +200,61 @@ const Search = (props) => {
203200
variant="filled"
204201
/>
205202
</InputGroup>
206-
<HideOnDesktop>
207-
<Button
208-
display={isOpen ? 'block' : 'none'}
209-
variant="link"
210-
size="sm"
211-
onMouseDown={() => closeAndNavigate(false)}
212-
>
213-
<FormattedMessage
214-
defaultMessage="Cancel"
215-
id="search.action.cancel"
216-
/>
217-
</Button>
218-
</HideOnDesktop>
203+
{/*<HideOnDesktop>*/}
204+
{/* <Button*/}
205+
{/* display={isOpen ? 'block' : 'none'}*/}
206+
{/* variant="link"*/}
207+
{/* size="sm"*/}
208+
{/* onMouseDown={() => closeAndNavigate(false)}*/}
209+
{/* >*/}
210+
{/* <FormattedMessage*/}
211+
{/* defaultMessage="Cancel"*/}
212+
{/* id="search.action.cancel"*/}
213+
{/* />*/}
214+
{/* </Button>*/}
215+
{/*</HideOnDesktop>*/}
219216
</HStack>
220217
</form>
221218
</PopoverTrigger>
222219

223-
<HideOnMobile>
224-
<PopoverContent data-testid="sf-suggestion-popover">
225-
<SearchSuggestions
226-
closeAndNavigate={closeAndNavigate}
227-
recentSearches={recentSearches}
228-
searchSuggestions={searchSuggestions}
229-
/>
230-
</PopoverContent>
231-
</HideOnMobile>
232-
</Popover>
233-
<HideOnDesktop>
234-
<Flex
235-
display={isOpen || searchInputRef?.value?.length > 0 ? 'block' : 'none'}
236-
postion="absolute"
237-
background="white"
238-
left={0}
239-
right={0}
240-
height="100vh"
241-
>
242-
{searchSuggestion.isLoading ? (
243-
<Spinner
244-
position="absolute"
245-
top="50%"
246-
left="50%"
247-
opacity={0.85}
248-
color="blue.600"
249-
zIndex="9999"
250-
margin="-25px 0 0 -25px"
251-
/>
252-
) : (
253-
<SearchSuggestions
254-
closeAndNavigate={closeAndNavigate}
255-
recentSearches={recentSearches}
256-
searchSuggestions={searchSuggestions}
257-
/>
258-
)}
259-
</Flex>
260-
</HideOnDesktop>
220+
{/*<HideOnMobile>*/}
221+
{/* <PopoverContent data-testid="sf-suggestion-popover">*/}
222+
{/* <SearchSuggestions*/}
223+
{/* closeAndNavigate={closeAndNavigate}*/}
224+
{/* recentSearches={recentSearches}*/}
225+
{/* searchSuggestions={searchSuggestions}*/}
226+
{/* />*/}
227+
{/* </PopoverContent>*/}
228+
{/*</HideOnMobile>*/}
229+
</PopoverRoot>
230+
{/*<HideOnDesktop>*/}
231+
{/* <Flex*/}
232+
{/* display={isOpen || searchInputRef?.value?.length > 0 ? 'block' : 'none'}*/}
233+
{/* postion="absolute"*/}
234+
{/* background="white"*/}
235+
{/* left={0}*/}
236+
{/* right={0}*/}
237+
{/* height="100vh"*/}
238+
{/* >*/}
239+
{/* {searchSuggestion.isLoading ? (*/}
240+
{/* <Spinner*/}
241+
{/* position="absolute"*/}
242+
{/* top="50%"*/}
243+
{/* left="50%"*/}
244+
{/* opacity={0.85}*/}
245+
{/* color="blue.600"*/}
246+
{/* zIndex="9999"*/}
247+
{/* margin="-25px 0 0 -25px"*/}
248+
{/* />*/}
249+
{/* ) : (*/}
250+
{/* <SearchSuggestions*/}
251+
{/* closeAndNavigate={closeAndNavigate}*/}
252+
{/* recentSearches={recentSearches}*/}
253+
{/* searchSuggestions={searchSuggestions}*/}
254+
{/* />*/}
255+
{/* )}*/}
256+
{/* </Flex>*/}
257+
{/*</HideOnDesktop>*/}
261258
</Box>
262259
)
263260
}

‎packages/extension-chakra-storefront/src/components/src/components/ui/input-group.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { BoxProps, InputElementProps } from "@chakra-ui/react"
2+
import { Group, InputElement } from "@chakra-ui/react"
3+
import * as React from "react"
4+
5+
export interface InputGroupProps extends BoxProps {
6+
startElementProps?: InputElementProps
7+
endElementProps?: InputElementProps
8+
startElement?: React.ReactNode
9+
endElement?: React.ReactNode
10+
children: React.ReactElement<InputElementProps>
11+
startOffset?: InputElementProps["paddingStart"]
12+
endOffset?: InputElementProps["paddingEnd"]
13+
}
14+
15+
export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
16+
function InputGroup(props, ref) {
17+
const {
18+
startElement,
19+
startElementProps,
20+
endElement,
21+
endElementProps,
22+
children,
23+
startOffset = "6px",
24+
endOffset = "6px",
25+
...rest
26+
} = props
27+
28+
const child =
29+
React.Children.only<React.ReactElement<InputElementProps>>(children)
30+
31+
return (
32+
<Group ref={ref} {...rest}>
33+
{startElement && (
34+
<InputElement pointerEvents="none" {...startElementProps}>
35+
{startElement}
36+
</InputElement>
37+
)}
38+
{React.cloneElement(child, {
39+
...(startElement && {
40+
ps: `calc(var(--input-height) - ${startOffset})`,
41+
}),
42+
...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
43+
...children.props,
44+
})}
45+
{endElement && (
46+
<InputElement placement="end" {...endElementProps}>
47+
{endElement}
48+
</InputElement>
49+
)}
50+
</Group>
51+
)
52+
},
53+
)

0 commit comments

Comments
 (0)