@graphcommerce/next-ui 7.1.0-canary.8 → 8.0.0-canary.100

package/ActionCard/ActionCard.tsx

@@ -55,6 +55,7 @@ const parts = [
   'after',
   'secondaryAction',
   'reset',
+  'end',
 ] as const
 const name = 'ActionCard'
 
@@ -317,6 +318,7 @@ export function ActionCard(props: ActionCardProps) {
         </Box>
 
         <Box
+          className={classes.end}
           sx={{
             display: 'flex',
             flexDirection: 'column',

package/CHANGELOG.md

@@ -1,5 +1,254 @@
 # Change Log
 
+## 8.0.0-canary.100
+
+## 8.0.0-canary.99
+
+## 8.0.0-canary.98
+
+## 8.0.0-canary.97
+
+## 8.0.0-canary.96
+
+## 8.0.0-canary.95
+
+## 8.0.0-canary.94
+
+## 8.0.0-canary.93
+
+## 8.0.0-canary.92
+
+## 8.0.0-canary.91
+
+## 8.0.0-canary.90
+
+## 8.0.0-canary.89
+
+## 8.0.0-canary.88
+
+## 8.0.0-canary.87
+
+## 8.0.0-canary.86
+
+## 8.0.0-canary.85
+
+## 8.0.0-canary.84
+
+### Patch Changes
+
+- [#2161](https://github.com/graphcommerce-org/graphcommerce/pull/2161) [`cc5c636`](https://github.com/graphcommerce-org/graphcommerce/commit/cc5c636f9f2b3d9fa33384b9a02d6ad3631aa414) - Removed whitespace on top of the zoomed in image on the PDP.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.0-canary.83
+
+## 8.0.0-canary.82
+
+## 8.0.0-canary.81
+
+## 8.0.0-canary.80
+
+### Patch Changes
+
+- [#2138](https://github.com/graphcommerce-org/graphcommerce/pull/2138) [`a057d62`](https://github.com/graphcommerce-org/graphcommerce/commit/a057d6274e1d427e631ab3fad7a16078315103b8) - Wrap the logo in a div on the homepage to prevent redirection.
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.0-canary.79
+
+### Patch Changes
+
+- [#2137](https://github.com/graphcommerce-org/graphcommerce/pull/2137) [`df507b1`](https://github.com/graphcommerce-org/graphcommerce/commit/df507b194c67eef7b02df858c07938bb308b5397) - Don't render pseudo-locale in HTML lang attribute
+  ([@hnsr](https://github.com/hnsr))
+
+## 8.0.0-canary.78
+
+### Patch Changes
+
+- [#2135](https://github.com/graphcommerce-org/graphcommerce/pull/2135) [`7b017f5`](https://github.com/graphcommerce-org/graphcommerce/commit/7b017f58ba3be587d20a7f52c84b2907d52fe201) - Fix incorrect canonical URLs when i18n domain routing is used
+  ([@hnsr](https://github.com/hnsr))
+
+## 8.0.0-canary.77
+
+### Patch Changes
+
+- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.0-canary.76
+
+## 8.0.0-canary.75
+
+## 8.0.0-canary.74
+
+### Minor Changes
+
+- [#2133](https://github.com/graphcommerce-org/graphcommerce/pull/2133) [`133f908`](https://github.com/graphcommerce-org/graphcommerce/commit/133f908200a79589036420f2925835724522cab8) - Added lazy hydration to improve total blocking time. Added LazyHydrate component which can be wrapped around other components you want to lazy hydrate.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.0-canary.73
+
+## 8.0.0-canary.72
+
+## 8.0.0-canary.71
+
+## 8.0.0-canary.70
+
+## 8.0.0-canary.69
+
+## 7.1.0-canary.68
+
+## 7.1.0-canary.67
+
+### Patch Changes
+
+- [#2108](https://github.com/graphcommerce-org/graphcommerce/pull/2108) [`7fc4bb9`](https://github.com/graphcommerce-org/graphcommerce/commit/7fc4bb925c59da46961c9656a2a67b37a9c2d652) - Removed the 'NoSSR' functionality from `<WaitForQueries/>` component as it slows down rendering. The 'feature' was necessary for the following use case: When hydrating a component that was server rendered and was living inside a `<Suspense />` component. It would cause an hydration error and this was the workaround. With useSuspenseQuery and React 18, this problem will not occur.
+  ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 7.1.0-canary.66
+
+## 7.1.0-canary.65
+
+## 7.1.0-canary.64
+
+## 7.1.0-canary.63
+
+## 7.1.0-canary.62
+
+## 7.1.0-canary.61
+
+### Patch Changes
+
+- [#2125](https://github.com/graphcommerce-org/graphcommerce/pull/2125) [`5224ee500`](https://github.com/graphcommerce-org/graphcommerce/commit/5224ee5001c94a19f226fa36106e76739319297c) - If there is an open menu in an overlay, pressing the escape button now closes the menu instead of the overlay. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.60
+
+## 7.1.0-canary.59
+
+## 7.1.0-canary.58
+
+### Patch Changes
+
+- [#2121](https://github.com/graphcommerce-org/graphcommerce/pull/2121) [`a5da6ffc8`](https://github.com/graphcommerce-org/graphcommerce/commit/a5da6ffc8be359e93c7bde986134f7162aae13b9) - Change the critical css injection location to be in the head instead of `<style>` tags in the body. It has a number of negative consequences, such as the famous "flash of unstyled content" (FOUC) and the re-paint and re-layout required. ([@paales](https://github.com/paales))
+
+## 7.1.0-canary.57
+
+## 7.1.0-canary.56
+
+### Patch Changes
+
+- [#2123](https://github.com/graphcommerce-org/graphcommerce/pull/2123) [`8ad60f255`](https://github.com/graphcommerce-org/graphcommerce/commit/8ad60f255b747858c35dd6b6cf5c90147d960082) - Fixed schema-dts dependency issue ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.55
+
+### Patch Changes
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`da2135744`](https://github.com/graphcommerce-org/graphcommerce/commit/da2135744dddfa0d211c59589090ebb1977c38c9) - Added info icon for Snackbar when severity is set to info ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`d608830ce`](https://github.com/graphcommerce-org/graphcommerce/commit/d608830ce77f85ff725cc106b9fc55a22012c74c) - Added ‘disableBackdropClick’ prop to MessageSnackbar to allow page interaction without closing the snackbar ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`94e1ae811`](https://github.com/graphcommerce-org/graphcommerce/commit/94e1ae811fe9eb0051863e8be91c6399ddcdf22f) - Added DismissibleSnackbar component to allow messages to be shown only once ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`53947d39f`](https://github.com/graphcommerce-org/graphcommerce/commit/53947d39f2f3ee578c14903c96a2b356d99d9475) - Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.54
+
+## 7.1.0-canary.53
+
+## 7.1.0-canary.52
+
+## 7.1.0-canary.51
+
+## 7.1.0-canary.50
+
+## 7.1.0-canary.49
+
+## 7.1.0-canary.48
+
+## 7.1.0-canary.47
+
+## 7.1.0-canary.46
+
+## 7.1.0-canary.45
+
+### Patch Changes
+
+- [#2077](https://github.com/graphcommerce-org/graphcommerce/pull/2077) [`727d1004d`](https://github.com/graphcommerce-org/graphcommerce/commit/727d1004dfcb7dddf6e35b6b157a34491bb05cc6) - Fixed ItemScroller component className. Changed from SidebarSlider to ItemScroller ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.38
+
+### Patch Changes
+
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`695f40cf2`](https://github.com/graphcommerce-org/graphcommerce/commit/695f40cf220636d17f04bc9b0ce86c549c740386) - filterNonNullable keys simplified the types which caused unions to be collapsed ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.37
+
+## 7.1.0-canary.36
+
+## 7.1.0-canary.35
+
+## 7.1.0-canary.34
+
+## 7.1.0-canary.33
+
+## 7.1.0-canary.32
+
+## 7.1.0-canary.31
+
+## 7.1.0-canary.30
+
+### Patch Changes
+
+- [#2105](https://github.com/graphcommerce-org/graphcommerce/pull/2105) [`185f9ddeb`](https://github.com/graphcommerce-org/graphcommerce/commit/185f9ddebff0eaf1f388faebe88a5d400294512a) - Fixed bug where the mobile menu wouldn't open after the first selected level ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 7.1.0-canary.29
+
+## 7.1.0-canary.28
+
+### Minor Changes
+
+- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a72`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.27
+
+## 7.1.0-canary.26
+
+## 7.1.0-canary.25
+
+## 7.1.0-canary.24
+
+## 7.1.0-canary.23
+
+## 7.1.0-canary.22
+
+## 7.1.0-canary.21
+
+## 7.1.0-canary.20
+
+## 7.1.0-canary.19
+
+## 7.1.0-canary.18
+
+## 7.1.0-canary.17
+
+## 7.1.0-canary.16
+
+## 7.1.0-canary.15
+
+## 7.1.0-canary.14
+
+### Patch Changes
+
+- [#2045](https://github.com/graphcommerce-org/graphcommerce/pull/2045) [`1ac1e0989`](https://github.com/graphcommerce-org/graphcommerce/commit/1ac1e09897daadd646200cb3ddc2aa75a51e182e) - Make sure the product image gallery traps focus and scrollbar doesn't disappear suddenly ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 7.1.0-canary.13
+
+## 7.1.0-canary.12
+
+## 7.1.0-canary.11
+
+## 7.1.0-canary.10
+
+## 7.1.0-canary.9
+
 ## 7.1.0-canary.8
 
 ### Minor Changes
@@ -1432,31 +1681,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { Trans, t } from "@lingui/macro";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    )
+    );
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
-  import { i18n } from '@lingui/core'
+  import { Trans } from "@lingui/react";
+  import { i18n } from "@lingui/core";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
       </div>
-    )
+    );
   }
   ```
 

package/Config.graphqls

@@ -0,0 +1,24 @@
+extend input GraphCommerceConfig {
+  """
+  Configuration for the SidebarGallery component
+  """
+  sidebarGallery: SidebarGalleryConfig
+}
+
+"""
+Enumeration of all possible positions for the sidebar gallery thumbnails.
+"""
+enum SidebarGalleryPaginationVariant {
+  DOTS
+  THUMBNAILS_BOTTOM
+}
+
+"""
+SidebarGalleryConfig will contain all configuration values for the Sidebar Gallery component.
+"""
+input SidebarGalleryConfig {
+  """
+  Variant used for the pagination
+  """
+  paginationVariant: SidebarGalleryPaginationVariant
+}

package/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import { ContainerProps, Container, Box } from '@mui/material'
 import React from 'react'
+import { LazyHydrate } from '../LazyHydrate'
 import { extendableComponent } from '../Styles'
 
 export type FooterProps = {
@@ -30,110 +31,112 @@ export function Footer(props: FooterProps) {
   } = props
 
   return (
-    <Container
-      sx={[
-        (theme) => ({
-          gridTemplateColumns: '5fr 3fr',
-          borderTop: `1px solid ${theme.palette.divider}`,
-          display: 'grid',
-          alignItems: 'center',
-          padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
-          justifyItems: 'center',
-          gridTemplateAreas: `
+    <LazyHydrate>
+      <Container
+        sx={[
+          (theme) => ({
+            gridTemplateColumns: '5fr 3fr',
+            borderTop: `1px solid ${theme.palette.divider}`,
+            display: 'grid',
+            alignItems: 'center',
+            padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
+            justifyItems: 'center',
+            gridTemplateAreas: `
             'switcher switcher'
             'support support'
             'social social'
             'links links'
           `,
-          gap: theme.spacings.md,
-          '& > *': { maxWidth: 'max-content' },
+            gap: theme.spacings.md,
+            '& > *': { maxWidth: 'max-content' },
 
-          [theme.breakpoints.up('md')]: {
-            gap: theme.spacings.sm,
-            gridTemplateAreas: `
+            [theme.breakpoints.up('md')]: {
+              gap: theme.spacings.sm,
+              gridTemplateAreas: `
               'social switcher'
               'links support'
             `,
-            justifyItems: 'start',
-            padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-            gridTemplateColumns: 'auto auto',
-            gridTemplateRows: 'auto',
-            justifyContent: 'space-between',
-          },
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-      maxWidth={false}
-      className={classes.root}
-      {...containerProps}
-    >
-      {socialLinks && (
-        <Box
-          sx={(theme) => ({
-            display: 'grid',
-            justifyContent: 'start',
-            gridAutoFlow: 'column',
-            gridArea: 'social',
-            gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.xs}` },
-            '& > *': {
-              minWidth: 'min-content',
-            },
-          })}
-          className={classes.social}
-        >
-          {socialLinks}
-        </Box>
-      )}
-      {storeSwitcher && (
-        <Box
-          sx={(theme) => ({
-            gridArea: 'switcher',
-            justifySelf: 'end',
-            [theme.breakpoints.down('md')]: {
-              justifySelf: 'center',
-            },
-          })}
-          className={classes.storeSwitcher}
-        >
-          {storeSwitcher}
-        </Box>
-      )}
-      {customerService && (
-        <Box
-          sx={(theme) => ({
-            gridArea: 'support',
-            justifySelf: 'flex-end',
-            [theme.breakpoints.down('md')]: {
-              justifySelf: 'center',
-            },
-          })}
-          className={classes.support}
-        >
-          {customerService}
-        </Box>
-      )}
-      {copyright && (
-        <Box
-          sx={(theme) => ({
-            typography: 'body2',
-            display: 'grid',
-            gridAutoFlow: 'column',
-            alignContent: 'center',
-            gridArea: 'links',
-            gap: theme.spacings.sm,
-            [theme.breakpoints.down('md')]: {
-              gridAutoFlow: 'row',
-              textAlign: 'center',
-              gap: `8px`,
+              justifyItems: 'start',
+              padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+              gridTemplateColumns: 'auto auto',
+              gridTemplateRows: 'auto',
+              justifyContent: 'space-between',
             },
-          })}
-          className={classes.copyright}
-        >
-          {copyright}
-        </Box>
-      )}
-      {children}
-    </Container>
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        maxWidth={false}
+        className={classes.root}
+        {...containerProps}
+      >
+        {socialLinks && (
+          <Box
+            sx={(theme) => ({
+              display: 'grid',
+              justifyContent: 'start',
+              gridAutoFlow: 'column',
+              gridArea: 'social',
+              gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.xs}` },
+              '& > *': {
+                minWidth: 'min-content',
+              },
+            })}
+            className={classes.social}
+          >
+            {socialLinks}
+          </Box>
+        )}
+        {storeSwitcher && (
+          <Box
+            sx={(theme) => ({
+              gridArea: 'switcher',
+              justifySelf: 'end',
+              [theme.breakpoints.down('md')]: {
+                justifySelf: 'center',
+              },
+            })}
+            className={classes.storeSwitcher}
+          >
+            {storeSwitcher}
+          </Box>
+        )}
+        {customerService && (
+          <Box
+            sx={(theme) => ({
+              gridArea: 'support',
+              justifySelf: 'flex-end',
+              [theme.breakpoints.down('md')]: {
+                justifySelf: 'center',
+              },
+            })}
+            className={classes.support}
+          >
+            {customerService}
+          </Box>
+        )}
+        {copyright && (
+          <Box
+            sx={(theme) => ({
+              typography: 'body2',
+              display: 'grid',
+              gridAutoFlow: 'column',
+              alignContent: 'center',
+              gridArea: 'links',
+              gap: theme.spacings.sm,
+              [theme.breakpoints.down('md')]: {
+                gridAutoFlow: 'row',
+                textAlign: 'center',
+                gap: `8px`,
+              },
+            })}
+            className={classes.copyright}
+          >
+            {copyright}
+          </Box>
+        )}
+        {children}
+      </Container>
+    </LazyHydrate>
   )
 }
 

package/FramerScroller/ItemScroller.tsx

@@ -10,7 +10,7 @@ import { extendableComponent, responsiveVal } from '../Styles'
 import { useFabSize } from '../Theme'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
-const { classes } = extendableComponent('SidebarSlider', [
+const { classes } = extendableComponent('ItemScroller', [
   'root',
   'grid',
   'sidebar',
@@ -21,13 +21,13 @@ const { classes } = extendableComponent('SidebarSlider', [
   'centerRight',
 ] as const)
 
-type SliderProps = {
+export type ItemScrollerProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
   buttonSize?: ScrollerButtonProps['size']
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
-export function ItemScroller(props: SliderProps) {
+export function ItemScroller(props: ItemScrollerProps) {
   const { children, sx, buttonSize = 'responsive', showButtons } = props
 
   const size = useFabSize(buttonSize)