feat(Badge): Add success, warning, info colors

cozy · Sep 16, 2024 · 2445e51 · 2445e51
1 parent 5c08ef7
commit 2445e51
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/react/Badge/Readme.md b/react/Badge/Readme.md
@@ -48,7 +48,10 @@ const DemoBadge = ({ variant, ...props }) => {
       <DemoBadge variant={variant} color="default" />
       <DemoBadge variant={variant} color="primary" />
       <DemoBadge variant={variant} color="secondary" />
+      <DemoBadge variant={variant} color="success" />
       <DemoBadge variant={variant} color="error" />
+      <DemoBadge variant={variant} color="warning" />
+      <DemoBadge variant={variant} color="info" />
     </>
   )}
 </Variants>

diff --git a/react/Badge/index.jsx b/react/Badge/index.jsx
@@ -8,6 +8,7 @@ const Badge = ({
   size,
   withBorder,
   overlap: overlapProp,
+  color,
   ...props
 }) => {
   const sizeClasses = {
@@ -28,10 +29,16 @@ const Badge = ({
   return (
     <MuiBadge
       classes={{
-        badge: cx(sizeClasses[size], withBorder ? 'badgeBorder' : null),
+        badge: cx(sizeClasses[size], {
+          badgeBorder: !!withBorder,
+          colorSuccess: color === 'success',
+          colorWarning: color === 'warning',
+          colorInfo: color === 'info'
+        }),
         ...classes
       }}
       overlap={overlap}
+      color={['success', 'warning', 'info'].includes(color) ? 'primary' : color}
       {...props}
     />
   )
@@ -42,7 +49,16 @@ Badge.propTypes = {
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'top'])
   }),
-  color: PropTypes.oneOf(['default', 'error', 'primary', 'secondary']),
+  className: PropTypes.string,
+  color: PropTypes.oneOf([
+    'default',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'primary',
+    'secondary'
+  ]),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   showZero: PropTypes.bool,
   variant: PropTypes.oneOf(['standard', 'dot']),

diff --git a/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js b/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js
@@ -723,6 +723,20 @@ export const makeLightNormalOverrides = theme => ({
         fontSize: '.5rem'
       }
     },
+    colorPrimary: {
+      '&.colorSuccess': {
+        backgroundColor: theme.palette.success.main,
+        color: theme.palette.success.contrastText
+      },
+      '&.colorWarning': {
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText
+      },
+      '&.colorInfo': {
+        backgroundColor: theme.palette.info.main,
+        color: theme.palette.info.contrastText
+      }
+    },
     anchorOriginTopRightRectangular: {
       transform: 'scale(1) translate(37%, -37%)'
     },

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -357,7 +357,7 @@ exports[`Badge should render examples: Badge 1`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"OVERLAP\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DOT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"WITHBORDER\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBORDER</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LEFT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LEFT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BOTTOM\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BOTTOM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SMALL\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label>
-  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorSecondary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError\\">4</span></span>
+  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorSecondary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorSuccess MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorWarning MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorInfo MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span>
 </div>"
 `;