@graphcommerce/next-ui 3.18.2 → 3.20.1

package/Row/ImageText/index.tsx

@@ -2,6 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -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

@@ -2,7 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -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,6 +1,7 @@
 import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
 import Row from '..'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -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

@@ -1,23 +1,26 @@
 import { ContainerProps, makeStyles, Theme, Typography } from '@material-ui/core'
 import Row from '..'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
+    root: {},
     wrapper: {
       display: 'grid',
       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 +31,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),
@@ -87,11 +91,11 @@ export type SpecialBannerProps = UseStyles<typeof useStyles> &
 
 export default function SpecialBanner(props: SpecialBannerProps) {
   const { asset, topic, pageLinks, children, ...containerProps } = props
-  const classes = useStyles(props)
+  const { root, ...classes } = useStyles(props)
 
   return (
-    <Row maxWidth={false} {...containerProps}>
-      <div className={classes.wrapper}>
+    <Row maxWidth={false} {...containerProps} classes={{ root }}>
+      <Row maxWidth={false} className={classes.wrapper} disableGutters>
         <div className={classes.asset}>{asset}</div>
         <div className={classes.copy}>
           {topic && (
@@ -102,7 +106,7 @@ export default function SpecialBanner(props: SpecialBannerProps) {
           <div className={classes.textContainer}>{children}</div>
           <div className={classes.links}>{pageLinks}</div>
         </div>
-      </div>
+      </Row>
     </Row>
   )
 }

package/Row/index.tsx

@@ -2,7 +2,7 @@ import { Container, styled } from '@material-ui/core'
 
 const Row = styled(Container)(
   ({ theme }) => ({
-    marginBottom: theme.spacings.xl,
+    marginBottom: theme.spacings.xxl,
   }),
   { name: 'Row' },
 )

package/Snackbar/MessageSnackbarImpl.tsx

@@ -141,7 +141,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   }
 
   let icon = iconCheckmark
-  if (severity == 'error') icon = iconSadFace
+  if (severity === 'error') icon = iconSadFace
 
   return (
     <Portal>

package/StarRatingField/index.tsx

@@ -1,13 +1,12 @@
+import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
-import { SvgImageSimple } from '..'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconStar } from '../icons'
-import { makeStyles, Theme } from '@material-ui/core'
 
 export type StarRatingFieldProps = {
   id?: string
   onChange?: (id: string, value: number) => void
-  iconSize?: number
 } & Omit<RatingProps, 'id' | 'onChange'>
 
 const useStyles = makeStyles(
@@ -29,7 +28,7 @@ const useStyles = makeStyles(
 )
 
 export default function StarRatingField(props: StarRatingFieldProps) {
-  const { id, onChange = () => {}, iconSize = 20, ...ratingProps } = props
+  const { id, onChange = () => {}, ...ratingProps } = props
   const classes = useStyles(props)
 
   return (

package/Stepper/Stepper.tsx

@@ -2,7 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/Styles/breakpointVal.tsx

@@ -0,0 +1,22 @@
+export function breakpointVal(
+  property: string,
+  min: number,
+  max: number,
+  breakpointsObject: Record<string, number>,
+) {
+  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/Styles/classesPicker.ts

@@ -0,0 +1,41 @@
+import { capitalize } from '@material-ui/core'
+import clsx from 'clsx'
+
+/**
+ * This will pick classNames from the classes object based on the given value object.sf
+ *
+ * Example:
+ *
+ * ```tsx
+ * const classes = makeStyles({
+ *   root: {},
+ *   rootColorRed: { color: 'red' }
+ *   rootFloating: { display: 'inline-block' }
+ * })
+ *
+ * function MyComponent() {
+ *   const classes = useStyles(props)
+ *   const classNames = pickClasses(classes, { color: 'red', floating: true })
+ *
+ *   return <div {...className('root')}>Hello</div>
+ * }
+ * ```
+ */
+export function classesPicker<K extends string>(
+  classes: Record<string, string>,
+  values: Record<string, boolean | string | undefined>,
+) {
+  return (className: K, addClassName?: string) => {
+    const mapped: Record<string, string> = Object.fromEntries(
+      Object.entries(values)
+        .map(([key, value]) =>
+          typeof value === 'boolean' || typeof value === 'undefined'
+            ? [classes[`${className}${capitalize(key)}`], !!value]
+            : [classes[`${className}${capitalize(key)}${capitalize(value)}`], true],
+        )
+        .filter((v) => !!v[0] && v[1]),
+    )
+
+    return { className: clsx(classes[className], mapped, addClassName) }
+  }
+}

package/Styles/responsiveVal.tsx

@@ -3,7 +3,7 @@
  *
  * E.g.: `responsiveVal(16, 22)` -> Will render 16px at 320px window width, 22 ad 1280 window width
  */
-export default function responsiveVal(
+export function responsiveVal(
   min: number,
   max: number,
   maxBreakpoint = 1280,

package/SvgImage/SvgImageSimple.tsx

@@ -1,13 +1,13 @@
-import { Image, ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
-import { makeStyles, capitalize, Theme } from '@material-ui/core'
+import { ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
+import { makeStyles, capitalize } from '@material-ui/core'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 export type SvgImageShade = 'muted' | 'default' | 'inverted'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     image: {
       userSelect: 'none',
       width: responsiveVal(22, 24),
@@ -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,16 +39,16 @@ 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: {},
-  }),
+  },
   { name: 'SvgImageSimple' },
 )
 
@@ -60,8 +60,9 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
   inverted?: boolean
 }
 
-const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
+const SvgImageSimple = forwardRef<SVGSVGElement, SvgImageSimpleProps>((props, ref) => {
   const {
+    style,
     className,
     size = 'medium',
     muted,
@@ -72,13 +73,14 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
   } = props
   const classes = useStyles()
 
-  let src = imageProps.src
+  let { src } = imageProps
   let staticSrc = ''
   if (isStaticImport(src)) staticSrc = (isStaticRequire(src) ? src.default : src).src
   src = typeof src === 'string' ? src : staticSrc
 
   return (
     <svg
+      ref={ref}
       className={clsx(
         className,
         classes.image,
@@ -87,8 +89,9 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
         inverted && classes.inverted,
       )}
       aria-hidden='true'
+      style={style}
     >
-      <use href={`${src}#icon`}></use>
+      <use href={`${src}#icon`} />
     </svg>
   )
 })

package/SvgImage/index.tsx

@@ -61,16 +61,14 @@ export default function SvgImage(props: SvgImageProps) {
   })
 
   return (
-    <>
-      <Image
-        layout='fixed'
-        unoptimized
-        src={src}
-        className={classes.root}
-        // height={24}
-        // width={24}
-        {...imageProps}
-      />
-    </>
+    <Image
+      layout='fixed'
+      unoptimized
+      src={src}
+      className={classes.root}
+      // height={24}
+      // width={24}
+      {...imageProps}
+    />
   )
 }

package/TextInputNumber/index.tsx

@@ -5,18 +5,17 @@ import {
   OutlinedTextFieldProps,
   TextField,
   TextFieldProps,
-  Theme,
   useForkRef,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { UseStyles } from '../Styles'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMin, iconPlus } from '../icons'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     quantity: {
       width: responsiveVal(80, 120),
       backgroundColor: 'inherit',
@@ -34,7 +33,7 @@ const useStyles = makeStyles(
     adornedStart: {
       paddingLeft: responsiveVal(7, 14),
     },
-  }),
+  },
   { name: 'TextInputNumber' },
 )
 

package/Theme/types.ts

@@ -7,7 +7,7 @@ declare module '@material-ui/core/styles/createPalette' {
 }
 
 declare module '@material-ui/core/styles/createTheme' {
-  interface Theme {
+  interface ThemeOptions {
     spacings: {
       xxs: string
       xs: string
@@ -20,14 +20,15 @@ declare module '@material-ui/core/styles/createTheme' {
     page: {
       horizontal: string
       vertical: string
-      headerInnerHeight: {
-        xs: string
-        sm: string
-        md: string
-      }
+    }
+    appShell: {
+      headerHeightSm: string
+      headerHeightMd: string
+      appBarHeightMd: string
+      appBarInnerHeightMd: string
     }
   }
-  interface ThemeOptions {
+  interface Theme {
     spacings: {
       xxs: string
       xs: string
@@ -40,11 +41,12 @@ declare module '@material-ui/core/styles/createTheme' {
     page: {
       horizontal: string | number
       vertical: string | number
-      headerInnerHeight: {
-        xs: string
-        sm: string
-        md: string
-      }
+    }
+    appShell: {
+      headerHeightSm: string
+      headerHeightMd: string
+      appBarHeightMd: string
+      appBarInnerHeightMd: string
     }
   }
 }

package/ToggleButton/index.tsx

@@ -1,10 +1,9 @@
-// @inheritedComponent ButtonBase
-
-import { capitalize, lighten, makeStyles, Theme } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { FormEvent } from 'react'
 import Button, { ButtonProps } from '../Button'
 import { UseStyles } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 type StyleProps = { selected?: boolean; color?: ButtonProps['color'] }
 
@@ -12,11 +11,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

@@ -1,8 +1,8 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { responsiveVal } from '..'
 import { UseStyles } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -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

@@ -1,42 +1,15 @@
+export * from './AppShell'
+export * from './Layout'
+export * from './LayoutDefault'
+export * from './LayoutOverlay'
+export * from './Footer'
+
 export * from './AnimatedRow'
 export { default as AnimatedRow } from './AnimatedRow'
 export * from './ApolloError/ApolloErrorAlert'
 export { default as ApolloErrorAlert } from './ApolloError/ApolloErrorAlert'
 export * from './ApolloError/ApolloErrorFullPage'
 export { default as ApolloErrorFullPage } from './ApolloError/ApolloErrorFullPage'
-export * from './AppShell/AppShellHeader'
-export { default as AppShellHeader } from './AppShell/AppShellHeader'
-export { default as AppShellProvider } from './AppShell/AppShellProvider'
-export { default as AppShellSticky } from './AppShell/AppShellSticky'
-export { default as AppShellTitle } from './AppShell/AppShellTitle'
-export { default as DesktopNavActions } from './AppShell/DesktopNavActions'
-export * from './AppShell/DesktopNavBar'
-export { default as DesktopNavBar } from './AppShell/DesktopNavBar'
-export { default as FixedFab } from './AppShell/FixedFab'
-export * from './AppShell/ForwardButton'
-export { default as ForwardButton } from './AppShell/ForwardButton'
-export * from './AppShell/FullPageShellBase'
-export { default as Logo } from './AppShell/Logo'
-export * from './AppShell/Logo'
-export { default as FullPageShellBase } from './AppShell/FullPageShellBase'
-export * from './AppShell/Menu'
-export * from './AppShell/MenuFab'
-export { default as MenuFab } from './AppShell/MenuFab'
-export * from './AppShell/MenuFabSecondaryItem'
-export { default as Footer } from './AppShell/Footer'
-export { default as MenuFabSecondaryItem } from './AppShell/MenuFabSecondaryItem'
-export { default as SocialIcon } from './AppShell/Footer/SocialIcon'
-export * from './AppShell/PageShellHeader'
-export { default as PlaceholderFab } from './AppShell/PlaceholderFab'
-export { default as PageShellHeader } from './AppShell/PageShellHeader'
-export * from './AppShell/SheetShellBase'
-export { default as SheetShellBase } from './AppShell/SheetShellBase'
-export { default as SheetShellDragIndicator } from './AppShell/SheetShellDragIndicator'
-export { default as SheetShellHeader } from './AppShell/SheetShellHeader'
-export * from './AppShell/ShellBase'
-export { default as ShellBase } from './AppShell/ShellBase'
-export { default as useFabAnimation } from './AppShell/useFabAnimation'
-export { default as useFixedFabAnimation } from './AppShell/useFixedFabAnimation'
 export * from './AspectRatioContainer'
 export { default as AspectRationContainer } from './AspectRatioContainer'
 export * from './Blog/BlogContent'
@@ -45,7 +18,6 @@ export * from './Blog/BlogHeader'
 export { default as BlogHeader } from './Blog/BlogHeader'
 export * from './Blog/BlogTitle'
 export { default as BlogTitle } from './Blog/BlogTitle'
-export * from './Blog/BlogTags'
 export { default as BlogTags } from './Blog/BlogTags'
 export * from './Blog/BlogAuthor'
 export { default as BlogAuthor } from './Blog/BlogAuthor'
@@ -61,8 +33,6 @@ export * from './ChipMenu'
 export { default as ChipMenu } from './ChipMenu'
 export * from './ContainerWithHeader'
 export { default as ContainerWithHeader } from './ContainerWithHeader'
-export * from './Debug/DebugSpacer'
-export { default as DebugSpacer } from './Debug/DebugSpacer'
 export * from './FlagAvatar'
 export { default as FlagAvatar } from './FlagAvatar'
 export * from './Form'
@@ -73,10 +43,6 @@ export { default as FormHeader } from './Form/FormHeader'
 export { default as FormRow } from './Form/FormRow'
 export * from './Form/InputCheckmark'
 export { default as InputCheckmark } from './Form/InputCheckmark'
-export * from './FramerNextPagesSlider/Slide'
-export { default as Slide } from './FramerNextPagesSlider/Slide'
-export * from './FramerNextPagesSlider/Slider'
-export { default as Slider } from './FramerNextPagesSlider/Slider'
 export * from './FramerScroller/components/SidebarGallery'
 export { default as SidebarGallery } from './FramerScroller/components/SidebarGallery'
 export * from './FramerScroller/components/SidebarSlider'
@@ -145,7 +111,9 @@ export * from './Stepper/Stepper'
 export { default as Stepper } from './Stepper/Stepper'
 export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
-export { default as responsiveVal } from './Styles/responsiveVal'
+export * from './Styles/breakpointVal'
+export * from './Styles/responsiveVal'
+export * from './Styles/classesPicker'
 export * from './SvgImage'
 export { default as SvgImage } from './SvgImage'
 export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'
@@ -153,7 +121,6 @@ export * from './TextInputNumber'
 export { default as TextInputNumber } from './TextInputNumber'
 export * from './TimeAgo'
 export { default as TimeAgo } from './TimeAgo'
-export { default as Title } from './Title'
 export { default as ToggleButton } from './ToggleButton'
 export type { ToggleButtonProps } from './ToggleButton'
 export { default as ToggleButtonGroup } from './ToggleButtonGroup'