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

package/app/theme/components/base/checkbox.js

@@ -0,0 +1,30 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {style: {alignItems: 'baseline'}},
+        label: {
+            width: 'full'
+        },
+        control: {
+            marginTop: '2px',
+            _checked: {
+                backgroundColor: 'blue.600',
+                borderColor: 'blue.600',
+                _hover: {
+                    bg: 'blue.700',
+                    borderColor: 'blue.700'
+                }
+            }
+        }
+    },
+    sizes: {
+        md: {
+            label: {fontSize: 'sm'}
+        }
+    }
+}

package/app/theme/components/base/container.js

@@ -0,0 +1,17 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        maxWidth: 'container.xxl'
+    },
+    variants: {
+        form: {
+            maxWidth: '522px',
+            px: 0
+        }
+    }
+}

package/app/theme/components/base/drawer.js

@@ -0,0 +1,26 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        header: {
+            paddingTop: 1,
+            paddingRight: [4, 4, 6, 6],
+            paddingBottom: 1,
+            paddingLeft: [4, 4, 6, 6],
+            boxShadow: 'base'
+        },
+        body: {
+            padding: [4, 4, 6, 6]
+        },
+        footer: {
+            paddingTop: 6,
+            paddingRight: [4, 4, 6, 6],
+            paddingBottom: 11,
+            paddingLeft: [4, 4, 6, 6]
+        }
+    }
+}

package/app/theme/components/base/formLabel.js

@@ -0,0 +1,13 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        marginBottom: 1,
+        fontSize: 'sm',
+        fontWeight: 'semibold'
+    }
+}

package/app/theme/components/base/icon.js

@@ -0,0 +1,13 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        display: 'inline-block',
+        verticalAlign: 'bottom',
+        boxSize: 6
+    }
+}

package/app/theme/components/base/input.js

@@ -0,0 +1,44 @@
+/*
+ * 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
+ */
+const mdSize = {height: 11, borderRadius: 'base'}
+
+export default {
+    sizes: {
+        md: {
+            field: {...mdSize, px: 3},
+            addon: mdSize
+        }
+    },
+    baseStyle: {
+        field: {
+            _focus: {
+                borderColor: 'blue.600'
+            }
+        }
+    },
+    variants: {
+        filled: {
+            // we use filled variant for
+            // search input
+            field: {
+                backgroundColor: 'gray.50',
+                _focus: {
+                    backgroundColor: 'white'
+                },
+                _hover: {
+                    backgroundColor: 'gray.100',
+                    _focus: {
+                        backgroundColor: 'white'
+                    }
+                },
+                _placeholder: {
+                    color: 'gray.700'
+                }
+            }
+        }
+    }
+}

package/app/theme/components/base/modal.js

@@ -0,0 +1,11 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        dialog: {borderRadius: 'base'}
+    }
+}

package/app/theme/components/base/popover.js

@@ -0,0 +1,61 @@
+/*
+ * 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
+ */
+export default {
+    parts: ['popper'],
+    baseStyle: {
+        popper: {
+            borderColor: 'transparent',
+            borderRadius: 'base',
+            boxShadow: '0px 1px 12px rgba(0, 0, 0, 0.25)'
+        }
+    },
+    variants: {
+        small: {},
+        normal: {
+            popper: {
+                width: 286
+            },
+            header: {
+                textAlign: 'left',
+                fontWeight: 700,
+                borderBottom: 'none',
+                fontSize: 18,
+                px: 7,
+                paddingTop: 6
+            },
+            footer: {
+                textAlign: 'left',
+                fontSize: 14,
+                px: 3,
+                borderTop: 'none'
+            },
+            content: {
+                width: 286
+            },
+            body: {
+                py: 0
+            }
+        },
+        fullWidth: {
+            popper: {
+                width: '100%',
+                maxWidth: '100%',
+                boxShadow: 'none',
+                top: '0',
+                right: 'auto',
+                bottom: 'auto',
+                left: '0'
+            },
+            content: {
+                width: 'auto'
+            }
+        }
+    },
+    defaultProps: {
+        variant: 'normal'
+    }
+}

package/app/theme/components/base/radio.js

@@ -0,0 +1,33 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {display: 'flex'},
+        label: {
+            width: 'full'
+        },
+        control: {
+            backgroundColor: 'white',
+            _checked: {
+                backgroundColor: 'blue.600',
+                borderColor: 'blue.600',
+                _hover: {
+                    backgroundColor: 'blue.700',
+                    borderColor: 'blue.700'
+                }
+            },
+            _indeterminate: {}
+        }
+    },
+    sizes: {
+        md: {
+            container: {alignItems: 'flex-start'},
+            control: {marginTop: '0.25em'},
+            label: {marginLeft: 3}
+        }
+    }
+}

package/app/theme/components/base/select.js

@@ -0,0 +1,15 @@
+/*
+ * 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
+ */
+const mdSize = {height: 11, h: 11, borderRadius: 'base'}
+
+export default {
+    sizes: {
+        md: {
+            field: mdSize
+        }
+    }
+}

package/app/theme/components/base/skeleton.js

@@ -0,0 +1,12 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        borderRadius: 'base',
+        opacity: 0.3
+    }
+}

package/app/theme/components/base/tooltip.js

@@ -0,0 +1,19 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        '--tooltip-bg': `colors.blue.800`,
+        px: 2,
+        py: 2,
+        bg: 'var(--tooltip-bg)',
+        '--popper-arrow-bg': 'var(--tooltip-bg)',
+        color: 'whiteAlpha.900',
+        borderRadius: 'base',
+        maxW: '280px',
+        lineHeight: '1.5em'
+    }
+}

package/app/theme/components/project/_app.js

@@ -0,0 +1,25 @@
+/*
+ * 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 theme from '@chakra-ui/theme'
+
+export default {
+    baseStyle: {
+        container: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: 'white',
+            minWidth: '375px'
+        },
+        headerWrapper: {
+            position: 'sticky',
+            top: 0,
+            zIndex: theme.zIndices.sticky
+        }
+    },
+    parts: ['container']
+}

package/app/theme/components/project/breadcrumb.js

@@ -0,0 +1,25 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {
+            minHeight: 4,
+            fontSize: 'sm'
+        },
+        icon: {
+            display: 'flex',
+            boxSize: 4,
+            color: 'grey'
+        },
+        link: {
+            paddingTop: 3,
+            paddingBottom: 3,
+            textDecoration: 'none'
+        }
+    },
+    parts: ['container', 'icon', 'link']
+}

package/app/theme/components/project/checkout-footer.js

@@ -0,0 +1,35 @@
+/*
+ * 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 Footer from '@salesforce/retail-react-app/app/theme/components/project/footer'
+
+const {baseStyle} = Footer
+
+export default {
+    parts: [
+        'container',
+        'content',
+        'horizontalRule',
+        'bottomHalf',
+        'copyright',
+        'creditCardIcon',
+        'customerService'
+    ],
+    baseStyle: {
+        container: baseStyle.container,
+        content: baseStyle.content,
+        horizontalRule: baseStyle.horizontalRule,
+        bottomHalf: baseStyle.bottomHalf,
+        copyright: baseStyle.copyright,
+        creditCardIcon: {
+            width: '38px',
+            height: '22px'
+        },
+        customerService: {
+            marginBottom: 6
+        }
+    }
+}

package/app/theme/components/project/drawer-menu.js

@@ -0,0 +1,66 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {},
+        socialsContainer: {
+            flex: 1,
+            justifyContent: 'flex-start'
+        },
+        icon: {
+            color: 'gray.900',
+            width: 5,
+            height: 5
+        },
+        logo: {
+            width: 12,
+            height: 8
+        },
+        socialsItem: {
+            textAlign: 'center',
+            paddingLeft: 2,
+            paddingRight: 2
+        },
+        actions: {
+            paddingLeft: 4,
+            paddingRight: 4
+        },
+        actionsItem: {
+            paddingTop: 3,
+            paddingBottom: 3
+        },
+        localeSelector: {
+            paddingTop: 1,
+            paddingBottom: 1
+        },
+        signout: {
+            width: '100%',
+            paddingLeft: 8,
+            paddingTop: 2,
+            paddingBottom: 2,
+            _focus: {
+                borderRadius: 0,
+                boxShadow: 'outline'
+            }
+        },
+        signoutText: {
+            marginLeft: 2,
+            fontSize: 14,
+            fontWeight: 'normal'
+        }
+    },
+    parts: [
+        'actions',
+        'actionsItem',
+        'container',
+        'icon',
+        'localeSelector',
+        'socials',
+        'socialsItem',
+        'signout'
+    ]
+}

package/app/theme/components/project/footer.js

@@ -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
+ */
+export default {
+    parts: [
+        'container',
+        'content',
+        'subscribe',
+        'subscribeField',
+        'subscribeButtonContainer',
+        'subscribeHeading',
+        'subscribeMessage',
+        'localeSelector',
+        'bottomHalf',
+        'horizontalRule',
+        'copyright',
+        'socialIcons'
+    ],
+    baseStyle: {
+        container: {
+            width: 'full',
+            background: 'gray.900'
+        },
+        content: {
+            maxWidth: 'container.xxl',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            color: 'white',
+            paddingTop: {base: 8, lg: 10},
+            paddingBottom: 8,
+            paddingLeft: [4, 4, 6, 8],
+            paddingRight: [4, 4, 6, 8]
+        },
+        subscribe: {
+            maxWidth: {base: '21.5rem', lg: 'none'}
+        },
+        subscribeField: {
+            background: 'white',
+            color: 'gray.900'
+        },
+        subscribeButtonContainer: {
+            width: 'auto'
+        },
+        subscribeHeading: {
+            fontSize: 'md',
+            marginBottom: 2
+        },
+        subscribeMessage: {
+            fontSize: 'sm',
+            marginBottom: 4
+        },
+        localeSelector: {
+            display: 'inline-block',
+            marginTop: 8
+        },
+        localeDropdown: {
+            background: 'gray.800',
+            _hover: {
+                background: 'whiteAlpha.500'
+            }
+        },
+        localeDropdownOption: {
+            color: 'black'
+        },
+        bottomHalf: {
+            maxWidth: {base: '34.5rem', lg: '100%'}
+        },
+        horizontalRule: {
+            marginTop: 4,
+            marginBottom: 4
+        },
+        copyright: {
+            fontSize: 'sm',
+            marginBottom: 6,
+            color: 'gray.50'
+        },
+        socialIcons: {
+            marginTop: 4
+        }
+    }
+}

package/app/theme/components/project/header.js

@@ -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
+ */
+export default {
+    baseStyle: {
+        container: {
+            minWidth: 'xs',
+            width: 'full',
+            boxShadow: 'base',
+            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]
+        },
+        searchContainer: {
+            order: [2, 2, 2, 'inherit'],
+            width: ['full', 'full', 'full', 60],
+            marginRight: [0, 0, 0, 4],
+            marginBottom: [1, 1, 2, 0]
+        },
+        bodyContainer: {
+            flex: '1'
+        },
+        logo: {
+            width: [8, 8, 8, 12],
+            height: [6, 6, 6, 8]
+        },
+        icons: {
+            marginBottom: [1, 1, 2, 0]
+        },
+        accountIcon: {
+            height: 11,
+            cursor: 'pointer',
+            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
+            _focus: {
+                boxShadow: 'outline'
+            },
+            _focusVisible: {
+                outline: 0
+            }
+        },
+        arrowDown: {
+            height: 11,
+            marginRight: 0,
+            alignSelf: ['self-start', 'self-start', 'self-start', 'auto'],
+            cursor: 'pointer',
+            _focus: {
+                boxShadow: 'outline'
+            },
+            _focusVisible: {
+                outline: 0
+            },
+            display: ['none', 'none', 'none', 'block']
+        },
+        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
+        }
+    },
+    parts: ['container', 'content', 'searchContainer', 'bodyContainer', 'logo', 'icons', 'signout']
+}

package/app/theme/components/project/image-gallery.js

@@ -0,0 +1,59 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {},
+        heroImage: {},
+        heroImageGroup: {
+            marginBottom: 2
+        },
+        heroImageSkeleton: {
+            marginBottom: 2
+        },
+        thumbnailImageGroup: {},
+        thumbnailImageItem: {
+            flexShrink: 0,
+            cursor: 'pointer',
+            flexBasis: [20, 20, 24],
+            borderStyle: 'solid',
+            marginBottom: [1, 1, 2, 2],
+            marginRight: [1, 1, 2, 2],
+            _focus: {
+                boxShadow: 'outline'
+            },
+            _focusVisible: {
+                outline: 0
+            }
+        },
+        thumbnailImageSkeleton: {
+            marginRight: 2,
+            width: [20, 20, 24, 24]
+        }
+    },
+    sizes: {
+        sm: {
+            heroImageSkeleton: {
+                maxWidth: ['none', 'none', 'none', '500px']
+            },
+            heroImage: {
+                maxWidth: ['none', 'none', 'none', '500px']
+            }
+        },
+        md: {
+            heroImageSkeleton: {
+                maxWidth: ['none', 'none', 'none', '680px']
+            },
+            heroImage: {
+                maxWidth: ['none', 'none', 'none', '680px']
+            }
+        }
+    },
+    defaultProps: {
+        size: 'md'
+    },
+    parts: ['container', 'heroImageGroup', 'heroImage', 'heroImageSkeleton', 'thumbnailImageGroup']
+}