@occmundial/occ-atomic 3.0.0-beta.37 → 3.0.0-beta.38

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.38](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.37...v3.0.0-beta.38) (2024-07-25)
+
+
+### Bug Fixes
+
+* Icon disabled styles ([d8bc738](https://github.com/occmundial/occ-atomic/commit/d8bc73881275ec1537e5a06bd37f9a869a5fe210))
+
 # [3.0.0-beta.37](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.36...v3.0.0-beta.37) (2024-07-24)
 
 

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,19 +48,19 @@ 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)",
     },
@@ -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,16 +101,16 @@ 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)",
     },
@@ -198,17 +192,17 @@ 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",
     },
@@ -230,19 +224,19 @@ 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)",
     },
@@ -256,19 +250,19 @@ Object {
     "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)",
@@ -288,15 +282,16 @@ Object {
     "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)",

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'];
@@ -105,19 +104,15 @@ var _default = {
     '&: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
       }
     }
   },
@@ -133,18 +128,14 @@ var _default = {
     '&: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': {
@@ -168,19 +159,15 @@ var _default = {
     '&: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': {
@@ -204,18 +191,15 @@ var _default = {
     '&: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
@@ -264,18 +238,14 @@ var _default = {
     '&: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': {
@@ -294,18 +264,14 @@ var _default = {
     '&: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
       }
     }
   },

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

@@ -2,11 +2,11 @@
 
 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"
   disabled={false}
 >
   <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": "3.0.0-beta.37",
+  "version": "3.0.0-beta.38",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",