@graphcommerce/next-ui 3.11.0 → 3.11.4

package/AppShell/AppShellHeader/index.tsx

@@ -315,17 +315,17 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         classes={{ root: classes.fab }}
         onClick={() => router.go(closeSteps * -1)}
       >
-        <SvgImageSimple src={iconClose} alt='Close overlay' loading='eager' />
+        <SvgImageSimple src={iconClose} />
       </Fab>
     ) : (
       <PageLink href='/' passHref>
         <Fab size='small' classes={{ root: classes.fab }}>
-          <SvgImageSimple src={iconClose} alt='Close overlay' loading='eager' />
+          <SvgImageSimple src={iconClose} />
         </Fab>
       </PageLink>
     ))
 
-  const backIcon = <SvgImageSimple src={iconChevronLeft} alt='chevron back' loading='eager' />
+  const backIcon = <SvgImageSimple src={iconChevronLeft} />
   let back = backSteps > 0 && (
     <Button
       onClick={() => router.back()}

package/AppShell/ForwardButton.tsx

@@ -39,19 +39,14 @@ const useStyles = makeStyles(
 
 export type ForwardButtonProps = UseStyles<typeof useStyles> & ButtonProps & { down?: boolean }
 
-const ForwardButton = React.forwardRef((props: ForwardButtonProps) => {
+const ForwardButton = React.forwardRef((props: ForwardButtonProps, ref) => {
   const { text, icon, ...classes } = useStyles(props)
   const { children, down, ...fabProps } = props
 
   return (
-    <Button variant='pill' classes={classes} {...fabProps}>
+    <Button variant='pill' classes={classes} {...fabProps} ref={ref}>
       <span className={text}>{children}</span>
-      <SvgImageSimple
-        src={iconChevronRight}
-        alt='chevron right'
-        size='small'
-        className={classes.root}
-      />
+      <SvgImageSimple src={iconChevronRight} size='small' className={classes.root} />
     </Button>
   )
 })

package/AppShell/MenuFab.tsx

@@ -85,7 +85,7 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        <SvgImageSimple src={iconMenu} inverted alt='menu' loading='eager' />
+        <SvgImageSimple src={iconMenu} inverted />
       </Fab>
 
       <Menu

package/ButtonLink/index.tsx

@@ -39,7 +39,7 @@ export default function ButtonLink(props: ButtonLinkProps) {
     <PageLink href={url} passHref>
       <Button {...buttonProps} className={classes.buttonLink}>
         <span>{title}</span>
-        {endIcon ?? <SvgImageSimple src={iconChevronRight} alt='chevron right' />}
+        {endIcon ?? <SvgImageSimple src={iconChevronRight} />}
       </Button>
     </PageLink>
   )

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.11.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.2...@graphcommerce/next-ui@3.11.3) (2021-11-01)
+
+
+### Bug Fixes
+
+* category page design fixs ([d3fccc2](https://github.com/ho-nl/m2-pwa/commit/d3fccc2a86106b854e9a1fd89040a248fe20c99a))
+
+
+
+
+
+## [3.11.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.0...@graphcommerce/next-ui@3.11.1) (2021-10-28)
+
+
+### Bug Fixes
+
+* External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
+
+
+
+
+
 # [3.11.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.10.2...@graphcommerce/next-ui@3.11.0) (2021-10-28)
 
 

package/ChipMenu/index.tsx

@@ -77,11 +77,11 @@ export default function ChipMenu(props: ChipMenuProps) {
   const classes = useChipMenuStyles(props)
 
   let deleteIcon = selected ? (
-    <SvgImageSimple src={iconCloseCircle} alt='close' />
+    <SvgImageSimple src={iconCloseCircle} />
   ) : (
-    <SvgImageSimple src={iconChevronDown} alt='chevron down' loading='eager' />
+    <SvgImageSimple src={iconChevronDown} />
   )
-  if (openEl) deleteIcon = <SvgImageSimple src={iconChevronUp} alt='chevron up' loading='eager' />
+  if (openEl) deleteIcon = <SvgImageSimple src={iconChevronUp} />
 
   const selectedAndMenuHidden = selected && !openEl && selectedLabel
 

package/Form/InputCheckmark.tsx

@@ -26,5 +26,5 @@ export default function InputCheckmark(props: InputCheckmarkProps) {
   const classes = useStyles()
 
   if (!valid) return <>{children}</>
-  return <SvgImageSimple src={iconCheckmark} alt='checkmark' className={classes.iconCheckmark} />
+  return <SvgImageSimple src={iconCheckmark} className={classes.iconCheckmark} />
 }

package/FramerScroller/components/SidebarGallery.tsx

@@ -260,9 +260,9 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             <m.div layout className={classes.topRight}>
               <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
                 {!zoomed ? (
-                  <SvgImageSimple src={iconFullscreen} alt='Zoom in' loading='eager' />
+                  <SvgImageSimple src={iconFullscreen} />
                 ) : (
-                  <SvgImageSimple src={iconFullscreenExit} alt='Zoom out' loading='eager' />
+                  <SvgImageSimple src={iconFullscreenExit} />
                 )}
               </Fab>
             </m.div>

package/IconHeader/index.tsx

@@ -88,7 +88,7 @@ export default function IconHeader(props: IconHeaderProps) {
   return (
     <div className={clsx(classes.container, !noMargin && classes.margin)}>
       <div className={clsx(classes.innerContainer, !stayInline && classes.breakColumnsDesktop)}>
-        <SvgImageSimple {...svgImageProps} loading='eager' />
+        <SvgImageSimple {...svgImageProps} />
         <Typography
           variant={variants[size]}
           component='h2'

package/Pagination/index.tsx

@@ -97,21 +97,11 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <SvgImageSimple
-      src={iconChevronLeft}
-      alt='chevron left'
-      muted={page === 1}
-      className={classes.icon}
-    />
+    <SvgImageSimple src={iconChevronLeft} muted={page === 1} className={classes.icon} />
   )
 
   const chevronRight = (
-    <SvgImageSimple
-      src={iconChevronRight}
-      alt='chevron right'
-      muted={page === count}
-      className={classes.icon}
-    />
+    <SvgImageSimple src={iconChevronRight} muted={page === count} className={classes.icon} />
   )
 
   return (

package/Snackbar/MessageSnackbarImpl.tsx

@@ -202,12 +202,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
             <>
               <div className={classes.children}>
                 <div>
-                  <SvgImageSimple
-                    src={icon}
-                    alt='checkmark'
-                    size='large'
-                    className={classes.messageIcon}
-                  />
+                  <SvgImageSimple src={icon} size='large' className={classes.messageIcon} />
                   {children}
                 </div>
               </div>
@@ -218,7 +213,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
               )}
               <div className={classes.closeButton}>
                 <Fab aria-label='Close snackbar' size='medium' onClick={hideSnackbar}>
-                  <SvgImageSimple src={iconClose} size='small' alt='close' />
+                  <SvgImageSimple src={iconClose} size='small' />
                 </Fab>
               </div>
             </>

package/StarRatingField/index.tsx

@@ -38,17 +38,8 @@ export default function StarRatingField(props: StarRatingFieldProps) {
       name={`star-rating-${id}`}
       max={5}
       size='small'
-      emptyIcon={
-        <SvgImageSimple
-          src={iconStar}
-          alt='star'
-          loading='eager'
-          className={classes.iconStarEmpty}
-        />
-      }
-      icon={
-        <SvgImageSimple src={iconStar} alt='star' loading='eager' className={classes.iconStar} />
-      }
+      emptyIcon={<SvgImageSimple src={iconStar} className={classes.iconStarEmpty} />}
+      icon={<SvgImageSimple src={iconStar} className={classes.iconStar} />}
       onChange={(event, value) => {
         onChange(id ?? '', value ?? 0)
       }}

package/TextInputNumber/index.tsx

@@ -133,9 +133,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             className={clsx(classes.button, DownProps.className)}
             {...DownProps}
           >
-            {DownProps.children ?? (
-              <SvgImageSimple src={iconMin} size='small' alt='Step down' loading='eager' />
-            )}
+            {DownProps.children ?? <SvgImageSimple src={iconMin} size='small' />}
           </IconButton>
         ),
         endAdornment: (
@@ -151,9 +149,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
             className={clsx(classes.button, UpProps.className)}
             {...UpProps}
           >
-            {UpProps.children ?? (
-              <SvgImageSimple src={iconPlus} size='small' alt='Step up' loading='eager' />
-            )}
+            {UpProps.children ?? <SvgImageSimple src={iconPlus} size='small' />}
           </IconButton>
         ),
       }}

package/Title/index.tsx

@@ -48,7 +48,7 @@ const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
 
   return (
     <div className={clsx(classes.container, small && classes.small)}>
-      {icon && <SvgImageSimple src={icon} loading='eager' size='xl' />}
+      {icon && <SvgImageSimple src={icon} size='xl' />}
       <Typography
         ref={ref}
         variant={variant || (small ? 'h6' : 'h3')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.11.0",
+  "version": "3.11.4",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.1",
-    "@graphcommerce/framer-scroller": "^0.4.1",
-    "@graphcommerce/framer-sheet": "^2.105.13",
-    "@graphcommerce/framer-utils": "^2.103.12",
-    "@graphcommerce/graphql": "^2.105.1",
-    "@graphcommerce/image": "^2.105.1",
+    "@graphcommerce/framer-next-pages": "^2.107.2",
+    "@graphcommerce/framer-scroller": "^0.4.3",
+    "@graphcommerce/framer-sheet": "^2.105.15",
+    "@graphcommerce/framer-utils": "^2.103.13",
+    "@graphcommerce/graphql": "^2.105.2",
+    "@graphcommerce/image": "^2.105.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -23,7 +23,7 @@
     "clsx": "^1.1.1",
     "framer-motion": "^4.1.17",
     "graphql": "^15.6.1",
-    "next": "^12.0.1",
+    "next": "^12.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-focus-lock": "^2.5.2",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.2",
+    "@graphcommerce/eslint-config-pwa": "^3.1.3",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "f923ddb5d98378c8737314e7296bba77b1c2dc9b"
+  "gitHead": "b6321b8f479a0ef6e4b1b543702158d964bbeac6"
 }