@semcore/card 17.0.0-prerelease.29 → 17.0.0-prerelease.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -1
- package/lib/cjs/Card.js +20 -15
- 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 +3 -6
- package/lib/es6/Card.js +20 -15
- 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 +3 -6
- package/lib/esm/Card.mjs +22 -17
- package/lib/esm/style/card.shadow.css +3 -6
- package/lib/types/Card.d.ts +3 -0
- package/lib/types/Card.type.d.ts +25 -0
- package/lib/types/index.d.ts +2 -28
- package/package.json +9 -9
- package/vite.config.ts +1 -1
- 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/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [17.0.0] - 2026-
|
|
5
|
+
## [17.0.0] - 2026-03-27
|
|
6
6
|
|
|
7
7
|
### BREAK
|
|
8
8
|
|
|
9
9
|
- New major version.
|
|
10
10
|
|
|
11
|
+
### Fixed
|
|
12
|
+
|
|
13
|
+
- Rewrite component to TS.
|
|
14
|
+
|
|
11
15
|
## [16.1.12] - 2025-11-17
|
|
12
16
|
|
|
13
17
|
### Changed
|
package/lib/cjs/Card.js
CHANGED
|
@@ -15,15 +15,15 @@ var _tooltip = require("@semcore/tooltip");
|
|
|
15
15
|
var _typography = require("@semcore/typography");
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
17
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
18
|
-
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".
|
|
18
|
+
const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SCard_iw1w6_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_iw1w6_gg_ .___STitle_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_iw1w6_gg_ .___SInfoTrigger_iw1w6_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_iw1w6_gg_ .___SDescription_iw1w6_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, #6c6e79)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_,.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"iw1w6_gg_"),
|
|
19
19
|
/*__reshadow_css_end__*/
|
|
20
20
|
{
|
|
21
|
-
"__SCard": "
|
|
22
|
-
"__STitle": "
|
|
23
|
-
"__SInfoTrigger": "
|
|
24
|
-
"__SDescription": "
|
|
25
|
-
"__SHeader": "
|
|
26
|
-
"__SBody": "
|
|
21
|
+
"__SCard": "___SCard_iw1w6_gg_",
|
|
22
|
+
"__STitle": "___STitle_iw1w6_gg_",
|
|
23
|
+
"__SInfoTrigger": "___SInfoTrigger_iw1w6_gg_",
|
|
24
|
+
"__SDescription": "___SDescription_iw1w6_gg_",
|
|
25
|
+
"__SHeader": "___SHeader_iw1w6_gg_",
|
|
26
|
+
"__SBody": "___SBody_iw1w6_gg_"
|
|
27
27
|
});
|
|
28
28
|
class CardRoot extends _core.Component {
|
|
29
29
|
render() {
|
|
@@ -32,10 +32,9 @@ class CardRoot extends _core.Component {
|
|
|
32
32
|
const SCard = _baseComponents.Box;
|
|
33
33
|
const {
|
|
34
34
|
Children,
|
|
35
|
-
styles
|
|
36
|
-
forcedAdvancedMode
|
|
35
|
+
styles
|
|
37
36
|
} = this.asProps;
|
|
38
|
-
const advancedMode =
|
|
37
|
+
const advancedMode = (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
39
38
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SCard, _ref6.cn("SCard", {
|
|
40
39
|
...(0, _core.assignProps)({}, _ref)
|
|
41
40
|
}), advancedMode ? /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(Card.Body, null, /*#__PURE__*/_react.default.createElement(Children, _ref6.cn("Children", {}))));
|
|
@@ -49,11 +48,11 @@ function Title(props) {
|
|
|
49
48
|
const {
|
|
50
49
|
styles,
|
|
51
50
|
innerHint,
|
|
52
|
-
Children,
|
|
53
51
|
innerHintAriaLabel,
|
|
54
|
-
hintAfterAriaLabel
|
|
52
|
+
hintAfterAriaLabel,
|
|
53
|
+
Children
|
|
55
54
|
} = props;
|
|
56
|
-
const hintAfter = props.hintAfter
|
|
55
|
+
const hintAfter = props.hintAfter;
|
|
57
56
|
const STitle = _typography.Text;
|
|
58
57
|
const SInfo = _tooltip.DescriptionTooltip;
|
|
59
58
|
const SInfoTrigger = SInfo.Trigger;
|
|
@@ -63,14 +62,20 @@ function Title(props) {
|
|
|
63
62
|
"tag": _button.ButtonLink,
|
|
64
63
|
"ml": 1,
|
|
65
64
|
"use": 'secondary',
|
|
65
|
+
"size": 300,
|
|
66
66
|
"aria-label": innerHintAriaLabel,
|
|
67
67
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
68
|
-
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper,
|
|
68
|
+
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper, {
|
|
69
|
+
"aria-label": innerHintAriaLabel
|
|
70
|
+
}, innerHint))), hintAfter && /*#__PURE__*/_react.default.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/_react.default.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
69
71
|
"tag": _button.ButtonLink,
|
|
70
72
|
"use": 'secondary',
|
|
73
|
+
"size": 300,
|
|
71
74
|
"aria-label": hintAfterAriaLabel,
|
|
72
75
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
73
|
-
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper,
|
|
76
|
+
}), /*#__PURE__*/_react.default.createElement(_button.ButtonLink.Addon, null, /*#__PURE__*/_react.default.createElement(_m.default, _ref7.cn("InfoM", {})))), /*#__PURE__*/_react.default.createElement(SInfo.Popper, {
|
|
77
|
+
"aria-label": hintAfterAriaLabel
|
|
78
|
+
}, hintAfter)));
|
|
74
79
|
}
|
|
75
80
|
function Description(props) {
|
|
76
81
|
var _ref3 = arguments[0],
|
package/lib/cjs/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["_core","require","_baseComponents","_button","_findComponent","_m","_interopRequireDefault","_tooltip","_typography","_react","style","sstyled","insert","CardRoot","Component","render","_ref","asProps","_ref6","SCard","Box","Children","styles","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["_core","require","_baseComponents","_button","_findComponent","_m","_interopRequireDefault","_tooltip","_typography","_react","style","sstyled","insert","CardRoot","Component","render","_ref","asProps","_ref6","SCard","Box","Children","styles","advancedMode","isAdvanceMode","Card","Header","displayName","Body","default","createElement","cn","assignProps","_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 { IRootComponentProps, IStyledProps } 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 { CardProps, CardComponent, TitleProps } from './Card.type';\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component<CardProps> {\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(props: IRootComponentProps & TitleProps) {\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: IStyledProps) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props: IStyledProps) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props: IStyledProps) {\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 CardComponent;\n\nexport default Card;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAGA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,EAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAH,sBAAA,CAAAL,OAAA;AAA0B;AAAA,MAAAS,KAAA,8BAAAV,KAAA,CAAAW,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAK1B,MAAMC,QAAQ,SAASC,eAAS,CAAY;EAK1CC,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,KAAK,GAMMC,mBAAG;IALpB,MAAM;MAAEC,QAAQ;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACL,OAAO;IAEzC,MAAMM,YAAY,GAAG,IAAAC,4BAAa,EAACH,QAAQ,EAAE,CAACI,IAAI,CAACC,MAAM,CAACC,WAAW,EAAEF,IAAI,CAACG,IAAI,CAACD,WAAW,CAAC,CAAC;IAE9F,OAAAT,KAAA,GAAO,IAAAP,aAAO,EAACW,MAAM,CAAC,eACpBb,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACX,KAAK,EAAAD,KAAA,CAAAa,EAAA;MAAA,OAAA/B,KAAA,CAAAgC,WAAA,MAAAhB,IAAA;IAAA,IACHO,YAAY,gBAEPd,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACT,QAAQ,EAAAH,KAAA,CAAAa,EAAA,gBAAE,CAAC,gBAGZtB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACL,IAAI,CAACG,IAAI,qBACRnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACT,QAAQ,EAAAH,KAAA,CAAAa,EAAA,gBAAE,CACF,CAEZ,CAAC;EAEZ;AACF;AAAC,IAAAE,gBAAA,CAAAJ,OAAA,EAzBKhB,QAAQ,iBACS,MAAM;AAAA,IAAAoB,gBAAA,CAAAJ,OAAA,EADvBhB,QAAQ,WAGGH,KAAK;AAwBtB,SAASwB,KAAKA,CAACC,KAAuC,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACtD,MAAM;IAAEhB,MAAM;IAAEiB,SAAS;IAAEC,kBAAkB;IAAEC,kBAAkB;IAAEpB;EAAS,CAAC,GAAGc,KAAK;EACrF,MAAMO,SAAS,GAAGP,KAAK,CAACO,SAAS;EACjC,MAAMC,MAAM,GAMQC,gBAAI;EALxB,MAAMC,KAAK,GAAGC,2BAAkB;EAChC,MAAMC,YAAY,GAAGF,KAAK,CAACG,OAAO;EAElC,OAAAV,KAAA,GAAO,IAAA3B,aAAO,EAACW,MAAM,CAAC,eACpBb,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAArB,MAAA,CAAAoB,OAAA,CAAAoB,QAAA,qBACExC,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACa,MAAM,EAAAL,KAAA,CAAAP,EAAA;IAAA,OAAA/B,KAAA,CAAAgC,WAAA,MAAAI,KAAA;EAAA,iBACL3B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACT,QAAQ,EAAAiB,KAAA,CAAAP,EAAA,gBAAE,CAAC,EACXQ,SAAS,iBACR9B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACe,KAAK,EAAAP,KAAA,CAAAP,EAAA,4BACJtB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACiB,YAAY,EAAAT,KAAA,CAAAP,EAAA;IAAA,OACNmB,kBAAU;IAAA,MACX,CAAC;IAAA,OACD,WAAW;IAAA,QACT,GAAG;IAAA,cACGV,kBAAkB;IAAA,SACxB;EAAwC,iBAE9C/B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAC3B,OAAA,CAAA+C,UAAU,CAACC,KAAK,qBACf1C,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACzB,EAAA,CAAAwB,OAAK,EAAAS,KAAA,CAAAP,EAAA,aAAE,CACQ,CACN,CAAC,eACftB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACe,KAAK,CAACO,MAAM;IAAC,cAAYZ;EAA6B,GAAED,SAAwB,CAC5E,CAEH,CAAC,EACRG,SAAS,iBACRjC,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACe,KAAK,EAAAP,KAAA,CAAAP,EAAA,4BACJtB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACiB,YAAY,EAAAT,KAAA,CAAAP,EAAA;IAAA,OACNmB,kBAAU;IAAA,OACX,WAAW;IAAA,QACT,GAAG;IAAA,cACGT,kBAAkB;IAAA,SACxB;EAAwC,iBAE9ChC,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAC3B,OAAA,CAAA+C,UAAU,CAACC,KAAK,qBACf1C,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACzB,EAAA,CAAAwB,OAAK,EAAAS,KAAA,CAAAP,EAAA,aAAE,CACQ,CACN,CAAC,eACftB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACe,KAAK,CAACO,MAAM;IAAC,cAAYX;EAA6B,GAAEC,SAAwB,CAC5E,CAET,CAAC;AAEP;AAEA,SAASW,WAAWA,CAAClB,KAAmB,EAAE;EAAA,IAAAmB,KAAA,GAAAjB,YAAA;IAAAkB,KAAA;EACxC,MAAM;IAAEjC;EAAO,CAAC,GAAGa,KAAK;EACxB,MAAMqB,YAAY,GAC2BZ,gBAAI;EAAjD,OAAAW,KAAA,GAAO,IAAA5C,aAAO,EAACW,MAAM,CAAC,eAACb,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAC0B,YAAY,EAAAD,KAAA,CAAAxB,EAAA;IAAA,OAAA/B,KAAA,CAAAgC,WAAA;MAAA,OAAmB;IAAG,GAAAsB,KAAA;EAAA,EAAE,CAAC;AAC/D;AAEA,SAAS5B,MAAMA,CAACS,KAAmB,EAAE;EAAA,IAAAsB,KAAA,GAAApB,YAAA;IAAAqB,KAAA;EACnC,MAAM;IAAEpC;EAAO,CAAC,GAAGa,KAAK;EACxB,MAAMwB,OAAO,GAC2BvC,mBAAG;EAA3C,OAAAsC,KAAA,GAAO,IAAA/C,aAAO,EAACW,MAAM,CAAC,eAACb,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAC6B,OAAO,EAAAD,KAAA,CAAA3B,EAAA;IAAA,OAAA/B,KAAA,CAAAgC,WAAA;MAAA,GAAkBG;IAAK,GAAAsB,KAAA;EAAA,EAAG,CAAC;AAC5D;AAEA,SAAS7B,IAAIA,CAACO,KAAmB,EAAE;EAAA,IAAAyB,KAAA,GAAAvB,YAAA;IAAAwB,KAAA;EACjC,MAAM;IAAEvC;EAAO,CAAC,GAAGa,KAAK;EACxB,MAAM2B,KAAK,GAC2B1C,mBAAG;EAAzC,OAAAyC,KAAA,GAAO,IAAAlD,aAAO,EAACW,MAAM,CAAC,eAACb,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACgC,KAAK,EAAAD,KAAA,CAAA9B,EAAA;IAAA,OAAA/B,KAAA,CAAAgC,WAAA;MAAA,GAAkBG;IAAK,GAAAyB,KAAA;EAAA,EAAG,CAAC;AAC1D;AAEA,MAAMnC,IAAI,GAAG,IAAAsC,qBAAe,EAAClD,QAAQ,EAAE;EACrCqB,KAAK;EACLmB,WAAW;EACX3B,MAAM;EACNE;AACF,CAAC,CAAkB;AAAC,IAAAoC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAELJ,IAAI","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, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type CardProps = BoxProps;\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\nexport type CardComponent = Intergalactic.Component<'div', CardProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\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 () {
|
|
@@ -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 () {
|
|
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,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -15,16 +15,12 @@ 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
25
|
|
|
30
26
|
SDescription {
|
|
@@ -32,6 +28,7 @@ SCard {
|
|
|
32
28
|
margin-bottom: 0;
|
|
33
29
|
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
30
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
35
32
|
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
33
|
}
|
|
37
34
|
|
package/lib/es6/Card.js
CHANGED
|
@@ -14,15 +14,15 @@ import { DescriptionTooltip } from '@semcore/tooltip';
|
|
|
14
14
|
import { Text } from '@semcore/typography';
|
|
15
15
|
import React from 'react';
|
|
16
16
|
/*!__reshadow-styles__:"./style/card.shadow.css"*/
|
|
17
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
17
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SCard_iw1w6_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_iw1w6_gg_ .___STitle_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_iw1w6_gg_ .___SInfoTrigger_iw1w6_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_iw1w6_gg_ .___SDescription_iw1w6_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, #6c6e79)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_,.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"iw1w6_gg_"),
|
|
18
18
|
/*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SCard": "
|
|
21
|
-
"__STitle": "
|
|
22
|
-
"__SInfoTrigger": "
|
|
23
|
-
"__SDescription": "
|
|
24
|
-
"__SHeader": "
|
|
25
|
-
"__SBody": "
|
|
20
|
+
"__SCard": "___SCard_iw1w6_gg_",
|
|
21
|
+
"__STitle": "___STitle_iw1w6_gg_",
|
|
22
|
+
"__SInfoTrigger": "___SInfoTrigger_iw1w6_gg_",
|
|
23
|
+
"__SDescription": "___SDescription_iw1w6_gg_",
|
|
24
|
+
"__SHeader": "___SHeader_iw1w6_gg_",
|
|
25
|
+
"__SBody": "___SBody_iw1w6_gg_"
|
|
26
26
|
});
|
|
27
27
|
class CardRoot extends Component {
|
|
28
28
|
render() {
|
|
@@ -31,10 +31,9 @@ class CardRoot extends Component {
|
|
|
31
31
|
const SCard = Box;
|
|
32
32
|
const {
|
|
33
33
|
Children,
|
|
34
|
-
styles
|
|
35
|
-
forcedAdvancedMode
|
|
34
|
+
styles
|
|
36
35
|
} = this.asProps;
|
|
37
|
-
const advancedMode =
|
|
36
|
+
const advancedMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
38
37
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref6.cn("SCard", {
|
|
39
38
|
..._assignProps({}, _ref)
|
|
40
39
|
}), advancedMode ? /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/React.createElement(Card.Body, null, /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
|
|
@@ -48,11 +47,11 @@ function Title(props) {
|
|
|
48
47
|
const {
|
|
49
48
|
styles,
|
|
50
49
|
innerHint,
|
|
51
|
-
Children,
|
|
52
50
|
innerHintAriaLabel,
|
|
53
|
-
hintAfterAriaLabel
|
|
51
|
+
hintAfterAriaLabel,
|
|
52
|
+
Children
|
|
54
53
|
} = props;
|
|
55
|
-
const hintAfter = props.hintAfter
|
|
54
|
+
const hintAfter = props.hintAfter;
|
|
56
55
|
const STitle = Text;
|
|
57
56
|
const SInfo = DescriptionTooltip;
|
|
58
57
|
const SInfoTrigger = SInfo.Trigger;
|
|
@@ -62,14 +61,20 @@ function Title(props) {
|
|
|
62
61
|
"tag": ButtonLink,
|
|
63
62
|
"ml": 1,
|
|
64
63
|
"use": 'secondary',
|
|
64
|
+
"size": 300,
|
|
65
65
|
"aria-label": innerHintAriaLabel,
|
|
66
66
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
67
|
-
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper,
|
|
67
|
+
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper, {
|
|
68
|
+
"aria-label": innerHintAriaLabel
|
|
69
|
+
}, innerHint))), hintAfter && /*#__PURE__*/React.createElement(SInfo, _ref7.cn("SInfo", {}), /*#__PURE__*/React.createElement(SInfoTrigger, _ref7.cn("SInfoTrigger", {
|
|
68
70
|
"tag": ButtonLink,
|
|
69
71
|
"use": 'secondary',
|
|
72
|
+
"size": 300,
|
|
70
73
|
"aria-label": hintAfterAriaLabel,
|
|
71
74
|
"color": '--intergalactic-icon-secondary-neutral'
|
|
72
|
-
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper,
|
|
75
|
+
}), /*#__PURE__*/React.createElement(ButtonLink.Addon, null, /*#__PURE__*/React.createElement(InfoM, _ref7.cn("InfoM", {})))), /*#__PURE__*/React.createElement(SInfo.Popper, {
|
|
76
|
+
"aria-label": hintAfterAriaLabel
|
|
77
|
+
}, hintAfter)));
|
|
73
78
|
}
|
|
74
79
|
function Description(props) {
|
|
75
80
|
var _ref3 = arguments[0],
|
package/lib/es6/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["Box","ButtonLink","createComponent","Component","sstyled","Root","isAdvanceMode","InfoM","DescriptionTooltip","Text","React","style","_sstyled","insert","CardRoot","render","_ref","asProps","_ref6","SCard","Children","styles","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["Box","ButtonLink","createComponent","Component","sstyled","Root","isAdvanceMode","InfoM","DescriptionTooltip","Text","React","style","_sstyled","insert","CardRoot","render","_ref","asProps","_ref6","SCard","Children","styles","advancedMode","Card","Header","displayName","Body","createElement","cn","_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 { IRootComponentProps, IStyledProps } 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 { CardProps, CardComponent, TitleProps } from './Card.type';\nimport style from './style/card.shadow.css';\n\nclass CardRoot extends Component<CardProps> {\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(props: IRootComponentProps & TitleProps) {\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: IStyledProps) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag='p' />);\n}\n\nfunction Header(props: IStyledProps) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props: IStyledProps) {\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 CardComponent;\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, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type CardProps = BoxProps;\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\nexport type CardComponent = Intergalactic.Component<'div', CardProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\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,16 +15,12 @@ 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
25
|
|
|
30
26
|
SDescription {
|
|
@@ -32,6 +28,7 @@ SCard {
|
|
|
32
28
|
margin-bottom: 0;
|
|
33
29
|
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
30
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
35
32
|
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
33
|
}
|
|
37
34
|
|
package/lib/esm/Card.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, createComponent, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { Box } from "@semcore/base-components";
|
|
4
4
|
import { ButtonLink } from "@semcore/button";
|
|
5
5
|
import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
@@ -12,17 +12,17 @@ const style = (
|
|
|
12
12
|
/*__reshadow_css_start__*/
|
|
13
13
|
(sstyled.insert(
|
|
14
14
|
/*__inner_css_start__*/
|
|
15
|
-
".
|
|
15
|
+
".___SCard_iw1w6_gg_{box-sizing:border-box;background:var(--intergalactic-bg-primary-neutral, #ffffff);padding:0;border:0;border-radius:var(--intergalactic-surface-rounded, 6px);box-shadow:var(--intergalactic-box-shadow-card,\n 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12)\n )}.___SCard_iw1w6_gg_ .___STitle_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SCard_iw1w6_gg_ .___SInfoTrigger_iw1w6_gg_{margin-right:var(--intergalactic-spacing-1x, 4px);vertical-align:.5px;margin-top:-1px}.___SCard_iw1w6_gg_ .___SDescription_iw1w6_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, #6c6e79)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_,.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-left:var(--intergalactic-spacing-5x, 20px);padding-right:var(--intergalactic-spacing-5x, 20px)}.___SCard_iw1w6_gg_ .___SHeader_iw1w6_gg_{padding-top:var(--intergalactic-spacing-2x, 8px);padding-bottom:var(--intergalactic-spacing-2x, 8px);box-shadow:inset 0-1px 0 var(--intergalactic-border-secondary, #e0e1e9)}.___SCard_iw1w6_gg_ .___SBody_iw1w6_gg_{color:var(--intergalactic-text-primary, #191b23);padding-bottom:var(--intergalactic-spacing-5x, 20px);padding-top:var(--intergalactic-spacing-5x, 20px)}",
|
|
16
16
|
/*__inner_css_end__*/
|
|
17
|
-
"
|
|
17
|
+
"iw1w6_gg_"
|
|
18
18
|
), /*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SCard": "
|
|
21
|
-
"__STitle": "
|
|
22
|
-
"__SInfoTrigger": "
|
|
23
|
-
"__SDescription": "
|
|
24
|
-
"__SHeader": "
|
|
25
|
-
"__SBody": "
|
|
20
|
+
"__SCard": "___SCard_iw1w6_gg_",
|
|
21
|
+
"__STitle": "___STitle_iw1w6_gg_",
|
|
22
|
+
"__SInfoTrigger": "___SInfoTrigger_iw1w6_gg_",
|
|
23
|
+
"__SDescription": "___SDescription_iw1w6_gg_",
|
|
24
|
+
"__SHeader": "___SHeader_iw1w6_gg_",
|
|
25
|
+
"__SBody": "___SBody_iw1w6_gg_"
|
|
26
26
|
})
|
|
27
27
|
);
|
|
28
28
|
class CardRoot extends Component {
|
|
@@ -31,10 +31,9 @@ class CardRoot extends Component {
|
|
|
31
31
|
const SCard = Box;
|
|
32
32
|
const {
|
|
33
33
|
Children,
|
|
34
|
-
styles
|
|
35
|
-
forcedAdvancedMode
|
|
34
|
+
styles
|
|
36
35
|
} = this.asProps;
|
|
37
|
-
const advancedMode =
|
|
36
|
+
const advancedMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
38
37
|
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCard, _ref6.cn("SCard", {
|
|
39
38
|
...assignProps({}, _ref)
|
|
40
39
|
}), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})) : /* @__PURE__ */ React.createElement(Card.Body, null, /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {}))));
|
|
@@ -47,11 +46,11 @@ function Title(props) {
|
|
|
47
46
|
const {
|
|
48
47
|
styles,
|
|
49
48
|
innerHint,
|
|
50
|
-
Children,
|
|
51
49
|
innerHintAriaLabel,
|
|
52
|
-
hintAfterAriaLabel
|
|
50
|
+
hintAfterAriaLabel,
|
|
51
|
+
Children
|
|
53
52
|
} = props;
|
|
54
|
-
const hintAfter = props.hintAfter
|
|
53
|
+
const hintAfter = props.hintAfter;
|
|
55
54
|
const STitle = Text;
|
|
56
55
|
const SInfo = DescriptionTooltip;
|
|
57
56
|
const SInfoTrigger = SInfo.Trigger;
|
|
@@ -61,14 +60,20 @@ function Title(props) {
|
|
|
61
60
|
"tag": ButtonLink,
|
|
62
61
|
"ml": 1,
|
|
63
62
|
"use": "secondary",
|
|
63
|
+
"size": 300,
|
|
64
64
|
"aria-label": innerHintAriaLabel,
|
|
65
65
|
"color": "--intergalactic-icon-secondary-neutral"
|
|
66
|
-
}), /* @__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", {
|
|
67
69
|
"tag": ButtonLink,
|
|
68
70
|
"use": "secondary",
|
|
71
|
+
"size": 300,
|
|
69
72
|
"aria-label": hintAfterAriaLabel,
|
|
70
73
|
"color": "--intergalactic-icon-secondary-neutral"
|
|
71
|
-
}), /* @__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)));
|
|
72
77
|
}
|
|
73
78
|
function Description(props) {
|
|
74
79
|
var _ref3 = arguments[0], _ref8;
|
|
@@ -15,16 +15,12 @@ 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
25
|
|
|
30
26
|
SDescription {
|
|
@@ -32,6 +28,7 @@ SCard {
|
|
|
32
28
|
margin-bottom: 0;
|
|
33
29
|
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
34
30
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
31
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
35
32
|
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
36
33
|
}
|
|
37
34
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { Box, BoxProps } from '@semcore/base-components';
|
|
2
|
+
import type { Intergalactic } from '@semcore/core';
|
|
3
|
+
import type { Text, TextProps } from '@semcore/typography';
|
|
4
|
+
import type React from 'react';
|
|
5
|
+
export type CardProps = BoxProps;
|
|
6
|
+
export type TitleProps = TextProps & {
|
|
7
|
+
/**
|
|
8
|
+
* Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.
|
|
9
|
+
*/
|
|
10
|
+
innerHint?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.
|
|
13
|
+
*/
|
|
14
|
+
hintAfter?: React.ReactNode;
|
|
15
|
+
/** Aria-label for the InnerHint icon */
|
|
16
|
+
innerHintAriaLabel?: string;
|
|
17
|
+
/** Aria-label for the HintAfter icon */
|
|
18
|
+
hintAfterAriaLabel?: string;
|
|
19
|
+
};
|
|
20
|
+
export type CardComponent = Intergalactic.Component<'div', CardProps> & {
|
|
21
|
+
Title: Intergalactic.Component<'div', TitleProps>;
|
|
22
|
+
Description: typeof Text;
|
|
23
|
+
Header: typeof Box;
|
|
24
|
+
Body: typeof Box;
|
|
25
|
+
};
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,28 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import type { Text, TextProps } from '@semcore/typography';
|
|
4
|
-
import type React from 'react';
|
|
5
|
-
|
|
6
|
-
export type TitleProps = TextProps & {
|
|
7
|
-
/**
|
|
8
|
-
* Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.
|
|
9
|
-
*/
|
|
10
|
-
innerHint?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.
|
|
13
|
-
*/
|
|
14
|
-
hintAfter?: React.ReactNode;
|
|
15
|
-
/** Aria-label for the InnerHint icon */
|
|
16
|
-
innerHintAriaLabel?: string;
|
|
17
|
-
/** Aria-label for the HintAfter icon */
|
|
18
|
-
hintAfterAriaLabel?: string;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
declare const Card: Intergalactic.Component<'div', BoxProps> & {
|
|
22
|
-
Title: Intergalactic.Component<'div', TitleProps>;
|
|
23
|
-
Description: typeof Text;
|
|
24
|
-
Header: typeof Box;
|
|
25
|
-
Body: typeof Box;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
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": "17.0.0-prerelease.
|
|
4
|
+
"version": "17.0.0-prerelease.31",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/typography": "^17.0.0-prerelease.
|
|
18
|
-
"@semcore/tooltip": "^17.0.0-prerelease.
|
|
19
|
-
"@semcore/button": "^17.0.0-prerelease.
|
|
17
|
+
"@semcore/typography": "^17.0.0-prerelease.31",
|
|
18
|
+
"@semcore/tooltip": "^17.0.0-prerelease.31",
|
|
19
|
+
"@semcore/button": "^17.0.0-prerelease.31"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@semcore/base-components": "^17.0.0 || ^17.0.0-0",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"directory": "semcore/card"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@semcore/core": "17.0.0-prerelease.
|
|
31
|
+
"@semcore/core": "17.0.0-prerelease.31",
|
|
32
32
|
"@semcore/testing-utils": "1.0.0",
|
|
33
|
-
"@semcore/
|
|
34
|
-
"@semcore/
|
|
35
|
-
"@semcore/icon": "16.7.2-prerelease.
|
|
33
|
+
"@semcore/base-components": "17.0.0-prerelease.31",
|
|
34
|
+
"@semcore/typography": "17.0.0-prerelease.31",
|
|
35
|
+
"@semcore/icon": "16.7.2-prerelease.31"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
|
-
"build": "pnpm semcore-builder
|
|
38
|
+
"build": "pnpm semcore-builder && pnpm vite build"
|
|
39
39
|
}
|
|
40
40
|
}
|
package/vite.config.ts
CHANGED
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 { Box, BoxProps } from '@semcore/base-components';\nimport type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\ndeclare const Card: Intergalactic.Component<'div', BoxProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\n\nexport default Card;\n"],"mappings":"","ignoreList":[]}
|
package/lib/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 { Box, BoxProps } from '@semcore/base-components';\nimport type { UnknownProperties, Intergalactic } from '@semcore/core';\nimport type { Text, TextProps } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TitleProps = TextProps & {\n /**\n * Content of the Informer that's displayed in the end of the title. Use it if you don't need Title with Ellipsis.\n */\n innerHint?: React.ReactNode;\n /**\n * Content of the Informer that's displayed right after the title. Useful in case of using Title with Ellipsis.\n */\n hintAfter?: React.ReactNode;\n /** Aria-label for the InnerHint icon */\n innerHintAriaLabel?: string;\n /** Aria-label for the HintAfter icon */\n hintAfterAriaLabel?: string;\n};\n\ndeclare const Card: Intergalactic.Component<'div', BoxProps> & {\n Title: Intergalactic.Component<'div', TitleProps>;\n Description: typeof Text;\n Header: typeof Box;\n Body: typeof Box;\n};\n\nexport default Card;\n"],"mappings":"","ignoreList":[]}
|