@graphcommerce/next-ui 3.15.2 → 3.18.0

package/AppShell/AppShellHeader/index.tsx

@@ -186,9 +186,6 @@ const useStyles = makeStyles(
       '&:hover': {
         background: theme.palette.background.paper,
       },
-      '& svg': {
-        stroke: theme.palette.text.primary,
-      },
     },
     sheetShellActionsFullPage: {
       '& * > a, & * > button': {

package/AppShell/Footer/index.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles(
       alignItems: 'center',
       [theme.breakpoints.down('xs')]: {
         paddingTop: theme.spacings.lg,
+        paddingBottom: theme.spacings.lg,
         justifyItems: 'center',
         gridTemplateAreas: `
           'switcher switcher'
@@ -45,7 +46,7 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('xs')]: {
         gridAutoFlow: 'row',
         textAlign: 'center',
-        gap: 0,
+        gap: 4,
       },
     },
     support: {

package/AppShell/FullPageShellBase.tsx

@@ -8,11 +8,11 @@ import ShellBase, { PageLayoutBaseProps } from './ShellBase'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
-      background: theme.palette.background.default,
       minHeight: '100vh',
       display: 'grid',
       gridTemplateRows: `auto 1fr auto`,
       gridTemplateColumns: '100%',
+      background: theme.palette.background.default,
     },
     hideFabsOnVirtualKeyboardOpen: {
       [theme.breakpoints.down('sm')]: {

package/AppShell/SheetShellBase/useSheetStyles.ts

@@ -4,8 +4,15 @@ import { ClassNameMap } from '@material-ui/styles'
 
 type UseSheetStylesReturn = (props?: Record<string, unknown>) => ClassNameMap<ClassKeys>
 
-const useSheetStyles = makeStyles<Theme, never, ClassKeys>(styles as StyleRules<ClassKeys>, {
-  name: 'Sheet',
-}) as UseSheetStylesReturn
+const useSheetStyles = makeStyles<Theme, never, ClassKeys>(
+  (theme: Theme) => ({
+    ...(styles as StyleRules<ClassKeys>),
+    content: {
+      ...styles.content,
+      backgroundColor: theme.palette.background.default,
+    },
+  }),
+  { name: 'Sheet' },
+) as UseSheetStylesReturn
 
 export default useSheetStyles

package/AppShell/useFixedFabAnimation.tsx

@@ -1,16 +1,16 @@
-import { useMediaQuery, useTheme } from '@material-ui/core'
+import { alpha, useTheme } from '@material-ui/core'
 import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
 
 export default function useFixedFabAnimation() {
   const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const { scrollY } = useViewportScroll()
-  const scrollTo = isMobile ? 0 : 60
-  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
-  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
-  const boxShadow = useMotionTemplate`
-    0 2px 10px 0 rgba(0, 0, 0, ${opacity1})
-    `
-
-  return { boxShadow, opacity }
+  const opacity = useTransform(scrollY, [50, 60], [0, 0.08])
+  const opacity1 = useTransform(
+    scrollY,
+    [0, 10],
+    [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
+  )
+  const boxShadow = useMotionTemplate`0 2px 10px 0 rgba(0, 0, 0, ${opacity})`
+  const backgroundColor = useMotionTemplate`${opacity1}`
+  return { boxShadow, backgroundColor, opacity }
 }

package/Blog/BlogListItem/index.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles(
     date: {
       display: 'inline-block',
       textDecoration: 'none',
-      color: theme.palette.text.disabled,
+      color: theme.palette.text.secondary,
     },
     asset: {
       display: 'grid',

package/Button/index.tsx

@@ -63,14 +63,11 @@ const useStyles = makeStyles<
         textTransform: 'none',
         ...theme.typography.body2,
         fontWeight: 400,
-        padding: `${responsiveVal(8, 10)} ${responsiveVal(12, 22)}`,
+        padding: `${responsiveVal(8, 10)} ${responsiveVal(16, 20)}`,
         backgroundColor: theme.palette.secondary.main,
         color: theme.palette.primary.contrastText,
         borderRadius: '99em',
         boxShadow: theme.shadows[1],
-        '& svg': {
-          stroke: theme.palette.primary.contrastText,
-        },
         '&:hover': {
           background: theme.palette.secondary.dark,
         },

package/CHANGELOG.md

@@ -3,6 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.18.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.17.1...@graphcommerce/next-ui@3.18.0) (2021-11-22)
+
+
+### Bug Fixes
+
+* remove styles ([335c8cb](https://github.com/ho-nl/m2-pwa/commit/335c8cb663bdd4c1670cdb3ea88c8a9a42bcf745))
+* revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
+
+
+### Features
+
+* use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
+
+
+
+
+
+## [3.17.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.17.0...@graphcommerce/next-ui@3.17.1) (2021-11-12)
+
+
+### Bug Fixes
+
+* disable CartFab animation for mobile ([ea04e67](https://github.com/ho-nl/m2-pwa/commit/ea04e678b7d5ab23e903a59a7f369053d17f9e79))
+
+
+
+
+
+# [3.17.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.16.0...@graphcommerce/next-ui@3.17.0) (2021-11-12)
+
+
+### Features
+
+* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
+
+
+
+
+
+# [3.16.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.15.2...@graphcommerce/next-ui@3.16.0) (2021-11-12)
+
+
+### Bug Fixes
+
+* Accessibility: Tap targets are sized appropriately ([55177f0](https://github.com/ho-nl/m2-pwa/commit/55177f03e79a29a879022ed34439e6c7aebbd80e))
+* behaviour for CartFab animation including darkTheme support ([6152ef3](https://github.com/ho-nl/m2-pwa/commit/6152ef32d093e42c58ee79d4d713c5b8c2870746))
+* clean up themeProvider ([6868e71](https://github.com/ho-nl/m2-pwa/commit/6868e71b59a637be8229a2ab49791dd324e02bb9))
+* darkTheme ([b08f522](https://github.com/ho-nl/m2-pwa/commit/b08f52255c91dcba5498481ba5e9f0fa0b6c5013))
+* darkTheme proof background color for sheet ([2af3b4a](https://github.com/ho-nl/m2-pwa/commit/2af3b4a6b7115400c5bbed36a21cd48852bea122))
+* design ([a8e2888](https://github.com/ho-nl/m2-pwa/commit/a8e288856011ca7d8fdcb75d7c672629a8f8bcf4))
+* design ([2dd5f41](https://github.com/ho-nl/m2-pwa/commit/2dd5f415010d19549158d837f0f98497d350fc2d))
+* fab animation should be background paper ([b538f96](https://github.com/ho-nl/m2-pwa/commit/b538f963b6c45a3973b11abe8de7823f2864326b))
+* hex for darktheme paper value, so calculations can be made ([c93bb22](https://github.com/ho-nl/m2-pwa/commit/c93bb22ba287c85ad5c27fd5f13d82dbb9a7d16f))
+* icon style ([6b9fea9](https://github.com/ho-nl/m2-pwa/commit/6b9fea9112206bb38b419e8257ad1b2b3fad74b6))
+* pagination color not primary ([c4e6d4f](https://github.com/ho-nl/m2-pwa/commit/c4e6d4f35d2df7a93fe045bde6c015fbcc5e5089))
+* perfectly spaced video ([f1481ed](https://github.com/ho-nl/m2-pwa/commit/f1481edaf08564315a8c6f50fa1a500bbdc58fc5))
+* prevent video casting on android ([a8baf94](https://github.com/ho-nl/m2-pwa/commit/a8baf949283c854283fe32befae4a60b119e02e0))
+* remove unused wrapping div ([6ced7b9](https://github.com/ho-nl/m2-pwa/commit/6ced7b912229303a9d708db1d2621f50f431c73f))
+* replace value with headerInnerHeight ([656fedc](https://github.com/ho-nl/m2-pwa/commit/656fedc573bbdd941c34e05e4dcd9a6af49fe987))
+* replace value with headerInnerHeight ([d961720](https://github.com/ho-nl/m2-pwa/commit/d9617200d375a9db98f7f1c3b47a5927764dae71))
+* revert background changes ([7661670](https://github.com/ho-nl/m2-pwa/commit/76616703968099039d79a4ca6001b942684adda5))
+* set sheet backgroundColor to background.default ([5d3f971](https://github.com/ho-nl/m2-pwa/commit/5d3f9719b446ee9440ac8834679ef5ba14be53d4))
+* text color iconBlock and styling ([0f2b0a8](https://github.com/ho-nl/m2-pwa/commit/0f2b0a896b11eafb79ea045c44f0115649a2040e))
+* use alpha to set rgba value of theme variable ([aebee87](https://github.com/ho-nl/m2-pwa/commit/aebee87b32eb769c6454ad9ced10d5612c4d1af8))
+
+
+### Features
+
+* provide all (different type of) overlays with the default background color ([111fe71](https://github.com/ho-nl/m2-pwa/commit/111fe718fbfddbeef452829e08b574ca46d51345))
+* remove svg stroke definitions, set all to currentColor ([189814f](https://github.com/ho-nl/m2-pwa/commit/189814f822d111c8adc6be1fff65c9a4a4c50c65))
+
+
+
+
+
 ## [3.15.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.15.1...@graphcommerce/next-ui@3.15.2) (2021-11-12)
 
 

package/ChipMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
+import { Chip, ChipProps, lighten, makeStyles, Menu, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren, useState } from 'react'
 import SectionHeader from '../SectionHeader'
@@ -8,7 +8,9 @@ import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
 export const useChipMenuStyles = makeStyles(
   (theme: Theme) => ({
-    chip: {},
+    chip: {
+      background: `${theme.palette.background.default} !important`,
+    },
     chipSelected: {
       borderColor: theme.palette.text.primary,
       color: theme.palette.text.primary,
@@ -19,9 +21,6 @@ export const useChipMenuStyles = makeStyles(
       '&:focus': {
         background: `${theme.palette.background.paper} !important`,
       },
-      '& svg': {
-        stroke: theme.palette.text.primary,
-      },
     },
     menuPaper: {
       minWidth: responsiveVal(200, 560),

package/FramerScroller/components/SidebarGallery.tsx

@@ -62,7 +62,6 @@ const useStyles = makeStyles(
         position: 'relative',
         minHeight: '100%',
         paddingTop: `min(${ratio}, ${maxHeight})`,
-        borderRadius: 2,
         [theme.breakpoints.down('sm')]: {
           width: '100vw',
         },

package/FullPageMessage/index.tsx

@@ -23,16 +23,12 @@ const useStyles = makeStyles(
       textAlign: 'center',
       marginTop: theme.spacings.sm,
     },
-
     button: {
       marginTop: theme.spacings.sm,
     },
     altButton: {
       marginTop: 6,
     },
-    icon: {
-      height: responsiveVal(120, 180),
-    },
   }),
   { name: 'FullPageMessage' },
 )
@@ -53,7 +49,7 @@ export default function FullPageMessage(props: FullPageMessageProps) {
   return (
     <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
       <Container maxWidth='md' className={classes.innerContainer}>
-        <div className={classes.icon}>{icon}</div>
+        <div>{icon}</div>
 
         <div className={classes.subject}>
           <Typography variant='h3' gutterBottom>

package/Pagination/index.tsx

@@ -17,9 +17,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     gap: 6,
     '& .Mui-disabled': {
       background: 'none',
-      '& svg': {
-        stroke: theme.palette.text.disabled,
-      },
     },
   },
   pagination: {
@@ -38,6 +35,9 @@ const useStyles = makeStyles((theme: Theme) => ({
       boxShadow: 'none',
     },
   },
+  fab: {
+    color: theme.palette.text.primary,
+  },
 }))
 
 export type PagePaginationProps = {
@@ -66,13 +66,25 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <Fab size='medium' disabled={page === 1} color='inherit' aria-label='Previous page'>
+    <Fab
+      size='medium'
+      disabled={page === 1}
+      color='inherit'
+      aria-label='Previous page'
+      className={classes.fab}
+    >
       <SvgImageSimple src={iconChevronLeft} />
     </Fab>
   )
 
   const chevronRight = (
-    <Fab size='medium' disabled={page === count} color='inherit' aria-label='Next page'>
+    <Fab
+      size='medium'
+      disabled={page === count}
+      color='inherit'
+      aria-label='Next page'
+      className={classes.fab}
+    >
       <SvgImageSimple src={iconChevronRight} />
     </Fab>
   )

package/Row/HeroBanner/index.tsx

@@ -22,13 +22,19 @@ const useStyles = makeStyles(
       justifyItems: 'center',
       alignContent: 'center',
       padding: `${theme.spacings.lg} ${theme.spacings.md}`,
-      minHeight: '90vh',
+      minHeight: `calc(100vh - ${theme.page.headerInnerHeight.sm})`,
       '& > *': {
         zIndex: 1,
         maxWidth: 'max-content',
       },
+      [theme.breakpoints.down('sm')]: {
+        ['@supports (-webkit-touch-callout: none)']: {
+          minHeight: '-webkit-fill-available',
+        },
+      },
       [theme.breakpoints.up('md')]: {
         width: '70%',
+        minHeight: `calc(100vh - ${theme.page.headerInnerHeight.md})`,
       },
       [theme.breakpoints.up('lg')]: {
         padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
@@ -44,6 +50,7 @@ const useStyles = makeStyles(
       display: 'grid',
       justifyItems: 'center',
       overflow: 'hidden',
+      paddingBottom: theme.spacings.md,
       '& video': {
         objectFit: 'cover',
         width: '100%',
@@ -83,14 +90,9 @@ export default function HeroBanner(props: HeroBannerProps) {
           {pageLinks}
         </div>
         <div className={classes.asset}>
-          <m.video
-            src={videoSrc}
-            autoPlay
-            muted
-            loop
-            playsInline
-            style={{ width: actionsAnimWidth }}
-          />
+          <m.div style={{ width: actionsAnimWidth }}>
+            <video src={videoSrc} autoPlay muted loop playsInline disableRemotePlayback />
+          </m.div>
         </div>
       </div>
     </Row>

package/Row/IconBlocks/IconBlock/index.tsx

@@ -6,19 +6,24 @@ import { UseStyles } from '../../../Styles'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     block: {
-      display: 'grid',
-      gridAutoFlow: 'row',
-      justifyItems: 'center',
-      gap: `${theme.spacings.xs}`,
       border: `1px solid ${theme.palette.divider}`,
       padding: `${theme.spacings.sm}`,
       borderRadius: '6px',
       textAlign: 'center',
-      color: theme.palette.primary.contrastText,
+      color: theme.palette.text.primary,
+      '& > * > *': {
+        display: 'grid',
+        gridAutoFlow: 'row',
+        justifyItems: 'center',
+        gap: `${theme.spacings.xxs}`,
+      },
     },
     link: {
       textDecoration: 'none',
     },
+    title: {
+      fontWeight: theme.typography.fontWeightBold,
+    },
   }),
   { name: 'IconBlock' },
 )
@@ -37,7 +42,9 @@ const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, re
   const content = (
     <>
       {icon}
-      <Typography variant='h6'>{title}</Typography>
+      <Typography variant='subtitle1' className={classes.title}>
+        {title}
+      </Typography>
       {children}
     </>
   )

package/Row/SpecialBanner/index.tsx

@@ -7,7 +7,7 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     wrapper: {
       display: 'grid',
-      background: 'rgba(0,0,0,0.03)',
+      background: theme.palette.background.paper,
       justifyItems: 'center',
       columnGap: `${theme.spacings.lg}`,
       padding: `${theme.spacings.lg} 0`,
@@ -23,6 +23,7 @@ const useStyles = makeStyles(
     asset: {
       width: responsiveVal(200, 900),
       height: 'auto',
+      marginBottom: theme.spacings.md,
       '& img': {
         width: responsiveVal(200, 900),
         height: 'auto',

package/StarRatingField/index.tsx

@@ -1,8 +1,8 @@
-import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
 import { SvgImageSimple } from '..'
 import { iconStar } from '../icons'
+import { makeStyles, Theme } from '@material-ui/core'
 
 export type StarRatingFieldProps = {
   id?: string
@@ -14,13 +14,13 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     iconStar: {
       fill: '#FFDA1C',
-      stroke: '#FFDA1C',
-      margin: 3,
+      stroke: 'none',
+      margin: '0 3px',
     },
     iconStarEmpty: {
-      fill: theme.palette.text.disabled,
-      stroke: theme.palette.text.disabled,
-      margin: 3,
+      fill: theme.palette.grey[300],
+      stroke: 'none',
+      margin: '0 3px',
     },
   }),
   {
@@ -37,8 +37,8 @@ export default function StarRatingField(props: StarRatingFieldProps) {
       name={`star-rating-${id}`}
       max={5}
       size='small'
-      emptyIcon={<SvgImageSimple src={iconStar} className={classes.iconStarEmpty} />}
-      icon={<SvgImageSimple src={iconStar} className={classes.iconStar} />}
+      emptyIcon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStarEmpty} />}
+      icon={<SvgImageSimple src={iconStar} size='large' className={classes.iconStar} />}
       onChange={(event, value) => {
         onChange(id ?? '', value ?? 0)
       }}

package/SvgImage/SvgImageSimple.tsx

@@ -16,13 +16,19 @@ const useStyles = makeStyles(
       strokeLinecap: 'square',
       strokeLinejoin: 'miter',
       fill: 'none',
+      stroke: 'currentColor',
     },
     sizeInherit: {
       fontSize: 'inherit',
     },
+    sizeXs: {
+      width: responsiveVal(11, 13),
+      height: responsiveVal(11, 13),
+      strokeWidth: 2.1,
+    },
     sizeSmall: {
-      width: responsiveVal(13, 16),
-      height: responsiveVal(13, 16),
+      width: responsiveVal(12, 16),
+      height: responsiveVal(12, 16),
       strokeWidth: 2.3,
     },
     sizeLarge: {
@@ -48,7 +54,7 @@ const useStyles = makeStyles(
 
 type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
   /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
-  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small'
+  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
   fill?: boolean
   muted?: boolean
   inverted?: boolean

package/TextInputNumber/index.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     quantity: {
       width: responsiveVal(80, 120),
-      backgroundColor: theme.palette.background.default,
+      backgroundColor: 'inherit',
     },
     quantityInput: {
       textAlign: 'center',

package/ToggleButton/index.tsx

@@ -1,6 +1,6 @@
 // @inheritedComponent ButtonBase
 
-import { capitalize, makeStyles, Theme } from '@material-ui/core'
+import { capitalize, lighten, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { FormEvent } from 'react'
 import Button, { ButtonProps } from '../Button'
@@ -13,7 +13,10 @@ export const useStyles = makeStyles(
     /* Styles applied to the root element. */
     root: {
       border: '2px solid transparent',
-      backgroundColor: theme.palette.background.default,
+      backgroundColor:
+        theme.palette.type === 'light'
+          ? theme.palette.background.default
+          : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
       borderRadius: 4,
       // boxShadow: theme.shadows['1'],
       boxShadow: `0px 0px 2px ${theme.palette.grey[400]}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.15.2",
+  "version": "3.18.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.4",
-    "@graphcommerce/framer-scroller": "^1.0.3",
-    "@graphcommerce/framer-sheet": "^2.106.1",
-    "@graphcommerce/framer-utils": "^2.103.14",
-    "@graphcommerce/graphql": "^2.105.4",
-    "@graphcommerce/image": "^2.105.3",
-    "@graphql-typed-document-node/core": "^3.1.0",
+    "@graphcommerce/framer-next-pages": "^2.107.5",
+    "@graphcommerce/framer-scroller": "^1.0.4",
+    "@graphcommerce/framer-sheet": "^2.106.2",
+    "@graphcommerce/framer-utils": "^2.103.15",
+    "@graphcommerce/graphql": "^2.105.5",
+    "@graphcommerce/image": "^2.105.4",
+    "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.4",
+    "@graphcommerce/eslint-config-pwa": "^3.1.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "47e8be849eaecea00f8673696ae1ec3283ec5fd6"
+  "gitHead": "033692947ca401d23791b3fcb9d65dc8c4e32bbc"
 }