@occmundial/occ-atomic 3.0.0-beta.23 → 3.0.0-beta.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/build/Avatar/Avatar.js +69 -21
- package/build/Avatar/Avatar.test.js +15 -8
- package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
- package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
- package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
- package/build/Avatar/AvatarContent/styles.js +88 -21
- package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
- package/build/Avatar/styles.js +18 -7
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
# [3.0.0-beta.24](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.23...v3.0.0-beta.24) (2024-06-28)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* Handle key press on Avatar ([5821f9a](https://github.com/occmundial/occ-atomic/commit/5821f9ab94ee67af5a6ceebfe587dfa23656a9be))
|
|
7
|
+
* Update structure and styles of Avatar ([ed5ad44](https://github.com/occmundial/occ-atomic/commit/ed5ad44f42e8e2665f6b1e59db149fc27b8842f4))
|
|
8
|
+
|
|
1
9
|
# [3.0.0-beta.23](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.22...v3.0.0-beta.23) (2024-06-27)
|
|
2
10
|
|
|
3
11
|
|
package/build/Avatar/Avatar.js
CHANGED
|
@@ -15,6 +15,12 @@ var _AvatarContent = _interopRequireDefault(require("./AvatarContent"));
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
17
|
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
+
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
18
24
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19
25
|
|
|
20
26
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
@@ -44,33 +50,72 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
|
|
|
44
50
|
|
|
45
51
|
var _super = _createSuper(Avatar);
|
|
46
52
|
|
|
47
|
-
function Avatar() {
|
|
53
|
+
function Avatar(props) {
|
|
54
|
+
var _this;
|
|
55
|
+
|
|
48
56
|
_classCallCheck(this, Avatar);
|
|
49
57
|
|
|
50
|
-
|
|
58
|
+
_this = _super.call(this, props);
|
|
59
|
+
_this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
|
|
60
|
+
return _this;
|
|
51
61
|
}
|
|
52
62
|
|
|
53
63
|
_createClass(Avatar, [{
|
|
64
|
+
key: "handleKeyDown",
|
|
65
|
+
value: function handleKeyDown(e) {
|
|
66
|
+
if (e.keyCode == 13 || e.keyCode == 32) {
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}, {
|
|
71
|
+
key: "handleKeyUp",
|
|
72
|
+
value: function handleKeyUp(e) {
|
|
73
|
+
if (e.keyCode == 13 || e.keyCode == 32) {
|
|
74
|
+
var _this$props = this.props,
|
|
75
|
+
onEdit = _this$props.onEdit,
|
|
76
|
+
onClick = _this$props.onClick;
|
|
77
|
+
var isEditable = onEdit || onClick;
|
|
78
|
+
var handleClick = isEditable ? onClick || onEdit : undefined;
|
|
79
|
+
if (handleClick) handleClick();
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}, {
|
|
54
83
|
key: "render",
|
|
55
84
|
value: function render() {
|
|
56
|
-
var _this$
|
|
57
|
-
classes = _this$
|
|
58
|
-
photo = _this$
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
size = _this$
|
|
62
|
-
id = _this$
|
|
63
|
-
className = _this$
|
|
64
|
-
style = _this$
|
|
85
|
+
var _this$props2 = this.props,
|
|
86
|
+
classes = _this$props2.classes,
|
|
87
|
+
photo = _this$props2.photo,
|
|
88
|
+
name = _this$props2.name,
|
|
89
|
+
_this$props2$size = _this$props2.size,
|
|
90
|
+
size = _this$props2$size === void 0 ? 40 : _this$props2$size,
|
|
91
|
+
id = _this$props2.id,
|
|
92
|
+
className = _this$props2.className,
|
|
93
|
+
style = _this$props2.style,
|
|
94
|
+
onEdit = _this$props2.onEdit,
|
|
95
|
+
onClick = _this$props2.onClick,
|
|
96
|
+
disabled = _this$props2.disabled;
|
|
97
|
+
var isEditable = onEdit || onClick;
|
|
98
|
+
var handleClick = isEditable ? onClick || onEdit : undefined;
|
|
99
|
+
var tabIndexValue = isEditable && !disabled ? 0 : undefined;
|
|
100
|
+
var combinedClasses = "".concat(classes.circle, " ").concat(isEditable ? "".concat(classes.editable, " ") : '').concat(disabled ? "".concat(classes.disabled, " ") : '', " ").concat(className);
|
|
65
101
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
66
102
|
id: id,
|
|
67
|
-
className:
|
|
68
|
-
|
|
103
|
+
className: combinedClasses,
|
|
104
|
+
onClick: handleClick,
|
|
105
|
+
onKeyDown: this.handleKeyDown,
|
|
106
|
+
onKeyUp: this.handleKeyUp,
|
|
107
|
+
tabIndex: tabIndexValue,
|
|
108
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
109
|
+
width: size,
|
|
110
|
+
height: size
|
|
111
|
+
})
|
|
69
112
|
}, /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
|
|
70
113
|
photo: photo,
|
|
71
|
-
gender: gender,
|
|
72
114
|
name: name,
|
|
73
|
-
size: size
|
|
115
|
+
size: size,
|
|
116
|
+
onEdit: onEdit,
|
|
117
|
+
onClick: onClick,
|
|
118
|
+
disabled: disabled
|
|
74
119
|
}));
|
|
75
120
|
}
|
|
76
121
|
}]);
|
|
@@ -78,23 +123,26 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
|
|
|
78
123
|
return Avatar;
|
|
79
124
|
}(_react["default"].Component);
|
|
80
125
|
|
|
81
|
-
Avatar.defaultProps = {
|
|
82
|
-
size: 70
|
|
83
|
-
};
|
|
84
126
|
Avatar.propTypes = {
|
|
85
127
|
classes: _propTypes["default"].object.isRequired,
|
|
86
128
|
|
|
87
129
|
/** A url to show a photo as the avatar. */
|
|
88
130
|
photo: _propTypes["default"].string,
|
|
89
131
|
|
|
90
|
-
/** Use the values 'm' or 'f' to show a default avatar with an icon representing the gender. */
|
|
91
|
-
gender: _propTypes["default"].oneOf(['f', 'm']),
|
|
92
|
-
|
|
93
132
|
/** Pass a name to show two initials. */
|
|
94
133
|
name: _propTypes["default"].string,
|
|
95
134
|
|
|
96
135
|
/** The size of the avatar. */
|
|
97
136
|
size: _propTypes["default"].number,
|
|
137
|
+
|
|
138
|
+
/** A function to handle the click action for editing. */
|
|
139
|
+
onEdit: _propTypes["default"].func,
|
|
140
|
+
|
|
141
|
+
/** A function to handle the click. */
|
|
142
|
+
onClick: _propTypes["default"].func,
|
|
143
|
+
|
|
144
|
+
/** Determines if the avatar is disabled. */
|
|
145
|
+
disabled: _propTypes["default"].bool,
|
|
98
146
|
id: _propTypes["default"].string,
|
|
99
147
|
className: _propTypes["default"].string,
|
|
100
148
|
style: _propTypes["default"].object
|
|
@@ -35,17 +35,24 @@ describe("AvatarJSS", function () {
|
|
|
35
35
|
}));
|
|
36
36
|
expect(wrapper).toMatchSnapshot();
|
|
37
37
|
});
|
|
38
|
+
it('returns the right width and height', function () {
|
|
39
|
+
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
|
|
40
|
+
name: "John Doe",
|
|
41
|
+
size: 50
|
|
42
|
+
}));
|
|
43
|
+
var styles = wrapper.dive().props().style;
|
|
44
|
+
expect(styles.width).toBe(50);
|
|
45
|
+
expect(styles.height).toBe(50);
|
|
46
|
+
wrapper.setProps({
|
|
47
|
+
size: 70
|
|
48
|
+
});
|
|
49
|
+
var styles2 = wrapper.dive().props().style;
|
|
50
|
+
expect(styles2.width).toBe(70);
|
|
51
|
+
expect(styles2.height).toBe(70);
|
|
52
|
+
});
|
|
38
53
|
});
|
|
39
54
|
describe("Avatar styles", function () {
|
|
40
55
|
it('matches the snapshot', function () {
|
|
41
56
|
expect(_styles["default"]).toMatchSnapshot();
|
|
42
57
|
});
|
|
43
|
-
it('returns the right width and height', function () {
|
|
44
|
-
var props = {};
|
|
45
|
-
expect(_styles["default"].circle.width(props)).toBe(70);
|
|
46
|
-
expect(_styles["default"].circle.height(props)).toBe(70);
|
|
47
|
-
props.size = 50;
|
|
48
|
-
expect(_styles["default"].circle.width(props)).toBe(50);
|
|
49
|
-
expect(_styles["default"].circle.height(props)).toBe(50);
|
|
50
|
-
});
|
|
51
58
|
});
|
|
@@ -9,40 +9,77 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
+
var _Icon = _interopRequireDefault(require("../../Icon"));
|
|
13
|
+
|
|
14
|
+
var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
|
|
15
|
+
|
|
12
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
17
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
19
|
+
|
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
+
|
|
22
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
23
|
+
|
|
24
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
25
|
+
|
|
26
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
27
|
+
|
|
28
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
|
+
|
|
30
|
+
var getInitials = function getInitials(name) {
|
|
31
|
+
if (name && name.trim()) {
|
|
32
|
+
var _name$trim$replace$to = name.trim().replace(/\s+/g, ' ').toUpperCase().split(' '),
|
|
33
|
+
_name$trim$replace$to2 = _slicedToArray(_name$trim$replace$to, 2),
|
|
34
|
+
firstName = _name$trim$replace$to2[0],
|
|
35
|
+
lastName = _name$trim$replace$to2[1];
|
|
36
|
+
|
|
37
|
+
return "".concat(firstName === null || firstName === void 0 ? void 0 : firstName.charAt(0)).concat(lastName === null || lastName === void 0 ? void 0 : lastName.charAt(0));
|
|
19
38
|
}
|
|
20
39
|
|
|
21
|
-
return
|
|
40
|
+
return null;
|
|
22
41
|
};
|
|
23
42
|
|
|
24
43
|
var AvatarContent = function AvatarContent(_ref) {
|
|
25
44
|
var classes = _ref.classes,
|
|
26
45
|
photo = _ref.photo,
|
|
27
|
-
gender = _ref.gender,
|
|
28
46
|
name = _ref.name,
|
|
29
|
-
size = _ref.size
|
|
47
|
+
size = _ref.size,
|
|
48
|
+
onEdit = _ref.onEdit,
|
|
49
|
+
onClick = _ref.onClick,
|
|
50
|
+
disabled = _ref.disabled;
|
|
51
|
+
var initials = getInitials(name);
|
|
30
52
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
31
53
|
className: classes.wrap
|
|
32
|
-
},
|
|
33
|
-
className: "".concat(classes.cont, " ").concat(classes
|
|
34
|
-
|
|
35
|
-
|
|
54
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
55
|
+
className: "".concat(classes.cont, " ").concat(onClick ? " ".concat(classes.clickable) : '').concat(onEdit ? " ".concat(classes.editable) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(photo ? " ".concat(classes.photo) : '').concat(photo && (onClick || onEdit) ? " ".concat(classes.hoverPhoto) : '', "\n "),
|
|
56
|
+
style: photo ? {
|
|
57
|
+
background: "url('".concat(photo, "') no-repeat center center / cover")
|
|
58
|
+
} : null
|
|
59
|
+
}, !photo && !initials && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
60
|
+
iconName: "person",
|
|
61
|
+
className: classes.person,
|
|
62
|
+
colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.brand["default"]],
|
|
63
|
+
size: 24,
|
|
36
64
|
style: size ? {
|
|
37
|
-
|
|
38
|
-
lineHeight: "".concat(size, "px")
|
|
65
|
+
transform: "scale(".concat(size / 40, ")")
|
|
39
66
|
} : {}
|
|
40
|
-
}
|
|
41
|
-
className: classes.
|
|
42
|
-
style: {
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
})
|
|
67
|
+
}), initials && /*#__PURE__*/_react["default"].createElement("span", {
|
|
68
|
+
className: "".concat(classes.initials, " ").concat(disabled ? classes.disabledInitials : ''),
|
|
69
|
+
style: size ? {
|
|
70
|
+
transform: "scale(".concat(size / 40, ")")
|
|
71
|
+
} : {}
|
|
72
|
+
}, initials), /*#__PURE__*/_react["default"].createElement("div", {
|
|
73
|
+
className: classes.overlay
|
|
74
|
+
}, onEdit && !disabled && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
|
|
75
|
+
iconName: "camera",
|
|
76
|
+
className: classes.camera,
|
|
77
|
+
colors: [disabled ? _colors["default"].icon["default"].disabled : _colors["default"].icon.inverse["default"]],
|
|
78
|
+
size: 24,
|
|
79
|
+
style: size ? {
|
|
80
|
+
transform: "scale(".concat(size / 40, ")")
|
|
81
|
+
} : {}
|
|
82
|
+
}))));
|
|
46
83
|
};
|
|
47
84
|
|
|
48
85
|
AvatarContent.propTypes = {
|
|
@@ -50,7 +87,10 @@ AvatarContent.propTypes = {
|
|
|
50
87
|
photo: _propTypes["default"].string,
|
|
51
88
|
gender: _propTypes["default"].string,
|
|
52
89
|
name: _propTypes["default"].string,
|
|
53
|
-
size: _propTypes["default"].number
|
|
90
|
+
size: _propTypes["default"].number,
|
|
91
|
+
onEdit: _propTypes["default"].func,
|
|
92
|
+
onClick: _propTypes["default"].func,
|
|
93
|
+
disabled: _propTypes["default"].bool
|
|
54
94
|
};
|
|
55
95
|
var _default = AvatarContent;
|
|
56
96
|
exports["default"] = _default;
|
|
@@ -27,25 +27,12 @@ describe("AvatarContent", function () {
|
|
|
27
27
|
}));
|
|
28
28
|
expect(wrapper).toMatchSnapshot();
|
|
29
29
|
});
|
|
30
|
-
it('returns the first two
|
|
30
|
+
it('returns the first two initial letters of the name', function () {
|
|
31
31
|
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
|
|
32
32
|
name: "John Doe",
|
|
33
33
|
classes: classes
|
|
34
34
|
}));
|
|
35
|
-
expect(wrapper.find('.
|
|
36
|
-
});
|
|
37
|
-
it('shows the right gender icon', function () {
|
|
38
|
-
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
|
|
39
|
-
gender: "m",
|
|
40
|
-
classes: classes
|
|
41
|
-
}));
|
|
42
|
-
expect(wrapper.find('.m').length).toBe(1);
|
|
43
|
-
expect(wrapper.find('.f').length).toBe(0);
|
|
44
|
-
wrapper.setProps({
|
|
45
|
-
gender: 'f'
|
|
46
|
-
});
|
|
47
|
-
expect(wrapper.find('.m').length).toBe(0);
|
|
48
|
-
expect(wrapper.find('.f').length).toBe(1);
|
|
35
|
+
expect(wrapper.find('.initials').text()).toEqual('JD');
|
|
49
36
|
});
|
|
50
37
|
it('renders the photo as a background', function () {
|
|
51
38
|
var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_AvatarContent["default"], {
|
|
@@ -60,9 +47,8 @@ describe("AvatarContent", function () {
|
|
|
60
47
|
size: 50,
|
|
61
48
|
classes: classes
|
|
62
49
|
}));
|
|
63
|
-
var styles = wrapper.find('.
|
|
64
|
-
expect(styles).toHaveProperty('
|
|
65
|
-
expect(styles).toHaveProperty('lineHeight', '50px');
|
|
50
|
+
var styles = wrapper.find('.initials').prop('style');
|
|
51
|
+
expect(styles).toHaveProperty('transform', 'scale(1.25)');
|
|
66
52
|
});
|
|
67
53
|
});
|
|
68
54
|
describe("AvatarContentJSS", function () {
|
|
@@ -4,31 +4,91 @@ exports[`AvatarContent matches the snapshot 1`] = `ShallowWrapper {}`;
|
|
|
4
4
|
|
|
5
5
|
exports[`AvatarContent styles matches the snapshot 1`] = `
|
|
6
6
|
Object {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
"camera": Object {
|
|
8
|
+
"gridColumnStart": 1,
|
|
9
|
+
"gridRowStart": 1,
|
|
10
|
+
"opacity": 0,
|
|
11
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
|
12
|
+
},
|
|
13
|
+
"clickable": Object {
|
|
14
|
+
"&:active": Object {
|
|
15
|
+
"background": "#ABBDE4",
|
|
16
|
+
},
|
|
17
|
+
"&:hover": Object {
|
|
18
|
+
"background": "#CAD5EE",
|
|
19
|
+
},
|
|
20
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
|
17
21
|
},
|
|
18
22
|
"cont": Object {
|
|
19
|
-
"
|
|
23
|
+
"alignItems": "center",
|
|
24
|
+
"background": "#E9EEF8",
|
|
25
|
+
"borderRadius": "9999px",
|
|
26
|
+
"display": "grid",
|
|
20
27
|
"height": "100%",
|
|
28
|
+
"justifyContent": "center",
|
|
21
29
|
"left": "0",
|
|
22
30
|
"overflow": "hidden",
|
|
23
31
|
"position": "absolute",
|
|
24
32
|
"top": "0",
|
|
25
33
|
"width": "100%",
|
|
26
34
|
},
|
|
27
|
-
"
|
|
28
|
-
"
|
|
35
|
+
"disabled": Object {
|
|
36
|
+
"& $camera": Object {
|
|
37
|
+
"opacity": 1,
|
|
38
|
+
},
|
|
39
|
+
"background": "#EDEDF1",
|
|
40
|
+
"pointerEvents": "none",
|
|
41
|
+
},
|
|
42
|
+
"disabledInitials": Object {
|
|
43
|
+
"color": "#878A9F",
|
|
44
|
+
},
|
|
45
|
+
"editable": Object {
|
|
46
|
+
"&:active $overlay": Object {
|
|
47
|
+
"background": "hsl(234 75.4% 12.7% / 0.4)",
|
|
48
|
+
},
|
|
49
|
+
"&:hover $camera": Object {
|
|
50
|
+
"opacity": 1,
|
|
51
|
+
},
|
|
52
|
+
"&:hover $overlay": Object {
|
|
53
|
+
"background": "hsl(234 75.4% 12.7% / 0.3)",
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
"hoverPhoto": Object {
|
|
57
|
+
"&:active $overlay": Object {
|
|
58
|
+
"background": "hsl(234 75.4% 12.7% / 0.4)",
|
|
59
|
+
},
|
|
60
|
+
"&:hover $overlay": Object {
|
|
61
|
+
"background": "hsl(234 75.4% 12.7% / 0.3)",
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
"initials": Object {
|
|
65
|
+
"color": "#083CAE",
|
|
66
|
+
"display": "inline-block",
|
|
67
|
+
"font": "400 16px/1.5 'OccText', sans-serif",
|
|
68
|
+
"gridColumnStart": "1",
|
|
69
|
+
"gridRowStart": "1",
|
|
70
|
+
"textAlign": "center",
|
|
71
|
+
},
|
|
72
|
+
"overlay": Object {
|
|
73
|
+
"alignItems": "center",
|
|
74
|
+
"border": "1px solid transparent",
|
|
75
|
+
"borderRadius": "50%",
|
|
76
|
+
"display": "grid",
|
|
77
|
+
"height": "100%",
|
|
78
|
+
"justifyContent": "center",
|
|
79
|
+
"left": "0",
|
|
80
|
+
"position": "absolute",
|
|
81
|
+
"top": "0",
|
|
82
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
|
83
|
+
"width": "100%",
|
|
84
|
+
},
|
|
85
|
+
"person": Object {
|
|
86
|
+
"gridColumnStart": 1,
|
|
87
|
+
"gridRowStart": 1,
|
|
88
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
|
29
89
|
},
|
|
30
|
-
"
|
|
31
|
-
"
|
|
90
|
+
"photo": Object {
|
|
91
|
+
"border": "1px solid #EDEDF1",
|
|
32
92
|
},
|
|
33
93
|
"wrap": Object {
|
|
34
94
|
"height": "100%",
|
|
@@ -5,14 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
|
|
8
|
-
var _fonts = _interopRequireDefault(require("../../
|
|
8
|
+
var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
|
|
13
|
+
|
|
14
|
+
var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
|
|
13
15
|
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
17
|
|
|
18
|
+
var avatar = _colors["default"].avatar,
|
|
19
|
+
text = _colors["default"].text,
|
|
20
|
+
border = _colors["default"].border;
|
|
21
|
+
var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
|
|
22
|
+
var font = _fonts["default"]['body-regular-strong'];
|
|
16
23
|
var _default = {
|
|
17
24
|
wrap: {
|
|
18
25
|
position: 'relative',
|
|
@@ -25,25 +32,85 @@ var _default = {
|
|
|
25
32
|
left: '0',
|
|
26
33
|
width: '100%',
|
|
27
34
|
height: '100%',
|
|
35
|
+
borderRadius: _borderRadius["default"]['br-full'],
|
|
36
|
+
overflow: 'hidden',
|
|
37
|
+
background: avatar.bg["default"],
|
|
38
|
+
display: 'grid',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
justifyContent: 'center'
|
|
41
|
+
},
|
|
42
|
+
initials: {
|
|
43
|
+
display: 'inline-block',
|
|
44
|
+
font: "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body),
|
|
45
|
+
color: text.indigo.primary,
|
|
46
|
+
gridRowStart: '1',
|
|
47
|
+
gridColumnStart: '1',
|
|
48
|
+
textAlign: 'center'
|
|
49
|
+
},
|
|
50
|
+
disabled: {
|
|
51
|
+
pointerEvents: 'none',
|
|
52
|
+
background: avatar.bg.disabled,
|
|
53
|
+
'& $camera': {
|
|
54
|
+
opacity: 1
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
disabledInitials: {
|
|
58
|
+
color: text.corp.disabled
|
|
59
|
+
},
|
|
60
|
+
clickable: {
|
|
61
|
+
transition: transition,
|
|
62
|
+
'&:hover': {
|
|
63
|
+
background: avatar.bg.hover
|
|
64
|
+
},
|
|
65
|
+
'&:active': {
|
|
66
|
+
background: avatar.bg.active
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
editable: {
|
|
70
|
+
'&:hover $camera': {
|
|
71
|
+
opacity: 1
|
|
72
|
+
},
|
|
73
|
+
'&:hover $overlay': {
|
|
74
|
+
background: avatar.bg.overlay.hover
|
|
75
|
+
},
|
|
76
|
+
'&:active $overlay': {
|
|
77
|
+
background: avatar.bg.overlay.active
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
person: {
|
|
81
|
+
gridRowStart: 1,
|
|
82
|
+
gridColumnStart: 1,
|
|
83
|
+
transition: transition
|
|
84
|
+
},
|
|
85
|
+
photo: {
|
|
86
|
+
border: "1px solid ".concat(border["default"].subtle)
|
|
87
|
+
},
|
|
88
|
+
hoverPhoto: {
|
|
89
|
+
'&:hover $overlay': {
|
|
90
|
+
background: avatar.bg.overlay.hover
|
|
91
|
+
},
|
|
92
|
+
'&:active $overlay': {
|
|
93
|
+
background: avatar.bg.overlay.active
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
camera: {
|
|
97
|
+
gridRowStart: 1,
|
|
98
|
+
gridColumnStart: 1,
|
|
99
|
+
opacity: 0,
|
|
100
|
+
transition: transition
|
|
101
|
+
},
|
|
102
|
+
overlay: {
|
|
28
103
|
borderRadius: '50%',
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
fontSize: '57px',
|
|
40
|
-
lineHeight: '72px',
|
|
41
|
-
fontWeight: '400',
|
|
42
|
-
background: _colors["default"].grey100,
|
|
43
|
-
color: _colors["default"].grey200,
|
|
44
|
-
textAlign: 'center',
|
|
45
|
-
letterSpacing: -2,
|
|
46
|
-
fontStyle: 'normal'
|
|
104
|
+
position: 'absolute',
|
|
105
|
+
top: '0',
|
|
106
|
+
left: '0',
|
|
107
|
+
width: '100%',
|
|
108
|
+
height: '100%',
|
|
109
|
+
display: 'grid',
|
|
110
|
+
alignItems: 'center',
|
|
111
|
+
justifyContent: 'center',
|
|
112
|
+
transition: transition,
|
|
113
|
+
border: "1px solid transparent"
|
|
47
114
|
}
|
|
48
115
|
};
|
|
49
116
|
exports["default"] = _default;
|
|
@@ -6,10 +6,19 @@ exports[`Avatar styles matches the snapshot 1`] = `
|
|
|
6
6
|
Object {
|
|
7
7
|
"circle": Object {
|
|
8
8
|
"borderRadius": "50%",
|
|
9
|
-
"
|
|
9
|
+
"outline": "none",
|
|
10
10
|
"overflow": "hidden",
|
|
11
11
|
"position": "relative",
|
|
12
|
-
|
|
12
|
+
},
|
|
13
|
+
"disabled": Object {
|
|
14
|
+
"pointerEvents": "none",
|
|
15
|
+
},
|
|
16
|
+
"editable": Object {
|
|
17
|
+
"&:focus-visible": Object {
|
|
18
|
+
"boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
|
|
19
|
+
},
|
|
20
|
+
"cursor": "pointer",
|
|
21
|
+
"transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
|
|
13
22
|
},
|
|
14
23
|
}
|
|
15
24
|
`;
|
package/build/Avatar/styles.js
CHANGED
|
@@ -4,17 +4,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
|
|
7
13
|
var _default = {
|
|
8
14
|
circle: {
|
|
9
15
|
position: 'relative',
|
|
10
|
-
width: function width(props) {
|
|
11
|
-
return props.size ? props.size : 70;
|
|
12
|
-
},
|
|
13
|
-
height: function height(props) {
|
|
14
|
-
return props.size ? props.size : 70;
|
|
15
|
-
},
|
|
16
16
|
borderRadius: '50%',
|
|
17
|
-
overflow: 'hidden'
|
|
17
|
+
overflow: 'hidden',
|
|
18
|
+
outline: 'none'
|
|
19
|
+
},
|
|
20
|
+
editable: {
|
|
21
|
+
cursor: 'pointer',
|
|
22
|
+
transition: transition,
|
|
23
|
+
'&:focus-visible': {
|
|
24
|
+
boxShadow: _shadows["default"]['focus-bright-blue']
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
disabled: {
|
|
28
|
+
pointerEvents: 'none'
|
|
18
29
|
}
|
|
19
30
|
};
|
|
20
31
|
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.
|
|
3
|
+
"version": "3.0.0-beta.24",
|
|
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",
|