@occmundial/occ-atomic 2.0.0-beta.17 → 2.0.0-beta.18

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [2.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-05-21)
+
+
+### Bug Fixes
+
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+
 # [2.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-05-21)
 
 

package/build/Autocomplete/Autocomplete.test.js

@@ -36,7 +36,7 @@ var items = [{
   textRight: '(6)',
   id: 4
 }];
-describe("Autocomplete", function () {
+describe('Autocomplete', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       droplistProps: {
@@ -64,7 +64,7 @@ describe("Autocomplete", function () {
     expect(wrapper.find('.input').at(0).length).toBe(1);
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
   });
-  it('hides the droplist when there\'s no value or the input has no focus', function () {
+  it("hides the droplist when there's no value or the input has no focus", function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
@@ -147,14 +147,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: 'test-component'
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-28').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
@@ -164,7 +167,9 @@ describe("Autocomplete", function () {
       focus: true,
       value: 'a'
     });
-    wrapper.find('.Droplist-item-0-1-28').at(1).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-1'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -202,14 +207,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: "test-component"
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-28').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {
@@ -247,7 +255,7 @@ describe("Autocomplete", function () {
     expect(onBlur.mock.calls.length).toBe(1);
   });
 });
-describe("AutocompleteJSS", function () {
+describe('AutocompleteJSS', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       droplistProps: {
@@ -258,7 +266,7 @@ describe("AutocompleteJSS", function () {
     expect(wrapper).toMatchSnapshot();
   });
 });
-describe("Autocomplete styles", function () {
+describe('Autocomplete styles', function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });

package/build/Droplist/Droplist.js

@@ -21,11 +21,9 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
 var _functions = require("./functions");
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -54,9 +52,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 var arrowDown = 40;
 var arrowUp = 38;
 var enter = 13;
-var inkLighter = _colors["default"].inkLighter,
-    ink = _colors["default"].ink;
-var iconSmall = _iconSizes["default"].small;
 /**
  * The Droplist component displays a list and filters it with the prop 'term'.
  * The value of 'term' es highlighted in every item that matches.
@@ -408,7 +403,7 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
           term = _this$props5.term,
           testId = _this$props5.testId;
       var itemsDOM = items.map(function (item, i) {
-        var index = (0, _functions.compareText)(item[itemTextKey], term);
+        var index = term ? (0, _functions.compareText)(item[itemTextKey], term) : -1;
 
         if (index >= 0) {
           var text = (0, _functions.separateText)(item[itemTextKey], index, term);
@@ -423,65 +418,58 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: iconSmall,
-            height: iconSmall,
+            width: 24,
+            height: 24,
             display: "inline-block",
             className: classes.icon,
-            colors: [item.disabled ? inkLighter : ink]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            className: item.iconName ? classes.iconText : '',
-            low: item.disabled
-          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "b",
-            strong: true,
-            low: item.disabled
-          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            low: item.disabled,
-            className: "".concat(classes.extraText).concat(!item.disabled ? " ".concat(classes.extraTextColor) : '')
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[0].length ? text[0] : '', /*#__PURE__*/_react["default"].createElement("b", {
+            className: "".concat(classes.highlighted).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, text[1].length ? text[1] : ''), text[2].length ? text[2] : '', item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         } else {
           return /*#__PURE__*/_react["default"].createElement("div", _extends({
             key: item[itemIdKey],
-            onClick: function onClick(e) {
+            onClick: !item.disabled ? function (e) {
               return _this4.onClick(item, e);
-            },
+            } : null,
             onMouseDown: function onMouseDown(e) {
               return _this4.onMouseDown(item, e);
             },
             onMouseUp: function onMouseUp(e) {
               return _this4.onMouseUp(item, e);
             },
-            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '')
+            className: "".concat(classes.item).concat(selectedGroup && currentItem === i ? " ".concat(classes.onFocus) : '').concat(!item.disabled ? " ".concat(classes.itemPointer) : " ".concat(classes.disabled))
           }, testId && {
             'data-testid': "".concat(testId, "__droplist-item-").concat(i)
-          }), /*#__PURE__*/_react["default"].createElement("div", null, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          }), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.itemContainer
+          }, item.iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
             iconName: item.iconName,
-            width: 14,
-            height: 14,
+            width: 24,
+            height: 24,
             display: "inline-block",
-            colors: [inkLighter]
-          }), /*#__PURE__*/_react["default"].createElement(_Text["default"], null, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            strong: true,
-            className: classes.extraText
+            className: classes.icon,
+            colors: [item.disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon["default"]["default"]]
+          }), /*#__PURE__*/_react["default"].createElement("p", {
+            className: "".concat(classes.text, " ").concat(classes.mainText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextKey], item.extraText && /*#__PURE__*/_react["default"].createElement("span", {
+            className: "".concat(classes.text, " ").concat(classes.extraText)
           }, item.extraText))), item[itemTextRightKey] && /*#__PURE__*/_react["default"].createElement("span", {
-            className: classes.right
-          }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-            tag: "span",
-            low: true
-          }, item[itemTextRightKey])));
+            className: "".concat(classes.text, " ").concat(classes.rightText).concat(item.disabled ? " ".concat(classes.corpDisabled) : '')
+          }, item[itemTextRightKey]));
         }
       });
       return itemsDOM;
@@ -510,11 +498,11 @@ var Droplist = /*#__PURE__*/function (_React$Component) {
       }, groups ? items.map(function (group, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: group[groupIdKey]
-        }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-          small: true,
-          mid: true,
+        }, /*#__PURE__*/_react["default"].createElement("span", {
           className: classes.group
-        }, group[groupNameKey].toUpperCase()), _this5.renderList(group[groupItemsKey], currentGroup === index));
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          className: "".concat(classes.text, " ").concat(classes.groupText)
+        }, group[groupNameKey])), _this5.renderList(group[groupItemsKey], currentGroup === index));
       }) : this.renderList(items, true));
     }
   }]);

package/build/Droplist/Droplist.test.js

@@ -119,7 +119,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.block>div').at(0).text()).toBe('PAÍSESMéxico(3405)');
+    expect(wrapper.find('.block>div').at(0).text()).toBe('PaísesMéxico(3405)');
   });
   it('filters the items', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Droplist["default"], {
@@ -151,7 +151,7 @@ describe("Droplist", function () {
       itemIdKey: "id",
       classes: classes
     }));
-    expect(wrapper.find('.item').at(0).find('b').text()).toBe('');
+    expect(wrapper.find('.item').at(0).find('b').exists()).toBe(false);
     wrapper.setProps({
       term: 'Administrador'
     });

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

@@ -5,59 +5,91 @@ exports[`Droplist matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Droplist styles matches the snapshot 1`] = `
 Object {
   "block": Object {
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
+    "background": "#fff",
+    "border": "1px solid #D3D4DC",
+    "borderRadius": "4px",
+    "boxShadow": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
     "overflow": "hidden",
+    "padding": "8px",
   },
-  "extraText": Object {
-    "marginLeft": 8,
+  "corpDisabled": Object {
+    "color": "#878A9F",
   },
-  "extraTextColor": Object {
-    "color": "#0946CB",
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "extraText": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 10px/1.5 'OccText', sans-serif",
+    "marginLeft": "4px",
   },
   "group": Object {
+    "display": "inline-block",
     "padding": Array [
-      16,
-      16,
-      4,
+      "8px",
+      "16px",
+      0,
     ],
   },
-  "icon": Object {
-    "marginRight": 8,
-    "position": "absolute",
-    "top": 12,
+  "groupText": Object {
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "iconText": Object {
-    "display": "inline-block",
-    "marginLeft": 24,
+  "highlighted": Object {
+    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
+  "icon": Object {
+    "marginRight": "8px",
   },
   "item": Object {
+    "&:active, &:focus": Object {
+      "& > $rightText": Object {
+        "color": "#080D39",
+      },
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#fafafa",
+      "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
+    "alignItems": "center",
+    "borderRadius": "4px",
     "display": "flex",
     "justifyContent": "space-between",
     "padding": Array [
-      8,
-      16,
+      "12px",
+      "16px",
     ],
     "position": "relative",
     "transition": "0.1s all",
   },
+  "itemContainer": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "itemPointer": Object {
     "cursor": "pointer",
   },
+  "mainText": Object {
+    "color": "#080D39",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "#e4edff",
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "background": "#e4edff",
+    "background": "hsl(221 91.2% 35.7% / 0.1)",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 16,
-    "transition": "0.1s all",
+    "marginLeft": "16px",
+  },
+  "rightText": Object {
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+  },
+  "text": Object {
+    "margin": 0,
   },
 }
 `;

package/build/Droplist/styles.js

@@ -5,70 +5,100 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var gutter = _spacing["default"].gutter,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    base = _spacing["default"].base,
-    xTiny = _spacing["default"].xTiny;
-var primLighter = _colors["default"].primLighter,
-    grey50 = _colors["default"].grey50,
-    grey200 = _colors["default"].grey200,
-    bgWhite = _colors["default"].bgWhite,
-    textLink = _colors["default"].textLink;
 var _default = {
   block: {
-    background: bgWhite,
-    border: "1px solid ".concat(grey200),
-    borderRadius: xTiny,
-    overflow: 'hidden'
+    background: _colors["default"]['text-field'].bg["default"],
+    border: "1px solid ".concat(_colors["default"]['text-field'].border["default"]),
+    borderRadius: _borderRadius["default"]['br-xs'],
+    overflow: 'hidden',
+    padding: _spacing["default"]['size-2'],
+    boxShadow: _shadows["default"]['elevation-elevation-4']
+  },
+  text: {
+    margin: 0
   },
   group: {
-    padding: [small, small, xTiny]
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4'], 0],
+    display: 'inline-block'
+  },
+  groupText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label'])
   },
   item: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: [tiny, small],
+    alignItems: 'center',
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     transition: '0.1s all',
+    borderRadius: _borderRadius["default"]['br-xs'],
     position: 'relative',
     '&:hover': {
-      background: grey50
+      background: _colors["default"].dropdown.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].dropdown.bg.active,
+      '& > $rightText': {
+        color: _colors["default"].text.corp.primary
+      }
     }
   },
   itemPointer: {
     cursor: 'pointer'
   },
+  disabled: {
+    pointerEvents: 'none'
+  },
   right: {
-    "float": 'right',
-    transition: '0.1s all',
-    marginLeft: small
+    marginLeft: _spacing["default"]['size-4']
+  },
+  rightText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.secondary
   },
   onFocus: {
-    background: primLighter,
+    background: _colors["default"].dropdown.bg.active,
     '&:hover': {
-      background: primLighter
+      background: _colors["default"].dropdown.bg.active
     }
   },
   icon: {
-    marginRight: tiny,
-    position: 'absolute',
-    top: gutter
+    marginRight: _spacing["default"]['size-2']
   },
-  iconText: {
+  mainText: {
     display: 'inline-block',
-    marginLeft: base
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder']),
+    color: _colors["default"].text.corp.primary
+  },
+  corpDisabled: {
+    color: _colors["default"].text.corp.disabled
   },
   extraText: {
-    marginLeft: tiny
+    marginLeft: _spacing["default"]['size-1'],
+    display: 'inline-block',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['heading-tag']),
+    color: _colors["default"].text.indigo.primary
+  },
+  highlighted: {
+    background: _colors["default"].bg.action.secondary["default"],
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder'])
   },
-  extraTextColor: {
-    color: textLink
+  itemContainer: {
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 exports["default"] = _default;

package/build/Text/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.parseFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -46,6 +46,7 @@ var parseFontValue = function parseFontValue(font) {
   return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
 };
 
+exports.parseFontValue = parseFontValue;
 var _default = {
   text: {
     letterSpacing: 0,

package/catalog-info.yaml

@@ -0,0 +1,13 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: occ-atomic
+  annotations:
+    github.com/project-slug: occmundial/occ-atomic
+    design-tokens.occdeep.io/platform: tailwind
+    design-tokens.occdeep.io/path: lib/tokens
+    design-tokens.occdeep.io/branch: beta
+spec:
+  type: service
+  lifecycle: production
+  owner: ui-team

package/package.json

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