@occmundial/occ-atomic 3.0.0-beta.44 → 3.0.0-beta.45

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [3.0.0-beta.45](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.44...v3.0.0-beta.45) (2024-08-15)
+
+
+### Bug Fixes
+
+* Resolve conflicts ([c52608d](https://github.com/occmundial/occ-atomic/commit/c52608d63b00072280a8731515276bd477ca41fd))
+
+
+### Features
+
+* Add disabled state ([717d1cc](https://github.com/occmundial/occ-atomic/commit/717d1cc4c9a2fd3becb2d03b7663729778c59ec2))
+
 # [3.0.0-beta.44](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.43...v3.0.0-beta.44) (2024-08-09)
 
 

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

@@ -2,14 +2,14 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-1 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-18 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-2"
+    className="Button-cont-0-1-23 Button-cont-0-1-2"
   >
     <span
-      className="Icon-oldIcon-0-1-24 Icon-oldIcon-0-1-26 Button-icon-0-1-16"
+      className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
     />
     
   </span>

package/build/Placeholder/Placeholder.test.js

@@ -30,19 +30,19 @@ describe('Placeholder', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
       classes: classes
     }));
-    expect(wrapper.prop('className')).toBe('');
+    expect(wrapper.prop('className')).toBe('placeholder light  ');
     wrapper.setProps({
       textSize: 'headline'
     });
-    expect(wrapper.prop('className')).toBe('headline');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 ');
     wrapper.setProps({
       top: 'tiny'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  ');
     wrapper.setProps({
       bottom: 'small'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny bottomsmall');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  bottomsmall ');
   });
 });
 describe("PlaceholderJSS", function () {

package/build/SlideDown/SlideDown.js

@@ -65,15 +65,31 @@ var textSizes = {
 };
 var _themeColors = {
   blue: {
-    icon: _colors["default"].icon.brand["default"],
+    icon: {
+      "default": _colors["default"].icon.brand["default"],
+      disabled: _colors["default"].icon.brand.disabled
+    },
     text: {
-      primary: true
+      "default": {
+        primary: true
+      },
+      disabled: {
+        indigoSecondary: true
+      }
     }
   },
   "default": {
-    icon: _colors["default"].icon["default"].bold,
+    icon: {
+      "default": _colors["default"].icon["default"].bold,
+      disabled: _colors["default"].icon["default"].disabled
+    },
     text: {
-      highEmphasis: true
+      "default": {
+        highEmphasis: true
+      },
+      disabled: {
+        disabled: true
+      }
     }
   }
 };
@@ -94,6 +110,7 @@ function SlideDown(_ref) {
       icon = _ref.icon,
       divider = _ref.divider,
       noPadding = _ref.noPadding,
+      disabled = _ref.disabled,
       testId = _ref.testId;
 
   var _useState = (0, _react.useState)(!!expanded),
@@ -111,7 +128,7 @@ function SlideDown(_ref) {
   };
 
   var getTextProps = function getTextProps() {
-    return _objectSpread(_objectSpread({}, textSizes[textSize] || textSizes["default"]), themeColors.text);
+    return _objectSpread(_objectSpread({}, textSizes[textSize] || textSizes["default"]), disabled ? themeColors.text.disabled : themeColors.text["default"]);
   };
 
   (0, _react.useEffect)(function () {
@@ -121,12 +138,14 @@ function SlideDown(_ref) {
   }, [prevExpanded, expanded]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.wrapper).concat(divider ? " ".concat(classes.divider) : '')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.button, " ").concat(textSize === 'lg' ? classes.largePadding : classes.normalPadding).concat(!noPadding ? " ".concat(classes.buttonPadding) : ''),
-    role: "button",
-    onClick: toggleContent,
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "".concat(classes.button, " ").concat(textSize === 'lg' ? classes.largePadding : classes.normalPadding).concat(!noPadding ? " ".concat(classes.buttonPadding) : '').concat(disabled ? " ".concat(classes.disabled) : ''),
+    role: "button"
+  }, !disabled && {
+    onClick: toggleContent
+  }, {
     "data-testid": testId
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     justifyContent: !noJustified ? 'between' : null,
     alignItems: "center",
@@ -139,18 +158,18 @@ function SlideDown(_ref) {
     iconName: icon,
     width: 16,
     height: 16,
-    colors: [themeColors.icon],
+    colors: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
     className: classes.leftIcon
   }) : '', customTitle || /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, getTextProps(), {
     strong: strong,
     tag: "label",
-    className: classes.text
+    className: "".concat(classes.text).concat(disabled ? " ".concat(classes.disabled) : '')
   }), title), tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
     theme: "info",
     className: classes.tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: "arrowDown",
-    colors: [themeColors.icon],
+    colors: [!disabled ? themeColors.icon["default"] : themeColors.icon.disabled],
     className: "".concat(classes.icon).concat(_expanded ? " ".concat(classes.rotateIcon) : ''),
     width: 16,
     height: 16,
@@ -211,6 +230,9 @@ SlideDown.propTypes = {
   /** The container has by default a side padding. Use this property if you need to remove it. */
   noPadding: _propTypes["default"].bool,
 
+  /** It disables the component and shows it with the proper theme. */
+  disabled: _propTypes["default"].bool,
+
   /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
   testId: _propTypes["default"].string
 };

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

@@ -22,6 +22,9 @@ Object {
     "opacity": 0,
     "transition": "grid-template-rows cubic-bezier(0.25,0.46,0.45,0.94) 0.2s 0.05s, opacity cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
   },
+  "disabled": Object {
+    "cursor": "not-allowed",
+  },
   "divider": Object {
     "boxShadow": "inset 0 -1px 0px 0px #EDEDF1",
   },

package/build/SlideDown/styles.js

@@ -72,6 +72,9 @@ var _default = {
   },
   flexContainer: {
     gap: _spacing["default"]['size-4']
+  },
+  disabled: {
+    cursor: 'not-allowed'
   }
 };
 exports["default"] = _default;

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-57 Icon-icon-0-1-60 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
+exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-60 Icon-icon-0-1-57 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
 
 exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/package.json

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