@remember-web/primitive 0.3.4 → 0.3.6
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/dist/src/Avatars/Avatar/index.cjs.js +37 -18
- package/dist/src/Avatars/Avatar/index.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/index.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/index.esm.js +37 -20
- package/dist/src/Avatars/Avatar/index.esm.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.cjs.js +65 -25
- package/dist/src/Avatars/Avatar/styles.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.d.ts +44 -2
- package/dist/src/Avatars/Avatar/styles.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js +60 -27
- package/dist/src/Avatars/Avatar/styles.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Avatars/Avatar/Avatar.stories.tsx +76 -9
- package/src/Avatars/Avatar/index.tsx +38 -16
- package/src/Avatars/Avatar/styles.ts +131 -26
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
5
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
5
7
|
var icon = require('@remember-web/icon');
|
|
6
8
|
var mixin = require('@remember-web/mixin');
|
|
7
9
|
var react = require('react');
|
|
@@ -10,8 +12,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
10
12
|
|
|
11
13
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
14
|
|
|
15
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
13
16
|
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
17
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
14
18
|
|
|
19
|
+
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
20
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
22
|
var Avatar = function Avatar(_ref, ref) {
|
|
16
23
|
var _ref$size = _ref.size,
|
|
17
24
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
@@ -25,28 +32,40 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
25
32
|
_ref$rounded = _ref.rounded,
|
|
26
33
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
27
34
|
imageUrl = _ref.imageUrl,
|
|
28
|
-
|
|
35
|
+
badges = _ref.badges,
|
|
36
|
+
children = _ref.children,
|
|
37
|
+
rest = _objectWithoutProperties__default.default(_ref, _excluded);
|
|
29
38
|
var _useState = react.useState(false),
|
|
30
39
|
_useState2 = _slicedToArray__default.default(_useState, 2),
|
|
31
40
|
imageError = _useState2[0],
|
|
32
41
|
setImageError = _useState2[1];
|
|
33
|
-
return /*#__PURE__*/jsxRuntime.
|
|
34
|
-
ref: ref
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
42
|
+
return /*#__PURE__*/jsxRuntime.jsxs(styles.AvatarContainer, _objectSpread(_objectSpread({
|
|
43
|
+
ref: ref
|
|
44
|
+
}, rest), {}, {
|
|
45
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(styles.StyledAvatar, {
|
|
46
|
+
$size: size,
|
|
47
|
+
$backgroundColor: backgroundColor,
|
|
48
|
+
$border: border,
|
|
49
|
+
$rounded: rounded,
|
|
50
|
+
$badges: badges,
|
|
51
|
+
children: !imageError && imageUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
52
|
+
src: imageUrl,
|
|
53
|
+
loading: "lazy",
|
|
54
|
+
alt: "avatar",
|
|
55
|
+
onError: function onError() {
|
|
56
|
+
return setImageError(true);
|
|
57
|
+
}
|
|
58
|
+
}) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsxRuntime.jsx(icon.IconAvatarEmpty, {
|
|
59
|
+
size: "100%"
|
|
60
|
+
})
|
|
61
|
+
}), (badges === null || badges === void 0 ? void 0 : badges.bottom) && /*#__PURE__*/jsxRuntime.jsx(styles.StyledBottomBadge, {
|
|
62
|
+
$size: size,
|
|
63
|
+
$bgColor: badges.bottom.bgColor,
|
|
64
|
+
children: badges.bottom.content
|
|
65
|
+
}), (badges === null || badges === void 0 ? void 0 : badges.notification) && /*#__PURE__*/jsxRuntime.jsx(styles.StyledNotificationBadge, {
|
|
66
|
+
$size: size
|
|
67
|
+
})]
|
|
68
|
+
}));
|
|
50
69
|
};
|
|
51
70
|
var index = /*#__PURE__*/react.forwardRef(Avatar);
|
|
52
71
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport {\n AvatarContainer,\n StyledAvatar,\n StyledBottomBadge,\n StyledNotificationBadge,\n} from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n badges,\n children,\n ...rest\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n\n return (\n <AvatarContainer ref={ref} {...rest}>\n <StyledAvatar\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n $badges={badges}\n >\n {!imageError && imageUrl ? (\n <img\n src={imageUrl}\n loading=\"lazy\"\n alt=\"avatar\"\n onError={() => setImageError(true)}\n />\n ) : (\n children ?? <IconAvatarEmpty size=\"100%\" />\n )}\n </StyledAvatar>\n\n {badges?.bottom && (\n <StyledBottomBadge $size={size} $bgColor={badges.bottom.bgColor}>\n {badges.bottom.content}\n </StyledBottomBadge>\n )}\n\n {badges?.notification && <StyledNotificationBadge $size={size} />}\n </AvatarContainer>\n );\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","rest","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","$badges","children","src","loading","alt","$bgColor"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAmBb;AAYK;AAVDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAIGC;AAIL;;AAAOC;AAAYC;AAEnB;AACmBC;AAAS;;AAEtBC;AACAC;AACAC;AACAC;AACAC;AAAgBC;AAIZC;AACAC;AACAC;;;AACkC;;AAGPjB;;AAC9B;AAIkBS;AAAaS;AAAgCJ;AACxC;AAIwBL;AAAY;AAAG;AAGvE;AAEA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GACzE,wBAAwB,CAAC,KAAK,CAAC,CAAC;;AAiDlC,wBAAkC"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
3
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
4
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
5
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
4
6
|
import { bg200, divider } from '@remember-web/mixin';
|
|
5
7
|
import { forwardRef, useState } from 'react';
|
|
6
|
-
import { StyledAvatar } from './styles.esm.js';
|
|
7
|
-
import { jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { AvatarContainer, StyledAvatar, StyledBottomBadge, StyledNotificationBadge } from './styles.esm.js';
|
|
9
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
10
|
|
|
11
|
+
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
9
14
|
var Avatar = function Avatar(_ref, ref) {
|
|
10
15
|
var _ref$size = _ref.size,
|
|
11
16
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
@@ -19,28 +24,40 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
19
24
|
_ref$rounded = _ref.rounded,
|
|
20
25
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
21
26
|
imageUrl = _ref.imageUrl,
|
|
22
|
-
|
|
27
|
+
badges = _ref.badges,
|
|
28
|
+
children = _ref.children,
|
|
29
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
23
30
|
var _useState = useState(false),
|
|
24
31
|
_useState2 = _slicedToArray(_useState, 2),
|
|
25
32
|
imageError = _useState2[0],
|
|
26
33
|
setImageError = _useState2[1];
|
|
27
|
-
return /*#__PURE__*/
|
|
28
|
-
ref: ref
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
34
|
+
return /*#__PURE__*/jsxs(AvatarContainer, _objectSpread(_objectSpread({
|
|
35
|
+
ref: ref
|
|
36
|
+
}, rest), {}, {
|
|
37
|
+
children: [/*#__PURE__*/jsx(StyledAvatar, {
|
|
38
|
+
$size: size,
|
|
39
|
+
$backgroundColor: backgroundColor,
|
|
40
|
+
$border: border,
|
|
41
|
+
$rounded: rounded,
|
|
42
|
+
$badges: badges,
|
|
43
|
+
children: !imageError && imageUrl ? /*#__PURE__*/jsx("img", {
|
|
44
|
+
src: imageUrl,
|
|
45
|
+
loading: "lazy",
|
|
46
|
+
alt: "avatar",
|
|
47
|
+
onError: function onError() {
|
|
48
|
+
return setImageError(true);
|
|
49
|
+
}
|
|
50
|
+
}) : children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(IconAvatarEmpty, {
|
|
51
|
+
size: "100%"
|
|
52
|
+
})
|
|
53
|
+
}), (badges === null || badges === void 0 ? void 0 : badges.bottom) && /*#__PURE__*/jsx(StyledBottomBadge, {
|
|
54
|
+
$size: size,
|
|
55
|
+
$bgColor: badges.bottom.bgColor,
|
|
56
|
+
children: badges.bottom.content
|
|
57
|
+
}), (badges === null || badges === void 0 ? void 0 : badges.notification) && /*#__PURE__*/jsx(StyledNotificationBadge, {
|
|
58
|
+
$size: size
|
|
59
|
+
})]
|
|
60
|
+
}));
|
|
44
61
|
};
|
|
45
62
|
var index = /*#__PURE__*/forwardRef(Avatar);
|
|
46
63
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport {
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconAvatarEmpty } from '@remember-web/icon';\nimport { bg200, divider } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport {\n AvatarContainer,\n StyledAvatar,\n StyledBottomBadge,\n StyledNotificationBadge,\n} from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &\n ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = bg200,\n border = { color: divider, width: '1px' },\n rounded = true,\n imageUrl,\n badges,\n children,\n ...rest\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n\n return (\n <AvatarContainer ref={ref} {...rest}>\n <StyledAvatar\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n $badges={badges}\n >\n {!imageError && imageUrl ? (\n <img\n src={imageUrl}\n loading=\"lazy\"\n alt=\"avatar\"\n onError={() => setImageError(true)}\n />\n ) : (\n children ?? <IconAvatarEmpty size=\"100%\" />\n )}\n </StyledAvatar>\n\n {badges?.bottom && (\n <StyledBottomBadge $size={size} $bgColor={badges.bottom.bgColor}>\n {badges.bottom.content}\n </StyledBottomBadge>\n )}\n\n {badges?.notification && <StyledNotificationBadge $size={size} />}\n </AvatarContainer>\n );\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","rest","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","$badges","children","src","loading","alt","$bgColor"],"mappings":";;;;;;;;;;AAAa;AAAA;AAAA;AAmBb;AAYK;AAVDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;;;AAIGC;AAIL;;AAAOC;AAAYC;AAEnB;AACmBC;AAAS;;AAEtBC;AACAC;AACAC;AACAC;AACAC;AAAgBC;AAIZC;AACAC;AACAC;;;AACkC;;AAGPjB;;AAC9B;AAIkBS;AAAaS;AAAgCJ;AACxC;AAIwBL;AAAY;AAAG;AAGvE;AAEA;;"}
|
|
@@ -1,45 +1,85 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
4
|
+
var mixin = require('@remember-web/mixin');
|
|
3
5
|
var styled = require('styled-components');
|
|
4
6
|
|
|
5
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
8
|
|
|
9
|
+
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
|
|
7
10
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
8
11
|
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
9
13
|
var avatarSize = {
|
|
14
|
+
xxxlarge: 72,
|
|
10
15
|
xxlarge: 64,
|
|
11
16
|
xlarge: 56,
|
|
12
17
|
large: 48,
|
|
13
18
|
medium: 40,
|
|
14
19
|
small: 32,
|
|
15
|
-
xsmall: 24
|
|
16
|
-
xxsmall: 20
|
|
20
|
+
xsmall: 24
|
|
17
21
|
};
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
var bottomBadgeSize = {
|
|
23
|
+
xxxlarge: 18,
|
|
24
|
+
xxlarge: 18,
|
|
25
|
+
xlarge: 18,
|
|
26
|
+
large: 18,
|
|
27
|
+
medium: 16,
|
|
28
|
+
small: 14,
|
|
29
|
+
xsmall: 10
|
|
30
|
+
};
|
|
31
|
+
var notificationBadgeSize = {
|
|
32
|
+
xxxlarge: 6,
|
|
33
|
+
xxlarge: 6,
|
|
34
|
+
xlarge: 6,
|
|
35
|
+
large: 6,
|
|
36
|
+
medium: 4,
|
|
37
|
+
small: 4,
|
|
38
|
+
xsmall: 4
|
|
39
|
+
};
|
|
40
|
+
var typographySize = {
|
|
41
|
+
xxxlarge: 36,
|
|
42
|
+
xxlarge: 32,
|
|
43
|
+
xlarge: 24,
|
|
44
|
+
large: 24,
|
|
45
|
+
medium: 20,
|
|
46
|
+
small: 16,
|
|
47
|
+
xsmall: 12
|
|
48
|
+
};
|
|
49
|
+
var AvatarContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n position: relative;\n display: inline-block;\n\n"])));
|
|
50
|
+
var StyledAvatar = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), mixin.contents999, function (_ref) {
|
|
51
|
+
var $size = _ref.$size;
|
|
52
|
+
return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n width: ", "px;\n max-width: ", "px;\n max-height: ", "px;\n font-size: ", "px;\n "])), avatarSize[$size], avatarSize[$size], avatarSize[$size], typographySize[$size]);
|
|
53
|
+
}, function (_ref2) {
|
|
54
|
+
var $border = _ref2.$border;
|
|
55
|
+
return $border && styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n border: ", " solid ", ";\n "])), $border.width, $border.color);
|
|
56
|
+
}, function (_ref3) {
|
|
57
|
+
var $rounded = _ref3.$rounded;
|
|
58
|
+
return $rounded && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n border-radius: 50%;\n "])));
|
|
59
|
+
}, function (_ref4) {
|
|
60
|
+
var $backgroundColor = _ref4.$backgroundColor;
|
|
61
|
+
return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n "])), $backgroundColor);
|
|
62
|
+
}, function (_ref5) {
|
|
63
|
+
var $rounded = _ref5.$rounded;
|
|
64
|
+
return $rounded && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n border-radius: 50%;\n "])));
|
|
65
|
+
});
|
|
66
|
+
var StyledBottomBadge = styled__default.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ", ";\n overflow: hidden;\n \n ", "\n"])), mixin.bg300, function (_ref6) {
|
|
67
|
+
var $size = _ref6.$size,
|
|
68
|
+
_ref6$$bgColor = _ref6.$bgColor,
|
|
69
|
+
$bgColor = _ref6$$bgColor === void 0 ? mixin.contents000 : _ref6$$bgColor;
|
|
70
|
+
return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n width: ", "px;\n height: ", "px; \n background-color: ", ";\n "])), bottomBadgeSize[$size], bottomBadgeSize[$size], $bgColor);
|
|
71
|
+
});
|
|
72
|
+
var StyledNotificationBadge = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ", ";\n \n ", "\n"])), mixin.secondary100, function (_ref7) {
|
|
73
|
+
var $size = _ref7.$size;
|
|
74
|
+
return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n width: ", "px;\n height: ", "px;\n "])), notificationBadgeSize[$size], notificationBadgeSize[$size]);
|
|
41
75
|
});
|
|
42
76
|
|
|
77
|
+
exports.AvatarContainer = AvatarContainer;
|
|
43
78
|
exports.StyledAvatar = StyledAvatar;
|
|
79
|
+
exports.StyledBottomBadge = StyledBottomBadge;
|
|
80
|
+
exports.StyledNotificationBadge = StyledNotificationBadge;
|
|
44
81
|
exports.avatarSize = avatarSize;
|
|
82
|
+
exports.bottomBadgeSize = bottomBadgeSize;
|
|
83
|
+
exports.notificationBadgeSize = notificationBadgeSize;
|
|
84
|
+
exports.typographySize = typographySize;
|
|
45
85
|
//# sourceMappingURL=styles.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const avatarSize = {\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
|
@@ -1,12 +1,39 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
export declare const avatarSize: {
|
|
3
|
+
xxxlarge: number;
|
|
4
|
+
xxlarge: number;
|
|
5
|
+
xlarge: number;
|
|
6
|
+
large: number;
|
|
7
|
+
medium: number;
|
|
8
|
+
small: number;
|
|
9
|
+
xsmall: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const bottomBadgeSize: {
|
|
12
|
+
xxxlarge: number;
|
|
13
|
+
xxlarge: number;
|
|
14
|
+
xlarge: number;
|
|
15
|
+
large: number;
|
|
16
|
+
medium: number;
|
|
17
|
+
small: number;
|
|
18
|
+
xsmall: number;
|
|
19
|
+
};
|
|
20
|
+
export declare const notificationBadgeSize: {
|
|
21
|
+
xxxlarge: number;
|
|
22
|
+
xxlarge: number;
|
|
23
|
+
xlarge: number;
|
|
24
|
+
large: number;
|
|
25
|
+
medium: number;
|
|
26
|
+
small: number;
|
|
27
|
+
xsmall: number;
|
|
28
|
+
};
|
|
29
|
+
export declare const typographySize: {
|
|
30
|
+
xxxlarge: number;
|
|
3
31
|
xxlarge: number;
|
|
4
32
|
xlarge: number;
|
|
5
33
|
large: number;
|
|
6
34
|
medium: number;
|
|
7
35
|
small: number;
|
|
8
36
|
xsmall: number;
|
|
9
|
-
xxsmall: number;
|
|
10
37
|
};
|
|
11
38
|
export interface StyledAvatarProps {
|
|
12
39
|
$size: keyof typeof avatarSize;
|
|
@@ -17,6 +44,21 @@ export interface StyledAvatarProps {
|
|
|
17
44
|
$rounded?: boolean;
|
|
18
45
|
$imageUrl?: string;
|
|
19
46
|
$backgroundColor?: CSSProperties['backgroundColor'];
|
|
47
|
+
$badges?: {
|
|
48
|
+
bottom?: {
|
|
49
|
+
content: ReactNode;
|
|
50
|
+
bgColor?: string;
|
|
51
|
+
};
|
|
52
|
+
notification?: boolean;
|
|
53
|
+
};
|
|
20
54
|
}
|
|
55
|
+
export declare const AvatarContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
21
56
|
export declare const StyledAvatar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledAvatarProps>>;
|
|
57
|
+
export declare const StyledBottomBadge: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
58
|
+
$size: keyof typeof bottomBadgeSize;
|
|
59
|
+
$bgColor?: string | undefined;
|
|
60
|
+
}>>;
|
|
61
|
+
export declare const StyledNotificationBadge: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
62
|
+
$size: keyof typeof notificationBadgeSize;
|
|
63
|
+
}>>;
|
|
22
64
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;CAQjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;CAQ1B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;KACnD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE;YAAE,OAAO,EAAE,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAClD,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,gNAI3B,CAAC;AAEF,eAAO,MAAM,YAAY,8NA6CxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;WACrB,MAAM,sBAAsB;;GAkBpC,CAAC;AAEF,eAAO,MAAM,uBAAuB;WAC3B,MAAM,4BAA4B;GAY1C,CAAC"}
|
|
@@ -1,38 +1,71 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
2
|
+
import { contents999, bg300, secondary100, contents000 } from '@remember-web/mixin';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
2
4
|
|
|
5
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3
6
|
var avatarSize = {
|
|
7
|
+
xxxlarge: 72,
|
|
4
8
|
xxlarge: 64,
|
|
5
9
|
xlarge: 56,
|
|
6
10
|
large: 48,
|
|
7
11
|
medium: 40,
|
|
8
12
|
small: 32,
|
|
9
|
-
xsmall: 24
|
|
10
|
-
xxsmall: 20
|
|
13
|
+
xsmall: 24
|
|
11
14
|
};
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
15
|
+
var bottomBadgeSize = {
|
|
16
|
+
xxxlarge: 18,
|
|
17
|
+
xxlarge: 18,
|
|
18
|
+
xlarge: 18,
|
|
19
|
+
large: 18,
|
|
20
|
+
medium: 16,
|
|
21
|
+
small: 14,
|
|
22
|
+
xsmall: 10
|
|
23
|
+
};
|
|
24
|
+
var notificationBadgeSize = {
|
|
25
|
+
xxxlarge: 6,
|
|
26
|
+
xxlarge: 6,
|
|
27
|
+
xlarge: 6,
|
|
28
|
+
large: 6,
|
|
29
|
+
medium: 4,
|
|
30
|
+
small: 4,
|
|
31
|
+
xsmall: 4
|
|
32
|
+
};
|
|
33
|
+
var typographySize = {
|
|
34
|
+
xxxlarge: 36,
|
|
35
|
+
xxlarge: 32,
|
|
36
|
+
xlarge: 24,
|
|
37
|
+
large: 24,
|
|
38
|
+
medium: 20,
|
|
39
|
+
small: 16,
|
|
40
|
+
xsmall: 12
|
|
41
|
+
};
|
|
42
|
+
var AvatarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n\n"])));
|
|
43
|
+
var StyledAvatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), contents999, function (_ref) {
|
|
44
|
+
var $size = _ref.$size;
|
|
45
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", "px;\n max-width: ", "px;\n max-height: ", "px;\n font-size: ", "px;\n "])), avatarSize[$size], avatarSize[$size], avatarSize[$size], typographySize[$size]);
|
|
46
|
+
}, function (_ref2) {
|
|
47
|
+
var $border = _ref2.$border;
|
|
48
|
+
return $border && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border: ", " solid ", ";\n "])), $border.width, $border.color);
|
|
49
|
+
}, function (_ref3) {
|
|
50
|
+
var $rounded = _ref3.$rounded;
|
|
51
|
+
return $rounded && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: 50%;\n "])));
|
|
52
|
+
}, function (_ref4) {
|
|
53
|
+
var $backgroundColor = _ref4.$backgroundColor;
|
|
54
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), $backgroundColor);
|
|
55
|
+
}, function (_ref5) {
|
|
56
|
+
var $rounded = _ref5.$rounded;
|
|
57
|
+
return $rounded && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-radius: 50%;\n "])));
|
|
58
|
+
});
|
|
59
|
+
var StyledBottomBadge = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ", ";\n overflow: hidden;\n \n ", "\n"])), bg300, function (_ref6) {
|
|
60
|
+
var $size = _ref6.$size,
|
|
61
|
+
_ref6$$bgColor = _ref6.$bgColor,
|
|
62
|
+
$bgColor = _ref6$$bgColor === void 0 ? contents000 : _ref6$$bgColor;
|
|
63
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px; \n background-color: ", ";\n "])), bottomBadgeSize[$size], bottomBadgeSize[$size], $bgColor);
|
|
64
|
+
});
|
|
65
|
+
var StyledNotificationBadge = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ", ";\n \n ", "\n"])), secondary100, function (_ref7) {
|
|
66
|
+
var $size = _ref7.$size;
|
|
67
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n "])), notificationBadgeSize[$size], notificationBadgeSize[$size]);
|
|
35
68
|
});
|
|
36
69
|
|
|
37
|
-
export { StyledAvatar, avatarSize };
|
|
70
|
+
export { AvatarContainer, StyledAvatar, StyledBottomBadge, StyledNotificationBadge, avatarSize, bottomBadgeSize, notificationBadgeSize, typographySize };
|
|
38
71
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const avatarSize = {\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { bg200 } from '@remember-web/mixin';
|
|
1
|
+
import { bg200, contents999, roleBlue } from '@remember-web/mixin';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
3
|
|
|
4
4
|
import { avatarSize } from '@/Avatars/Avatar/styles';
|
|
5
5
|
|
|
6
|
+
import { IconLikeFilledS } from '@remember-web/icon';
|
|
6
7
|
import Avatar from '.';
|
|
7
8
|
|
|
9
|
+
const IMAGE_URL =
|
|
10
|
+
'https://images.unsplash.com/photo-1611695434398-4f4b330623e6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8ZmFjZXx8fHx8fDE3MDY5NTExNTk&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300';
|
|
8
11
|
type Story = StoryObj<typeof Avatar>;
|
|
9
12
|
|
|
10
13
|
const meta = {
|
|
@@ -20,19 +23,19 @@ const meta = {
|
|
|
20
23
|
control: { type: 'select' },
|
|
21
24
|
},
|
|
22
25
|
imageUrl: {
|
|
23
|
-
options: [
|
|
24
|
-
undefined,
|
|
25
|
-
'https://images.unsplash.com/photo-1611695434398-4f4b330623e6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8ZmFjZXx8fHx8fDE3MDY5NTExNTk&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
|
|
26
|
-
],
|
|
26
|
+
options: [undefined, IMAGE_URL],
|
|
27
27
|
control: { type: 'select' },
|
|
28
28
|
},
|
|
29
29
|
children: {
|
|
30
|
-
options: [undefined, '
|
|
30
|
+
options: [undefined, '가'],
|
|
31
31
|
control: { type: 'radio' },
|
|
32
32
|
},
|
|
33
33
|
backgroundColor: {
|
|
34
34
|
control: { type: 'color' },
|
|
35
35
|
},
|
|
36
|
+
badges: {
|
|
37
|
+
control: 'object',
|
|
38
|
+
},
|
|
36
39
|
},
|
|
37
40
|
} satisfies Meta<typeof Avatar>;
|
|
38
41
|
|
|
@@ -44,12 +47,76 @@ export const Default: Story = {
|
|
|
44
47
|
},
|
|
45
48
|
};
|
|
46
49
|
|
|
50
|
+
export const WithChildren: Story = {
|
|
51
|
+
args: {
|
|
52
|
+
rounded: true,
|
|
53
|
+
size: 'medium',
|
|
54
|
+
backgroundColor: roleBlue,
|
|
55
|
+
children: '가',
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export const WithBottomBadge: Story = {
|
|
60
|
+
args: {
|
|
61
|
+
rounded: true,
|
|
62
|
+
size: 'medium',
|
|
63
|
+
backgroundColor: bg200,
|
|
64
|
+
imageUrl: IMAGE_URL,
|
|
65
|
+
badges: {
|
|
66
|
+
bottom: { content: <IconLikeFilledS color={contents999} /> },
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const WithNotificationBadge: Story = {
|
|
72
|
+
args: {
|
|
73
|
+
rounded: true,
|
|
74
|
+
size: 'medium',
|
|
75
|
+
backgroundColor: bg200,
|
|
76
|
+
imageUrl: IMAGE_URL,
|
|
77
|
+
badges: {
|
|
78
|
+
notification: true,
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export const WithBothBadges: Story = {
|
|
84
|
+
args: {
|
|
85
|
+
rounded: true,
|
|
86
|
+
size: 'medium',
|
|
87
|
+
backgroundColor: bg200,
|
|
88
|
+
imageUrl: IMAGE_URL,
|
|
89
|
+
badges: {
|
|
90
|
+
bottom: { content: <IconLikeFilledS color={contents999} /> },
|
|
91
|
+
notification: true,
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
export const DifferentSizesWithBadges: Story = {
|
|
97
|
+
render: () => (
|
|
98
|
+
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
99
|
+
{Object.keys(avatarSize).map((size) => (
|
|
100
|
+
<Avatar
|
|
101
|
+
key={size}
|
|
102
|
+
size={size as keyof typeof avatarSize}
|
|
103
|
+
imageUrl={IMAGE_URL}
|
|
104
|
+
badges={{
|
|
105
|
+
bottom: { content: <IconLikeFilledS color={contents999} /> },
|
|
106
|
+
notification: true,
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
))}
|
|
110
|
+
</div>
|
|
111
|
+
),
|
|
112
|
+
};
|
|
113
|
+
|
|
47
114
|
export const ErrorAvatar: Story = {
|
|
48
115
|
render: () => (
|
|
49
116
|
<>
|
|
50
|
-
<Avatar imageUrl=
|
|
117
|
+
<Avatar imageUrl="https://not-found-image-url.com" />
|
|
51
118
|
</>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
119
|
+
),
|
|
120
|
+
};
|
|
54
121
|
|
|
55
122
|
export default meta;
|
|
@@ -3,11 +3,16 @@
|
|
|
3
3
|
import { IconAvatarEmpty } from '@remember-web/icon';
|
|
4
4
|
import { bg200, divider } from '@remember-web/mixin';
|
|
5
5
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
6
|
-
import { forwardRef, useState } from 'react';
|
|
7
6
|
import type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
|
|
7
|
+
import { forwardRef, useState } from 'react';
|
|
8
8
|
|
|
9
9
|
import type { StyledAvatarProps } from '@/Avatars/Avatar/styles';
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
AvatarContainer,
|
|
12
|
+
StyledAvatar,
|
|
13
|
+
StyledBottomBadge,
|
|
14
|
+
StyledNotificationBadge,
|
|
15
|
+
} from '@/Avatars/Avatar/styles';
|
|
11
16
|
|
|
12
17
|
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &
|
|
13
18
|
ComponentPropsWithoutRef<'div'>;
|
|
@@ -19,27 +24,44 @@ const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
|
|
|
19
24
|
border = { color: divider, width: '1px' },
|
|
20
25
|
rounded = true,
|
|
21
26
|
imageUrl,
|
|
27
|
+
badges,
|
|
22
28
|
children,
|
|
29
|
+
...rest
|
|
23
30
|
}: AvatarProps,
|
|
24
31
|
ref
|
|
25
32
|
) => {
|
|
26
33
|
const [imageError, setImageError] = useState(false);
|
|
27
|
-
|
|
34
|
+
|
|
28
35
|
return (
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
<AvatarContainer ref={ref} {...rest}>
|
|
37
|
+
<StyledAvatar
|
|
38
|
+
$size={size}
|
|
39
|
+
$backgroundColor={backgroundColor}
|
|
40
|
+
$border={border}
|
|
41
|
+
$rounded={rounded}
|
|
42
|
+
$badges={badges}
|
|
43
|
+
>
|
|
44
|
+
{!imageError && imageUrl ? (
|
|
45
|
+
<img
|
|
46
|
+
src={imageUrl}
|
|
47
|
+
loading="lazy"
|
|
48
|
+
alt="avatar"
|
|
49
|
+
onError={() => setImageError(true)}
|
|
50
|
+
/>
|
|
51
|
+
) : (
|
|
52
|
+
children ?? <IconAvatarEmpty size="100%" />
|
|
53
|
+
)}
|
|
54
|
+
</StyledAvatar>
|
|
55
|
+
|
|
56
|
+
{badges?.bottom && (
|
|
57
|
+
<StyledBottomBadge $size={size} $bgColor={badges.bottom.bgColor}>
|
|
58
|
+
{badges.bottom.content}
|
|
59
|
+
</StyledBottomBadge>
|
|
40
60
|
)}
|
|
41
|
-
|
|
42
|
-
|
|
61
|
+
|
|
62
|
+
{badges?.notification && <StyledNotificationBadge $size={size} />}
|
|
63
|
+
</AvatarContainer>
|
|
64
|
+
);
|
|
43
65
|
};
|
|
44
66
|
|
|
45
67
|
export default forwardRef(Avatar);
|
|
@@ -1,14 +1,50 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import {
|
|
2
|
+
bg300,
|
|
3
|
+
contents000,
|
|
4
|
+
contents999,
|
|
5
|
+
secondary100,
|
|
6
|
+
} from '@remember-web/mixin';
|
|
7
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
8
|
+
import styled, { css } from 'styled-components';
|
|
3
9
|
|
|
4
10
|
export const avatarSize = {
|
|
11
|
+
xxxlarge: 72,
|
|
5
12
|
xxlarge: 64,
|
|
6
13
|
xlarge: 56,
|
|
7
14
|
large: 48,
|
|
8
15
|
medium: 40,
|
|
9
16
|
small: 32,
|
|
10
17
|
xsmall: 24,
|
|
11
|
-
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export const bottomBadgeSize = {
|
|
21
|
+
xxxlarge: 18,
|
|
22
|
+
xxlarge: 18,
|
|
23
|
+
xlarge: 18,
|
|
24
|
+
large: 18,
|
|
25
|
+
medium: 16,
|
|
26
|
+
small: 14,
|
|
27
|
+
xsmall: 10,
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const notificationBadgeSize = {
|
|
31
|
+
xxxlarge: 6,
|
|
32
|
+
xxlarge: 6,
|
|
33
|
+
xlarge: 6,
|
|
34
|
+
large: 6,
|
|
35
|
+
medium: 4,
|
|
36
|
+
small: 4,
|
|
37
|
+
xsmall: 4,
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export const typographySize = {
|
|
41
|
+
xxxlarge: 36,
|
|
42
|
+
xxlarge: 32,
|
|
43
|
+
xlarge: 24,
|
|
44
|
+
large: 24,
|
|
45
|
+
medium: 20,
|
|
46
|
+
small: 16,
|
|
47
|
+
xsmall: 12,
|
|
12
48
|
};
|
|
13
49
|
|
|
14
50
|
export interface StyledAvatarProps {
|
|
@@ -20,28 +56,97 @@ export interface StyledAvatarProps {
|
|
|
20
56
|
$rounded?: boolean;
|
|
21
57
|
$imageUrl?: string;
|
|
22
58
|
$backgroundColor?: CSSProperties['backgroundColor'];
|
|
59
|
+
$badges?: {
|
|
60
|
+
bottom?: { content: ReactNode; bgColor?: string };
|
|
61
|
+
notification?: boolean;
|
|
62
|
+
};
|
|
23
63
|
}
|
|
24
64
|
|
|
25
|
-
export const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
65
|
+
export const AvatarContainer = styled.div`
|
|
66
|
+
position: relative;
|
|
67
|
+
display: inline-block;
|
|
68
|
+
|
|
69
|
+
`;
|
|
70
|
+
|
|
71
|
+
export const StyledAvatar = styled.div<StyledAvatarProps>`
|
|
72
|
+
position: relative;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
aspect-ratio: 1 / 1;
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
contain: strict;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
color: ${contents999};
|
|
81
|
+
|
|
82
|
+
${({ $size }) => css`
|
|
83
|
+
width: ${avatarSize[$size]}px;
|
|
84
|
+
max-width: ${avatarSize[$size]}px;
|
|
85
|
+
max-height: ${avatarSize[$size]}px;
|
|
86
|
+
font-size: ${typographySize[$size]}px;
|
|
87
|
+
`}
|
|
88
|
+
|
|
89
|
+
${({ $border }) =>
|
|
90
|
+
$border &&
|
|
91
|
+
css`
|
|
92
|
+
border: ${$border.width} solid ${$border.color};
|
|
93
|
+
`}
|
|
94
|
+
|
|
95
|
+
${({ $rounded }) =>
|
|
96
|
+
$rounded &&
|
|
97
|
+
css`
|
|
98
|
+
border-radius: 50%;
|
|
99
|
+
`}
|
|
100
|
+
|
|
101
|
+
${({ $backgroundColor }) => css`
|
|
102
|
+
background-color: ${$backgroundColor};
|
|
103
|
+
`}
|
|
104
|
+
|
|
105
|
+
img {
|
|
106
|
+
width: 100%;
|
|
107
|
+
height: 100%;
|
|
108
|
+
object-fit: cover;
|
|
109
|
+
|
|
110
|
+
${({ $rounded }) =>
|
|
111
|
+
$rounded &&
|
|
112
|
+
css`
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
`}
|
|
115
|
+
}
|
|
116
|
+
`;
|
|
117
|
+
|
|
118
|
+
export const StyledBottomBadge = styled.div<{
|
|
119
|
+
$size: keyof typeof bottomBadgeSize;
|
|
120
|
+
$bgColor?: string;
|
|
121
|
+
}>`
|
|
122
|
+
position: absolute;
|
|
123
|
+
bottom: 0;
|
|
124
|
+
right: 0;
|
|
125
|
+
border-radius: 50%;
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
justify-content: center;
|
|
129
|
+
border: 1px solid ${bg300};
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
|
|
132
|
+
${({ $size, $bgColor = contents000 }) => css`
|
|
133
|
+
width: ${bottomBadgeSize[$size]}px;
|
|
134
|
+
height: ${bottomBadgeSize[$size]}px;
|
|
135
|
+
background-color: ${$bgColor};
|
|
136
|
+
`}
|
|
137
|
+
`;
|
|
138
|
+
|
|
139
|
+
export const StyledNotificationBadge = styled.div<{
|
|
140
|
+
$size: keyof typeof notificationBadgeSize;
|
|
141
|
+
}>`
|
|
142
|
+
position: absolute;
|
|
143
|
+
top: 0;
|
|
144
|
+
right: 0;
|
|
145
|
+
border-radius: 50%;
|
|
146
|
+
background-color: ${secondary100};
|
|
147
|
+
|
|
148
|
+
${({ $size }) => css`
|
|
149
|
+
width: ${notificationBadgeSize[$size]}px;
|
|
150
|
+
height: ${notificationBadgeSize[$size]}px;
|
|
151
|
+
`}
|
|
152
|
+
`;
|