@graphcommerce/next-ui 6.0.0-canary.46 → 6.0.0-canary.48

package/ActionCard/ActionCard.tsx

@@ -1,4 +1,13 @@
-import { alpha, Box, BoxProps, ButtonBase, ButtonProps, SxProps, Theme } from '@mui/material'
+import {
+  alpha,
+  Box,
+  BoxProps,
+  ButtonBase,
+  ButtonProps,
+  lighten,
+  SxProps,
+  Theme,
+} from '@mui/material'
 import React from 'react'
 import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
@@ -143,10 +152,10 @@ export function ActionCard(props: ActionCardProps) {
               borderBottom: `1px solid ${theme.palette.divider}`,
             },
             '&.selected': {
-              backgroundColor: `${alpha(
-                theme.palette[color].main,
-                theme.palette.action.hoverOpacity,
-              )}`,
+              backgroundColor:
+                theme.palette.mode === 'light'
+                  ? alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+                  : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
             },
             '&.error': {
               backgroundColor: `${alpha(

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 6.0.0-canary.48
+
+## 6.0.0-canary.47
+
+### Minor Changes
+
+- [#1832](https://github.com/graphcommerce-org/graphcommerce/pull/1832) [`26d4243d5`](https://github.com/graphcommerce-org/graphcommerce/commit/26d4243d5b63d604e5a36386d9b01914db5f2918) - - Introduce RowLink component with variants (inline, logoswiper etc.)
+  - Add new ImageLabelSwiper component to homepage
+  - Multiple darkmode fixes (layered navition, logo invert filter) ([@ErwinOtten](https://github.com/ErwinOtten))
+
 ## 6.0.0-canary.46
 
 ## 6.0.0-canary.45

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -86,17 +86,26 @@ export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
             },
             ...(selected
               ? {
-                  background: lighten(
-                    theme.palette.primary.main,
-                    1 - theme.palette.action.hoverOpacity,
-                  ),
-                  border: `1px solid transparent`,
+                  background:
+                    theme.palette.mode === 'light'
+                      ? lighten(theme.palette.primary.main, 1 - theme.palette.action.hoverOpacity)
+                      : lighten(
+                          theme.palette.background.default,
+                          theme.palette.action.hoverOpacity,
+                        ),
+                  border: '1px solid transparent',
                   '&.MuiChip-clickable:hover': {
-                    background: lighten(
-                      theme.palette.primary.main,
-                      1 - theme.palette.action.hoverOpacity * 2,
-                    ),
-                    border: `1px solid transparent`,
+                    background:
+                      theme.palette.mode === 'light'
+                        ? lighten(
+                            theme.palette.primary.main,
+                            1 - theme.palette.action.hoverOpacity * 2,
+                          )
+                        : lighten(
+                            theme.palette.background.default,
+                            theme.palette.action.hoverOpacity * 2,
+                          ),
+                    border: '1px solid transparent',
                   },
                 }
               : {}),

package/Row/HeroBanner/HeroBanner.tsx

@@ -1,68 +1,58 @@
-import { ContainerProps, useTheme, useMediaQuery, Box, styled } from '@mui/material'
+import { clientSize } from '@graphcommerce/framer-utils'
+import { ContainerProps, Box, styled, Theme, SxProps } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
-import { extendableComponent } from '../../Styles'
-import { breakpointVal } from '../../Styles/breakpointVal'
-import { responsiveVal } from '../../Styles/responsiveVal'
+import { extendableComponent, responsiveVal } from '../../Styles'
 import { Row } from '../Row'
 
 export type HeroBannerProps = ContainerProps & {
   pageLinks: React.ReactNode
   videoSrc: string
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
 const compName = 'HeroBanner' as const
 const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
 const { classes } = extendableComponent(compName, parts)
 
-const MotionDiv = styled(m.div)({})
+const MotionVideo = styled(m.video)({})
 
 export function HeroBanner(props: HeroBannerProps) {
-  const { pageLinks, videoSrc, children, ...containerProps } = props
-  const t = useTheme()
+  const { pageLinks, videoSrc, children, sx = [], ...containerProps } = props
   const scrollY = useScrollY()
-  const width = useTransform(
-    scrollY,
-    [10, 150],
-    [`calc(100% - ${responsiveVal(20, 60)}))`, `calc(100% - ${responsiveVal(0, 0)})`],
-  )
-  const matches = useMediaQuery(t.breakpoints.down('md'))
-  const borderRadius = useTransform(
-    scrollY,
-    [10, 150],
-    [`${responsiveVal(8, 12)}`, `${responsiveVal(0, 0)}`],
+  const scale = useTransform([scrollY, clientSize.y], ([scrollYCurr, clientSizeYCurr]: number[]) =>
+    clientSizeYCurr ? (scrollYCurr / clientSizeYCurr) * 1.7 + 1 : 1,
   )
 
   return (
-    <Row maxWidth={false} {...containerProps} disableGutters className={classes.root}>
-      <Box className={classes.wrapper} sx={{ position: 'relative' }}>
+    <Row
+      maxWidth={false}
+      {...containerProps}
+      className={classes.root}
+      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Box
+        className={classes.wrapper}
+        sx={(theme) => ({
+          display: 'grid',
+          overflow: 'hidden',
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          isolation: 'isolate',
+        })}
+      >
         <Box
           className={classes.copy}
           sx={(theme) => ({
+            gridArea: '1 / 1',
             zIndex: 1,
-            color: theme.palette.secondary.contrastText,
-            position: 'relative',
             display: 'grid',
             justifyItems: 'center',
             alignContent: 'center',
-            padding: `${theme.spacings.lg} ${theme.spacings.md}`,
-            paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
-            minHeight: `calc(100vh - ${theme.appShell.headerHeightSm})`,
-            '& > *': {
-              zIndex: 1,
-              maxWidth: 'max-content',
-            },
-            [theme.breakpoints.up('md')]: {
-              width: '70%',
-              minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
-            },
-            [theme.breakpoints.up('lg')]: {
-              padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
-              paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
-              width: '50%',
-            },
+            textAlign: 'center',
+            p: theme.spacings.md,
+            color: theme.palette.secondary.contrastText,
           })}
         >
           {children}
@@ -70,58 +60,28 @@ export function HeroBanner(props: HeroBannerProps) {
         </Box>
         <Box
           className={classes.asset}
-          sx={(theme) => ({
-            position: 'absolute',
-            top: '0',
-            zIndex: 0,
-            width: '100%',
-            height: '100%',
-            display: 'grid',
-            justifyItems: 'center',
-            overflow: 'hidden',
-            paddingBottom: theme.page.horizontal,
-            '& video': {
+          sx={{
+            gridArea: '1 / 1',
+            position: 'relative',
+          }}
+        >
+          <MotionVideo
+            src={videoSrc}
+            autoPlay
+            muted
+            loop
+            playsInline
+            disableRemotePlayback
+            className={classes.video}
+            style={{ scale }}
+            sx={{
+              position: 'absolute',
+              transition: 'transform 0.5s cubic-bezier(0.33, 1, 0.68, 1)',
               objectFit: 'cover',
               width: '100%',
               height: '100%',
-              [theme.breakpoints.down('md')]: {
-                ...breakpointVal(
-                  'borderRadius',
-                  theme.shape.borderRadius * 2,
-                  theme.shape.borderRadius * 3,
-                  theme.breakpoints.values,
-                ),
-              },
-            },
-            [theme.breakpoints.up('md')]: {
-              height: '100%',
-            },
-          })}
-        >
-          <MotionDiv
-            style={{ width: !matches ? width : 0, borderRadius }}
-            className={classes.animated}
-            sx={(theme) => ({
-              ...breakpointVal(
-                'borderRadius',
-                theme.shape.borderRadius * 2,
-                theme.shape.borderRadius * 3,
-                theme.breakpoints.values,
-              ),
-              overflow: 'hidden',
-              transform: 'translateZ(0)',
-            })}
-          >
-            <video
-              src={videoSrc}
-              autoPlay
-              muted
-              loop
-              playsInline
-              disableRemotePlayback
-              className={classes.video}
-            />
-          </MotionDiv>
+            }}
+          />
         </Box>
       </Box>
     </Row>

package/Row/RowLinks/RowLinks.tsx

@@ -0,0 +1,160 @@
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Box, ContainerProps, SxProps, Theme, Typography } from '@mui/material'
+import React from 'react'
+import { IconSvg } from '../../IconSvg'
+import { extendableComponent } from '../../Styles'
+import { useFabSize } from '../../Theme'
+import { iconChevronLeft, iconChevronRight } from '../../icons'
+import { Row } from '../Row'
+
+export type RowLinksProps = {
+  title: string
+  copy?: React.ReactNode
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+  inlineTitle?: boolean
+  showButtons?: 'auto' | 'desktopAuto' | 'always' | 'desktopAlways'
+} & Pick<ContainerProps, 'maxWidth'>
+
+const compName = 'RowLinks' as const
+const parts = [
+  'root',
+  'scroller',
+  'title',
+  'copy',
+  'swipperButton',
+  'centerRight',
+  'centerLeft',
+] as const
+const { classes } = extendableComponent(compName, parts)
+
+export function RowLinks(props: RowLinksProps) {
+  const {
+    title,
+    copy,
+    children,
+    sx = [],
+    inlineTitle,
+    showButtons = 'desktopAuto',
+    maxWidth,
+  } = props
+
+  const mode = {
+    ...(showButtons === 'auto' && {
+      '&.MuiFab-root': {
+        display: 'inline-flex',
+      },
+    }),
+    ...(showButtons === 'always' && {
+      opacity: 1,
+      transform: 'scale(1)',
+      '&.MuiFab-root': {
+        display: 'inline-flex',
+      },
+    }),
+    ...(showButtons === 'desktopAlways' && {
+      opacity: { md: 1 },
+      transform: { md: 'scale(1)' },
+      '&.MuiFab-root': {
+        display: { md: 'inline-flex' },
+      },
+    }),
+  }
+
+  const fabSize = useFabSize('responsive')
+
+  return (
+    <Row
+      className={classes.root}
+      sx={[{ position: 'relative' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      maxWidth={maxWidth}
+    >
+      {!inlineTitle && (
+        <Typography
+          variant='subtitle1'
+          component='h2'
+          className={classes.title}
+          sx={(theme) => ({ mb: theme.spacings.md })}
+        >
+          {title}
+        </Typography>
+      )}
+      {copy && (
+        <Box className={classes.copy} sx={(theme) => ({ my: theme.spacings.md })}>
+          {copy}
+        </Box>
+      )}
+      <ScrollerProvider scrollSnapAlign='end'>
+        <Scroller
+          className={classes.scroller}
+          hideScrollbar
+          sx={(theme) => ({
+            justifyContent: 'start',
+            gap: `${theme.spacings.md}`,
+            gridAutoColumns: `max-content`,
+            alignItems: 'center',
+            '&.smGridDirInline > *': {
+              scrollSnapAlign: {
+                xs: 'center',
+                md: 'end',
+              },
+            },
+          })}
+        >
+          {inlineTitle && (
+            <Typography variant='subtitle1' component='h2' className={classes.title}>
+              {title}
+            </Typography>
+          )}
+          {children}
+        </Scroller>
+        <Box
+          className={classes.centerLeft}
+          sx={(theme) => ({
+            display: 'grid',
+            gridAutoFlow: 'row',
+            gap: theme.spacings.xxs,
+            position: 'absolute',
+            left: theme.spacings.sm,
+            top: `calc(50% - calc(${fabSize} / 2))`,
+          })}
+        >
+          <ScrollerButton
+            direction='left'
+            className={classes.swipperButton}
+            sx={{
+              display: 'flex',
+              zIndex: 'inherit',
+              ...mode,
+            }}
+            size='responsive'
+          >
+            <IconSvg src={iconChevronLeft} />
+          </ScrollerButton>
+        </Box>
+        <Box
+          className={classes.centerRight}
+          sx={(theme) => ({
+            display: 'grid',
+            gap: theme.spacings.xxs,
+            position: 'absolute',
+            right: theme.spacings.sm,
+            top: `calc(50% - calc(${fabSize} / 2))`,
+          })}
+        >
+          <ScrollerButton
+            direction='right'
+            className={classes.swipperButton}
+            sx={{
+              display: 'flex',
+              ...mode,
+            }}
+            size='responsive'
+          >
+            <IconSvg src={iconChevronRight} />
+          </ScrollerButton>
+        </Box>
+      </ScrollerProvider>
+    </Row>
+  )
+}

package/Row/RowLinks/variant/VariantImageLabelSwiper.tsx

@@ -0,0 +1,25 @@
+import { RowLinks, RowLinksProps } from '../RowLinks'
+
+export function VariantImageLabelSwiper(props: RowLinksProps) {
+  const { title, copy, children, sx = [], maxWidth, showButtons } = props
+
+  return (
+    <RowLinks
+      maxWidth={maxWidth}
+      showButtons={showButtons}
+      title={title}
+      copy={copy}
+      sx={[
+        {
+          '& .RowLinks-title': {
+            typography: 'h5',
+            textTransform: 'uppercase',
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {children}
+    </RowLinks>
+  )
+}

package/Row/RowLinks/variant/VariantInline.tsx

@@ -0,0 +1,17 @@
+import { RowLinks, RowLinksProps } from '../RowLinks'
+
+export function VariantInline(props: RowLinksProps) {
+  const { title, children, sx = [], maxWidth, showButtons } = props
+
+  return (
+    <RowLinks
+      title={title}
+      showButtons={showButtons}
+      maxWidth={maxWidth}
+      inlineTitle
+      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      {children}
+    </RowLinks>
+  )
+}

package/Row/RowLinks/variant/VariantLogoSwiper.tsx

@@ -0,0 +1,29 @@
+import { RowLinks, RowLinksProps } from '../RowLinks'
+
+export function VariantLogoSwiper(props: RowLinksProps) {
+  const { title, children, sx = [], maxWidth, showButtons } = props
+
+  return (
+    <RowLinks
+      showButtons={showButtons}
+      maxWidth={maxWidth}
+      title={title}
+      sx={[
+        (theme) => ({
+          '& .RowLinks-title': {
+            display: 'none',
+          },
+          '& .Scroller-root': {
+            margin: '0 auto',
+            width: 'auto',
+            maxWidth: 'fit-content',
+            gap: theme.spacings.xxl,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {children}
+    </RowLinks>
+  )
+}

package/Row/RowLinks/variant/VariantUsps.tsx

@@ -0,0 +1,30 @@
+import { RowLinks, RowLinksProps } from '../RowLinks'
+
+export function VariantUsps(props: RowLinksProps) {
+  const { title, children, sx = [], maxWidth, showButtons } = props
+
+  return (
+    <RowLinks
+      title={title}
+      showButtons={showButtons}
+      maxWidth={maxWidth}
+      inlineTitle
+      sx={[
+        (theme) => ({
+          '& .RowLinks-title': {
+            display: 'none',
+          },
+          '& .Scroller-root': {
+            margin: '0 auto',
+            width: 'auto',
+            maxWidth: 'fit-content',
+            gap: theme.spacings.lg,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {children}
+    </RowLinks>
+  )
+}

package/Row/RowLinks/variant/index.ts

@@ -0,0 +1,4 @@
+export * from './VariantLogoSwiper'
+export * from './VariantImageLabelSwiper'
+export * from './VariantInline'
+export * from './VariantUsps'

package/Row/index.ts

@@ -16,3 +16,5 @@ export * from './ImageTextBoxed/ImageTextBoxed'
 export * from './ParagraphWithSidebarSlide/ParagraphWithSidebarSlide'
 export * from './Quote/Quote'
 export * from './SpecialBanner/SpecialBanner'
+export * from './RowLinks/RowLinks'
+export * from './RowLinks/variant'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.46",
+  "version": "6.0.0-canary.48",
   "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.0.0-canary.46",
-    "@graphcommerce/framer-scroller": "6.0.0-canary.46",
-    "@graphcommerce/framer-utils": "6.0.0-canary.46",
-    "@graphcommerce/image": "6.0.0-canary.46",
+    "@graphcommerce/framer-next-pages": "6.0.0-canary.48",
+    "@graphcommerce/framer-scroller": "6.0.0-canary.48",
+    "@graphcommerce/framer-utils": "6.0.0-canary.48",
+    "@graphcommerce/image": "6.0.0-canary.48",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.46",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.46",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.46",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.48",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.48",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.48",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.5"