@graphcommerce/next-ui 3.17.1 → 3.18.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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)
 
 

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

@@ -21,6 +21,11 @@ const useStyles = makeStyles(
     sizeInherit: {
       fontSize: 'inherit',
     },
+    sizeXs: {
+      width: responsiveVal(11, 13),
+      height: responsiveVal(11, 13),
+      strokeWidth: 2.1,
+    },
     sizeSmall: {
       width: responsiveVal(12, 16),
       height: responsiveVal(12, 16),
@@ -49,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "e8578cc336e58d896531179f5fcb6973e8a983ce"
+  "gitHead": "033692947ca401d23791b3fcb9d65dc8c4e32bbc"
 }