@graphcommerce/next-ui 3.18.2 → 3.19.0

package/AppShell/AppShellHeader/index.tsx

@@ -201,6 +201,7 @@ const useStyles = makeStyles(
     sheetShellActionsNoButtonShadow: {
       [theme.breakpoints.down('sm')]: {
         '& * > button': {
+          backgroundColor: 'unset',
           boxShadow: 'none',
         },
       },

package/AppShell/DesktopNavBar.tsx

@@ -62,6 +62,7 @@ const useStyles = makeStyles(
       '&:hover': {
         textDecoration: 'none',
       },
+      fontWeight: theme.typography.fontWeightBold,
       paddingTop: 6,
     },
     line: {
@@ -101,7 +102,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
           {menu.map(({ href, children, ...linkProps }) => (
             <PageLink key={href.toString()} href={href} {...linkProps} passHref>
               <Link
-                variant='h6'
+                variant='subtitle1'
                 {...LinkProps}
                 className={clsx(classes.link, LinkProps?.className)}
               >

package/AppShell/Footer/index.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('xs')]: {
         gridAutoFlow: 'row',
         textAlign: 'center',
-        gap: 4,
+        gap: 8,
       },
     },
     support: {

package/AppShell/MenuFab.tsx

@@ -15,7 +15,7 @@ import React, { useEffect } from 'react'
 import { UseStyles } from '../Styles'
 import responsiveVal from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconMenu } from '../icons'
+import { iconMenu, iconClose } from '../icons'
 import { MenuProps } from './Menu'
 import useFabAnimation from './useFabAnimation'
 
@@ -43,13 +43,17 @@ const useStyles = makeStyles(
         background: theme.palette.text.primary,
       },
       '& svg': {
-        stroke: theme.palette.background.default,
+        color: theme.palette.background.paper,
       },
     },
     menu: {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
       minWidth: responsiveVal(200, 280),
+      marginTop: `calc(${responsiveVal(42, 56)} + 3px)`,
+      [theme.breakpoints.down('sm')]: {
+        marginTop: `calc((${responsiveVal(42, 56)} + 12px) * -1)`,
+      },
     },
     menuItemText: {
       ...theme.typography.h4,
@@ -65,10 +69,11 @@ export type MenuFabProps = MenuProps &
     children?: React.ReactNode
     search?: React.ReactNode
     menuIcon?: React.ReactNode
+    closeIcon?: React.ReactNode
   }
 
 export default function MenuFab(props: MenuFabProps) {
-  const { menu, children, search, menuIcon } = props
+  const { menu, children, search, menuIcon, closeIcon } = props
   const classes = useStyles(props)
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
@@ -90,7 +95,12 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        {menuIcon ?? <SvgImageSimple src={iconMenu} inverted />}
+        {closeIcon ?? (
+          <SvgImageSimple src={iconClose} inverted style={{ display: openEl ? 'block' : 'none' }} />
+        )}
+        {menuIcon ?? (
+          <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
+        )}
       </Fab>
 
       <Menu

package/Blog/BlogAuthor/index.tsx

@@ -1,5 +1,6 @@
 import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
+import { responsiveVal } from '../..'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
@@ -12,20 +13,23 @@ const useStyles = makeStyles(
       marginBottom: theme.spacings.md,
     },
     authorChip: {
-      height: 66,
+      height: responsiveVal(44, 66),
       '& .MuiChip-label': {
-        paddingLeft: 14,
-        paddingRight: 14,
+        paddingLeft: responsiveVal(10, 14),
+        paddingRight: responsiveVal(14, 18),
       },
       '& .MuiAvatar-root': {
-        width: 44,
-        height: 44,
+        width: responsiveVal(28, 44),
+        height: responsiveVal(28, 44),
       },
     },
     date: {
+      lineHeight: 1.4,
       color: theme.palette.text.disabled,
     },
-    author: {},
+    author: {
+      lineHeight: 1.4,
+    },
   }),
   { name: 'BlogAuthor' },
 )

package/Blog/BlogHeader/index.tsx

@@ -1,5 +1,6 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
+import { responsiveVal } from '../..'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
 
@@ -10,7 +11,11 @@ const useStyles = makeStyles(
       margin: `0 auto`,
       marginBottom: theme.spacings.md,
     },
-    asset: {},
+    asset: {
+      '& img': {
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+      },
+    },
   }),
   { name: 'BlogHeader' },
 )

package/Blog/BlogListItem/index.tsx

@@ -24,6 +24,7 @@ const useStyles = makeStyles(
       overflow: 'hidden',
       height: '100%',
       width: '100%',
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       '& img': {
         height: '100% !important',
         objectFit: 'cover',

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.19.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.2...@graphcommerce/next-ui@3.19.0) (2021-12-01)
+
+
+### Bug Fixes
+
+* borderRadius ([0999901](https://github.com/ho-nl/m2-pwa/commit/0999901f6a3265f40fef18e72702d80158d8c4a9))
+* borderRadius ([b9cffcc](https://github.com/ho-nl/m2-pwa/commit/b9cffccf444cb2ff8d6257ef3a64c0ea18e30477))
+* borderRadius toggleButton ([4a97800](https://github.com/ho-nl/m2-pwa/commit/4a97800150bbfe03692a66d7fbde5705a32b9cd7))
+* build ([ba97378](https://github.com/ho-nl/m2-pwa/commit/ba97378d40d70b3f47c4c252600c669a53568c27))
+* build ([b6cb704](https://github.com/ho-nl/m2-pwa/commit/b6cb7048c1208648687621000ab0d6789032d480))
+* finetune svg stroke width ([d788d72](https://github.com/ho-nl/m2-pwa/commit/d788d72c88d5b924a14e9fdde1a52f62be7c274c))
+* flicker on menu icon ([04d9633](https://github.com/ho-nl/m2-pwa/commit/04d96331cfdd4678a56a4eb9170141800c03a6a1))
+* hero text spacing ([79dd6aa](https://github.com/ho-nl/m2-pwa/commit/79dd6aa2fe576104ebbbdd092f6b415d319dec48))
+* icon OrderBefore ([25a2390](https://github.com/ho-nl/m2-pwa/commit/25a2390321c7047c5191a15a9352020b8161ff7a))
+* icons ([c561e20](https://github.com/ho-nl/m2-pwa/commit/c561e20a247fef5ea33ac10dbecf55d1e5500dec))
+* prevent scaling of video on mobile ([168b5b9](https://github.com/ho-nl/m2-pwa/commit/168b5b9451dbe373703ebc76c44516d1c0eb316f))
+* Tap targets are not sized appropriately ([b3b3339](https://github.com/ho-nl/m2-pwa/commit/b3b33398c26cfe775f2e9fc4dacd8eaad2e02725))
+
+
+### Features
+
+* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+* breakpointVal ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
+* closeable menu ([5f94bb5](https://github.com/ho-nl/m2-pwa/commit/5f94bb5644ce1058ec705a8acced71ba2ba95e04))
+* icon for 404 ([ff32915](https://github.com/ho-nl/m2-pwa/commit/ff3291578719cb7105d1045d68a78952b27da7fe))
+* introduce borderRadius ([183afbc](https://github.com/ho-nl/m2-pwa/commit/183afbc8ee269f6694c372b06afdf41302f86c09))
+* responsiveTyp ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
+
+
+
+
+
 ## [3.18.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.1...@graphcommerce/next-ui@3.18.2) (2021-11-27)
 
 

package/Form/index.tsx

@@ -1,6 +1,7 @@
-import { darken, makeStyles, Theme } from '@material-ui/core'
+import { darken, lighten, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { responsiveVal } from '..'
 import { UseStyles } from '../Styles'
 
 const useStyles = makeStyles(
@@ -14,12 +15,16 @@ const useStyles = makeStyles(
       background: theme.palette.secondary.light,
     },
     default: {
-      background: darken(theme.palette.background.paper, 0.02),
+      background:
+        theme.palette.type === 'light'
+          ? darken(theme.palette.background.default, 0.03)
+          : lighten(theme.palette.background.default, 0.2),
     },
     contained: {
       padding: theme.spacings.sm,
+      // paddingTop: theme.spacings.md,
       overflow: 'hidden',
-      borderRadius: 6,
+      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
     },
   }),
   { name: 'Form' },

package/FramerScroller/components/SidebarGallery.tsx

@@ -108,7 +108,7 @@ const useStyles = makeStyles(
     sidebar: {
       boxSizing: 'border-box',
       width: '100%',
-      padding: `${theme.spacings.md} ${theme.page.horizontal}`,
+      padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
       [theme.breakpoints.up('md')]: {
         paddingLeft: theme.spacings.lg,
       },

package/Row/HeroBanner/index.tsx

@@ -1,4 +1,4 @@
-import { ContainerProps, Theme, makeStyles } from '@material-ui/core'
+import { ContainerProps, Theme, makeStyles, useTheme, useMediaQuery } from '@material-ui/core'
 import { m, useTransform, useViewportScroll } from 'framer-motion'
 import React from 'react'
 import Row from '..'
@@ -7,10 +7,6 @@ import responsiveVal from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    container: {
-      paddingLeft: 0,
-      paddingRight: 0,
-    },
     wrapper: {
       position: 'relative',
     },
@@ -22,6 +18,7 @@ const useStyles = makeStyles(
       justifyItems: 'center',
       alignContent: 'center',
       padding: `${theme.spacings.lg} ${theme.spacings.md}`,
+      paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
       minHeight: `calc(100vh - ${theme.page.headerInnerHeight.sm})`,
       '& > *': {
         zIndex: 1,
@@ -38,6 +35,7 @@ const useStyles = makeStyles(
       },
       [theme.breakpoints.up('lg')]: {
         padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+        paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
         width: '50%',
       },
     },
@@ -55,11 +53,18 @@ const useStyles = makeStyles(
         objectFit: 'cover',
         width: '100%',
         height: '100%',
+        [theme.breakpoints.down('sm')]: {
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+        },
       },
       [theme.breakpoints.up('md')]: {
         height: '100%',
       },
     },
+    animated: {
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+      overflow: 'hidden',
+    },
   }),
   { name: 'HeroBanner' },
 )
@@ -74,23 +79,29 @@ export type HeroBannerProps = UseStyles<typeof useStyles> &
 export default function HeroBanner(props: HeroBannerProps) {
   const { pageLinks, videoSrc, children, ...containerProps } = props
   const classes = useStyles(props)
-
+  const theme = useTheme()
   const { scrollY } = useViewportScroll()
-  const actionsAnimWidth = useTransform(
+  const width = useTransform(
+    scrollY,
+    [10, 150],
+    [`calc(100% - ${responsiveVal(20, 60)}))`, `calc(100% - ${responsiveVal(0, 0)})`],
+  )
+  const matches = useMediaQuery(theme.breakpoints.down('sm'))
+  const borderRadius = useTransform(
     scrollY,
     [10, 150],
-    [`calc(100% - ${responsiveVal(30, 60)})`, `calc(100% - ${responsiveVal(0, 0)})`],
+    [`${responsiveVal(8, 12)}`, `${responsiveVal(0, 0)}`],
   )
 
   return (
-    <Row maxWidth={false} {...containerProps} className={classes.container}>
+    <Row maxWidth={false} {...containerProps} disableGutters>
       <div className={classes.wrapper}>
         <div className={classes.copy}>
           {children}
           {pageLinks}
         </div>
         <div className={classes.asset}>
-          <m.div style={{ width: actionsAnimWidth }}>
+          <m.div style={{ width: !matches ? width : 0, borderRadius }} className={classes.animated}>
             <video src={videoSrc} autoPlay muted loop playsInline disableRemotePlayback />
           </m.div>
         </div>

package/Row/ImageText/index.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
+import { responsiveVal } from '../..'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
@@ -13,12 +14,15 @@ const useStyles = makeStyles(
           : theme.palette.background.paper,
       justifyItems: 'center',
       columnGap: theme.spacings.lg,
-      padding: `${theme.spacings.xl} 0`,
+      paddingTop: theme.spacings.lg,
+      paddingBottom: theme.spacings.lg,
       [theme.breakpoints.up('md')]: {
-        padding: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
         background: 'none',
         gridTemplateColumns: '1fr 1fr',
       },
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
     },
     asset: {
       height: '100%',
@@ -27,6 +31,7 @@ const useStyles = makeStyles(
         height: '100%',
         width: '100%',
         objectFit: 'cover',
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       },
     },
     copy: {
@@ -64,9 +69,11 @@ export default function ImageText(props: ImageTextProps) {
   const classes = useStyles(props)
 
   return (
-    <Row className={classes.wrapper}>
-      <div className={classes.asset}>{item}</div>
-      <div className={classes.copy}>{children}</div>
+    <Row maxWidth={false}>
+      <Row className={classes.wrapper}>
+        <div className={classes.asset}>{item}</div>
+        <div className={classes.copy}>{children}</div>
+      </Row>{' '}
     </Row>
   )
 }

package/Row/ImageTextBoxed/index.tsx

@@ -17,6 +17,8 @@ const useStyles = makeStyles(
         gridTemplateColumns: '1fr auto',
         columnGap: `${theme.spacings.lg}`,
       },
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+      overflow: 'hidden',
     },
     asset: {
       height: '100%',

package/Row/ParagraphWithSidebarSlide/index.tsx

@@ -1,5 +1,6 @@
 import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
 import Row from '..'
+import { responsiveVal } from '../..'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
@@ -27,6 +28,7 @@ const useStyles = makeStyles(
           filter: 'brightness(100%)',
           height: '100%',
         },
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       },
     },
     copy: {

package/Row/SpecialBanner/index.tsx

@@ -10,14 +10,16 @@ const useStyles = makeStyles(
       background: theme.palette.background.paper,
       justifyItems: 'center',
       columnGap: `${theme.spacings.lg}`,
-      padding: `${theme.spacings.lg} 0`,
+      paddingTop: theme.spacings.lg,
+      paddingBottom: theme.spacings.lg,
       justifySelf: 'start',
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       [theme.breakpoints.up('md')]: {
         padding: 0,
         background: 'none',
         justifySelf: 'center',
         gridTemplateColumns: '1fr 1fr',
-        columnGap: `${theme.spacings.md}`,
+        columnGap: `${theme.spacings.lg}`,
       },
     },
     asset: {
@@ -28,6 +30,7 @@ const useStyles = makeStyles(
         width: responsiveVal(200, 900),
         height: 'auto',
         objectFit: 'cover',
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       },
       [theme.breakpoints.up('lg')]: {
         width: responsiveVal(250, 900),
@@ -91,7 +94,7 @@ export default function SpecialBanner(props: SpecialBannerProps) {
 
   return (
     <Row maxWidth={false} {...containerProps}>
-      <div className={classes.wrapper}>
+      <Row maxWidth={false} className={classes.wrapper} disableGutters>
         <div className={classes.asset}>{asset}</div>
         <div className={classes.copy}>
           {topic && (
@@ -102,7 +105,7 @@ export default function SpecialBanner(props: SpecialBannerProps) {
           <div className={classes.textContainer}>{children}</div>
           <div className={classes.links}>{pageLinks}</div>
         </div>
-      </div>
+      </Row>
     </Row>
   )
 }

package/Styles/breakpointVal.tsx

@@ -0,0 +1,22 @@
+export default function breakpointVal(
+  property: string,
+  min: number,
+  max: number,
+  breakpointsObject: object,
+) {
+  const minSize = 320
+  const breakpoints = Object.values(breakpointsObject)
+  const spread = breakpoints[breakpoints.length - 1] - minSize
+
+  return Object.fromEntries(
+    breakpoints.map((breakpoint, index) => {
+      // Get the size between this breakpoint and the previous breakpoint
+      const between = (breakpoint + (breakpoints[index + 1] ?? breakpoint)) / 2
+      // Calculate the size of the value
+      const size = Math.max(min, ((between - minSize) / spread) * (max - min) + min)
+      const value = `${Math.round(size * 100) / 100}px`
+
+      return [`@media (min-width: ${breakpoint}px )`, { [property]: value }]
+    }),
+  )
+}

package/SvgImage/SvgImageSimple.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(
     sizeSmall: {
       width: responsiveVal(12, 16),
       height: responsiveVal(12, 16),
-      strokeWidth: 2.3,
+      strokeWidth: 2.1,
     },
     sizeLarge: {
       width: responsiveVal(24, 28),
@@ -39,12 +39,12 @@ const useStyles = makeStyles(
     sizeXl: {
       width: responsiveVal(38, 62),
       height: responsiveVal(38, 62),
-      strokeWidth: 1.5,
+      strokeWidth: 1.4,
     },
     sizeXxl: {
       width: responsiveVal(96, 148),
       height: responsiveVal(96, 148),
-      strokeWidth: 1,
+      strokeWidth: 0.8,
     },
     muted: {},
     inverted: {},
@@ -62,6 +62,7 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
 
 const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
   const {
+    style,
     className,
     size = 'medium',
     muted,
@@ -87,6 +88,7 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
         inverted && classes.inverted,
       )}
       aria-hidden='true'
+      style={style}
     >
       <use href={`${src}#icon`}></use>
     </svg>

package/ToggleButton/index.tsx

@@ -3,6 +3,7 @@
 import { capitalize, lighten, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { FormEvent } from 'react'
+import { responsiveVal } from '..'
 import Button, { ButtonProps } from '../Button'
 import { UseStyles } from '../Styles'
 
@@ -12,11 +13,7 @@ export const useStyles = makeStyles(
   (theme: Theme) => ({
     /* Styles applied to the root element. */
     root: {
-      backgroundColor:
-        theme.palette.type === 'light'
-          ? theme.palette.background.default
-          : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
-      borderRadius: 4,
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       border: `1px solid ${theme.palette.divider}`,
       '&$disabled': {
         borderWidth: 2,

package/UspList/UspListItem.tsx

@@ -10,13 +10,15 @@ const useStyles = makeStyles(
       display: 'grid',
       gridAutoFlow: 'column',
       alignItems: 'center',
-      gridTemplateColumns: `${responsiveVal(22, 32)} auto`,
+      gridTemplateColumns: `${responsiveVal(32, 38)} auto`,
       gap: theme.spacings.xs,
       '& > p': {
         ...theme.typography.body2,
       },
     },
     icon: {
+      display: 'flex',
+
       '& > * > img': {
         display: 'block',
       },

package/icons/index.tsx

@@ -24,6 +24,7 @@ export { default as iconPhone } from './smartphone.svg'
 export { default as iconPlus } from './plus.svg'
 export { default as iconClose } from './close.svg'
 export { default as iconFullscreen } from './maximise.svg'
+export { default as iconOrderBefore } from './calendar.svg'
 export { default as iconBox } from './box.svg'
 export { default as iconHome } from './home-alt.svg'
 export { default as iconId } from './credit-card.svg'
@@ -34,3 +35,4 @@ export { default as iconShutdown } from './power.svg'
 export { default as iconParty } from './happy-face.svg'
 export { default as iconStar } from './star.svg'
 export { default as iconEmailOutline } from './envelope-alt.svg'
+export { default as icon404 } from './explore.svg'

package/index.ts

@@ -146,6 +146,7 @@ export { default as Stepper } from './Stepper/Stepper'
 export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
 export { default as responsiveVal } from './Styles/responsiveVal'
+export { default as breakpointVal } from './Styles/breakpointVal'
 export * from './SvgImage'
 export { default as SvgImage } from './SvgImage'
 export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.18.2",
+  "version": "3.19.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "4d36627aeb43cba320c249b9a876384627064f18"
+  "gitHead": "f079c0b5b96dd1a048ca4d3c1d07916353c6bc33"
 }