@occmundial/occ-atomic 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.0.2](https://github.com/occmundial/occ-atomic/compare/v2.0.1...v2.0.2) (2024-07-26)
+
+
+### Bug Fixes
+
+* Icon disabled styles ([cee2a23](https://github.com/occmundial/occ-atomic/commit/cee2a2352b8a2e410fbe56c5106b88ba9c8b0487))
+
 ## [2.0.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v2.0.1) (2024-06-12)
 
 

package/build/Button/Button.test.js

@@ -134,15 +134,4 @@ describe("Button styles", function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });
-  it('returns the right icons', function () {
-    var props = {
-      icon: 'testing'
-    };
-    expect(_styles["default"].primary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-    expect(_styles["default"].secondary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].tertiary['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwODNDQUU=)');
-    expect(_styles["default"].ghostPink['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMTM0NjU=)');
-    expect(_styles["default"].ghostGrey['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICM1QTVEN0I=)');
-    expect(_styles["default"].ghostWhite['& span span'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmZmY=)');
-  });
 });

package/build/Button/__snapshots__/Button.test.js.snap

@@ -48,28 +48,28 @@ Object {
     "pointerEvents": "none",
   },
   "ghostGrey": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#5A5D7B",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#5A5D7B",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#D3D4DC",
+      },
       "background": "transparent",
       "color": "#878A9F",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "hsl(234 75.4% 12.7% / 0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
       "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
-    },
     "background": "transparent",
     "color": "#5A5D7B",
   },
@@ -77,13 +77,7 @@ Object {
     "& $loadIcon": Object {
       "fill": "#f13465",
     },
-    "& span span": Object {
-      "background": [Function],
-    },
     "&$disabled": Object {
-      "& span span": Object {
-        "background": [Function],
-      },
       "background": "transparent !important",
       "border": "none !important",
       "color": "#fa90ac !important",
@@ -107,25 +101,25 @@ Object {
     ],
   },
   "ghostWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -136,6 +130,7 @@ Object {
   },
   "iconOnly": Object {
     "& span span, & svg": Object {
+      "marginLeft": 0,
       "marginRight": 0,
     },
     "padding": Array [
@@ -197,29 +192,29 @@ Object {
     ],
   },
   "primary": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "#F6809E",
       "color": "rgba(255,255,255,0.7)",
       "cursor": "not-allowed",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "#821C36",
     },
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -229,45 +224,45 @@ Object {
     "borderRadius": "50%",
   },
   "secondary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
       "background": "hsl(221 91.2% 35.7% / 0.1)",
       "color": "#486EC3",
     },
-    "&$disabled span span": Object {
-      "background": [Function],
-    },
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "hsl(221 91.2% 35.7% / 0.05)",
     "color": "#083CAE",
   },
   "tertiary": Object {
-    "& $loadIcon": Object {
+    "& $icon, & $iconRight": Object {
       "fill": "#083CAE",
     },
-    "& span span": Object {
-      "background": [Function],
+    "& $loadIcon": Object {
+      "fill": "#083CAE",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "#8DA5DA",
+      },
       "background": "transparent",
       "color": "#486EC3",
-      "outline": "2px solid #8DA5DA",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "#8DA5DA",
     },
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
@@ -275,27 +270,28 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "transparent",
     "color": "#083CAE",
     "outline": "2px solid #083CAE",
     "outlineOffset": "-2px",
   },
   "tertiaryWhite": Object {
-    "& span span": Object {
-      "background": [Function],
+    "& $icon, & $iconRight": Object {
+      "fill": "#fff",
     },
     "&$disabled": Object {
+      "& $icon, & $iconRight": Object {
+        "fill": "rgba(255,255,255,0.3)",
+      },
       "background": "transparent",
       "color": "rgba(255,255,255,0.7)",
-    },
-    "&$disabled span span": Object {
-      "background": [Function],
+      "outlineColor": "rgba(255,255,255,0.2)",
     },
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
@@ -303,12 +299,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",

package/build/Button/styles.js

@@ -27,7 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var sec = _colors["default"].sec,
     secDark = _colors["default"].secDark,
-    grey500 = _colors["default"].grey500,
     secLight = _colors["default"].secLight;
 var sm = _fonts2["default"]['button-small'];
 var md = _fonts2["default"]['button-medium'];
@@ -102,22 +101,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-pink']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.primary.bg.disabled,
       color: _colors2["default"].text.white.secondary,
-      cursor: 'not-allowed'
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      cursor: 'not-allowed',
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -130,21 +125,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.secondary.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.secondary.bg.disabled,
-      color: _colors2["default"].text.indigo.secondary
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      color: _colors2["default"].text.indigo.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -165,22 +156,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
     },
     '&$disabled': {
       background: 'transparent',
       color: _colors2["default"].text.indigo.secondary,
-      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.disabled)
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      outlineColor: _colors2["default"].button.tertiary.border.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -201,21 +188,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      outlineColor: _colors2["default"].button.tertiary.border.inverse.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -233,20 +217,10 @@ var _default = {
         }
       }
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [sec]);
-      }
-    },
     '&$disabled': {
       background: "transparent !important",
       color: "".concat(secLight, " !important"),
-      border: "none !important",
-      '& span span': {
-        background: function background(props) {
-          return renderIcon(props, [grey500]);
-        }
-      }
+      border: "none !important"
     },
     '& $loadIcon': {
       fill: sec
@@ -261,21 +235,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-corp']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"]["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon["default"]["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.corp.disabled
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"].disabled]);
+      color: _colors2["default"].text.corp.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon["default"].disabled
       }
     },
     '& $loadIcon': {
@@ -291,21 +261,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.inverse.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -353,7 +319,8 @@ var _default = {
   iconOnly: {
     padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
     '& span span, & svg': {
-      marginRight: 0
+      marginRight: 0,
+      marginLeft: 0
     }
   },
   loadIcon: {

package/build/Fab/__snapshots__/Fab.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
 >
   <span
-    className="Button-cont-0-1-29 Button-cont-0-1-2"
+    className="Button-cont-0-1-23 Button-cont-0-1-2"
   >
     <span
       className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",