@occmundial/occ-atomic 3.0.0-beta.33 → 3.0.0-beta.35

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,25 @@
1
+ # [3.0.0-beta.35](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.34...v3.0.0-beta.35) (2024-07-24)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Change end start tooltip behaviour ([220bcb8](https://github.com/occmundial/occ-atomic/commit/220bcb8c071735ab33eb20817afb5cfcc83106b8))
7
+ * Change svg to floating arrow ([09b1d67](https://github.com/occmundial/occ-atomic/commit/09b1d67810e5b354b3656efc92b623e3e55abc9c))
8
+ * Set min width for end or start and update examples ([65a9f31](https://github.com/occmundial/occ-atomic/commit/65a9f315dc38c011a4563b7726e5bbd4fd2c2725))
9
+
10
+
11
+ ### Features
12
+
13
+ * Update tooltip with new design tokens ([1843c88](https://github.com/occmundial/occ-atomic/commit/1843c887fc232adc0b4877b8348777448394395f))
14
+
15
+ # [3.0.0-beta.34](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.33...v3.0.0-beta.34) (2024-07-22)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * Reuse col breakpoints ([0da7c54](https://github.com/occmundial/occ-atomic/commit/0da7c541bbf6ceb5df8a2c0011cc0e18068ad5fb))
21
+ * Revert some changes, remove unnecesary bp and add padding to grid ([6eb2e99](https://github.com/occmundial/occ-atomic/commit/6eb2e9960029d94c5fcd7eb23efc31366135a7ea))
22
+
1
23
  # [3.0.0-beta.33](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.32...v3.0.0-beta.33) (2024-07-17)
2
24
 
3
25
 
@@ -795,18 +795,6 @@ Object {
795
795
  },
796
796
  },
797
797
  "col": Object {
798
- "@media (min-width: 1200px)": Object {
799
- "padding": Array [
800
- 0,
801
- "12px",
802
- ],
803
- },
804
- "@media (min-width: 1500px)": Object {
805
- "padding": Array [
806
- 0,
807
- "12px",
808
- ],
809
- },
810
798
  "@media (min-width: 576px)": Object {
811
799
  "padding": Array [
812
800
  0,
@@ -819,12 +807,6 @@ Object {
819
807
  "12px",
820
808
  ],
821
809
  },
822
- "@media (min-width: 992px)": Object {
823
- "padding": Array [
824
- 0,
825
- "12px",
826
- ],
827
- },
828
810
  "boxSizing": "border-box",
829
811
  "minHeight": "1px",
830
812
  "padding": Array [
@@ -25,12 +25,6 @@ var styles = {
25
25
  padding: [0, _spacing["default"]['size-2']]
26
26
  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
27
27
  padding: [0, _spacing["default"]['size-3']]
28
- }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
29
- padding: [0, _spacing["default"]['size-3']]
30
- }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
31
- padding: [0, _spacing["default"]['size-3']]
32
- }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
33
- padding: [0, _spacing["default"]['size-3']]
34
28
  }), _col)
35
29
  };
36
30
 
@@ -18,18 +18,6 @@ Object {
18
18
  "-6px",
19
19
  ],
20
20
  },
21
- "@media (min-width: 1200px)": Object {
22
- "margin": Array [
23
- 0,
24
- "-12px",
25
- ],
26
- },
27
- "@media (min-width: 1500px)": Object {
28
- "margin": Array [
29
- 0,
30
- "-12px",
31
- ],
32
- },
33
21
  "@media (min-width: 576px)": Object {
34
22
  "margin": Array [
35
23
  0,
@@ -42,12 +30,6 @@ Object {
42
30
  "-12px",
43
31
  ],
44
32
  },
45
- "@media (min-width: 992px)": Object {
46
- "margin": Array [
47
- 0,
48
- "-12px",
49
- ],
50
- },
51
33
  "boxSizing": "border-box",
52
34
  },
53
35
  }
@@ -31,12 +31,6 @@ var _default = {
31
31
  margin: [0, "-".concat(_spacing["default"]["size-2"])]
32
32
  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
33
33
  margin: [0, "-".concat(_spacing["default"]["size-3"])]
34
- }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
35
- margin: [0, "-".concat(_spacing["default"]["size-3"])]
36
- }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
37
- margin: [0, "-".concat(_spacing["default"]["size-3"])]
38
- }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
39
- margin: [0, "-".concat(_spacing["default"]["size-3"])]
40
34
  }), _row)
41
35
  };
42
36
  exports["default"] = _default;
@@ -31,24 +31,41 @@ var _default = (_conFluid$con$Media = {
31
31
  }
32
32
  },
33
33
  con: {
34
- width: "calc(".concat(_grid["default"].full, " - ").concat(_spacing["default"]['size-5'], ")"),
35
- margin: 'auto'
34
+ width: _grid["default"].full,
35
+ margin: 'auto',
36
+ padding: [0, _spacing["default"]['size-3']]
36
37
  }
37
38
  }, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
38
39
  con: {
39
- width: "calc(".concat(_grid["default"].xsGrid, " - ").concat(_spacing["default"]['size-6'], ")")
40
+ width: _grid["default"].full,
41
+ padding: [0, _spacing["default"]['size-4']]
42
+ },
43
+ conFluid: {
44
+ width: _grid["default"].full,
45
+ padding: [0, _spacing["default"]['size-4']]
40
46
  }
41
47
  }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
42
48
  con: {
43
- width: "calc(".concat(_grid["default"].smGrid, " - ").concat(_spacing["default"]['size-8'], ")")
49
+ width: _grid["default"].full,
50
+ padding: [0, _spacing["default"]['size-5']]
51
+ },
52
+ conFluid: {
53
+ width: _grid["default"].full,
54
+ padding: [0, _spacing["default"]['size-5']]
44
55
  }
45
56
  }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
46
57
  con: {
47
- width: "calc(".concat(_grid["default"].mdGrid, " - ").concat(_spacing["default"]['size-10'], ")")
58
+ width: _grid["default"].full,
59
+ padding: [0, _spacing["default"]['size-7']]
60
+ },
61
+ conFluid: {
62
+ width: _grid["default"].full,
63
+ padding: [0, _spacing["default"]['size-7']]
48
64
  }
49
65
  }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
50
66
  con: {
51
- width: _grid["default"].lgGrid
67
+ width: _grid["default"].lgGrid,
68
+ padding: 0
52
69
  }
53
70
  }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
54
71
  con: {
@@ -15,9 +15,15 @@ var _react2 = require("@floating-ui/react");
15
15
 
16
16
  var _colors = _interopRequireDefault(require("../subatomic/colors"));
17
17
 
18
+ var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
19
+
20
+ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
21
+
18
22
  var _hooks = require("./hooks");
19
23
 
20
- var _colorsArrow;
24
+ var _Icon = _interopRequireDefault(require("../Icon"));
25
+
26
+ var _colorsArrow, _borderColors;
21
27
 
22
28
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
23
29
 
@@ -46,8 +52,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
46
52
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
47
53
 
48
54
  var infoLight = _colors["default"].infoLight,
49
- white = _colors["default"].white,
50
- grey900 = _colors["default"].grey900,
51
55
  info = _colors["default"].info;
52
56
  var themes = {
53
57
  DARK: 'dark',
@@ -55,7 +59,20 @@ var themes = {
55
59
  INFO: 'info',
56
60
  PURPLE: 'purple'
57
61
  };
58
- var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, grey900), _defineProperty(_colorsArrow, themes.LIGHT, white), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
62
+ var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, _colors2["default"].bg.neutral), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.LIGHT, _colors2["default"].bg.surface["default"]), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
63
+ var borderColors = (_borderColors = {}, _defineProperty(_borderColors, themes.DARK, {
64
+ bg: 'black',
65
+ border: 'rgba(0, 0, 0, 0.8)'
66
+ }), _defineProperty(_borderColors, themes.LIGHT, {
67
+ bg: _colors2["default"].border["default"].subtle,
68
+ border: _colors2["default"].border["default"].subtle
69
+ }), _defineProperty(_borderColors, themes.INFO, {
70
+ bg: infoLight,
71
+ border: infoLight
72
+ }), _defineProperty(_borderColors, themes.PURPLE, {
73
+ bg: info,
74
+ border: info
75
+ }), _borderColors);
59
76
  /** Tooltip component to display messages within a container. */
60
77
 
61
78
  function Tooltip(_ref) {
@@ -63,7 +80,8 @@ function Tooltip(_ref) {
63
80
  openProp = _ref.open,
64
81
  children = _ref.children,
65
82
  text = _ref.text,
66
- theme = _ref.theme,
83
+ _ref$theme = _ref.theme,
84
+ theme = _ref$theme === void 0 ? 'purple' : _ref$theme,
67
85
  _ref$openOnHover = _ref.openOnHover,
68
86
  openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
69
87
  _ref$closeDelay = _ref.closeDelay,
@@ -79,10 +97,11 @@ function Tooltip(_ref) {
79
97
  _ref$fit = _ref.fit,
80
98
  fit = _ref$fit === void 0 ? false : _ref$fit,
81
99
  _ref$width = _ref.width,
82
- width = _ref$width === void 0 ? 220 : _ref$width,
100
+ width = _ref$width === void 0 ? 'auto' : _ref$width,
83
101
  _ref$strategy = _ref.strategy,
84
102
  strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
85
- onChange = _ref.onChange;
103
+ onChange = _ref.onChange,
104
+ icon = _ref.icon;
86
105
  var arrowRef = (0, _react.useRef)(null);
87
106
 
88
107
  var _useOpenTooltipState = (0, _hooks.useOpenTooltipState)(openProp, onChange, closeDelay),
@@ -91,23 +110,44 @@ function Tooltip(_ref) {
91
110
  setOpen = _useOpenTooltipState2[1];
92
111
 
93
112
  var getMiddlewares = (0, _react.useMemo)(function () {
94
- var middlewares = [(0, _react2.offset)(16)];
113
+ var middlewares = [(0, _react2.offset)(function (_ref2) {
114
+ var rects = _ref2.rects;
115
+
116
+ if (placement === 'top-start' || placement === 'bottom-start') {
117
+ return {
118
+ crossAxis: rects.reference.width / 2 - 18,
119
+ mainAxis: 16
120
+ };
121
+ } else if (placement === 'top-end' || placement === 'bottom-end') {
122
+ return {
123
+ crossAxis: -(rects.reference.width / 2) + 18,
124
+ mainAxis: 16
125
+ };
126
+ }
127
+
128
+ return {
129
+ mainAxis: 16
130
+ };
131
+ })];
95
132
  showArrow && middlewares.push((0, _react2.arrow)({
96
133
  element: arrowRef,
97
- padding: 16
134
+ padding: "".concat(_spacing["default"]['size-2'], " ").concat(_spacing["default"]['size-3'])
98
135
  }));
99
136
  var sizeMiddleware = (0, _react2.size)({
100
- apply: function apply(_ref2) {
101
- var elements = _ref2.elements,
102
- rects = _ref2.rects,
103
- availableWidth = _ref2.availableWidth;
137
+ apply: function apply(_ref3) {
138
+ var elements = _ref3.elements,
139
+ rects = _ref3.rects,
140
+ availableWidth = _ref3.availableWidth;
104
141
  var styles = {};
105
142
 
106
143
  if (fit) {
107
144
  styles.width = "".concat(rects.reference.width, "px");
108
145
  } else {
109
146
  styles.maxWidth = "".concat(availableWidth, "px");
110
- if (width) styles.width = typeof width === 'string' ? width : "".concat(width, "px");else styles.width = '';
147
+
148
+ if (width) {
149
+ styles.width = typeof width === 'string' ? width : "".concat(width, "px");
150
+ } else styles.width = '';
111
151
  }
112
152
 
113
153
  Object.assign(elements.floating.style, styles);
@@ -141,24 +181,40 @@ function Tooltip(_ref) {
141
181
  getReferenceProps = _useInteractions.getReferenceProps,
142
182
  getFloatingProps = _useInteractions.getFloatingProps;
143
183
 
184
+ var arrowProps = {
185
+ strokeWidth: 1,
186
+ stroke: borderColors[theme].border
187
+ };
144
188
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
145
189
  ref: refs.setReference
146
190
  }, getReferenceProps(), {
147
- className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') && className.activator)
191
+ className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') ? className.activator : '')
148
192
  }), children), /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, open && /*#__PURE__*/_react["default"].createElement("div", _extends({
149
- className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
193
+ className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') ? className.tooltip : '', " ").concat(classes[theme] || classes.purple),
150
194
  ref: refs.setFloating,
151
195
  style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
152
196
  zIndex: zIndex,
153
197
  position: strategy
154
198
  })
155
- }, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
199
+ }, getFloatingProps()), /*#__PURE__*/_react["default"].createElement("div", {
200
+ className: classes.content
201
+ }, icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
202
+ iconName: icon,
203
+ width: 12,
204
+ height: 12
205
+ }), /*#__PURE__*/_react["default"].createElement("p", {
206
+ className: classes.text
207
+ }, text)), showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, _extends({
208
+ style: {
209
+ transform: 'translateY(1px)'
210
+ },
156
211
  ref: arrowRef,
157
212
  context: context,
158
- fill: colorsArrow[theme] || colorsArrow[themes.PURPLE],
159
- width: 14,
160
- height: 10
161
- }))));
213
+ fill: colorsArrow[theme] || colorsArrow[themes.PURPLE]
214
+ }, arrowProps, {
215
+ width: 20,
216
+ d: "M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z"
217
+ })))));
162
218
  }
163
219
 
164
220
  Tooltip.propTypes = {
@@ -204,7 +260,8 @@ Tooltip.propTypes = {
204
260
  strategy: _propTypes["default"].oneOf(['absolute', 'fixed']),
205
261
 
206
262
  /** Callback fired when the Tooltip show state changes. */
207
- onChange: _propTypes["default"].func
263
+ onChange: _propTypes["default"].func,
264
+ icon: _propTypes["default"].string
208
265
  };
209
266
  var _default = Tooltip;
210
267
  exports["default"] = _default;
@@ -1,14 +1,21 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Tooltip matches the snapshot 1`] = `"<div class=\\"activator false\\"></div>"`;
3
+ exports[`Tooltip matches the snapshot 1`] = `"<div class=\\"activator \\"></div>"`;
4
4
 
5
5
  exports[`Tooltip styles matches the snapshot 1`] = `
6
6
  Object {
7
7
  "activator": Object {
8
8
  "display": "inline-block",
9
9
  },
10
+ "content": Object {
11
+ "alignItems": "center",
12
+ "display": "flex",
13
+ "gap": "4px",
14
+ "justifyContent": "center",
15
+ },
10
16
  "dark": Object {
11
- "background": "#222222",
17
+ "background": "#000",
18
+ "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
12
19
  "color": "#ffffff",
13
20
  },
14
21
  "info": Object {
@@ -16,18 +23,27 @@ Object {
16
23
  "color": "#5736ab",
17
24
  },
18
25
  "light": Object {
19
- "background": "#ffffff",
26
+ "&:after": Object {
27
+ "boxShadow": "inset -2px -2px 0 -1px #EDEDF1",
28
+ },
29
+ "background": "#fff",
30
+ "boxShadow": "inset 0 0 0 1px #EDEDF1",
20
31
  "color": "#5736ab",
21
32
  },
22
33
  "purple": Object {
23
34
  "background": "#5736ab",
24
35
  "color": "#ffffff",
25
36
  },
37
+ "text": Object {
38
+ "font": "300 12px/1.5 'OccText', sans-serif",
39
+ "margin": 0,
40
+ },
26
41
  "tooltip": Object {
27
42
  "borderRadius": "4px",
28
- "fontSize": "14px",
29
- "lineHeight": 1.5,
30
- "padding": "16px",
43
+ "padding": Array [
44
+ "8px",
45
+ "12px",
46
+ ],
31
47
  },
32
48
  }
33
49
  `;
@@ -7,38 +7,60 @@ exports["default"] = void 0;
7
7
 
8
8
  var _colors = _interopRequireDefault(require("../subatomic/colors"));
9
9
 
10
+ var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
11
+
12
+ var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
13
+
14
+ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
15
+
16
+ var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
17
+
18
+ var _styles = require("../Text/styles");
19
+
10
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
21
 
12
22
  var infoLight = _colors["default"].infoLight,
13
23
  infoText = _colors["default"].infoText,
14
24
  info = _colors["default"].info,
15
- white = _colors["default"].white,
16
- grey900 = _colors["default"].grey900;
25
+ white = _colors["default"].white;
17
26
  var _default = {
18
27
  activator: {
19
28
  display: 'inline-block'
20
29
  },
21
30
  tooltip: {
22
- padding: '16px',
23
- borderRadius: '4px',
24
- fontSize: '14px',
25
- lineHeight: 1.5
31
+ padding: [_spacing["default"]['size-2'], _spacing["default"]['size-3']],
32
+ borderRadius: _borderRadius["default"]['br-xs']
33
+ },
34
+ content: {
35
+ display: 'flex',
36
+ gap: _spacing["default"]['size-1'],
37
+ alignItems: 'center',
38
+ justifyContent: 'center'
26
39
  },
27
40
  info: {
28
41
  background: infoLight,
29
42
  color: infoText
30
43
  },
31
44
  dark: {
32
- background: grey900,
33
- color: white
45
+ background: _colors2["default"].bg.neutral,
46
+ color: white,
47
+ boxShadow: "inset 0 0 0 1px ".concat(_colors2["default"].border.inverse.subtle)
34
48
  },
35
49
  light: {
36
- background: white,
37
- color: info
50
+ background: _colors2["default"].bg.surface["default"],
51
+ color: info,
52
+ '&:after': {
53
+ boxShadow: "inset -2px -2px 0 -1px ".concat(_colors2["default"].border["default"].subtle)
54
+ },
55
+ boxShadow: "inset 0 0 0 1px ".concat(_colors2["default"].border["default"].subtle)
38
56
  },
39
57
  purple: {
40
58
  background: info,
41
59
  color: white
60
+ },
61
+ text: {
62
+ font: (0, _styles.parseFontValue)(_fonts["default"]['body-x-small']),
63
+ margin: 0
42
64
  }
43
65
  };
44
66
  exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "3.0.0-beta.33",
3
+ "version": "3.0.0-beta.35",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",