pwa-kit/packages/extension-chakra-storefront/src/theme/components/project/header.js at 92e196941e9a358e302c574135994f90f5ff28a1 · SalesforceCommerceCloud/pwa-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/*
 * Copyright (c) 2025, 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 {defineRecipe} from '@chakra-ui/react'

export default defineRecipe({
    slots: [
        'accountIconButton',
        'arrowDownIconButton',
        'bodyContainer',
        'container',
        'content',
        'dropdownMenuBody',
        'dropdownMenuTitle',
        'icons',
        'logo',
        'menuContent',
        'menuPositioner',
        'searchContainer',
        'signout',
        'wishListIconButton'
    ],
    base: {
        accountIconButton: {
            height: 11,
            minWidth: 'auto',
            cursor: 'pointer',
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
            _focus: {
                boxShadow: 'outline'
            },
            _focusVisible: {
                outline: 0
            }
        },
        arrowDownButton: {
            height: 11,
            minWidth: 'auto',
            marginRight: 0,
            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
            cursor: 'pointer',
            _focus: {
                boxShadow: 'outline'
            },
            _focusVisible: {
                outline: 0
            },
            display: ['none', 'none', 'none', 'block']
        },
        container: {
            minWidth: 'xs',
            width: 'full',
            shadow: 'xs',
            backgroundColor: 'white'
        },
        content: {
            maxWidth: 'container.xxxl',
            marginLeft: 'auto',
            marginRight: 'auto',
            paddingLeft: [4, 4, 6, 8],
            paddingRight: [4, 4, 6, 8],
            paddingTop: [1, 1, 2, 4],
            paddingBottom: [3, 3, 2, 4]
        },
        bodyContainer: {
            flex: '1'
        },
        dropdownMenuBody: {
            padding: 0,
            pb: 2
        },
        dropdownMenuTitle: {
            px: 7,
            py: 6,
            pb: 2
        },
        iconButton: {
            marginBottom: [1, 1, 2, 0]
        },
        logo: {
            width: [8, 8, 8, 12],
            height: [6, 6, 6, 8]
        },

        searchContainer: {
            order: [2, 2, 2, 'inherit'],
            width: ['full', 'full', 'full', 60],
            marginRight: [0, 0, 0, 4],
            marginBottom: [1, 1, 2, 0]
        },
        signout: {
            width: '100%',
            borderRadius: '4px',
            height: 11,
            padding: 4,
            py: 3,
            marginTop: 1,
            _hover: {
                background: 'gray.50'
            }
        },
        signoutText: {
            fontSize: 'sm',
            fontWeight: 'normal'
        },
        signoutIcon: {
            marginRight: 2
        },
        wishlistIcon: {
            // More breathing room between the account and wishlist icons
            marginLeft: 2
        }
    }
})