@semcore/card 5.49.0-prerelease.0 → 5.49.0-prerelease.1
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/lib/cjs/Card.js +45 -48
- package/lib/cjs/Card.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/index.js +1 -14
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/card.shadow.css +24 -25
- package/lib/es6/Card.js +37 -43
- package/lib/es6/Card.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/card.shadow.css +24 -25
- package/lib/esm/Card.mjs +41 -47
- package/lib/esm/index.mjs +0 -1
- package/lib/esm/style/card.shadow.css +24 -25
- package/lib/types/index.d.ts +35 -2
- package/package.json +8 -8
- package/lib/cjs/Card.type.js +0 -2
- package/lib/cjs/Card.type.js.map +0 -1
- package/lib/es6/Card.type.js +0 -2
- package/lib/es6/Card.type.js.map +0 -1
- package/lib/esm/Card.type.mjs +0 -1
- package/lib/types/Card.d.ts +0 -3
- package/lib/types/Card.type.d.ts +0 -44
package/lib/cjs/Card.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
@@ -8,47 +9,50 @@ exports["default"] = void 0;
|
|
|
8
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
13
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var
|
|
15
|
-
var
|
|
15
|
+
var _index = require("@semcore/utils/lib/core/index");
|
|
16
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
17
|
+
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
var _flexBox = require("@semcore/flex-box");
|
|
19
|
+
var _typography = require("@semcore/typography");
|
|
16
20
|
var _button = require("@semcore/button");
|
|
17
|
-
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
18
|
-
var _m = _interopRequireDefault(require("@semcore/icon/Info/m"));
|
|
19
21
|
var _tooltip = require("@semcore/tooltip");
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
+
var _m = _interopRequireDefault(require("@semcore/icon/Info/m"));
|
|
23
|
+
var _findComponent = require("@semcore/utils/lib/findComponent");
|
|
22
24
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
23
|
-
var style = (/*__reshadow_css_start__*/
|
|
25
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SCard_bwu65_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@supports (color:color(display-p3 0 0 0)){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@media (color-gamut:p3){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07), 0px 1px 3px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07)\n )}}}.___SCard_bwu65_gg_ .___STitle_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));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_bwu65_gg_ [data-ui-name=\"DescriptionTooltip.Trigger\"]{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top;margin-top:calc(var(--intergalactic-spacing-1x, 4px)/2)}.___SDescription_bwu65_gg_{margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SHeader_bwu65_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0)){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SBody_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"bwu65_gg_"),
|
|
24
26
|
/*__reshadow_css_end__*/
|
|
25
27
|
{
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"__SBody": "___SBody_19j84_gg_"
|
|
28
|
+
"__SDescription": "___SDescription_bwu65_gg_",
|
|
29
|
+
"__SHeader": "___SHeader_bwu65_gg_",
|
|
30
|
+
"__SBody": "___SBody_bwu65_gg_",
|
|
31
|
+
"__SCard": "___SCard_bwu65_gg_",
|
|
32
|
+
"__STitle": "___STitle_bwu65_gg_"
|
|
32
33
|
});
|
|
33
34
|
var CardRoot = /*#__PURE__*/function (_Component) {
|
|
35
|
+
(0, _inherits2["default"])(CardRoot, _Component);
|
|
36
|
+
var _super = (0, _createSuper2["default"])(CardRoot);
|
|
34
37
|
function CardRoot() {
|
|
35
38
|
(0, _classCallCheck2["default"])(this, CardRoot);
|
|
36
|
-
return (
|
|
39
|
+
return _super.apply(this, arguments);
|
|
37
40
|
}
|
|
38
|
-
(0,
|
|
39
|
-
return (0, _createClass2["default"])(CardRoot, [{
|
|
41
|
+
(0, _createClass2["default"])(CardRoot, [{
|
|
40
42
|
key: "render",
|
|
41
43
|
value: function render() {
|
|
42
44
|
var _ref = this.asProps,
|
|
43
45
|
_ref6;
|
|
44
|
-
var SCard =
|
|
46
|
+
var SCard = _flexBox.Box;
|
|
45
47
|
var _this$asProps = this.asProps,
|
|
46
48
|
Children = _this$asProps.Children,
|
|
47
|
-
styles = _this$asProps.styles
|
|
48
|
-
|
|
49
|
+
styles = _this$asProps.styles,
|
|
50
|
+
forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
51
|
+
var advancedMode = forcedAdvancedMode || (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
49
52
|
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", {}))));
|
|
50
53
|
}
|
|
51
54
|
}]);
|
|
55
|
+
return CardRoot;
|
|
52
56
|
}(_core.Component);
|
|
53
57
|
(0, _defineProperty2["default"])(CardRoot, "displayName", 'Card');
|
|
54
58
|
(0, _defineProperty2["default"])(CardRoot, "style", style);
|
|
@@ -57,31 +61,23 @@ function Title(props) {
|
|
|
57
61
|
_ref7;
|
|
58
62
|
var styles = props.styles,
|
|
59
63
|
innerHint = props.innerHint,
|
|
64
|
+
Children = props.Children,
|
|
60
65
|
innerHintAriaLabel = props.innerHintAriaLabel,
|
|
61
|
-
hintAfterAriaLabel = props.hintAfterAriaLabel
|
|
62
|
-
|
|
63
|
-
var hintAfter = props.hintAfter;
|
|
66
|
+
hintAfterAriaLabel = props.hintAfterAriaLabel;
|
|
67
|
+
var hintAfter = props.hintAfter || props.hint;
|
|
64
68
|
var STitle = _typography.Text;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"ml": 1,
|
|
70
|
-
"use": 'secondary',
|
|
71
|
-
"size": 300,
|
|
69
|
+
return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(STitle, _ref7.cn("STitle", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref2))), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})), innerHint && /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip.Trigger, {
|
|
70
|
+
tag: _button.ButtonLink,
|
|
71
|
+
ml: 1,
|
|
72
|
+
use: 'secondary',
|
|
72
73
|
"aria-label": innerHintAriaLabel,
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
"tag": _button.ButtonLink,
|
|
78
|
-
"use": 'secondary',
|
|
79
|
-
"size": 300,
|
|
74
|
+
color: '--intergalactic-icon-secondary-neutral'
|
|
75
|
+
}, /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip.Popper, null, innerHint))), hintAfter && /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip.Trigger, {
|
|
76
|
+
tag: _button.ButtonLink,
|
|
77
|
+
use: 'secondary',
|
|
80
78
|
"aria-label": hintAfterAriaLabel,
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
"aria-label": hintAfterAriaLabel
|
|
84
|
-
}, hintAfter)));
|
|
79
|
+
color: '--intergalactic-icon-secondary-neutral'
|
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(_tooltip.DescriptionTooltip.Popper, null, hintAfter)));
|
|
85
81
|
}
|
|
86
82
|
function Description(props) {
|
|
87
83
|
var _ref3 = arguments[0],
|
|
@@ -96,21 +92,22 @@ function Header(props) {
|
|
|
96
92
|
var _ref4 = arguments[0],
|
|
97
93
|
_ref9;
|
|
98
94
|
var styles = props.styles;
|
|
99
|
-
var SHeader =
|
|
95
|
+
var SHeader = _flexBox.Box;
|
|
100
96
|
return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref9.cn("SHeader", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({}, props), _ref4))));
|
|
101
97
|
}
|
|
102
98
|
function Body(props) {
|
|
103
99
|
var _ref5 = arguments[0],
|
|
104
|
-
|
|
100
|
+
_ref10;
|
|
105
101
|
var styles = props.styles;
|
|
106
|
-
var SBody =
|
|
107
|
-
return
|
|
102
|
+
var SBody = _flexBox.Box;
|
|
103
|
+
return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref10.cn("SBody", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({}, props), _ref5))));
|
|
108
104
|
}
|
|
109
|
-
var Card = (0, _core
|
|
105
|
+
var Card = (0, _core["default"])(CardRoot, {
|
|
110
106
|
Title: Title,
|
|
111
107
|
Description: Description,
|
|
112
108
|
Header: Header,
|
|
113
109
|
Body: Body
|
|
114
110
|
});
|
|
115
|
-
var _default =
|
|
111
|
+
var _default = Card;
|
|
112
|
+
exports["default"] = _default;
|
|
116
113
|
//# 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","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_typography","_button","_tooltip","_m","_findComponent","style","_index","sstyled","insert","CardRoot","_Component","_inherits2","_super","_createSuper2","_classCallCheck2","apply","arguments","_createClass2","key","value","render","_ref","asProps","_ref6","SCard","Box","_this$asProps","Children","styles","forcedAdvancedMode","advancedMode","isAdvanceMode","Card","Header","displayName","Body","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","hint","STitle","Text","Fragment","DescriptionTooltip","Trigger","tag","ButtonLink","ml","use","color","Addon","Popper","Description","_ref3","_ref8","SDescription","_ref4","_ref9","SHeader","_ref5","_ref10","SBody","createComponent","_default","exports"],"sources":["../../src/Card.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport { ButtonLink } from '@semcore/button';\nimport { DescriptionTooltip } from '@semcore/tooltip';\nimport InfoM from '@semcore/icon/Info/m';\nimport style from './style/card.shadow.css';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\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 <Children />\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\n return sstyled(styles)(\n <>\n <STitle render={Text}>\n <Children />\n {innerHint && (\n <DescriptionTooltip>\n <DescriptionTooltip.Trigger\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 </DescriptionTooltip.Trigger>\n <DescriptionTooltip.Popper>{innerHint}</DescriptionTooltip.Popper>\n </DescriptionTooltip>\n )}\n </STitle>\n {hintAfter && (\n <DescriptionTooltip>\n <DescriptionTooltip.Trigger\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 </DescriptionTooltip.Trigger>\n <DescriptionTooltip.Popper>{hintAfter}</DescriptionTooltip.Popper>\n </DescriptionTooltip>\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { Text, TextProps } from '@semcore/typography';\n\n/** @deprecated */\nexport interface ITitleProps extends TitleProps, UnknownProperties {}\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 /**\n * Renamed to `hintAfter`\n * @deprecated\n */\n hint?: 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":""}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {};
|
|
8
7
|
Object.defineProperty(exports, "default", {
|
|
9
8
|
enumerable: true,
|
|
10
9
|
get: function get() {
|
|
@@ -12,16 +11,4 @@ Object.defineProperty(exports, "default", {
|
|
|
12
11
|
}
|
|
13
12
|
});
|
|
14
13
|
var _Card = _interopRequireDefault(require("./Card"));
|
|
15
|
-
var _Card2 = require("./Card.type");
|
|
16
|
-
Object.keys(_Card2).forEach(function (key) {
|
|
17
|
-
if (key === "default" || key === "__esModule") return;
|
|
18
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
19
|
-
if (key in exports && exports[key] === _Card2[key]) return;
|
|
20
|
-
Object.defineProperty(exports, key, {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function get() {
|
|
23
|
-
return _Card2[key];
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
14
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Card","_interopRequireDefault","require"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Card","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Card';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA"}
|
|
@@ -17,34 +17,33 @@ SCard {
|
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
[data-ui-name='DescriptionTooltip.Trigger'] {
|
|
21
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
line-height: normal;
|
|
23
|
+
vertical-align: top;
|
|
24
|
+
margin-top: calc(var(--intergalactic-spacing-1x, 4px) / 2);
|
|
24
25
|
}
|
|
26
|
+
}
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
-
}
|
|
28
|
+
SDescription {
|
|
29
|
+
margin-bottom: 0;
|
|
30
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
31
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
SHeader {
|
|
36
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
37
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
38
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
39
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
40
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
43
|
+
SBody {
|
|
44
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
45
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
46
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
47
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
48
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
50
49
|
}
|
package/lib/es6/Card.js
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
-
import { sstyled as _sstyled } from "@semcore/core";
|
|
7
|
+
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
8
8
|
import { assignProps as _assignProps5 } from "@semcore/core";
|
|
9
9
|
import { assignProps as _assignProps4 } from "@semcore/core";
|
|
10
10
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
11
11
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
12
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
|
-
import
|
|
13
|
+
import React from 'react';
|
|
14
|
+
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
15
|
+
import { Box } from '@semcore/flex-box';
|
|
16
|
+
import { Text } from '@semcore/typography';
|
|
14
17
|
import { ButtonLink } from '@semcore/button';
|
|
15
|
-
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
16
|
-
import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
|
|
17
|
-
import InfoM from '@semcore/icon/Info/m';
|
|
18
18
|
import { DescriptionTooltip } from '@semcore/tooltip';
|
|
19
|
-
import
|
|
20
|
-
import React from 'react';
|
|
19
|
+
import InfoM from '@semcore/icon/Info/m';
|
|
21
20
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
22
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
21
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCard_bwu65_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@supports (color:color(display-p3 0 0 0)){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@media (color-gamut:p3){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07), 0px 1px 3px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07)\n )}}}.___SCard_bwu65_gg_ .___STitle_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));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_bwu65_gg_ [data-ui-name=\"DescriptionTooltip.Trigger\"]{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top;margin-top:calc(var(--intergalactic-spacing-1x, 4px)/2)}.___SDescription_bwu65_gg_{margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SHeader_bwu65_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0)){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SBody_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"bwu65_gg_"),
|
|
23
22
|
/*__reshadow_css_end__*/
|
|
24
23
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"__SBody": "___SBody_19j84_gg_"
|
|
24
|
+
"__SDescription": "___SDescription_bwu65_gg_",
|
|
25
|
+
"__SHeader": "___SHeader_bwu65_gg_",
|
|
26
|
+
"__SBody": "___SBody_bwu65_gg_",
|
|
27
|
+
"__SCard": "___SCard_bwu65_gg_",
|
|
28
|
+
"__STitle": "___STitle_bwu65_gg_"
|
|
31
29
|
});
|
|
30
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
32
31
|
var CardRoot = /*#__PURE__*/function (_Component) {
|
|
32
|
+
_inherits(CardRoot, _Component);
|
|
33
|
+
var _super = _createSuper(CardRoot);
|
|
33
34
|
function CardRoot() {
|
|
34
35
|
_classCallCheck(this, CardRoot);
|
|
35
|
-
return
|
|
36
|
+
return _super.apply(this, arguments);
|
|
36
37
|
}
|
|
37
|
-
|
|
38
|
-
return _createClass(CardRoot, [{
|
|
38
|
+
_createClass(CardRoot, [{
|
|
39
39
|
key: "render",
|
|
40
40
|
value: function render() {
|
|
41
41
|
var _ref = this.asProps,
|
|
@@ -43,11 +43,13 @@ var CardRoot = /*#__PURE__*/function (_Component) {
|
|
|
43
43
|
var SCard = Box;
|
|
44
44
|
var _this$asProps = this.asProps,
|
|
45
45
|
Children = _this$asProps.Children,
|
|
46
|
-
styles = _this$asProps.styles
|
|
47
|
-
|
|
46
|
+
styles = _this$asProps.styles,
|
|
47
|
+
forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
48
|
+
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
48
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", {}))));
|
|
49
50
|
}
|
|
50
51
|
}]);
|
|
52
|
+
return CardRoot;
|
|
51
53
|
}(Component);
|
|
52
54
|
_defineProperty(CardRoot, "displayName", 'Card');
|
|
53
55
|
_defineProperty(CardRoot, "style", style);
|
|
@@ -56,31 +58,23 @@ function Title(props) {
|
|
|
56
58
|
_ref7;
|
|
57
59
|
var styles = props.styles,
|
|
58
60
|
innerHint = props.innerHint,
|
|
61
|
+
Children = props.Children,
|
|
59
62
|
innerHintAriaLabel = props.innerHintAriaLabel,
|
|
60
|
-
hintAfterAriaLabel = props.hintAfterAriaLabel
|
|
61
|
-
|
|
62
|
-
var hintAfter = props.hintAfter;
|
|
63
|
+
hintAfterAriaLabel = props.hintAfterAriaLabel;
|
|
64
|
+
var hintAfter = props.hintAfter || props.hint;
|
|
63
65
|
var STitle = Text;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
"ml": 1,
|
|
69
|
-
"use": 'secondary',
|
|
70
|
-
"size": 300,
|
|
66
|
+
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STitle, _ref7.cn("STitle", _objectSpread({}, _assignProps2({}, _ref2))), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})), innerHint && /*#__PURE__*/React.createElement(DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /*#__PURE__*/React.createElement(DescriptionTooltip.Trigger, {
|
|
67
|
+
tag: ButtonLink,
|
|
68
|
+
ml: 1,
|
|
69
|
+
use: 'secondary',
|
|
71
70
|
"aria-label": innerHintAriaLabel,
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
"tag": ButtonLink,
|
|
77
|
-
"use": 'secondary',
|
|
78
|
-
"size": 300,
|
|
71
|
+
color: '--intergalactic-icon-secondary-neutral'
|
|
72
|
+
}, /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(DescriptionTooltip.Popper, null, innerHint))), hintAfter && /*#__PURE__*/React.createElement(DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /*#__PURE__*/React.createElement(DescriptionTooltip.Trigger, {
|
|
73
|
+
tag: ButtonLink,
|
|
74
|
+
use: 'secondary',
|
|
79
75
|
"aria-label": hintAfterAriaLabel,
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
"aria-label": hintAfterAriaLabel
|
|
83
|
-
}, hintAfter)));
|
|
76
|
+
color: '--intergalactic-icon-secondary-neutral'
|
|
77
|
+
}, /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(DescriptionTooltip.Popper, null, hintAfter)));
|
|
84
78
|
}
|
|
85
79
|
function Description(props) {
|
|
86
80
|
var _ref3 = arguments[0],
|
|
@@ -100,10 +94,10 @@ function Header(props) {
|
|
|
100
94
|
}
|
|
101
95
|
function Body(props) {
|
|
102
96
|
var _ref5 = arguments[0],
|
|
103
|
-
|
|
97
|
+
_ref10;
|
|
104
98
|
var styles = props.styles;
|
|
105
99
|
var SBody = Box;
|
|
106
|
-
return
|
|
100
|
+
return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SBody, _ref10.cn("SBody", _objectSpread({}, _assignProps5(_objectSpread({}, props), _ref5))));
|
|
107
101
|
}
|
|
108
102
|
var Card = createComponent(CardRoot, {
|
|
109
103
|
Title: Title,
|
package/lib/es6/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["
|
|
1
|
+
{"version":3,"file":"Card.js","names":["React","createComponent","Component","sstyled","Root","Box","Text","ButtonLink","DescriptionTooltip","InfoM","style","_sstyled","insert","isAdvanceMode","CardRoot","_Component","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","render","_ref","asProps","_ref6","SCard","_this$asProps","Children","styles","forcedAdvancedMode","advancedMode","Card","Header","displayName","Body","createElement","cn","_objectSpread","_assignProps","_defineProperty","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","hint","STitle","Fragment","_assignProps2","Trigger","tag","ml","use","color","Addon","Popper","Description","_ref3","_ref8","SDescription","_assignProps3","_ref4","_ref9","SHeader","_assignProps4","_ref5","_ref10","SBody","_assignProps5"],"sources":["../../src/Card.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport { ButtonLink } from '@semcore/button';\nimport { DescriptionTooltip } from '@semcore/tooltip';\nimport InfoM from '@semcore/icon/Info/m';\nimport style from './style/card.shadow.css';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\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 <Children />\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\n return sstyled(styles)(\n <>\n <STitle render={Text}>\n <Children />\n {innerHint && (\n <DescriptionTooltip>\n <DescriptionTooltip.Trigger\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 </DescriptionTooltip.Trigger>\n <DescriptionTooltip.Popper>{innerHint}</DescriptionTooltip.Popper>\n </DescriptionTooltip>\n )}\n </STitle>\n {hintAfter && (\n <DescriptionTooltip>\n <DescriptionTooltip.Trigger\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 </DescriptionTooltip.Trigger>\n <DescriptionTooltip.Popper>{hintAfter}</DescriptionTooltip.Popper>\n </DescriptionTooltip>\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { Text, TextProps } from '@semcore/typography';\n\n/** @deprecated */\nexport interface ITitleProps extends TitleProps, UnknownProperties {}\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 /**\n * Renamed to `hintAfter`\n * @deprecated\n */\n hint?: 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":""}
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Card';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ"}
|
|
@@ -17,34 +17,33 @@ SCard {
|
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
[data-ui-name='DescriptionTooltip.Trigger'] {
|
|
21
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
line-height: normal;
|
|
23
|
+
vertical-align: top;
|
|
24
|
+
margin-top: calc(var(--intergalactic-spacing-1x, 4px) / 2);
|
|
24
25
|
}
|
|
26
|
+
}
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
-
}
|
|
28
|
+
SDescription {
|
|
29
|
+
margin-bottom: 0;
|
|
30
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
31
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
SHeader {
|
|
36
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
37
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
38
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
39
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
40
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
43
|
+
SBody {
|
|
44
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
45
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
46
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
47
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
48
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
50
49
|
}
|
package/lib/esm/Card.mjs
CHANGED
|
@@ -1,85 +1,79 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
4
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
7
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
9
|
+
import React from "react";
|
|
10
|
+
import { Box } from "@semcore/flex-box";
|
|
11
|
+
import { Text } from "@semcore/typography";
|
|
9
12
|
import { ButtonLink } from "@semcore/button";
|
|
10
|
-
import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
11
|
-
import InfoM from "@semcore/icon/Info/m";
|
|
12
13
|
import { DescriptionTooltip } from "@semcore/tooltip";
|
|
13
|
-
import
|
|
14
|
-
import
|
|
14
|
+
import InfoM from "@semcore/icon/Info/m";
|
|
15
|
+
import { isAdvanceMode } from "@semcore/utils/lib/findComponent";
|
|
15
16
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
16
17
|
var style = (
|
|
17
18
|
/*__reshadow_css_start__*/
|
|
18
19
|
(sstyled.insert(
|
|
19
20
|
/*__inner_css_start__*/
|
|
20
|
-
|
|
21
|
+
'.___SCard_bwu65_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, calc(6px + 2px));box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@supports (color:color(display-p3 0 0 0)){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07)\n )}@media (color-gamut:p3){.___SCard_bwu65_gg_{box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07), 0px 1px 3px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07)\n )}}}.___SCard_bwu65_gg_ .___STitle_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));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_bwu65_gg_ [data-ui-name="DescriptionTooltip.Trigger"]{margin-right:var(--intergalactic-spacing-1x, 4px);line-height:normal;vertical-align:top;margin-top:calc(var(--intergalactic-spacing-1x, 4px)/2)}.___SDescription_bwu65_gg_{margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SDescription_bwu65_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SHeader_bwu65_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@supports (color:color(display-p3 0 0 0)){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SHeader_bwu65_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SBody_bwu65_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}',
|
|
21
22
|
/*__inner_css_end__*/
|
|
22
|
-
"
|
|
23
|
+
"bwu65_gg_"
|
|
23
24
|
), /*__reshadow_css_end__*/
|
|
24
25
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"__SBody": "___SBody_19j84_gg_"
|
|
26
|
+
"__SDescription": "___SDescription_bwu65_gg_",
|
|
27
|
+
"__SHeader": "___SHeader_bwu65_gg_",
|
|
28
|
+
"__SBody": "___SBody_bwu65_gg_",
|
|
29
|
+
"__SCard": "___SCard_bwu65_gg_",
|
|
30
|
+
"__STitle": "___STitle_bwu65_gg_"
|
|
31
31
|
})
|
|
32
32
|
);
|
|
33
|
-
var CardRoot = /* @__PURE__ */
|
|
33
|
+
var CardRoot = /* @__PURE__ */ function(_Component) {
|
|
34
|
+
_inherits(CardRoot2, _Component);
|
|
35
|
+
var _super = _createSuper(CardRoot2);
|
|
34
36
|
function CardRoot2() {
|
|
35
37
|
_classCallCheck(this, CardRoot2);
|
|
36
|
-
return
|
|
38
|
+
return _super.apply(this, arguments);
|
|
37
39
|
}
|
|
38
|
-
|
|
39
|
-
return _createClass(CardRoot2, [{
|
|
40
|
+
_createClass(CardRoot2, [{
|
|
40
41
|
key: "render",
|
|
41
42
|
value: function render() {
|
|
42
43
|
var _ref = this.asProps, _ref6;
|
|
43
44
|
var SCard = Box;
|
|
44
|
-
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles;
|
|
45
|
-
var advancedMode = 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", {}))));
|
|
45
|
+
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles, forcedAdvancedMode = _this$asProps.forcedAdvancedMode;
|
|
46
|
+
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
47
|
+
return _ref6 = sstyled$1(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
|
}
|
|
48
49
|
}]);
|
|
49
|
-
|
|
50
|
+
return CardRoot2;
|
|
51
|
+
}(Component);
|
|
50
52
|
_defineProperty(CardRoot, "displayName", "Card");
|
|
51
53
|
_defineProperty(CardRoot, "style", style);
|
|
52
54
|
function Title(props) {
|
|
53
55
|
var _ref2 = arguments[0], _ref7;
|
|
54
|
-
var styles = props.styles, innerHint = props.innerHint,
|
|
55
|
-
var hintAfter = props.hintAfter;
|
|
56
|
+
var styles = props.styles, innerHint = props.innerHint, Children = props.Children, innerHintAriaLabel = props.innerHintAriaLabel, hintAfterAriaLabel = props.hintAfterAriaLabel;
|
|
57
|
+
var hintAfter = props.hintAfter || props.hint;
|
|
56
58
|
var STitle = Text;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"
|
|
61
|
-
"ml": 1,
|
|
62
|
-
"use": "secondary",
|
|
63
|
-
"size": 300,
|
|
59
|
+
return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STitle, _ref7.cn("STitle", _objectSpread({}, assignProps({}, _ref2))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})), innerHint && /* @__PURE__ */ React.createElement(DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /* @__PURE__ */ React.createElement(DescriptionTooltip.Trigger, {
|
|
60
|
+
tag: ButtonLink,
|
|
61
|
+
ml: 1,
|
|
62
|
+
use: "secondary",
|
|
64
63
|
"aria-label": innerHintAriaLabel,
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
"tag": ButtonLink,
|
|
70
|
-
"use": "secondary",
|
|
71
|
-
"size": 300,
|
|
64
|
+
color: "--intergalactic-icon-secondary-neutral"
|
|
65
|
+
}, /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(DescriptionTooltip.Popper, null, innerHint))), hintAfter && /* @__PURE__ */ React.createElement(DescriptionTooltip, _ref7.cn("DescriptionTooltip", {}), /* @__PURE__ */ React.createElement(DescriptionTooltip.Trigger, {
|
|
66
|
+
tag: ButtonLink,
|
|
67
|
+
use: "secondary",
|
|
72
68
|
"aria-label": hintAfterAriaLabel,
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
"aria-label": hintAfterAriaLabel
|
|
76
|
-
}, hintAfter)));
|
|
69
|
+
color: "--intergalactic-icon-secondary-neutral"
|
|
70
|
+
}, /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(DescriptionTooltip.Popper, null, hintAfter)));
|
|
77
71
|
}
|
|
78
72
|
function Description(props) {
|
|
79
73
|
var _ref3 = arguments[0], _ref8;
|
|
80
74
|
var styles = props.styles;
|
|
81
75
|
var SDescription = Text;
|
|
82
|
-
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SDescription, _ref8.cn("SDescription", _objectSpread({}, assignProps({
|
|
76
|
+
return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SDescription, _ref8.cn("SDescription", _objectSpread({}, assignProps({
|
|
83
77
|
"tag": "p"
|
|
84
78
|
}, _ref3))));
|
|
85
79
|
}
|
|
@@ -87,13 +81,13 @@ function Header(props) {
|
|
|
87
81
|
var _ref4 = arguments[0], _ref9;
|
|
88
82
|
var styles = props.styles;
|
|
89
83
|
var SHeader = Box;
|
|
90
|
-
return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, assignProps(_objectSpread({}, props), _ref4))));
|
|
84
|
+
return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, assignProps(_objectSpread({}, props), _ref4))));
|
|
91
85
|
}
|
|
92
86
|
function Body(props) {
|
|
93
|
-
var _ref5 = arguments[0],
|
|
87
|
+
var _ref5 = arguments[0], _ref10;
|
|
94
88
|
var styles = props.styles;
|
|
95
89
|
var SBody = Box;
|
|
96
|
-
return
|
|
90
|
+
return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBody, _ref10.cn("SBody", _objectSpread({}, assignProps(_objectSpread({}, props), _ref5))));
|
|
97
91
|
}
|
|
98
92
|
var Card = createComponent(CardRoot, {
|
|
99
93
|
Title,
|
package/lib/esm/index.mjs
CHANGED
|
@@ -17,34 +17,33 @@ SCard {
|
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
[data-ui-name='DescriptionTooltip.Trigger'] {
|
|
21
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
line-height: normal;
|
|
23
|
+
vertical-align: top;
|
|
24
|
+
margin-top: calc(var(--intergalactic-spacing-1x, 4px) / 2);
|
|
24
25
|
}
|
|
26
|
+
}
|
|
25
27
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
-
}
|
|
28
|
+
SDescription {
|
|
29
|
+
margin-bottom: 0;
|
|
30
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
31
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
SHeader {
|
|
36
|
+
padding-top: var(--intergalactic-spacing-2x, 8px);
|
|
37
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
38
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
39
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
40
|
+
box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
|
|
41
|
+
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
43
|
+
SBody {
|
|
44
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
45
|
+
padding-bottom: var(--intergalactic-spacing-5x, 20px);
|
|
46
|
+
padding-left: var(--intergalactic-spacing-5x, 20px);
|
|
47
|
+
padding-right: var(--intergalactic-spacing-5x, 20px);
|
|
48
|
+
padding-top: var(--intergalactic-spacing-5x, 20px);
|
|
50
49
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,2 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
|
+
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { Text, TextProps } from '@semcore/typography';
|
|
5
|
+
|
|
6
|
+
/** @deprecated */
|
|
7
|
+
export interface ITitleProps extends TitleProps, UnknownProperties {}
|
|
8
|
+
export type TitleProps = TextProps & {
|
|
9
|
+
/**
|
|
10
|
+
* Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.
|
|
11
|
+
*/
|
|
12
|
+
innerHint?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.
|
|
15
|
+
*/
|
|
16
|
+
hintAfter?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Renamed to `hintAfter`
|
|
19
|
+
* @deprecated
|
|
20
|
+
*/
|
|
21
|
+
hint?: React.ReactNode;
|
|
22
|
+
/** Aria-label for the InnerHint icon */
|
|
23
|
+
innerHintAriaLabel?: string;
|
|
24
|
+
/** Aria-label for the HintAfter icon */
|
|
25
|
+
hintAfterAriaLabel?: string;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
declare const Card: Intergalactic.Component<'div', BoxProps> & {
|
|
29
|
+
Title: Intergalactic.Component<'div', TitleProps>;
|
|
30
|
+
Description: typeof Text;
|
|
31
|
+
Header: typeof Box;
|
|
32
|
+
Body: typeof Box;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export default Card;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/card",
|
|
3
3
|
"description": "Semrush Card Component",
|
|
4
|
-
"version": "5.49.0-prerelease.
|
|
4
|
+
"version": "5.49.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
18
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
19
|
-
"@semcore/typography": "5.54.0-prerelease.
|
|
20
|
-
"@semcore/tooltip": "6.50.0-prerelease.
|
|
21
|
-
"@semcore/button": "5.44.0-prerelease.
|
|
22
|
-
"@semcore/icon": "4.63.0-prerelease.
|
|
17
|
+
"@semcore/utils": "4.49.0-prerelease.1",
|
|
18
|
+
"@semcore/flex-box": "5.42.0-prerelease.1",
|
|
19
|
+
"@semcore/typography": "5.54.0-prerelease.1",
|
|
20
|
+
"@semcore/tooltip": "6.50.0-prerelease.1",
|
|
21
|
+
"@semcore/button": "5.44.0-prerelease.1",
|
|
22
|
+
"@semcore/icon": "4.63.0-prerelease.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
25
|
+
"@semcore/core": "^2.40.0-prerelease.1",
|
|
26
26
|
"react": "16.8 - 18",
|
|
27
27
|
"react-dom": "16.8 - 18"
|
|
28
28
|
},
|
package/lib/cjs/Card.type.js
DELETED
package/lib/cjs/Card.type.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.type.js","names":[],"sources":["../../src/Card.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { Text, NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSCard {\n type Props = BoxProps;\n\n namespace Title {\n type Props = NSText.Props & {\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 type Component = Intergalactic.Component<'div', Props>;\n }\n\n namespace Description {\n type Component = typeof Text;\n }\n\n namespace Header {\n type Component = typeof Box;\n }\n\n namespace Body {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'div', Props> & {\n Title: Title.Component;\n Description: Description.Component;\n Header: Header.Component;\n Body: Body.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type CardProps = NSCard.Props;\n/** @deprecated It will be removed in v18. */\nexport type TitleProps = NSCard.Title.Props;\n\nexport type { NSCard };\n"],"mappings":"","ignoreList":[]}
|
package/lib/es6/Card.type.js
DELETED
package/lib/es6/Card.type.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Card.type.js","names":[],"sources":["../../src/Card.type.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type { Text, NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSCard {\n type Props = BoxProps;\n\n namespace Title {\n type Props = NSText.Props & {\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 type Component = Intergalactic.Component<'div', Props>;\n }\n\n namespace Description {\n type Component = typeof Text;\n }\n\n namespace Header {\n type Component = typeof Box;\n }\n\n namespace Body {\n type Component = typeof Box;\n }\n\n type Component = Intergalactic.Component<'div', Props> & {\n Title: Title.Component;\n Description: Description.Component;\n Header: Header.Component;\n Body: Body.Component;\n };\n}\n\n/** @deprecated It will be removed in v18. */\nexport type CardProps = NSCard.Props;\n/** @deprecated It will be removed in v18. */\nexport type TitleProps = NSCard.Title.Props;\n\nexport type { NSCard };\n"],"mappings":"","ignoreList":[]}
|
package/lib/esm/Card.type.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/lib/types/Card.d.ts
DELETED
package/lib/types/Card.type.d.ts
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { Box, BoxProps } from '@semcore/base-components';
|
|
2
|
-
import type { Intergalactic } from '@semcore/core';
|
|
3
|
-
import type { Text, NSText } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
declare namespace NSCard {
|
|
6
|
-
type Props = BoxProps;
|
|
7
|
-
namespace Title {
|
|
8
|
-
type Props = NSText.Props & {
|
|
9
|
-
/**
|
|
10
|
-
* Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.
|
|
11
|
-
*/
|
|
12
|
-
innerHint?: React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.
|
|
15
|
-
*/
|
|
16
|
-
hintAfter?: React.ReactNode;
|
|
17
|
-
/** Aria-label for the InnerHint icon */
|
|
18
|
-
innerHintAriaLabel?: string;
|
|
19
|
-
/** Aria-label for the HintAfter icon */
|
|
20
|
-
hintAfterAriaLabel?: string;
|
|
21
|
-
};
|
|
22
|
-
type Component = Intergalactic.Component<'div', Props>;
|
|
23
|
-
}
|
|
24
|
-
namespace Description {
|
|
25
|
-
type Component = typeof Text;
|
|
26
|
-
}
|
|
27
|
-
namespace Header {
|
|
28
|
-
type Component = typeof Box;
|
|
29
|
-
}
|
|
30
|
-
namespace Body {
|
|
31
|
-
type Component = typeof Box;
|
|
32
|
-
}
|
|
33
|
-
type Component = Intergalactic.Component<'div', Props> & {
|
|
34
|
-
Title: Title.Component;
|
|
35
|
-
Description: Description.Component;
|
|
36
|
-
Header: Header.Component;
|
|
37
|
-
Body: Body.Component;
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
/** @deprecated It will be removed in v18. */
|
|
41
|
-
export type CardProps = NSCard.Props;
|
|
42
|
-
/** @deprecated It will be removed in v18. */
|
|
43
|
-
export type TitleProps = NSCard.Title.Props;
|
|
44
|
-
export type { NSCard };
|