@semcore/card 4.0.7 → 4.0.10
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 +18 -0
- package/README.md +2 -2
- package/lib/cjs/Card.js +9 -9
- package/lib/cjs/Card.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Card.js +9 -9
- package/lib/es6/Card.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Card.jsx +0 -78
- package/src/index.d.ts +0 -20
- package/src/index.js +0 -1
- package/src/style/card.shadow.css +0 -52
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.10] - 2022-07-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.29.1 ~> 2.29.2]).
|
|
10
|
+
|
|
11
|
+
## [4.0.9] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0]).
|
|
16
|
+
|
|
17
|
+
## [4.0.8] - 2022-07-21
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
22
|
+
|
|
5
23
|
## [4.0.7] - 2022-07-07
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import Card from '@semcore/card';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
package/lib/cjs/Card.js
CHANGED
|
@@ -52,18 +52,18 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SCard_1sp7q_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_1sp7q_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_1sp7q_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_1sp7q_gg_{display:inline-flex;vertical-align:middle}.___SDescription_1sp7q_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_1sp7q_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_1sp7q_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1sp7q_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SCard": "
|
|
61
|
-
"__STitle": "
|
|
62
|
-
"__SIcon": "
|
|
63
|
-
"__STooltip": "
|
|
64
|
-
"__SDescription": "
|
|
65
|
-
"__SHeader": "
|
|
66
|
-
"__SBody": "
|
|
60
|
+
"__SCard": "___SCard_1sp7q_gg_",
|
|
61
|
+
"__STitle": "___STitle_1sp7q_gg_",
|
|
62
|
+
"__SIcon": "___SIcon_1sp7q_gg_",
|
|
63
|
+
"__STooltip": "___STooltip_1sp7q_gg_",
|
|
64
|
+
"__SDescription": "___SDescription_1sp7q_gg_",
|
|
65
|
+
"__SHeader": "___SHeader_1sp7q_gg_",
|
|
66
|
+
"__SBody": "___SBody_1sp7q_gg_"
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
var CardRoot = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Card.js","names":["CardRoot","SCard","Box","asProps","Children","styles","advanceMode","isAdvanceMode","Card","Header","displayName","Body","sstyled","Component","style","Title","props","hint","STitle","Text","SIcon","InfoM","STooltip","Tooltip","Description","SDescription","SHeader","SBody","createComponent"],"sources":["../../src/Card.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport Tooltip from '@semcore/tooltip';\nimport InfoM from '@semcore/icon/Info/m';\n\nimport style from './style/card.shadow.css';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nclass CardRoot extends Component {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n return sstyled(styles)(\n <SCard render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <Card.Body>\n <Children />\n </Card.Body>\n )}\n </SCard>,\n );\n }\n}\n\nfunction Title(props) {\n const { styles, hint } = props;\n const STitle = Root;\n const SIcon = InfoM;\n const STooltip = Tooltip;\n return sstyled(styles)(\n <>\n <STitle render={Text} />\n {hint && (\n <STooltip title={hint}>\n <SIcon />\n </STooltip>\n )}\n </>,\n );\n}\n\nfunction Description(props) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nfunction Header(props) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n const { styles } = props;\n const SBody = Root;\n return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n Title,\n Description,\n Header,\n Body,\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEMA,Q;;;;;;;;;;;;WAKJ,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAMMC,YANjB;MACA,oBAA6B,KAAKC,OAAlC;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,MAAlB,iBAAkBA,MAAlB;MAEA,IAAMC,WAAW,GAAG,IAAAC,4BAAA,EAAcH,QAAd,EAAwB,CAACI,IAAI,CAACC,MAAL,CAAYC,WAAb,EAA0BF,IAAI,CAACG,IAAL,CAAUD,WAApC,CAAxB,CAApB;MAEA,eAAO,IAAAE,aAAA,EAAQP,MAAR,CAAP,eACE,gCAAC,KAAD,0EACGC,WAAW,gBACV,gCAAC,QAAD,2BADU,gBAGV,gCAAC,IAAD,CAAM,IAAN,qBACE,gCAAC,QAAD,2BADF,CAJJ,CADF;IAWD;;;EAtBoBO,e;;iCAAjBb,Q,iBACiB,M;iCADjBA,Q,WAGWc,K;;AAsBjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQX,MAAR,GAAyBW,KAAzB,CAAQX,MAAR;EAAA,IAAgBY,IAAhB,GAAyBD,KAAzB,CAAgBC,IAAhB;EACA,IAAMC,MAAM,GAKQC,gBALpB;EACA,IAAMC,KAAK,GAAGC,aAAd;EACA,IAAMC,QAAQ,GAAGC,mBAAjB;EACA,eAAO,IAAAX,aAAA,EAAQP,MAAR,CAAP,eACE,+EACE,gCAAC,MAAD,2EADF,EAEGY,IAAI,iBACH,gCAAC,QAAD;IAAA,SAAiBA;EAAjB,iBACE,gCAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASO,WAAT,CAAqBR,KAArB,EAA4B;EAAA;EAAA;;EAC1B,IAAQX,MAAR,GAAmBW,KAAnB,CAAQX,MAAR;EACA,IAAMoB,YAAY,GAC2BN,gBAD7C;EACA,eAAO,IAAAP,aAAA,EAAQP,MAAR,CAAP,eAAuB,gCAAC,YAAD;IAAA,OAAgC;EAAhC,YAAvB;AACD;;AAED,SAASI,MAAT,CAAgBO,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAQX,MAAR,GAAmBW,KAAnB,CAAQX,MAAR;EACA,IAAMqB,OAAO,GAC2BxB,YADxC;EACA,eAAO,IAAAU,aAAA,EAAQP,MAAR,CAAP,eAAuB,gCAAC,OAAD,iFAA0BW,KAA1B,YAAvB;AACD;;AAED,SAASL,IAAT,CAAcK,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAQX,MAAR,GAAmBW,KAAnB,CAAQX,MAAR;EACA,IAAMsB,KAAK,GAC2BzB,YADtC;EACA,gBAAO,IAAAU,aAAA,EAAQP,MAAR,CAAP,eAAuB,gCAAC,KAAD,gFAAwBW,KAAxB,YAAvB;AACD;;AAED,IAAMR,IAAI,GAAG,IAAAoB,gBAAA,EAAgB5B,QAAhB,EAA0B;EACrCe,KAAK,EAALA,KADqC;EAErCS,WAAW,EAAXA,WAFqC;EAGrCf,MAAM,EAANA,MAHqC;EAIrCE,IAAI,EAAJA;AAJqC,CAA1B,CAAb;eAOeH,I"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Card';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/Card.js
CHANGED
|
@@ -31,18 +31,18 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SCard_1sp7q_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_1sp7q_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_1sp7q_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_1sp7q_gg_{display:inline-flex;vertical-align:middle}.___SDescription_1sp7q_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_1sp7q_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_1sp7q_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1sp7q_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SCard": "
|
|
40
|
-
"__STitle": "
|
|
41
|
-
"__SIcon": "
|
|
42
|
-
"__STooltip": "
|
|
43
|
-
"__SDescription": "
|
|
44
|
-
"__SHeader": "
|
|
45
|
-
"__SBody": "
|
|
39
|
+
"__SCard": "___SCard_1sp7q_gg_",
|
|
40
|
+
"__STitle": "___STitle_1sp7q_gg_",
|
|
41
|
+
"__SIcon": "___SIcon_1sp7q_gg_",
|
|
42
|
+
"__STooltip": "___STooltip_1sp7q_gg_",
|
|
43
|
+
"__SDescription": "___SDescription_1sp7q_gg_",
|
|
44
|
+
"__SHeader": "___SHeader_1sp7q_gg_",
|
|
45
|
+
"__SBody": "___SBody_1sp7q_gg_"
|
|
46
46
|
});
|
|
47
47
|
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
48
48
|
|
package/lib/es6/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Card.js","names":["React","createComponent","Component","sstyled","Root","Box","Text","Tooltip","InfoM","isAdvanceMode","CardRoot","SCard","asProps","Children","styles","advanceMode","Card","Header","displayName","Body","style","Title","props","hint","STitle","SIcon","STooltip","Description","SDescription","SHeader","SBody"],"sources":["../../src/Card.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport Tooltip from '@semcore/tooltip';\nimport InfoM from '@semcore/icon/Info/m';\n\nimport style from './style/card.shadow.css';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nclass CardRoot extends Component {\n static displayName = 'Card';\n\n static style = style;\n\n render() {\n const SCard = Root;\n const { Children, styles } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n return sstyled(styles)(\n <SCard render={Box}>\n {advanceMode ? (\n <Children />\n ) : (\n <Card.Body>\n <Children />\n </Card.Body>\n )}\n </SCard>,\n );\n }\n}\n\nfunction Title(props) {\n const { styles, hint } = props;\n const STitle = Root;\n const SIcon = InfoM;\n const STooltip = Tooltip;\n return sstyled(styles)(\n <>\n <STitle render={Text} />\n {hint && (\n <STooltip title={hint}>\n <SIcon />\n </STooltip>\n )}\n </>,\n );\n}\n\nfunction Description(props) {\n const { styles } = props;\n const SDescription = Root;\n return sstyled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nfunction Header(props) {\n const { styles } = props;\n const SHeader = Root;\n return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n const { styles } = props;\n const SBody = Root;\n return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n Title,\n Description,\n Header,\n Body,\n});\n\nexport default Card;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,SAASC,IAAT,QAAqB,qBAArB;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,OAAOC,KAAP,MAAkB,sBAAlB;;;;;;;;;;;;;;;;;;;;AAGA,SAASC,aAAT,QAA8B,kCAA9B;;IAEMC,Q;;;;;;;;;;;;;WAKJ,kBAAS;MAAA;MAAA;;MACP,IAAMC,KAAK,GAMMN,GANjB;MACA,oBAA6B,KAAKO,OAAlC;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,MAAlB,iBAAkBA,MAAlB;MAEA,IAAMC,WAAW,GAAGN,aAAa,CAACI,QAAD,EAAW,CAACG,IAAI,CAACC,MAAL,CAAYC,WAAb,EAA0BF,IAAI,CAACG,IAAL,CAAUD,WAApC,CAAX,CAAjC;MAEA,eAAOf,OAAO,CAACW,MAAD,CAAd,eACE,oBAAC,KAAD,gEACGC,WAAW,gBACV,oBAAC,QAAD,2BADU,gBAGV,oBAAC,IAAD,CAAM,IAAN,qBACE,oBAAC,QAAD,2BADF,CAJJ,CADF;IAWD;;;;EAtBoBb,S;;gBAAjBQ,Q,iBACiB,M;;gBADjBA,Q,WAGWU,K;;AAsBjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQR,MAAR,GAAyBQ,KAAzB,CAAQR,MAAR;EAAA,IAAgBS,IAAhB,GAAyBD,KAAzB,CAAgBC,IAAhB;EACA,IAAMC,MAAM,GAKQlB,IALpB;EACA,IAAMmB,KAAK,GAAGjB,KAAd;EACA,IAAMkB,QAAQ,GAAGnB,OAAjB;EACA,eAAOJ,OAAO,CAACW,MAAD,CAAd,eACE,uDACE,oBAAC,MAAD,kEADF,EAEGS,IAAI,iBACH,oBAAC,QAAD;IAAA,SAAiBA;EAAjB,iBACE,oBAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASI,WAAT,CAAqBL,KAArB,EAA4B;EAAA;EAAA;;EAC1B,IAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;EACA,IAAMc,YAAY,GAC2BtB,IAD7C;EACA,eAAOH,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,YAAD;IAAA,OAAgC;EAAhC,YAAvB;AACD;;AAED,SAASG,MAAT,CAAgBK,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;EACA,IAAMe,OAAO,GAC2BxB,GADxC;EACA,eAAOF,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,OAAD,wEAA0BQ,KAA1B,YAAvB;AACD;;AAED,SAASH,IAAT,CAAcG,KAAd,EAAqB;EAAA;EAAA;;EACnB,IAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;EACA,IAAMgB,KAAK,GAC2BzB,GADtC;EACA,gBAAOF,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,KAAD,uEAAwBQ,KAAxB,YAAvB;AACD;;AAED,IAAMN,IAAI,GAAGf,eAAe,CAACS,QAAD,EAAW;EACrCW,KAAK,EAALA,KADqC;EAErCM,WAAW,EAAXA,WAFqC;EAGrCV,MAAM,EAANA,MAHqC;EAIrCE,IAAI,EAAJA;AAJqC,CAAX,CAA5B;AAOA,eAAeH,IAAf"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Card';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB"}
|
package/package.json
CHANGED
package/src/Card.jsx
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import { Text } from '@semcore/typography';
|
|
5
|
-
import Tooltip from '@semcore/tooltip';
|
|
6
|
-
import InfoM from '@semcore/icon/Info/m';
|
|
7
|
-
|
|
8
|
-
import style from './style/card.shadow.css';
|
|
9
|
-
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
10
|
-
|
|
11
|
-
class CardRoot extends Component {
|
|
12
|
-
static displayName = 'Card';
|
|
13
|
-
|
|
14
|
-
static style = style;
|
|
15
|
-
|
|
16
|
-
render() {
|
|
17
|
-
const SCard = Root;
|
|
18
|
-
const { Children, styles } = this.asProps;
|
|
19
|
-
|
|
20
|
-
const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
|
|
21
|
-
|
|
22
|
-
return sstyled(styles)(
|
|
23
|
-
<SCard render={Box}>
|
|
24
|
-
{advanceMode ? (
|
|
25
|
-
<Children />
|
|
26
|
-
) : (
|
|
27
|
-
<Card.Body>
|
|
28
|
-
<Children />
|
|
29
|
-
</Card.Body>
|
|
30
|
-
)}
|
|
31
|
-
</SCard>,
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function Title(props) {
|
|
37
|
-
const { styles, hint } = props;
|
|
38
|
-
const STitle = Root;
|
|
39
|
-
const SIcon = InfoM;
|
|
40
|
-
const STooltip = Tooltip;
|
|
41
|
-
return sstyled(styles)(
|
|
42
|
-
<>
|
|
43
|
-
<STitle render={Text} />
|
|
44
|
-
{hint && (
|
|
45
|
-
<STooltip title={hint}>
|
|
46
|
-
<SIcon />
|
|
47
|
-
</STooltip>
|
|
48
|
-
)}
|
|
49
|
-
</>,
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function Description(props) {
|
|
54
|
-
const { styles } = props;
|
|
55
|
-
const SDescription = Root;
|
|
56
|
-
return sstyled(styles)(<SDescription render={Text} tag="p" />);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function Header(props) {
|
|
60
|
-
const { styles } = props;
|
|
61
|
-
const SHeader = Root;
|
|
62
|
-
return sstyled(styles)(<SHeader render={Box} {...props} />);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function Body(props) {
|
|
66
|
-
const { styles } = props;
|
|
67
|
-
const SBody = Root;
|
|
68
|
-
return sstyled(styles)(<SBody render={Box} {...props} />);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const Card = createComponent(CardRoot, {
|
|
72
|
-
Title,
|
|
73
|
-
Description,
|
|
74
|
-
Header,
|
|
75
|
-
Body,
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
export default Card;
|
package/src/index.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CProps, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import { Text, ITextProps } from '@semcore/typography';
|
|
5
|
-
|
|
6
|
-
export interface ITitleProps extends ITextProps {
|
|
7
|
-
/**
|
|
8
|
-
* Tooltip text
|
|
9
|
-
*/
|
|
10
|
-
hint?: React.ReactNode;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
declare const Card: (<T>(props: CProps<IBoxProps & T>) => ReturnEl) & {
|
|
14
|
-
Title: <T>(props: ITitleProps & T) => ReturnEl;
|
|
15
|
-
Description: typeof Text;
|
|
16
|
-
Header: typeof Box;
|
|
17
|
-
Body: typeof Box;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default Card;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Card';
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SCard {
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
background: var(--white);
|
|
6
|
-
padding: 0;
|
|
7
|
-
border: none;
|
|
8
|
-
border-radius: var(--rounded-m);
|
|
9
|
-
box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
|
|
10
|
-
font-family: Inter, sans-serif;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
STitle {
|
|
14
|
-
color: var(--gray-800);
|
|
15
|
-
font-size: var(--fs-300);
|
|
16
|
-
line-height: var(--lh-300);
|
|
17
|
-
font-weight: 700;
|
|
18
|
-
margin-right: 4px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
SIcon {
|
|
22
|
-
color: var(--gray-300);
|
|
23
|
-
cursor: help;
|
|
24
|
-
margin-right: 4px;
|
|
25
|
-
}
|
|
26
|
-
STooltip {
|
|
27
|
-
display: inline-flex;
|
|
28
|
-
vertical-align: middle;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
SDescription {
|
|
32
|
-
margin-bottom: 0;
|
|
33
|
-
margin-top: 8px;
|
|
34
|
-
font-size: var(--fs-200);
|
|
35
|
-
color: var(--gray-500);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
SHeader {
|
|
39
|
-
padding-top: 8px;
|
|
40
|
-
padding-bottom: 8px;
|
|
41
|
-
padding-left: 20px;
|
|
42
|
-
padding-right: 20px;
|
|
43
|
-
box-shadow: inset 0 -1px 0 var(--gray-100);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
SBody {
|
|
47
|
-
color: var(--gray-800);
|
|
48
|
-
padding-bottom: 20px;
|
|
49
|
-
padding-left: 20px;
|
|
50
|
-
padding-right: 20px;
|
|
51
|
-
padding-top: 20px;
|
|
52
|
-
}
|