@occmundial/occ-atomic 2.0.0-beta.13 → 2.0.0-beta.15

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,26 @@
1
+ # [2.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-05-10)
2
+
3
+
4
+ ### Features
5
+
6
+ * Updated radio styles and documentation ([2c39496](https://github.com/occmundial/occ-atomic/commit/2c39496186092fe20434ce4a030c28e42cebff91))
7
+
8
+ # [2.0.0-beta.14](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-05-07)
9
+
10
+
11
+ ### Features
12
+
13
+ * Add hover shadow ([207b7a2](https://github.com/occmundial/occ-atomic/commit/207b7a2819771ff7384c7c53448f37d5dfb7e146))
14
+ * Add new fab component ([2164eea](https://github.com/occmundial/occ-atomic/commit/2164eea04ed268165609db2bcd80be4dd02df6a2))
15
+ * Remove fab border transition ([485e64c](https://github.com/occmundial/occ-atomic/commit/485e64ca574f3300a159b8c4a5bedf11ee49b32d))
16
+ * Remove fab border transition ([9561c59](https://github.com/occmundial/occ-atomic/commit/9561c599981f8ccfc76ccdb00b35576d01f53578))
17
+ * Update fab snapshot test ([d75b525](https://github.com/occmundial/occ-atomic/commit/d75b525dd32c4f4b38cebf4f5cd8e0dd1034752e))
18
+ * Update ghost pink loading icon ([9292276](https://github.com/occmundial/occ-atomic/commit/92922766abe7c0010b9f4f4b8265c2105c019f3c))
19
+ * Update snapshots ([438e896](https://github.com/occmundial/occ-atomic/commit/438e8968d5d228d1b9bad3883be676fa1bc8f2b1))
20
+ * Update snapshots ([0395996](https://github.com/occmundial/occ-atomic/commit/0395996ad4f21e6db5b917005c9ccf1c8a9dd0df))
21
+ * Update tokens path and add outline offset ([a7e6807](https://github.com/occmundial/occ-atomic/commit/a7e6807e1936d98c8f72e483b1b131dcfa714877))
22
+ * Update tokens path and add outline offset ([89eeb16](https://github.com/occmundial/occ-atomic/commit/89eeb16a797cb4996069f369bce34b9efb025a3d))
23
+
1
24
  # [2.0.0-beta.13](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-04-29)
2
25
 
3
26
 
@@ -49,7 +49,7 @@ Object {
49
49
  },
50
50
  "ghostGrey": Object {
51
51
  "& $loadIcon": Object {
52
- "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QjtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiM1QTVEN0I7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzVBNUQ3QiIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojNUE1RDdCIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
52
+ "fill": "#5A5D7B",
53
53
  },
54
54
  "& span span": Object {
55
55
  "background": [Function],
@@ -75,7 +75,7 @@ Object {
75
75
  },
76
76
  "ghostPink": Object {
77
77
  "& $loadIcon": Object {
78
- "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiNmMTM0NjU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1O3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6I2YxMzQ2NSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojZjEzNDY1Ii8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
78
+ "fill": "#f13465",
79
79
  },
80
80
  "& span span": Object {
81
81
  "background": [Function],
@@ -232,7 +232,7 @@ Object {
232
232
  },
233
233
  "secondary": Object {
234
234
  "& $loadIcon": Object {
235
- "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
235
+ "fill": "#083CAE",
236
236
  },
237
237
  "& span span": Object {
238
238
  "background": [Function],
@@ -258,7 +258,7 @@ Object {
258
258
  },
259
259
  "tertiary": Object {
260
260
  "& $loadIcon": Object {
261
- "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICAJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgICAgICAgICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICAgICAgICAgCS5zdDB7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjEiIHkxPSIxMiIgeDI9IjMiIHkyPSIxMiI+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjE3NzgiIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAiLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuMjI3MSIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRTtzdG9wLW9wYWNpdHk6MC4xIi8+CiAgICAgICAgICAgIAk8c3RvcCAgb2Zmc2V0PSIwLjMxNTciIHN0eWxlPSJzdG9wLWNvbG9yOiMwODNDQUU7c3RvcC1vcGFjaXR5OjAuNCIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC40NTI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFO3N0b3Atb3BhY2l0eTowLjciLz4KICAgICAgICAgICAgCTxzdG9wICBvZmZzZXQ9IjAuNTU0NiIgc3R5bGU9InN0b3AtY29sb3I6IzA4M0NBRSIvPgogICAgICAgICAgICAJPHN0b3AgIG9mZnNldD0iMC45Mjc4IiBzdHlsZT0ic3RvcC1jb2xvcjojMDgzQ0FFIi8+CiAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOS4xLDEyYzAuMSw0LTMuMSw3LjItNy4xLDcuMlM0LjgsMTYsNC44LDEyUzgsNC44LDEyLDQuOFYzYy01LDAtOSw0LTksOXM0LDksOSw5czktNCw5LTlIMTkuMXoiLz4KICAgICAgICAgICAgPC9zdmc+)",
261
+ "fill": "#083CAE",
262
262
  },
263
263
  "& span span": Object {
264
264
  "background": [Function],
@@ -148,7 +148,7 @@ var _default = {
148
148
  }
149
149
  },
150
150
  '& $loadIcon': {
151
- background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
151
+ fill: _colors2["default"].icon.brand["default"]
152
152
  }
153
153
  },
154
154
  tertiary: {
@@ -184,7 +184,7 @@ var _default = {
184
184
  }
185
185
  },
186
186
  '& $loadIcon': {
187
- background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon.brand["default"]]))
187
+ fill: _colors2["default"].icon.brand["default"]
188
188
  }
189
189
  },
190
190
  tertiaryWhite: {
@@ -249,7 +249,7 @@ var _default = {
249
249
  }
250
250
  },
251
251
  '& $loadIcon': {
252
- background: _icons["default"].base(_icons["default"].loading.icon([sec]))
252
+ fill: sec
253
253
  }
254
254
  },
255
255
  ghostGrey: {
@@ -279,7 +279,7 @@ var _default = {
279
279
  }
280
280
  },
281
281
  '& $loadIcon': {
282
- background: _icons["default"].base(_icons["default"].loading.icon([_colors2["default"].icon["default"]["default"]]))
282
+ fill: _colors2["default"].icon["default"]["default"]
283
283
  }
284
284
  },
285
285
  ghostWhite: {
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _Button = _interopRequireDefault(require("../Button"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
+
16
+ /**
17
+ *
18
+ * A floating action button appears in front of all screen content as a circular shape with an icon in its center.
19
+ */
20
+ var Fab = function Fab(props) {
21
+ var size = props.size,
22
+ classes = props.classes,
23
+ className = props.className,
24
+ testId = props.testId,
25
+ icon = props.icon,
26
+ onClick = props.onClick,
27
+ href = props.href,
28
+ target = props.target,
29
+ rel = props.rel,
30
+ disabled = props.disabled,
31
+ id = props.id;
32
+ var classNames = classes.fab;
33
+ if (className) classNames += " ".concat(className);
34
+ if (disabled) classNames += " ".concat(classes.disabled);
35
+ return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
36
+ size: size,
37
+ icon: icon,
38
+ onClick: onClick,
39
+ href: href,
40
+ target: target,
41
+ rel: rel,
42
+ disabled: disabled,
43
+ round: true,
44
+ testId: testId,
45
+ className: classNames,
46
+ id: id,
47
+ theme: "tertiary"
48
+ });
49
+ };
50
+
51
+ Fab.propTypes = {
52
+ classes: _propTypes["default"].object.isRequired,
53
+
54
+ /** Use the name of any of the icons available in the library. */
55
+ icon: _propTypes["default"].string.isRequired,
56
+
57
+ /** The fab has three different sizes: sm, md, lg. */
58
+ size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
59
+
60
+ /** It disables the button. */
61
+ disabled: _propTypes["default"].bool,
62
+
63
+ /** The function to call when the button is clicked. */
64
+ onClick: _propTypes["default"].func,
65
+
66
+ /** Optionally, you can set the href property and use it like a link. */
67
+ href: _propTypes["default"].string,
68
+
69
+ /** If you use the href property, you can also define the target. */
70
+ target: _propTypes["default"].string,
71
+
72
+ /** If you use the href property, you can also define the rel attribute. */
73
+ rel: _propTypes["default"].string,
74
+ id: _propTypes["default"].string,
75
+ className: _propTypes["default"].string,
76
+
77
+ /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
78
+ testId: _propTypes["default"].string
79
+ };
80
+ var _default = Fab;
81
+ exports["default"] = _default;
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ var _react = _interopRequireDefault(require("react"));
4
+
5
+ var _enzyme = require("enzyme");
6
+
7
+ var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
8
+
9
+ var _Fab = _interopRequireDefault(require("./Fab"));
10
+
11
+ var _styles = _interopRequireDefault(require("./styles"));
12
+
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
14
+
15
+ 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; }
16
+
17
+ var reduceClasses = function reduceClasses(prev, curr) {
18
+ return Object.assign({}, prev, _defineProperty({}, curr, curr));
19
+ };
20
+
21
+ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
22
+ describe('FAB', function () {
23
+ it('matches the snapshot', function () {
24
+ var wrapper = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
25
+ icon: "testing",
26
+ theme: "primary",
27
+ classes: classes
28
+ })).toJSON();
29
+
30
+ expect(wrapper).toMatchSnapshot();
31
+ });
32
+ it('returns a Button with an icon', function () {
33
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
34
+ classes: classes,
35
+ icon: "testing"
36
+ }));
37
+ expect(wrapper.find('button').length).toBe(1);
38
+ expect(wrapper.find('button span Jss(Icon)').length).toBe(1);
39
+ expect(wrapper.find('a').length).toBe(0);
40
+ });
41
+ it('returns an anchor', function () {
42
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
43
+ classes: classes,
44
+ href: "http://occ.com.mx",
45
+ icon: "testing"
46
+ }));
47
+ expect(wrapper.find('button').length).toBe(0);
48
+ expect(wrapper.find('a').length).toBe(1);
49
+ });
50
+ it('has the right size', function () {
51
+ var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
52
+ classes: classes,
53
+ icon: "testing",
54
+ size: "md"
55
+ }));
56
+ expect(wrapper.find('button').prop('className').indexOf('md')).not.toBe(-1);
57
+ expect(wrapper.find('button').prop('className').indexOf('lg')).toBe(-1);
58
+ wrapper.setProps({
59
+ size: 'lg'
60
+ });
61
+ expect(wrapper.find('button').prop('className').indexOf('md')).toBe(-1);
62
+ expect(wrapper.find('button').prop('className').indexOf('lg')).not.toBe(-1);
63
+ });
64
+ });
@@ -0,0 +1,16 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`FAB matches the snapshot 1`] = `
4
+ <button
5
+ 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"
6
+ >
7
+ <span
8
+ className="Button-cont-0-1-29 Button-cont-0-1-2"
9
+ >
10
+ <span
11
+ className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
12
+ />
13
+
14
+ </span>
15
+ </button>
16
+ `;
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _reactJss = _interopRequireDefault(require("react-jss"));
9
+
10
+ var _Fab = _interopRequireDefault(require("./Fab"));
11
+
12
+ var _styles = _interopRequireDefault(require("./styles"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
+
16
+ var _default = (0, _reactJss["default"])(_styles["default"])(_Fab["default"]);
17
+
18
+ exports["default"] = _default;
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
9
+
10
+ var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
+
14
+ var _default = {
15
+ fab: {
16
+ background: "".concat(_colors["default"].bg.surface["default"], " !important"),
17
+ outline: "1px solid ".concat(_colors["default"].border["default"]["default"]),
18
+ outlineOffset: '-1px',
19
+ boxShadow: _shadows["default"]["elevation-elevation-4"],
20
+ transition: '0.3s all, 0s outline, 0s outline-offset',
21
+ '&:hover': {
22
+ outlineColor: _colors["default"].border["default"].bold,
23
+ background: "".concat(_colors["default"].bg["default"], " !important")
24
+ },
25
+ '&:active, &:focus': {
26
+ outline: "2px solid ".concat(_colors["default"].border["default"].bold),
27
+ outlineOffset: '-2px',
28
+ background: "".concat(_colors["default"].bg["default"], " !important")
29
+ },
30
+ '&$disabled': {
31
+ color: _colors["default"].text.indigo.secondary,
32
+ cursor: 'not-allowed',
33
+ outlineColor: _colors["default"].border["default"].subtle
34
+ },
35
+ '&:not(:active):focus-visible': {
36
+ boxShadow: _shadows["default"]['focus-corp'],
37
+ outlineColor: _colors["default"].border["default"]["default"]
38
+ }
39
+ },
40
+ disabled: {
41
+ cursor: 'default',
42
+ pointerEvents: 'none'
43
+ }
44
+ };
45
+ exports["default"] = _default;
@@ -94,6 +94,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
94
94
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
95
95
  id: option.trk,
96
96
  key: option.value,
97
+ tabIndex: -1,
97
98
  "data-testid": option.testId
98
99
  }, option.testId && {
99
100
  'data-value': selected == option.value ? 1 : 0
@@ -111,7 +112,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
111
112
  className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
112
113
  }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
113
114
  tag: "label",
114
- mid: true,
115
+ corpSecondary: true,
115
116
  className: classes.right
116
117
  }, option.right));
117
118
  }));
@@ -147,8 +148,14 @@ Radio.propTypes = {
147
148
 
148
149
  /** Use this prop to overflow the text of the label, adding '...' and the end. */
149
150
  textOverflow: _propTypes["default"].bool,
151
+
152
+ /** Id of the component */
150
153
  id: _propTypes["default"].string,
154
+
155
+ /** Adds class(es) to each option container */
151
156
  className: _propTypes["default"].string,
157
+
158
+ /** Adds style(s) to each option container */
152
159
  style: _propTypes["default"].object
153
160
  };
154
161
  var _default = Radio;
@@ -5,39 +5,92 @@ exports[`Radio matches the snapshot 1`] = `ShallowWrapper {}`;
5
5
  exports[`Radio styles matches the snapshot 1`] = `
6
6
  Object {
7
7
  "active": Object {
8
- "& $radio:after": Object {
9
- "background": Array [
10
- "#083cae",
11
- "!important",
12
- ],
8
+ "& $radio": Object {
9
+ "&:after": Object {
10
+ "background": "#0059CD",
11
+ },
12
+ "&:before": Object {
13
+ "borderColor": "#0059CD",
14
+ "borderWidth": 2,
15
+ },
13
16
  },
14
17
  },
15
18
  "cont": Object {
16
- "&:after": Object {
17
- "clear": "both",
18
- "content": "\\"\\"",
19
- "display": "table",
19
+ "&$active": Object {
20
+ "&:active": Object {
21
+ "& $radio:after": Object {
22
+ "background": "#0047A5",
23
+ },
24
+ "& $radio:before": Object {
25
+ "borderColor": "#0047A5",
26
+ "borderWidth": "3px",
27
+ "boxShadow": "initial",
28
+ },
29
+ },
30
+ "&:focus $radio:before": Object {
31
+ "borderColor": "#0059CD",
32
+ "boxShadow": undefined,
33
+ },
34
+ "&:hover": Object {
35
+ "& $radio:after": Object {
36
+ "background": "#0047A5",
37
+ },
38
+ "& $radio:before": Object {
39
+ "borderColor": "#0047A5",
40
+ "boxShadow": "initial",
41
+ },
42
+ },
20
43
  },
21
- "&:hover $radio:after": Object {
22
- "background": "#dddddd",
44
+ "&:not($active)": Object {
45
+ "&:active $radio:before": Object {
46
+ "borderColor": "#6C6F89",
47
+ "borderWidth": "2px",
48
+ "boxShadow": "initial",
49
+ },
50
+ "&:focus $radio:before": Object {
51
+ "borderColor": "#D3D4DC",
52
+ "boxShadow": undefined,
53
+ },
54
+ "&:hover $radio:before": Object {
55
+ "borderColor": "#6C6F89",
56
+ "boxShadow": "initial",
57
+ },
23
58
  },
24
59
  "alignItems": "start",
25
60
  "boxSizing": "border-box",
26
61
  "cursor": "pointer",
27
62
  "display": "flex",
28
63
  "outline": "0",
29
- "paddingBottom": 8,
30
- "paddingTop": 8,
64
+ "paddingBottom": "8px",
65
+ "paddingTop": "8px",
31
66
  },
32
67
  "disabled": Object {
33
- "opacity": 0.4,
68
+ "& :not($radio)": Object {
69
+ "opacity": 0.4,
70
+ },
71
+ "&$active": Object {
72
+ "& $radio:after": Object {
73
+ "background": "#8DA5DA",
74
+ },
75
+ "& $radio:before": Object {
76
+ "borderColor": "#8DA5DA",
77
+ },
78
+ },
79
+ "&:not($active)": Object {
80
+ "& $radio:after": Object {
81
+ "background": "#EDEDF1",
82
+ },
83
+ "& $radio:before": Object {
84
+ "background": "#EDEDF1",
85
+ },
86
+ },
34
87
  "pointerEvents": "none",
35
88
  },
36
89
  "label": Object {
37
90
  "cursor": "pointer",
38
91
  "flex": "1",
39
92
  "float": "left",
40
- "marginLeft": 8,
93
+ "marginLeft": "8px",
41
94
  },
42
95
  "overflow": Object {
43
96
  "overflow": "hidden",
@@ -46,36 +99,38 @@ Object {
46
99
  },
47
100
  "radio": Object {
48
101
  "&:after": Object {
49
- "background": "transparent",
102
+ "background": "#fff",
50
103
  "borderRadius": "50%",
104
+ "boxSizing": "border-box",
51
105
  "content": "\\"\\"",
52
- "height": 6,
106
+ "height": 10,
53
107
  "left": "50%",
54
108
  "position": "absolute",
55
109
  "top": "50%",
56
110
  "transform": "translate(-50%, -50%)",
57
111
  "transition": "0.3s all",
58
- "width": 6,
112
+ "width": 10,
59
113
  },
60
114
  "&:before": Object {
61
- "background": "#ffffff",
62
- "border": "1px solid #dddddd",
115
+ "background": "#fff",
116
+ "border": "1px solid #D3D4DC",
63
117
  "borderRadius": "50%",
118
+ "boxSizing": "border-box",
64
119
  "content": "\\"\\"",
65
- "height": 16,
120
+ "height": 20,
66
121
  "left": "50%",
67
122
  "position": "absolute",
68
123
  "top": "50%",
69
124
  "transform": "translate(-50%, -50%)",
70
- "width": 16,
125
+ "width": 20,
71
126
  },
72
- "height": 24,
127
+ "height": "24px",
73
128
  "position": "relative",
74
- "width": 24,
129
+ "width": "24px",
75
130
  },
76
131
  "right": Object {
77
132
  "float": "right",
78
- "marginLeft": 8,
133
+ "marginLeft": "8px",
79
134
  },
80
135
  }
81
136
  `;
@@ -5,76 +5,135 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = void 0;
7
7
 
8
- var _colors = _interopRequireDefault(require("../subatomic/colors"));
8
+ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
9
9
 
10
- var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
10
+ var _colors = _interopRequireDefault(require("../tokens/colors.json"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
13
 
14
+ var radio = _colors["default"].radio;
14
15
  var _default = {
15
16
  cont: {
16
- paddingTop: _spacing["default"].tiny,
17
- paddingBottom: _spacing["default"].tiny,
17
+ paddingTop: _spacing["default"]['size-2'],
18
+ paddingBottom: _spacing["default"]['size-2'],
18
19
  boxSizing: 'border-box',
19
20
  display: 'flex',
20
21
  alignItems: 'start',
21
22
  cursor: 'pointer',
22
23
  outline: '0',
23
- '&:after': {
24
- content: '""',
25
- display: 'table',
26
- clear: 'both'
24
+ '&$active': {
25
+ '&:focus $radio:before': {
26
+ borderColor: radio['selected']['border']['default'],
27
+ boxShadow: _colors["default"]['focus-bright-blue']
28
+ },
29
+ '&:hover': {
30
+ '& $radio:before': {
31
+ borderColor: radio['selected']['border']['hover'],
32
+ boxShadow: 'initial'
33
+ },
34
+ '& $radio:after': {
35
+ background: radio['selected']['bg']['hover']
36
+ }
37
+ },
38
+ '&:active': {
39
+ '& $radio:before': {
40
+ borderColor: radio['selected']['border']['hover'],
41
+ borderWidth: '3px',
42
+ boxShadow: 'initial'
43
+ },
44
+ '& $radio:after': {
45
+ background: radio['selected']['bg']['hover']
46
+ }
47
+ }
27
48
  },
28
- '&:hover $radio:after': {
29
- background: _colors["default"].grey200
49
+ '&:not($active)': {
50
+ '&:focus $radio:before': {
51
+ borderColor: radio['unselected']['border']['default'],
52
+ boxShadow: _colors["default"]['focus-bright-blue']
53
+ },
54
+ '&:hover $radio:before': {
55
+ borderColor: radio['unselected']['border']['hover'],
56
+ boxShadow: 'initial'
57
+ },
58
+ '&:active $radio:before': {
59
+ borderColor: radio['unselected']['border']['hover'],
60
+ borderWidth: '2px',
61
+ boxShadow: 'initial'
62
+ }
30
63
  }
31
64
  },
32
65
  radio: {
33
- width: _spacing["default"].base,
34
- height: _spacing["default"].base,
66
+ width: _spacing["default"]['size-5'],
67
+ height: _spacing["default"]['size-5'],
35
68
  position: 'relative',
36
69
  '&:before': {
37
70
  content: '""',
38
- width: _spacing["default"].small,
39
- height: _spacing["default"].small,
71
+ boxSizing: 'border-box',
72
+ width: 20,
73
+ height: 20,
40
74
  borderRadius: '50%',
41
75
  position: 'absolute',
42
76
  top: '50%',
43
77
  left: '50%',
44
78
  transform: 'translate(-50%, -50%)',
45
- border: "1px solid ".concat(_colors["default"].grey200),
46
- background: _colors["default"].bgWhite
79
+ border: "1px solid ".concat(radio['unselected']['border']['default']),
80
+ background: radio['bg']['default']
47
81
  },
48
82
  '&:after': {
49
83
  content: '""',
50
- width: 6,
51
- height: 6,
84
+ boxSizing: 'border-box',
85
+ width: 10,
86
+ height: 10,
52
87
  borderRadius: '50%',
53
88
  position: 'absolute',
54
89
  top: '50%',
55
90
  left: '50%',
56
91
  transform: 'translate(-50%, -50%)',
57
92
  transition: '0.3s all',
58
- background: 'transparent'
93
+ background: radio['bg']['default']
59
94
  }
60
95
  },
61
96
  active: {
62
- '& $radio:after': {
63
- background: [_colors["default"].prim, '!important']
97
+ '& $radio': {
98
+ '&:before': {
99
+ borderWidth: 2,
100
+ borderColor: radio['selected']['border']['default']
101
+ },
102
+ '&:after': {
103
+ background: radio['selected']['bg']['default']
104
+ }
64
105
  }
65
106
  },
66
107
  disabled: {
67
- opacity: 0.4,
68
- pointerEvents: 'none'
108
+ pointerEvents: 'none',
109
+ '& :not($radio)': {
110
+ opacity: 0.4
111
+ },
112
+ '&$active': {
113
+ '& $radio:before': {
114
+ borderColor: radio['selected']['border']['disabled']
115
+ },
116
+ '& $radio:after': {
117
+ background: radio['selected']['bg']['disabled']
118
+ }
119
+ },
120
+ '&:not($active)': {
121
+ '& $radio:before': {
122
+ background: radio['bg']['disabled']
123
+ },
124
+ '& $radio:after': {
125
+ background: radio['bg']['disabled']
126
+ }
127
+ }
69
128
  },
70
129
  label: {
71
- marginLeft: _spacing["default"].tiny,
130
+ marginLeft: _spacing["default"]['size-2'],
72
131
  cursor: 'pointer',
73
132
  "float": 'left',
74
133
  flex: '1'
75
134
  },
76
135
  right: {
77
- marginLeft: _spacing["default"].tiny,
136
+ marginLeft: _spacing["default"]['size-2'],
78
137
  "float": 'right'
79
138
  },
80
139
  overflow: {
package/build/index.js CHANGED
@@ -82,6 +82,8 @@ var _Toaster = _interopRequireDefault(require("./Toaster"));
82
82
 
83
83
  var _functions = require("./Toaster/functions");
84
84
 
85
+ var _Fab = _interopRequireDefault(require("./Fab"));
86
+
85
87
  var _NavTab = _interopRequireDefault(require("./NavTab"));
86
88
 
87
89
  var _NavItem = _interopRequireDefault(require("./NavItem"));
@@ -192,5 +194,6 @@ module.exports = {
192
194
  spacing: _spacing["default"],
193
195
  WindowSize: _WindowSize["default"],
194
196
  tokens: tokens,
195
- AtomicProvider: _Provider["default"]
197
+ AtomicProvider: _Provider["default"],
198
+ Fab: _Fab["default"]
196
199
  };
@@ -7,7 +7,7 @@ exports.occDartBlue = exports.occDartWhite = exports.occDartGrey = exports.occDa
7
7
 
8
8
  var _colors = _interopRequireDefault(require("../colors"));
9
9
 
10
- var _tokens = require("../../tokens");
10
+ var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
11
11
 
12
12
  var _iconSizes = _interopRequireDefault(require("../iconSizes"));
13
13
 
@@ -19,7 +19,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
19
19
 
20
20
  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; }
21
21
 
22
- var brand = _tokens.colors.icon.brand;
22
+ var brand = _colors2["default"].icon.brand;
23
23
  var ink = _colors["default"].ink,
24
24
  inkLight = _colors["default"].inkLight,
25
25
  white = _colors["default"].white;
@@ -7,7 +7,7 @@ exports.occHorizontalBlue = exports.occHorizontalWhite = exports.occHorizontalGr
7
7
 
8
8
  var _colors = _interopRequireDefault(require("../colors"));
9
9
 
10
- var _tokens = require("../../tokens");
10
+ var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
13
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
17
17
 
18
18
  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; }
19
19
 
20
- var brand = _tokens.colors.icon.brand;
20
+ var brand = _colors2["default"].icon.brand;
21
21
  var ink = _colors["default"].ink,
22
22
  inkLight = _colors["default"].inkLight,
23
23
  white = _colors["default"].white;
@@ -7,7 +7,7 @@ exports.occLogoBlue = exports.occLogoWhite = exports.occLogoGrey = exports.occLo
7
7
 
8
8
  var _colors = _interopRequireDefault(require("../colors"));
9
9
 
10
- var _tokens = require("../../tokens");
10
+ var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
13
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
17
17
 
18
18
  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; }
19
19
 
20
- var brand = _tokens.colors.icon.brand;
20
+ var brand = _colors2["default"].icon.brand;
21
21
  var ink = _colors["default"].ink,
22
22
  inkLight = _colors["default"].inkLight,
23
23
  white = _colors["default"].white;
@@ -7,7 +7,7 @@ exports.occVerticalBlue = exports.occVerticalWhite = exports.occVerticalGrey = e
7
7
 
8
8
  var _colors = _interopRequireDefault(require("../colors"));
9
9
 
10
- var _tokens = require("../../tokens");
10
+ var _colors2 = _interopRequireDefault(require("../../tokens/colors.json"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
13
 
@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
17
17
 
18
18
  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; }
19
19
 
20
- var brand = _tokens.colors.icon.brand;
20
+ var brand = _colors2["default"].icon.brand;
21
21
  var ink = _colors["default"].ink,
22
22
  inkLight = _colors["default"].inkLight,
23
23
  white = _colors["default"].white;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "2.0.0-beta.13",
3
+ "version": "2.0.0-beta.15",
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",