@semcore/card 16.1.12 → 17.0.0-prerelease.17
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 +6 -0
- package/README.md +4 -4
- package/lib/cjs/Card.js +76 -66
- package/lib/cjs/Card.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +3 -3
- package/lib/cjs/style/card.shadow.css +21 -20
- package/lib/es6/Card.js +69 -59
- package/lib/es6/Card.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/card.shadow.css +21 -20
- package/lib/esm/Card.mjs +67 -50
- package/lib/esm/style/card.shadow.css +21 -20
- package/lib/types/index.d.ts +1 -8
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/@semcore/card)
|
|
4
4
|
[](https://www.npmjs.com/package/@semcore/card)
|
|
5
|
-
[](https://github.com/semrush/intergalactic/blob/
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
|
|
6
6
|
|
|
7
7
|
> This component is part of the Intergalactic Design System
|
|
8
8
|
|
|
@@ -20,13 +20,13 @@ npm install @semcore/card
|
|
|
20
20
|
|
|
21
21
|
## 👤 Author
|
|
22
22
|
|
|
23
|
-
[UI-kit team](https://github.com/semrush/intergalactic/blob/
|
|
23
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
24
24
|
|
|
25
25
|
## 🤝 Contributing
|
|
26
26
|
|
|
27
27
|
Contributions, issues and feature requests are welcome!
|
|
28
28
|
|
|
29
|
-
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/
|
|
29
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
|
|
30
30
|
|
|
31
31
|
## Show your support
|
|
32
32
|
|
|
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
|
|
|
34
34
|
|
|
35
35
|
## 📝 License
|
|
36
36
|
|
|
37
|
-
This project is [MIT](https://github.com/semrush/intergalactic/blob/
|
|
37
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.
|
package/lib/cjs/Card.js
CHANGED
|
@@ -1,111 +1,121 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports
|
|
8
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
7
|
+
exports.default = void 0;
|
|
13
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
9
|
var _core = require("@semcore/core");
|
|
10
|
+
var _baseComponents = require("@semcore/base-components");
|
|
15
11
|
var _button = require("@semcore/button");
|
|
16
12
|
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
17
|
-
var _flexBox = require("@semcore/flex-box");
|
|
18
13
|
var _m = _interopRequireDefault(require("@semcore/icon/Info/m"));
|
|
19
14
|
var _tooltip = require("@semcore/tooltip");
|
|
20
15
|
var _typography = require("@semcore/typography");
|
|
21
16
|
var _react = _interopRequireDefault(require("react"));
|
|
22
17
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
23
|
-
|
|
18
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SCard_2xjv9_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-top:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top}.___SCard_2xjv9_gg_ .___SDescription_2xjv9_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, #6c6e79)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_,.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"2xjv9_gg_"),
|
|
24
19
|
/*__reshadow_css_end__*/
|
|
25
20
|
{
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
21
|
+
"__SCard": "___SCard_2xjv9_gg_",
|
|
22
|
+
"__STitle": "___STitle_2xjv9_gg_",
|
|
23
|
+
"__SInfoTrigger": "___SInfoTrigger_2xjv9_gg_",
|
|
24
|
+
"__SDescription": "___SDescription_2xjv9_gg_",
|
|
25
|
+
"__SHeader": "___SHeader_2xjv9_gg_",
|
|
26
|
+
"__SBody": "___SBody_2xjv9_gg_"
|
|
32
27
|
});
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
class CardRoot extends _core.Component {
|
|
29
|
+
render() {
|
|
30
|
+
var _ref = this.asProps,
|
|
31
|
+
_ref6;
|
|
32
|
+
const SCard = _baseComponents.Box;
|
|
33
|
+
const {
|
|
34
|
+
Children,
|
|
35
|
+
styles,
|
|
36
|
+
forcedAdvancedMode
|
|
37
|
+
} = this.asProps;
|
|
38
|
+
const advancedMode = forcedAdvancedMode || (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
39
|
+
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCard, _ref6.cn("SCard", {
|
|
40
|
+
...(0, _core.assignProps)({}, _ref)
|
|
41
|
+
}), advancedMode ? /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(Card.Body, null, /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {}))));
|
|
37
42
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
value: function render() {
|
|
42
|
-
var _ref = this.asProps,
|
|
43
|
-
_ref6;
|
|
44
|
-
var SCard = _flexBox.Box;
|
|
45
|
-
var _this$asProps = this.asProps,
|
|
46
|
-
Children = _this$asProps.Children,
|
|
47
|
-
styles = _this$asProps.styles,
|
|
48
|
-
forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
49
|
-
var advancedMode = forcedAdvancedMode || (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
50
|
-
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCard, _ref6.cn("SCard", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), advancedMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(Card.Body, null, /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
|
|
51
|
-
}
|
|
52
|
-
}]);
|
|
53
|
-
}(_core.Component);
|
|
54
|
-
(0, _defineProperty2["default"])(CardRoot, "displayName", 'Card');
|
|
55
|
-
(0, _defineProperty2["default"])(CardRoot, "style", style);
|
|
43
|
+
}
|
|
44
|
+
(0, _defineProperty2.default)(CardRoot, "displayName", 'Card');
|
|
45
|
+
(0, _defineProperty2.default)(CardRoot, "style", style);
|
|
56
46
|
function Title(props) {
|
|
57
47
|
var _ref2 = arguments[0],
|
|
58
48
|
_ref7;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
49
|
+
const {
|
|
50
|
+
styles,
|
|
51
|
+
innerHint,
|
|
52
|
+
Children,
|
|
53
|
+
innerHintAriaLabel,
|
|
54
|
+
hintAfterAriaLabel
|
|
55
|
+
} = props;
|
|
56
|
+
const hintAfter = props.hintAfter || props.hint;
|
|
57
|
+
const STitle = _typography.Text;
|
|
58
|
+
const SInfo = _tooltip.DescriptionTooltip;
|
|
59
|
+
const SInfoTrigger = SInfo.Trigger;
|
|
60
|
+
return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(STitle, _ref7.cn("STitle", {
|
|
61
|
+
...(0, _core.assignProps)({}, _ref2)
|
|
62
|
+
}), /*#__PURE__*/_react.default.createElement(Children, _ref7.cn("Children", {})), innerHint && /*#__PURE__*/_react.default.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/_react.default.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
69
63
|
"tag": _button.ButtonLink,
|
|
70
64
|
"ml": 1,
|
|
71
65
|
"use": 'secondary',
|
|
72
66
|
"aria-label": innerHintAriaLabel,
|
|
73
67
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
74
|
-
}), /*#__PURE__*/_react
|
|
68
|
+
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper, null, innerHint))), hintAfter && /*#__PURE__*/_react.default.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/_react.default.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
75
69
|
"tag": _button.ButtonLink,
|
|
76
70
|
"use": 'secondary',
|
|
77
71
|
"aria-label": hintAfterAriaLabel,
|
|
78
72
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
79
|
-
}), /*#__PURE__*/_react
|
|
73
|
+
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper, null, hintAfter)));
|
|
80
74
|
}
|
|
81
75
|
function Description(props) {
|
|
82
76
|
var _ref3 = arguments[0],
|
|
83
77
|
_ref8;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
78
|
+
const {
|
|
79
|
+
styles
|
|
80
|
+
} = props;
|
|
81
|
+
const SDescription = _typography.Text;
|
|
82
|
+
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SDescription, _ref8.cn("SDescription", {
|
|
83
|
+
...(0, _core.assignProps)({
|
|
84
|
+
"tag": 'p'
|
|
85
|
+
}, _ref3)
|
|
86
|
+
}));
|
|
89
87
|
}
|
|
90
88
|
function Header(props) {
|
|
91
89
|
var _ref4 = arguments[0],
|
|
92
90
|
_ref9;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
const {
|
|
92
|
+
styles
|
|
93
|
+
} = props;
|
|
94
|
+
const SHeader = _baseComponents.Box;
|
|
95
|
+
return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SHeader, _ref9.cn("SHeader", {
|
|
96
|
+
...(0, _core.assignProps)({
|
|
97
|
+
...props
|
|
98
|
+
}, _ref4)
|
|
99
|
+
}));
|
|
96
100
|
}
|
|
97
101
|
function Body(props) {
|
|
98
102
|
var _ref5 = arguments[0],
|
|
99
103
|
_ref0;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
104
|
+
const {
|
|
105
|
+
styles
|
|
106
|
+
} = props;
|
|
107
|
+
const SBody = _baseComponents.Box;
|
|
108
|
+
return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SBody, _ref0.cn("SBody", {
|
|
109
|
+
...(0, _core.assignProps)({
|
|
110
|
+
...props
|
|
111
|
+
}, _ref5)
|
|
112
|
+
}));
|
|
103
113
|
}
|
|
104
|
-
|
|
105
|
-
Title
|
|
106
|
-
Description
|
|
107
|
-
Header
|
|
108
|
-
Body
|
|
114
|
+
const Card = (0, _core.createComponent)(CardRoot, {
|
|
115
|
+
Title,
|
|
116
|
+
Description,
|
|
117
|
+
Header,
|
|
118
|
+
Body
|
|
109
119
|
});
|
|
110
|
-
var _default = exports
|
|
120
|
+
var _default = exports.default = Card;
|
|
111
121
|
//# sourceMappingURL=Card.js.map
|
package/lib/cjs/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["_core","require","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["_core","require","_baseComponents","_button","_findComponent","_m","_interopRequireDefault","_tooltip","_typography","_react","style","sstyled","insert","CardRoot","Component","render","_ref","asProps","_ref6","SCard","Box","Children","styles","forcedAdvancedMode","advancedMode","isAdvanceMode","Card","Header","displayName","Body","default","createElement","cn","assignProps","_defineProperty2","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","hint","STitle","Text","SInfo","DescriptionTooltip","SInfoTrigger","Trigger","Fragment","ButtonLink","Addon","Popper","Description","_ref3","_ref8","SDescription","_ref4","_ref9","SHeader","_ref5","_ref0","SBody","createComponent","_default","exports"],"sources":["../../src/Card.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { ButtonLink } from '@semcore/button';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport InfoM from '@semcore/icon/Info/m';\nimport { DescriptionTooltip } from '@semcore/tooltip';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n return sstyled(styles)(\n <SCard render={Box}>\n {advancedMode\n ? (\n <Children />\n )\n : (\n <Card.Body>\n <Children />\n </Card.Body>\n )}\n </SCard>,\n );\n }\n}\n\nfunction Title(props) {\n const { styles, innerHint, Children, innerHintAriaLabel, hintAfterAriaLabel } = props;\n const hintAfter = props.hintAfter || props.hint;\n const STitle = Root;\n const SInfo = DescriptionTooltip;\n const SInfoTrigger = SInfo.Trigger;\n\n return sstyled(styles)(\n <>\n <STitle render={Text}>\n <Children />\n {innerHint && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n ml={1}\n use='secondary'\n aria-label={innerHintAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper>{innerHint}</SInfo.Popper>\n </SInfo>\n )}\n </STitle>\n {hintAfter && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n use='secondary'\n aria-label={hintAfterAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper>{hintAfter}</SInfo.Popper>\n </SInfo>\n )}\n </>,\n );\n}\n\nfunction Description(props) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n const { styles } = props;\n const SBody = Root;\n return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n Title,\n Description,\n Header,\n Body,\n});\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\ndeclare const Card: Intergalactic.Component<'div', BoxProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\n\nexport default Card;\n"],"mappings":"","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
Object.defineProperty(exports, "default", {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: function
|
|
10
|
-
return _Card
|
|
9
|
+
get: function () {
|
|
10
|
+
return _Card.default;
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
13
|
var _Card = _interopRequireDefault(require("./Card"));
|
|
@@ -26,27 +26,28 @@ SCard {
|
|
|
26
26
|
line-height: normal;
|
|
27
27
|
vertical-align: top;
|
|
28
28
|
}
|
|
29
|
-
}
|
|
30
29
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
SDescription {
|
|
31
|
+
display: block;
|
|
32
|
+
margin-bottom: 0;
|
|
33
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
35
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
38
|
+
SHeader {
|
|
39
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
40
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
41
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
42
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
43
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, #e0e1e9);
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
SBody {
|
|
47
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
48
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
49
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
50
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
51
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
52
|
+
}
|
|
52
53
|
}
|
package/lib/es6/Card.js
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
2
|
import { sstyled as _sstyled } from "@semcore/core";
|
|
8
3
|
import { assignProps as _assignProps5 } from "@semcore/core";
|
|
@@ -10,61 +5,60 @@ import { assignProps as _assignProps4 } from "@semcore/core";
|
|
|
10
5
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
6
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
7
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
8
|
+
import { Box } from '@semcore/base-components';
|
|
13
9
|
import { ButtonLink } from '@semcore/button';
|
|
14
10
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
15
11
|
import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
|
|
16
|
-
import { Box } from '@semcore/flex-box';
|
|
17
12
|
import InfoM from '@semcore/icon/Info/m';
|
|
18
13
|
import { DescriptionTooltip } from '@semcore/tooltip';
|
|
19
14
|
import { Text } from '@semcore/typography';
|
|
20
15
|
import React from 'react';
|
|
21
16
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
22
|
-
|
|
17
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCard_2xjv9_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-top:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top}.___SCard_2xjv9_gg_ .___SDescription_2xjv9_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, #6c6e79)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_,.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"2xjv9_gg_"),
|
|
23
18
|
/*__reshadow_css_end__*/
|
|
24
19
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
20
|
+
"__SCard": "___SCard_2xjv9_gg_",
|
|
21
|
+
"__STitle": "___STitle_2xjv9_gg_",
|
|
22
|
+
"__SInfoTrigger": "___SInfoTrigger_2xjv9_gg_",
|
|
23
|
+
"__SDescription": "___SDescription_2xjv9_gg_",
|
|
24
|
+
"__SHeader": "___SHeader_2xjv9_gg_",
|
|
25
|
+
"__SBody": "___SBody_2xjv9_gg_"
|
|
31
26
|
});
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
27
|
+
class CardRoot extends Component {
|
|
28
|
+
render() {
|
|
29
|
+
var _ref = this.asProps,
|
|
30
|
+
_ref6;
|
|
31
|
+
const SCard = Box;
|
|
32
|
+
const {
|
|
33
|
+
Children,
|
|
34
|
+
styles,
|
|
35
|
+
forcedAdvancedMode
|
|
36
|
+
} = this.asProps;
|
|
37
|
+
const advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
38
|
+
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref6.cn("SCard", {
|
|
39
|
+
..._assignProps({}, _ref)
|
|
40
|
+
}), advancedMode ? /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/React.createElement(Card.Body, null, /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
|
|
36
41
|
}
|
|
37
|
-
|
|
38
|
-
return _createClass(CardRoot, [{
|
|
39
|
-
key: "render",
|
|
40
|
-
value: function render() {
|
|
41
|
-
var _ref = this.asProps,
|
|
42
|
-
_ref6;
|
|
43
|
-
var SCard = Box;
|
|
44
|
-
var _this$asProps = this.asProps,
|
|
45
|
-
Children = _this$asProps.Children,
|
|
46
|
-
styles = _this$asProps.styles,
|
|
47
|
-
forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
48
|
-
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
49
|
-
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref6.cn("SCard", _objectSpread({}, _assignProps({}, _ref))), advancedMode ? /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/React.createElement(Card.Body, null, /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
|
|
50
|
-
}
|
|
51
|
-
}]);
|
|
52
|
-
}(Component);
|
|
42
|
+
}
|
|
53
43
|
_defineProperty(CardRoot, "displayName", 'Card');
|
|
54
44
|
_defineProperty(CardRoot, "style", style);
|
|
55
45
|
function Title(props) {
|
|
56
46
|
var _ref2 = arguments[0],
|
|
57
47
|
_ref7;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
48
|
+
const {
|
|
49
|
+
styles,
|
|
50
|
+
innerHint,
|
|
51
|
+
Children,
|
|
52
|
+
innerHintAriaLabel,
|
|
53
|
+
hintAfterAriaLabel
|
|
54
|
+
} = props;
|
|
55
|
+
const hintAfter = props.hintAfter || props.hint;
|
|
56
|
+
const STitle = Text;
|
|
57
|
+
const SInfo = DescriptionTooltip;
|
|
58
|
+
const SInfoTrigger = SInfo.Trigger;
|
|
59
|
+
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STitle, _ref7.cn("STitle", {
|
|
60
|
+
..._assignProps2({}, _ref2)
|
|
61
|
+
}), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})), innerHint && /*#__PURE__*/React.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/React.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
68
62
|
"tag": ButtonLink,
|
|
69
63
|
"ml": 1,
|
|
70
64
|
"use": 'secondary',
|
|
@@ -80,31 +74,47 @@ function Title(props) {
|
|
|
80
74
|
function Description(props) {
|
|
81
75
|
var _ref3 = arguments[0],
|
|
82
76
|
_ref8;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
77
|
+
const {
|
|
78
|
+
styles
|
|
79
|
+
} = props;
|
|
80
|
+
const SDescription = Text;
|
|
81
|
+
return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SDescription, _ref8.cn("SDescription", {
|
|
82
|
+
..._assignProps3({
|
|
83
|
+
"tag": 'p'
|
|
84
|
+
}, _ref3)
|
|
85
|
+
}));
|
|
88
86
|
}
|
|
89
87
|
function Header(props) {
|
|
90
88
|
var _ref4 = arguments[0],
|
|
91
89
|
_ref9;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
const {
|
|
91
|
+
styles
|
|
92
|
+
} = props;
|
|
93
|
+
const SHeader = Box;
|
|
94
|
+
return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SHeader, _ref9.cn("SHeader", {
|
|
95
|
+
..._assignProps4({
|
|
96
|
+
...props
|
|
97
|
+
}, _ref4)
|
|
98
|
+
}));
|
|
95
99
|
}
|
|
96
100
|
function Body(props) {
|
|
97
101
|
var _ref5 = arguments[0],
|
|
98
102
|
_ref0;
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
103
|
+
const {
|
|
104
|
+
styles
|
|
105
|
+
} = props;
|
|
106
|
+
const SBody = Box;
|
|
107
|
+
return _ref0 = sstyled(styles), /*#__PURE__*/React.createElement(SBody, _ref0.cn("SBody", {
|
|
108
|
+
..._assignProps5({
|
|
109
|
+
...props
|
|
110
|
+
}, _ref5)
|
|
111
|
+
}));
|
|
102
112
|
}
|
|
103
|
-
|
|
104
|
-
Title
|
|
105
|
-
Description
|
|
106
|
-
Header
|
|
107
|
-
Body
|
|
113
|
+
const Card = createComponent(CardRoot, {
|
|
114
|
+
Title,
|
|
115
|
+
Description,
|
|
116
|
+
Header,
|
|
117
|
+
Body
|
|
108
118
|
});
|
|
109
119
|
export default Card;
|
|
110
120
|
//# sourceMappingURL=Card.js.map
|
package/lib/es6/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["ButtonLink","createComponent","Component","sstyled","Root","isAdvanceMode","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["Box","ButtonLink","createComponent","Component","sstyled","Root","isAdvanceMode","InfoM","DescriptionTooltip","Text","React","style","_sstyled","insert","CardRoot","render","_ref","asProps","_ref6","SCard","Children","styles","forcedAdvancedMode","advancedMode","Card","Header","displayName","Body","createElement","cn","_assignProps","_defineProperty","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","hint","STitle","SInfo","SInfoTrigger","Trigger","Fragment","_assignProps2","Addon","Popper","Description","_ref3","_ref8","SDescription","_assignProps3","_ref4","_ref9","SHeader","_assignProps4","_ref5","_ref0","SBody","_assignProps5"],"sources":["../../src/Card.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { ButtonLink } from '@semcore/button';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport InfoM from '@semcore/icon/Info/m';\nimport { DescriptionTooltip } from '@semcore/tooltip';\nimport { Text } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n return sstyled(styles)(\n <SCard render={Box}>\n {advancedMode\n ? (\n <Children />\n )\n : (\n <Card.Body>\n <Children />\n </Card.Body>\n )}\n </SCard>,\n );\n }\n}\n\nfunction Title(props) {\n const { styles, innerHint, Children, innerHintAriaLabel, hintAfterAriaLabel } = props;\n const hintAfter = props.hintAfter || props.hint;\n const STitle = Root;\n const SInfo = DescriptionTooltip;\n const SInfoTrigger = SInfo.Trigger;\n\n return sstyled(styles)(\n <>\n <STitle render={Text}>\n <Children />\n {innerHint && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n ml={1}\n use='secondary'\n aria-label={innerHintAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper>{innerHint}</SInfo.Popper>\n </SInfo>\n )}\n </STitle>\n {hintAfter && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n use='secondary'\n aria-label={hintAfterAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper>{hintAfter}</SInfo.Popper>\n </SInfo>\n )}\n </>,\n );\n}\n\nfunction Description(props) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n const { styles } = props;\n const SBody = Root;\n return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n Title,\n Description,\n Header,\n Body,\n});\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\ndeclare const Card: Intergalactic.Component<'div', BoxProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\n\nexport default Card;\n"],"mappings":"","ignoreList":[]}
|
|
@@ -26,27 +26,28 @@ SCard {
|
|
|
26
26
|
line-height: normal;
|
|
27
27
|
vertical-align: top;
|
|
28
28
|
}
|
|
29
|
-
}
|
|
30
29
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
SDescription {
|
|
31
|
+
display: block;
|
|
32
|
+
margin-bottom: 0;
|
|
33
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
35
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
38
|
+
SHeader {
|
|
39
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
40
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
41
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
42
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
43
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, #e0e1e9);
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
SBody {
|
|
47
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
48
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
49
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
50
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
51
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
52
|
+
}
|
|
52
53
|
}
|
package/lib/esm/Card.mjs
CHANGED
|
@@ -1,62 +1,63 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { createComponent, sstyled,
|
|
2
|
+
import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
|
|
3
|
+
import { Box } from "@semcore/base-components";
|
|
8
4
|
import { ButtonLink } from "@semcore/button";
|
|
9
5
|
import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
10
|
-
import { Box } from "@semcore/flex-box";
|
|
11
6
|
import InfoM from "@semcore/icon/Info/m";
|
|
12
7
|
import { DescriptionTooltip } from "@semcore/tooltip";
|
|
13
8
|
import { Text } from "@semcore/typography";
|
|
14
9
|
import React from "react";
|
|
15
10
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
16
|
-
|
|
11
|
+
const style = (
|
|
17
12
|
/*__reshadow_css_start__*/
|
|
18
13
|
(sstyled.insert(
|
|
19
14
|
/*__inner_css_start__*/
|
|
20
|
-
".
|
|
15
|
+
".___SCard_2xjv9_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___STitle_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-top:var(--intergalactic-spacing-1x, 4px)}.___SCard_2xjv9_gg_ .___SInfoTrigger_2xjv9_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top}.___SCard_2xjv9_gg_ .___SDescription_2xjv9_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, #6c6e79)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_,.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_2xjv9_gg_ .___SHeader_2xjv9_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_2xjv9_gg_ .___SBody_2xjv9_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}",
|
|
21
16
|
/*__inner_css_end__*/
|
|
22
|
-
"
|
|
17
|
+
"2xjv9_gg_"
|
|
23
18
|
), /*__reshadow_css_end__*/
|
|
24
19
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
20
|
+
"__SCard": "___SCard_2xjv9_gg_",
|
|
21
|
+
"__STitle": "___STitle_2xjv9_gg_",
|
|
22
|
+
"__SInfoTrigger": "___SInfoTrigger_2xjv9_gg_",
|
|
23
|
+
"__SDescription": "___SDescription_2xjv9_gg_",
|
|
24
|
+
"__SHeader": "___SHeader_2xjv9_gg_",
|
|
25
|
+
"__SBody": "___SBody_2xjv9_gg_"
|
|
31
26
|
})
|
|
32
27
|
);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
class CardRoot extends Component {
|
|
29
|
+
render() {
|
|
30
|
+
var _ref = this.asProps, _ref6;
|
|
31
|
+
const SCard = Box;
|
|
32
|
+
const {
|
|
33
|
+
Children,
|
|
34
|
+
styles,
|
|
35
|
+
forcedAdvancedMode
|
|
36
|
+
} = this.asProps;
|
|
37
|
+
const advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
38
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCard, _ref6.cn("SCard", {
|
|
39
|
+
...assignProps({}, _ref)
|
|
40
|
+
}), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})) : /* @__PURE__ */ React.createElement(Card.Body, null, /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
|
|
37
41
|
}
|
|
38
|
-
|
|
39
|
-
return _createClass(CardRoot2, [{
|
|
40
|
-
key: "render",
|
|
41
|
-
value: function render() {
|
|
42
|
-
var _ref = this.asProps, _ref6;
|
|
43
|
-
var SCard = Box;
|
|
44
|
-
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles, forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
45
|
-
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
46
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCard, _ref6.cn("SCard", _objectSpread({}, assignProps({}, _ref))), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})) : /* @__PURE__ */ React.createElement(Card.Body, null, /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
|
|
47
|
-
}
|
|
48
|
-
}]);
|
|
49
|
-
})(Component);
|
|
42
|
+
}
|
|
50
43
|
_defineProperty(CardRoot, "displayName", "Card");
|
|
51
44
|
_defineProperty(CardRoot, "style", style);
|
|
52
45
|
function Title(props) {
|
|
53
46
|
var _ref2 = arguments[0], _ref7;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
const {
|
|
48
|
+
styles,
|
|
49
|
+
innerHint,
|
|
50
|
+
Children,
|
|
51
|
+
innerHintAriaLabel,
|
|
52
|
+
hintAfterAriaLabel
|
|
53
|
+
} = props;
|
|
54
|
+
const hintAfter = props.hintAfter || props.hint;
|
|
55
|
+
const STitle = Text;
|
|
56
|
+
const SInfo = DescriptionTooltip;
|
|
57
|
+
const SInfoTrigger = SInfo.Trigger;
|
|
58
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STitle, _ref7.cn("STitle", {
|
|
59
|
+
...assignProps({}, _ref2)
|
|
60
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})), innerHint && /* @__PURE__ */ React.createElement(SInfo, _ref7.cn("SInfo", {}), /* @__PURE__ */ React.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
60
61
|
"tag": ButtonLink,
|
|
61
62
|
"ml": 1,
|
|
62
63
|
"use": "secondary",
|
|
@@ -71,25 +72,41 @@ function Title(props) {
|
|
|
71
72
|
}
|
|
72
73
|
function Description(props) {
|
|
73
74
|
var _ref3 = arguments[0], _ref8;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
const {
|
|
76
|
+
styles
|
|
77
|
+
} = props;
|
|
78
|
+
const SDescription = Text;
|
|
79
|
+
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SDescription, _ref8.cn("SDescription", {
|
|
80
|
+
...assignProps({
|
|
81
|
+
"tag": "p"
|
|
82
|
+
}, _ref3)
|
|
83
|
+
}));
|
|
79
84
|
}
|
|
80
85
|
function Header(props) {
|
|
81
86
|
var _ref4 = arguments[0], _ref9;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
const {
|
|
88
|
+
styles
|
|
89
|
+
} = props;
|
|
90
|
+
const SHeader = Box;
|
|
91
|
+
return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref9.cn("SHeader", {
|
|
92
|
+
...assignProps({
|
|
93
|
+
...props
|
|
94
|
+
}, _ref4)
|
|
95
|
+
}));
|
|
85
96
|
}
|
|
86
97
|
function Body(props) {
|
|
87
98
|
var _ref5 = arguments[0], _ref0;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
99
|
+
const {
|
|
100
|
+
styles
|
|
101
|
+
} = props;
|
|
102
|
+
const SBody = Box;
|
|
103
|
+
return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref0.cn("SBody", {
|
|
104
|
+
...assignProps({
|
|
105
|
+
...props
|
|
106
|
+
}, _ref5)
|
|
107
|
+
}));
|
|
91
108
|
}
|
|
92
|
-
|
|
109
|
+
const Card = createComponent(CardRoot, {
|
|
93
110
|
Title,
|
|
94
111
|
Description,
|
|
95
112
|
Header,
|
|
@@ -26,27 +26,28 @@ SCard {
|
|
|
26
26
|
line-height: normal;
|
|
27
27
|
vertical-align: top;
|
|
28
28
|
}
|
|
29
|
-
}
|
|
30
29
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
SDescription {
|
|
31
|
+
display: block;
|
|
32
|
+
margin-bottom: 0;
|
|
33
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
35
|
+
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
38
|
+
SHeader {
|
|
39
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
40
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
41
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
42
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
43
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, #e0e1e9);
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
SBody {
|
|
47
|
+
color: var(--intergalactic-text-primary, #191b23);
|
|
48
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
49
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
50
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
51
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
52
|
+
}
|
|
52
53
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
+
import type { Box, BoxProps } from '@semcore/base-components';
|
|
1
2
|
import type { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
-
import type { Box, BoxProps } from '@semcore/flex-box';
|
|
3
3
|
import type { Text, TextProps } from '@semcore/typography';
|
|
4
4
|
import type React from 'react';
|
|
5
5
|
|
|
6
|
-
/** @deprecated */
|
|
7
|
-
export interface ITitleProps extends TitleProps, UnknownProperties {}
|
|
8
6
|
export type TitleProps = TextProps & {
|
|
9
7
|
/**
|
|
10
8
|
* Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.
|
|
@@ -14,11 +12,6 @@ export type TitleProps = TextProps & {
|
|
|
14
12
|
* Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.
|
|
15
13
|
*/
|
|
16
14
|
hintAfter?: React.ReactNode;
|
|
17
|
-
/**
|
|
18
|
-
* Renamed to `hintAfter`
|
|
19
|
-
* @deprecated
|
|
20
|
-
*/
|
|
21
|
-
hint?: React.ReactNode;
|
|
22
15
|
/** Aria-label for the InnerHint icon */
|
|
23
16
|
innerHintAriaLabel?: string;
|
|
24
17
|
/** Aria-label for the HintAfter icon */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/card",
|
|
3
3
|
"description": "Semrush Card Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "17.0.0-prerelease.17",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,14 +14,13 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/typography": "16.3.
|
|
18
|
-
"@semcore/tooltip": "
|
|
19
|
-
"@semcore/button": "16.0.
|
|
20
|
-
"@semcore/icon": "16.7.3",
|
|
21
|
-
"@semcore/flex-box": "16.0.11"
|
|
17
|
+
"@semcore/typography": "^16.3.3-prerelease.17",
|
|
18
|
+
"@semcore/tooltip": "^17.0.0-prerelease.17",
|
|
19
|
+
"@semcore/button": "^16.0.13-prerelease.17"
|
|
22
20
|
},
|
|
23
21
|
"peerDependencies": {
|
|
24
|
-
"@semcore/base-components": "^
|
|
22
|
+
"@semcore/base-components": "^17.0.0-prerelease.17",
|
|
23
|
+
"@semcore/icon": "^16.7.2-prerelease.17"
|
|
25
24
|
},
|
|
26
25
|
"repository": {
|
|
27
26
|
"type": "git",
|
|
@@ -29,10 +28,11 @@
|
|
|
29
28
|
"directory": "semcore/card"
|
|
30
29
|
},
|
|
31
30
|
"devDependencies": {
|
|
32
|
-
"@semcore/
|
|
31
|
+
"@semcore/base-components": "17.0.0-prerelease.17",
|
|
32
|
+
"@semcore/core": "17.0.0-prerelease.17",
|
|
33
33
|
"@semcore/testing-utils": "1.0.0",
|
|
34
|
-
"@semcore/typography": "16.3.
|
|
35
|
-
"@semcore/icon": "16.7.
|
|
34
|
+
"@semcore/typography": "16.3.3-prerelease.17",
|
|
35
|
+
"@semcore/icon": "16.7.2-prerelease.17"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|