@semcore/card 16.2.0-prerelease.3 → 16.2.0
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 +24 -19
- package/lib/cjs/Card.js.map +1 -1
- package/lib/cjs/Card.type.js +2 -0
- package/lib/cjs/Card.type.js.map +1 -0
- package/lib/cjs/index.js +13 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/card.shadow.css +24 -26
- package/lib/es6/Card.js +21 -16
- package/lib/es6/Card.js.map +1 -1
- package/lib/es6/Card.type.js +2 -0
- package/lib/es6/Card.type.js.map +1 -0
- package/lib/es6/index.js +1 -0
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/card.shadow.css +24 -26
- package/lib/esm/Card.mjs +22 -16
- package/lib/esm/Card.type.mjs +1 -0
- package/lib/esm/index.mjs +1 -0
- package/lib/esm/style/card.shadow.css +24 -26
- package/lib/types/Card.d.ts +3 -0
- package/lib/types/Card.type.d.ts +44 -0
- package/lib/types/index.d.ts +2 -35
- package/package.json +10 -10
- package/lib/cjs/index.d.js +0 -2
- package/lib/cjs/index.d.js.map +0 -1
- package/lib/es6/index.d.js +0 -2
- package/lib/es6/index.d.js.map +0 -1
package/lib/cjs/Card.js
CHANGED
|
@@ -12,23 +12,23 @@ var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSup
|
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
14
|
var _core = require("@semcore/core");
|
|
15
|
+
var _baseComponents = require("@semcore/base-components");
|
|
15
16
|
var _button = require("@semcore/button");
|
|
16
17
|
var _findComponent = require("@semcore/core/lib/utils/findComponent");
|
|
17
|
-
var _flexBox = require("@semcore/flex-box");
|
|
18
18
|
var _m = _interopRequireDefault(require("@semcore/icon/Info/m"));
|
|
19
19
|
var _tooltip = require("@semcore/tooltip");
|
|
20
20
|
var _typography = require("@semcore/typography");
|
|
21
21
|
var _react = _interopRequireDefault(require("react"));
|
|
22
22
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
23
|
-
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
23
|
+
var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SCard_19j84_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, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@media (color-gamut:p3){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 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) )}}}.___SCard_19j84_gg_ .___STitle_19j84_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_19j84_gg_ .___SInfoTrigger_19j84_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_19j84_gg_ .___SDescription_19j84_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SCard_19j84_gg_ .___SHeader_19j84_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%)){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SCard_19j84_gg_ .___SBody_19j84_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__*/"19j84_gg_"),
|
|
24
24
|
/*__reshadow_css_end__*/
|
|
25
25
|
{
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
26
|
+
"__SCard": "___SCard_19j84_gg_",
|
|
27
|
+
"__STitle": "___STitle_19j84_gg_",
|
|
28
|
+
"__SInfoTrigger": "___SInfoTrigger_19j84_gg_",
|
|
29
|
+
"__SDescription": "___SDescription_19j84_gg_",
|
|
30
|
+
"__SHeader": "___SHeader_19j84_gg_",
|
|
31
|
+
"__SBody": "___SBody_19j84_gg_"
|
|
32
32
|
});
|
|
33
33
|
var CardRoot = /*#__PURE__*/function (_Component) {
|
|
34
34
|
function CardRoot() {
|
|
@@ -41,12 +41,11 @@ var CardRoot = /*#__PURE__*/function (_Component) {
|
|
|
41
41
|
value: function render() {
|
|
42
42
|
var _ref = this.asProps,
|
|
43
43
|
_ref6;
|
|
44
|
-
var SCard =
|
|
44
|
+
var SCard = _baseComponents.Box;
|
|
45
45
|
var _this$asProps = this.asProps,
|
|
46
46
|
Children = _this$asProps.Children,
|
|
47
|
-
styles = _this$asProps.styles
|
|
48
|
-
|
|
49
|
-
var advancedMode = forcedAdvancedMode || (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
47
|
+
styles = _this$asProps.styles;
|
|
48
|
+
var advancedMode = (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
50
49
|
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
50
|
}
|
|
52
51
|
}]);
|
|
@@ -58,10 +57,10 @@ function Title(props) {
|
|
|
58
57
|
_ref7;
|
|
59
58
|
var styles = props.styles,
|
|
60
59
|
innerHint = props.innerHint,
|
|
61
|
-
Children = props.Children,
|
|
62
60
|
innerHintAriaLabel = props.innerHintAriaLabel,
|
|
63
|
-
hintAfterAriaLabel = props.hintAfterAriaLabel
|
|
64
|
-
|
|
61
|
+
hintAfterAriaLabel = props.hintAfterAriaLabel,
|
|
62
|
+
Children = props.Children;
|
|
63
|
+
var hintAfter = props.hintAfter;
|
|
65
64
|
var STitle = _typography.Text;
|
|
66
65
|
var SInfo = _tooltip.DescriptionTooltip;
|
|
67
66
|
var SInfoTrigger = SInfo.Trigger;
|
|
@@ -69,14 +68,20 @@ function Title(props) {
|
|
|
69
68
|
"tag": _button.ButtonLink,
|
|
70
69
|
"ml": 1,
|
|
71
70
|
"use": 'secondary',
|
|
71
|
+
"size": 300,
|
|
72
72
|
"aria-label": innerHintAriaLabel,
|
|
73
73
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
74
|
-
}), /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(SInfo.Popper,
|
|
74
|
+
}), /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(SInfo.Popper, {
|
|
75
|
+
"aria-label": innerHintAriaLabel
|
|
76
|
+
}, innerHint))), hintAfter && /*#__PURE__*/_react["default"].createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/_react["default"].createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
75
77
|
"tag": _button.ButtonLink,
|
|
76
78
|
"use": 'secondary',
|
|
79
|
+
"size": 300,
|
|
77
80
|
"aria-label": hintAfterAriaLabel,
|
|
78
81
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
79
|
-
}), /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(SInfo.Popper,
|
|
82
|
+
}), /*#__PURE__*/_react["default"].createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react["default"].createElement(_m["default"], _ref7.cn("InfoM", {})))), /*#__PURE__*/_react["default"].createElement(SInfo.Popper, {
|
|
83
|
+
"aria-label": hintAfterAriaLabel
|
|
84
|
+
}, hintAfter)));
|
|
80
85
|
}
|
|
81
86
|
function Description(props) {
|
|
82
87
|
var _ref3 = arguments[0],
|
|
@@ -91,14 +96,14 @@ function Header(props) {
|
|
|
91
96
|
var _ref4 = arguments[0],
|
|
92
97
|
_ref9;
|
|
93
98
|
var styles = props.styles;
|
|
94
|
-
var SHeader =
|
|
99
|
+
var SHeader = _baseComponents.Box;
|
|
95
100
|
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))));
|
|
96
101
|
}
|
|
97
102
|
function Body(props) {
|
|
98
103
|
var _ref5 = arguments[0],
|
|
99
104
|
_ref0;
|
|
100
105
|
var styles = props.styles;
|
|
101
|
-
var SBody =
|
|
106
|
+
var SBody = _baseComponents.Box;
|
|
102
107
|
return _ref0 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref0.cn("SBody", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({}, props), _ref5))));
|
|
103
108
|
}
|
|
104
109
|
var Card = (0, _core.createComponent)(CardRoot, {
|
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","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref6","SCard","Box","_this$asProps","Children","styles","advancedMode","isAdvanceMode","Card","Header","displayName","Body","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","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.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\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 type { NSCard } from './Card.type';\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSCard.Component>\n> {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles } = this.asProps;\n\n const advancedMode = 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(\n props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Title.Component>,\n) {\n const { styles, innerHint, innerHintAriaLabel, hintAfterAriaLabel, Children } = props;\n const hintAfter = props.hintAfter;\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 size={300}\n aria-label={innerHintAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper aria-label={innerHintAriaLabel as string}>{innerHint}</SInfo.Popper>\n </SInfo>\n )}\n </STitle>\n {hintAfter && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n use='secondary'\n size={300}\n aria-label={hintAfterAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper aria-label={hintAfterAriaLabel as string}>{hintAfter}</SInfo.Popper>\n </SInfo>\n )}\n </>,\n );\n}\n\nfunction Description(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Description.Component>) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Header.Component>) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Body.Component>) {\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}) as NSCard.Component;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
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/cjs/index.js
CHANGED
|
@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
+
var _exportNames = {};
|
|
7
8
|
Object.defineProperty(exports, "default", {
|
|
8
9
|
enumerable: true,
|
|
9
10
|
get: function get() {
|
|
@@ -11,4 +12,16 @@ Object.defineProperty(exports, "default", {
|
|
|
11
12
|
}
|
|
12
13
|
});
|
|
13
14
|
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
|
+
});
|
|
14
27
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Card","_interopRequireDefault","require"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Card","_interopRequireDefault","require","_Card2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './Card';\nexport * from './Card.type';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -15,38 +15,36 @@ SCard {
|
|
|
15
15
|
line-height: var(--intergalactic-lh-300, 150%);
|
|
16
16
|
font-weight: var(--intergalactic-bold, 700);
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
|
-
|
|
19
|
-
SInfoTrigger {
|
|
20
|
-
margin-top: var(--intergalactic-spacing-1x, 4px);
|
|
21
|
-
}
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
SInfoTrigger {
|
|
25
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
vertical-align: 0.5px;
|
|
23
|
+
margin-top: -1px;
|
|
28
24
|
}
|
|
29
|
-
}
|
|
30
25
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
SDescription {
|
|
27
|
+
display: block;
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
30
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
37
34
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
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
|
+
}
|
|
45
42
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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);
|
|
49
|
+
}
|
|
52
50
|
}
|
package/lib/es6/Card.js
CHANGED
|
@@ -10,24 +10,24 @@ 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 { Box } from '@semcore/base-components';
|
|
13
14
|
import { ButtonLink } from '@semcore/button';
|
|
14
15
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
15
16
|
import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
|
|
16
|
-
import { Box } from '@semcore/flex-box';
|
|
17
17
|
import InfoM from '@semcore/icon/Info/m';
|
|
18
18
|
import { DescriptionTooltip } from '@semcore/tooltip';
|
|
19
19
|
import { Text } from '@semcore/typography';
|
|
20
20
|
import React from 'react';
|
|
21
21
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
22
|
-
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
22
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCard_19j84_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, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@media (color-gamut:p3){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 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) )}}}.___SCard_19j84_gg_ .___STitle_19j84_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_19j84_gg_ .___SInfoTrigger_19j84_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_19j84_gg_ .___SDescription_19j84_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SCard_19j84_gg_ .___SHeader_19j84_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%)){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SCard_19j84_gg_ .___SBody_19j84_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__*/"19j84_gg_"),
|
|
23
23
|
/*__reshadow_css_end__*/
|
|
24
24
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
25
|
+
"__SCard": "___SCard_19j84_gg_",
|
|
26
|
+
"__STitle": "___STitle_19j84_gg_",
|
|
27
|
+
"__SInfoTrigger": "___SInfoTrigger_19j84_gg_",
|
|
28
|
+
"__SDescription": "___SDescription_19j84_gg_",
|
|
29
|
+
"__SHeader": "___SHeader_19j84_gg_",
|
|
30
|
+
"__SBody": "___SBody_19j84_gg_"
|
|
31
31
|
});
|
|
32
32
|
var CardRoot = /*#__PURE__*/function (_Component) {
|
|
33
33
|
function CardRoot() {
|
|
@@ -43,9 +43,8 @@ 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
|
-
|
|
48
|
-
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
46
|
+
styles = _this$asProps.styles;
|
|
47
|
+
var advancedMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
49
48
|
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
49
|
}
|
|
51
50
|
}]);
|
|
@@ -57,10 +56,10 @@ function Title(props) {
|
|
|
57
56
|
_ref7;
|
|
58
57
|
var styles = props.styles,
|
|
59
58
|
innerHint = props.innerHint,
|
|
60
|
-
Children = props.Children,
|
|
61
59
|
innerHintAriaLabel = props.innerHintAriaLabel,
|
|
62
|
-
hintAfterAriaLabel = props.hintAfterAriaLabel
|
|
63
|
-
|
|
60
|
+
hintAfterAriaLabel = props.hintAfterAriaLabel,
|
|
61
|
+
Children = props.Children;
|
|
62
|
+
var hintAfter = props.hintAfter;
|
|
64
63
|
var STitle = Text;
|
|
65
64
|
var SInfo = DescriptionTooltip;
|
|
66
65
|
var SInfoTrigger = SInfo.Trigger;
|
|
@@ -68,14 +67,20 @@ function Title(props) {
|
|
|
68
67
|
"tag": ButtonLink,
|
|
69
68
|
"ml": 1,
|
|
70
69
|
"use": 'secondary',
|
|
70
|
+
"size": 300,
|
|
71
71
|
"aria-label": innerHintAriaLabel,
|
|
72
72
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
73
|
-
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper,
|
|
73
|
+
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper, {
|
|
74
|
+
"aria-label": innerHintAriaLabel
|
|
75
|
+
}, innerHint))), hintAfter && /*#__PURE__*/React.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/React.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
74
76
|
"tag": ButtonLink,
|
|
75
77
|
"use": 'secondary',
|
|
78
|
+
"size": 300,
|
|
76
79
|
"aria-label": hintAfterAriaLabel,
|
|
77
80
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
78
|
-
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper,
|
|
81
|
+
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper, {
|
|
82
|
+
"aria-label": hintAfterAriaLabel
|
|
83
|
+
}, hintAfter)));
|
|
79
84
|
}
|
|
80
85
|
function Description(props) {
|
|
81
86
|
var _ref3 = arguments[0],
|
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","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref6","SCard","_this$asProps","Children","styles","advancedMode","Card","Header","displayName","Body","createElement","cn","_objectSpread","_assignProps","_defineProperty","Title","props","_ref2","arguments[0]","_ref7","innerHint","innerHintAriaLabel","hintAfterAriaLabel","hintAfter","STitle","SInfo","SInfoTrigger","Trigger","Fragment","_assignProps2","Addon","Popper","Description","_ref3","_ref8","SDescription","_assignProps3","_ref4","_ref9","SHeader","_assignProps4","_ref5","_ref0","SBody","_assignProps5"],"sources":["../../src/Card.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { ButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\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 type { NSCard } from './Card.type';\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSCard.Component>\n> {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles } = this.asProps;\n\n const advancedMode = 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(\n props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Title.Component>,\n) {\n const { styles, innerHint, innerHintAriaLabel, hintAfterAriaLabel, Children } = props;\n const hintAfter = props.hintAfter;\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 size={300}\n aria-label={innerHintAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper aria-label={innerHintAriaLabel as string}>{innerHint}</SInfo.Popper>\n </SInfo>\n )}\n </STitle>\n {hintAfter && (\n <SInfo>\n <SInfoTrigger\n tag={ButtonLink}\n use='secondary'\n size={300}\n aria-label={hintAfterAriaLabel}\n color='--intergalactic-icon-secondary-neutral'\n >\n <ButtonLink.Addon>\n <InfoM />\n </ButtonLink.Addon>\n </SInfoTrigger>\n <SInfo.Popper aria-label={hintAfterAriaLabel as string}>{hintAfter}</SInfo.Popper>\n </SInfo>\n )}\n </>,\n );\n}\n\nfunction Description(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Description.Component>) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Header.Component>) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props: Intergalactic.InternalTypings.InferComponentProps<NSCard.Body.Component>) {\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}) as NSCard.Component;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
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/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.ts"],"sourcesContent":["export { default } from './Card';\nexport * from './Card.type';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,QAAQ;AAChC,cAAc,aAAa","ignoreList":[]}
|
|
@@ -15,38 +15,36 @@ SCard {
|
|
|
15
15
|
line-height: var(--intergalactic-lh-300, 150%);
|
|
16
16
|
font-weight: var(--intergalactic-bold, 700);
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
|
-
|
|
19
|
-
SInfoTrigger {
|
|
20
|
-
margin-top: var(--intergalactic-spacing-1x, 4px);
|
|
21
|
-
}
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
SInfoTrigger {
|
|
25
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
vertical-align: 0.5px;
|
|
23
|
+
margin-top: -1px;
|
|
28
24
|
}
|
|
29
|
-
}
|
|
30
25
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
SDescription {
|
|
27
|
+
display: block;
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
30
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
37
34
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
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
|
+
}
|
|
45
42
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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);
|
|
49
|
+
}
|
|
52
50
|
}
|
package/lib/esm/Card.mjs
CHANGED
|
@@ -4,10 +4,10 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
|
4
4
|
import _callSuper from "@babel/runtime/helpers/esm/callSuper";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import {
|
|
7
|
+
import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
|
|
8
|
+
import { Box } from "@semcore/base-components";
|
|
8
9
|
import { ButtonLink } from "@semcore/button";
|
|
9
10
|
import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
10
|
-
import { Box } from "@semcore/flex-box";
|
|
11
11
|
import InfoM from "@semcore/icon/Info/m";
|
|
12
12
|
import { DescriptionTooltip } from "@semcore/tooltip";
|
|
13
13
|
import { Text } from "@semcore/typography";
|
|
@@ -17,17 +17,17 @@ var style = (
|
|
|
17
17
|
/*__reshadow_css_start__*/
|
|
18
18
|
(sstyled.insert(
|
|
19
19
|
/*__inner_css_start__*/
|
|
20
|
-
".
|
|
20
|
+
".___SCard_19j84_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, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 0px 0px 1px 0px rgba(0, 21, 16, 0.07), 0px 1px 3px 0px rgba(0, 21, 16, 0.07) )}@media (color-gamut:p3){.___SCard_19j84_gg_{box-shadow:var(--intergalactic-box-shadow-card, 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) )}}}.___SCard_19j84_gg_ .___STitle_19j84_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_19j84_gg_ .___SInfoTrigger_19j84_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_19j84_gg_ .___SDescription_19j84_gg_{display:block;margin-bottom:0;margin-top:var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0%)){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SDescription_19j84_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SCard_19j84_gg_ .___SHeader_19j84_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%)){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SCard_19j84_gg_ .___SHeader_19j84_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SCard_19j84_gg_ .___SBody_19j84_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
21
|
/*__inner_css_end__*/
|
|
22
|
-
"
|
|
22
|
+
"19j84_gg_"
|
|
23
23
|
), /*__reshadow_css_end__*/
|
|
24
24
|
{
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
25
|
+
"__SCard": "___SCard_19j84_gg_",
|
|
26
|
+
"__STitle": "___STitle_19j84_gg_",
|
|
27
|
+
"__SInfoTrigger": "___SInfoTrigger_19j84_gg_",
|
|
28
|
+
"__SDescription": "___SDescription_19j84_gg_",
|
|
29
|
+
"__SHeader": "___SHeader_19j84_gg_",
|
|
30
|
+
"__SBody": "___SBody_19j84_gg_"
|
|
31
31
|
})
|
|
32
32
|
);
|
|
33
33
|
var CardRoot = /* @__PURE__ */ (function(_Component) {
|
|
@@ -41,8 +41,8 @@ var CardRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
41
41
|
value: function render() {
|
|
42
42
|
var _ref = this.asProps, _ref6;
|
|
43
43
|
var SCard = Box;
|
|
44
|
-
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles
|
|
45
|
-
var advancedMode =
|
|
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
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
47
|
}
|
|
48
48
|
}]);
|
|
@@ -51,8 +51,8 @@ _defineProperty(CardRoot, "displayName", "Card");
|
|
|
51
51
|
_defineProperty(CardRoot, "style", style);
|
|
52
52
|
function Title(props) {
|
|
53
53
|
var _ref2 = arguments[0], _ref7;
|
|
54
|
-
var styles = props.styles, innerHint = props.innerHint,
|
|
55
|
-
var hintAfter = props.hintAfter
|
|
54
|
+
var styles = props.styles, innerHint = props.innerHint, innerHintAriaLabel = props.innerHintAriaLabel, hintAfterAriaLabel = props.hintAfterAriaLabel, Children = props.Children;
|
|
55
|
+
var hintAfter = props.hintAfter;
|
|
56
56
|
var STitle = Text;
|
|
57
57
|
var SInfo = DescriptionTooltip;
|
|
58
58
|
var SInfoTrigger = SInfo.Trigger;
|
|
@@ -60,14 +60,20 @@ function Title(props) {
|
|
|
60
60
|
"tag": ButtonLink,
|
|
61
61
|
"ml": 1,
|
|
62
62
|
"use": "secondary",
|
|
63
|
+
"size": 300,
|
|
63
64
|
"aria-label": innerHintAriaLabel,
|
|
64
65
|
"color": "--intergalactic-icon-secondary-neutral"
|
|
65
|
-
}), /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(SInfo.Popper,
|
|
66
|
+
}), /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(SInfo.Popper, {
|
|
67
|
+
"aria-label": innerHintAriaLabel
|
|
68
|
+
}, innerHint))), hintAfter && /* @__PURE__ */ React.createElement(SInfo, _ref7.cn("SInfo", {}), /* @__PURE__ */ React.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
66
69
|
"tag": ButtonLink,
|
|
67
70
|
"use": "secondary",
|
|
71
|
+
"size": 300,
|
|
68
72
|
"aria-label": hintAfterAriaLabel,
|
|
69
73
|
"color": "--intergalactic-icon-secondary-neutral"
|
|
70
|
-
}), /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(SInfo.Popper,
|
|
74
|
+
}), /* @__PURE__ */ React.createElement(ButtonLink.Addon, null, /* @__PURE__ */ React.createElement(InfoM, _ref7.cn("InfoM", {})))), /* @__PURE__ */ React.createElement(SInfo.Popper, {
|
|
75
|
+
"aria-label": hintAfterAriaLabel
|
|
76
|
+
}, hintAfter)));
|
|
71
77
|
}
|
|
72
78
|
function Description(props) {
|
|
73
79
|
var _ref3 = arguments[0], _ref8;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/lib/esm/index.mjs
CHANGED
|
@@ -15,38 +15,36 @@ SCard {
|
|
|
15
15
|
line-height: var(--intergalactic-lh-300, 150%);
|
|
16
16
|
font-weight: var(--intergalactic-bold, 700);
|
|
17
17
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
18
|
-
|
|
19
|
-
SInfoTrigger {
|
|
20
|
-
margin-top: var(--intergalactic-spacing-1x, 4px);
|
|
21
|
-
}
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
SInfoTrigger {
|
|
25
21
|
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
vertical-align: 0.5px;
|
|
23
|
+
margin-top: -1px;
|
|
28
24
|
}
|
|
29
|
-
}
|
|
30
25
|
|
|
31
|
-
SDescription {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
SDescription {
|
|
27
|
+
display: block;
|
|
28
|
+
margin-bottom: 0;
|
|
29
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
30
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
32
|
+
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
33
|
+
}
|
|
37
34
|
|
|
38
|
-
SHeader {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
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
|
+
}
|
|
45
42
|
|
|
46
|
-
SBody {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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);
|
|
49
|
+
}
|
|
52
50
|
}
|
|
@@ -0,0 +1,44 @@
|
|
|
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 };
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,35 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import type { Text, TextProps } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
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;
|
|
1
|
+
export { default } from './Card';
|
|
2
|
+
export * from './Card.type';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/card",
|
|
3
3
|
"description": "Semrush Card Component",
|
|
4
|
-
"version": "16.2.0
|
|
4
|
+
"version": "16.2.0",
|
|
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,14 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/typography": "16.4.0
|
|
18
|
-
"@semcore/tooltip": "16.1.0
|
|
19
|
-
"@semcore/button": "16.1.0
|
|
20
|
-
"@semcore/icon": "16.8.0
|
|
21
|
-
"@semcore/flex-box": "16.1.0
|
|
17
|
+
"@semcore/typography": "16.4.0",
|
|
18
|
+
"@semcore/tooltip": "16.1.0",
|
|
19
|
+
"@semcore/button": "16.1.0",
|
|
20
|
+
"@semcore/icon": "16.8.0",
|
|
21
|
+
"@semcore/flex-box": "16.1.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@semcore/base-components": "^16.6.0
|
|
24
|
+
"@semcore/base-components": "^16.6.0"
|
|
25
25
|
},
|
|
26
26
|
"repository": {
|
|
27
27
|
"type": "git",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"directory": "semcore/card"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
+
"@semcore/core": "16.6.0",
|
|
32
33
|
"@semcore/testing-utils": "1.0.0",
|
|
33
|
-
"@semcore/
|
|
34
|
-
"@semcore/icon": "16.8.0
|
|
35
|
-
"@semcore/typography": "16.4.0-prerelease.3"
|
|
34
|
+
"@semcore/typography": "16.4.0",
|
|
35
|
+
"@semcore/icon": "16.8.0"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|
package/lib/cjs/index.d.js
DELETED
package/lib/cjs/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\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":"","ignoreList":[]}
|
package/lib/es6/index.d.js
DELETED
package/lib/es6/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Box, BoxProps } from '@semcore/flex-box';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\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":"","ignoreList":[]}
|