@graphcommerce/next-ui 6.1.1-canary.5 → 6.2.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
+### Patch Changes
+
+- [#1897](https://github.com/graphcommerce-org/graphcommerce/pull/1897) [`f44d7cec6`](https://github.com/graphcommerce-org/graphcommerce/commit/f44d7cec61766f4768c30d29b211a12f2846e9f6) - Overlays can now be configured to get a bgColor ([@FrankHarland](https://github.com/FrankHarland))
+
+## 6.2.0-canary.8
+
+## 6.2.0-canary.7
+
+## 6.2.0-canary.6
+
 ## 6.1.1-canary.5
 
 ### Patch Changes

package/Fab/Fab.tsx

@@ -23,6 +23,7 @@ export function Fab(props: FabProps) {
     sx = [],
     icon,
     circularProgress,
+    color = 'default',
     ...fabProps
   } = props
 
@@ -33,7 +34,7 @@ export function Fab(props: FabProps) {
   return (
     <FabBase
       type='submit'
-      color='primary'
+      color={color}
       size={size}
       {...fabProps}
       disabled={disabled}
@@ -45,6 +46,7 @@ export function Fab(props: FabProps) {
       {loading && (
         <CircularProgress
           size={fabSize}
+          color={color !== 'primary' ? 'primary' : 'inherit'}
           {...circularProgress}
           sx={[
             { display: 'flex', placeContent: 'center', gridArea: '1/1' },

package/IconSvg/IconSvg.tsx

@@ -88,7 +88,7 @@ const Svg = styled('svg', { name, target: name })(() => [
 /**
  * IconSvg component is supposed to be used in combination with `icons`
  *
- * @see https://graphcommerce-docs.vercel.app/framework/icons
+ * @see https://www.graphcommerce.org/docs/framework/icons
  */
 export const IconSvg = forwardRef<SVGSVGElement, IconSvgProps>((props, ref) => {
   const { src, size, fillIcon, className, ...svgProps } = useThemeProps({ props, name })

package/Layout/components/LayoutHeader.tsx

@@ -52,6 +52,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     switchPoint,
     size = 'responsive',
     sx = [],
+    bgColor,
   } = props
   const showBack = useShowBack()
   const showClose = useShowClose()
@@ -149,6 +150,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
         floatingMd={floatingMd}
         floatingSm={floatingSm}
         switchPoint={switchPoint}
+        bgColor={bgColor}
       >
         {children}
       </LayoutHeaderContent>

package/Layout/components/LayoutHeaderContent.tsx

@@ -18,6 +18,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   sxBg?: SxProps<Theme>
   layout?: LayoutProps['layout']
   size?: 'small' | 'responsive'
+  bgColor?: 'paper' | 'default'
 } & Pick<LayoutProps, 'layout' | 'layoutDependency'>
 
 type OwnerState = {
@@ -26,7 +27,9 @@ type OwnerState = {
   scrolled: boolean
   divider: boolean
   size: 'small' | 'responsive'
+  bgColor?: 'paper' | 'default'
 }
+
 const name = 'LayoutHeaderContent' as const
 const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
@@ -47,12 +50,13 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     layout,
     layoutDependency,
     size = 'responsive',
+    bgColor = 'paper',
   } = props
 
   const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size })
+  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size, bgColor })
 
   return (
     <>
@@ -63,7 +67,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             position: 'absolute',
             left: 0,
             width: '100%',
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: theme.palette.background[bgColor],
             boxShadow: theme.shadows[1],
 
             height: theme.appShell.headerHeightSm,

package/LayoutDefault/components/LayoutDefault.tsx

@@ -127,7 +127,19 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             })}
           >
             {menuFab}
-            {cartFab}
+            <Box
+              sx={(theme) => ({
+                display: 'flex',
+                flexDirection: 'row-reverse',
+                gap: theme.spacings.sm,
+                [theme.breakpoints.up('md')]: {
+                  flexDirection: 'column',
+                  alignItems: 'flex-end',
+                },
+              })}
+            >
+              {cartFab}
+            </Box>
           </Box>
         ) : (
           <div />

package/Overlay/components/OverlayBase.tsx

@@ -32,6 +32,7 @@ type StyleProps = {
   sizeMd?: LayoutOverlaySize
   justifySm?: LayoutOverlayAlign
   justifyMd?: LayoutOverlayAlign
+  bgColor?: 'paper' | 'default'
 }
 
 type OverridableProps = {
@@ -102,6 +103,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     sxBackdrop = [],
     active,
     onClosed,
+    bgColor = 'paper',
     direction = 1,
     offsetPageY = 0,
     isPresent,
@@ -405,7 +407,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                   height: '1px',
                   top: 'calc(100% - 1px)',
                   left: '0',
-                  background: theme.palette.background.paper,
+                  background: theme.palette.background[bgColor],
                 },
               },
             },
@@ -592,7 +594,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             <Box
               className={classes.background}
               sx={(theme) => ({
-                backgroundColor: theme.palette.background.paper,
+                backgroundColor: theme.palette.background[bgColor],
                 paddingBottom: '0.1px',
                 [theme.breakpoints.down('md')]: {
                   minHeight: '100%',

package/Snackbar/MessageSnackbarImpl.tsx

@@ -70,9 +70,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose?.()
   }
 
-  const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault()
+  const preventAnimationBubble = (
+    e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,
+  ) => {
     e.stopPropagation()
+    if (e.type === 'mousedown') {
+      e.preventDefault()
+    }
   }
 
   let icon = iconCheckmark
@@ -144,6 +148,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 size='small'
                 onClick={hideSnackbar}
                 onMouseDown={preventAnimationBubble}
+                onTouchStart={preventAnimationBubble}
                 sx={(theme) => ({
                   backgroundColor: lighten(theme.palette.background.paper, 0.1),
                 })}

package/icons/compare-arrows.svg

@@ -0,0 +1,9 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="compareIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> 
+<title id="compareIconTitle">Compare</title> 
+<symbol id="icon" viewBox="0 0 24 24">
+<path d="M12 9L22 9" />
+<path d="M16.5 4.5L12 9L16.5 13.5"/>
+<path d="M12 15L2 15"  />
+<path d="M7.5 19.5L12 15L7.5 10.5" />
+</symbol>
+</svg>

package/icons/index.ts

@@ -45,3 +45,4 @@ export { default as iconSearch } from './search.svg'
 export { default as iconPhone } from './smartphone.svg'
 export { default as iconStar } from './star.svg'
 export { default as iconSun } from './sun.svg'
+export { default as iconCompare } from './compare-arrows.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.1.1-canary.5",
+  "version": "6.2.0-canary.10",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.6",
-    "@graphcommerce/framer-next-pages": "6.1.1-canary.5",
-    "@graphcommerce/framer-scroller": "6.1.1-canary.5",
-    "@graphcommerce/framer-utils": "6.1.1-canary.5",
-    "@graphcommerce/image": "6.1.1-canary.5",
+    "@graphcommerce/framer-next-pages": "6.2.0-canary.10",
+    "@graphcommerce/framer-scroller": "6.2.0-canary.10",
+    "@graphcommerce/framer-utils": "6.2.0-canary.10",
+    "@graphcommerce/image": "6.2.0-canary.10",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.1.1-canary.5",
-    "@graphcommerce/prettier-config-pwa": "6.1.1-canary.5",
-    "@graphcommerce/typescript-config-pwa": "6.1.1-canary.5",
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.10",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.10",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.10",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.5"