@thecb/components 7.13.4-beta.8 → 8.0.0-beta.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/dist/index.cjs.js +11 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.esm.js +11 -12
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/card/Card.js +36 -41
- package/src/components/atoms/card/index.d.ts +0 -2
- package/src/components/atoms/cardAlt/CardAlt.js +0 -113
- package/src/components/atoms/cardAlt/index.js +0 -3
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
import { themeComponent } from "../../../util/themeUtils";
|
|
4
4
|
import withWindowSize from "../../withWindowSize";
|
|
@@ -32,8 +32,6 @@ const Card = ({
|
|
|
32
32
|
titleVariant = "small",
|
|
33
33
|
themeValues,
|
|
34
34
|
width = "276px",
|
|
35
|
-
direction = "column",
|
|
36
|
-
boxStyles = "",
|
|
37
35
|
children
|
|
38
36
|
}) => {
|
|
39
37
|
const hasImage = Image || imgSrc;
|
|
@@ -53,13 +51,8 @@ const Card = ({
|
|
|
53
51
|
minWidth={width}
|
|
54
52
|
extraStyles={extraStyles}
|
|
55
53
|
>
|
|
56
|
-
<Cover singleChild
|
|
57
|
-
<Stack
|
|
58
|
-
fullHeight
|
|
59
|
-
childGap="0"
|
|
60
|
-
bottomItem={numberOfChildren}
|
|
61
|
-
direction={direction}
|
|
62
|
-
>
|
|
54
|
+
<Cover singleChild>
|
|
55
|
+
<Stack fullHeight childGap="1.5rem" bottomItem={numberOfChildren}>
|
|
63
56
|
{headerText && (
|
|
64
57
|
<CardHeader
|
|
65
58
|
headerText={headerText}
|
|
@@ -71,39 +64,41 @@ const Card = ({
|
|
|
71
64
|
as={headerAs}
|
|
72
65
|
></CardHeader>
|
|
73
66
|
)}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
)}
|
|
96
|
-
<Box extraStyles={boxStyles}>
|
|
97
|
-
{text && (
|
|
98
|
-
<CardText
|
|
99
|
-
padding={padding}
|
|
100
|
-
titleText={titleText}
|
|
101
|
-
text={text}
|
|
102
|
-
titleVariant={titleVariant}
|
|
67
|
+
<Stack direction="row" childGap="0">
|
|
68
|
+
{Image && !imgSrc && (
|
|
69
|
+
<Box
|
|
70
|
+
minHeight={imgHeight}
|
|
71
|
+
padding="0"
|
|
72
|
+
background={themeValues.imageBackgroundColor}
|
|
73
|
+
>
|
|
74
|
+
<Cover minHeight={imgHeight} singleChild>
|
|
75
|
+
<Center intrinsic>
|
|
76
|
+
<Image alt={imgAltText} />
|
|
77
|
+
</Center>
|
|
78
|
+
</Cover>
|
|
79
|
+
</Box>
|
|
80
|
+
)}
|
|
81
|
+
{imgSrc && (
|
|
82
|
+
<CardImage
|
|
83
|
+
height={imgHeight}
|
|
84
|
+
objectFit={imgObjectFit}
|
|
85
|
+
backgroundColor={themeValues.imageBackgroundColor}
|
|
86
|
+
src={imgSrc}
|
|
87
|
+
alt={imgAltText}
|
|
103
88
|
/>
|
|
104
89
|
)}
|
|
105
|
-
|
|
106
|
-
|
|
90
|
+
<Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
|
|
91
|
+
{text && (
|
|
92
|
+
<CardText
|
|
93
|
+
padding={padding}
|
|
94
|
+
titleText={titleText}
|
|
95
|
+
text={text}
|
|
96
|
+
titleVariant={titleVariant}
|
|
97
|
+
/>
|
|
98
|
+
)}
|
|
99
|
+
{children}
|
|
100
|
+
</Box>
|
|
101
|
+
</Stack>
|
|
107
102
|
</Stack>
|
|
108
103
|
</Cover>
|
|
109
104
|
</BoxWithShadow>
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import React, { Fragment } from "react";
|
|
2
|
-
|
|
3
|
-
import { themeComponent } from "../../../util/themeUtils";
|
|
4
|
-
import withWindowSize from "../../withWindowSize";
|
|
5
|
-
|
|
6
|
-
import { fallbackValues } from "../card/Card.theme";
|
|
7
|
-
|
|
8
|
-
import Box from "../layouts/Box";
|
|
9
|
-
import BoxWithShadow from "../box-with-shadow";
|
|
10
|
-
import Center from "../layouts/Center";
|
|
11
|
-
import Cover from "../layouts/Cover";
|
|
12
|
-
import Stack from "../layouts/Stack";
|
|
13
|
-
|
|
14
|
-
import CardImage from "../card/CardImage.styled";
|
|
15
|
-
import CardText from "../card/CardText";
|
|
16
|
-
import CardHeader from "../card/CardHeader";
|
|
17
|
-
|
|
18
|
-
const CardAlt = ({
|
|
19
|
-
borderRadius = "4px",
|
|
20
|
-
extraStyles,
|
|
21
|
-
headerAs = "h2",
|
|
22
|
-
headerText,
|
|
23
|
-
headerVariant = "small",
|
|
24
|
-
imgSrc,
|
|
25
|
-
Image,
|
|
26
|
-
imgHeight = "150px",
|
|
27
|
-
imgObjectFit = "none",
|
|
28
|
-
imgAltText,
|
|
29
|
-
padding = "24px",
|
|
30
|
-
text,
|
|
31
|
-
titleText,
|
|
32
|
-
titleVariant = "small",
|
|
33
|
-
themeValues,
|
|
34
|
-
width = "276px",
|
|
35
|
-
children
|
|
36
|
-
}) => {
|
|
37
|
-
const hasImage = Image || imgSrc;
|
|
38
|
-
const numberOfChildren =
|
|
39
|
-
(Array.isArray(children) ? children.length : 1) +
|
|
40
|
-
(text ? 1 : 0) +
|
|
41
|
-
(hasImage ? 1 : 0) +
|
|
42
|
-
(headerText ? 1 : 0);
|
|
43
|
-
|
|
44
|
-
return (
|
|
45
|
-
<BoxWithShadow
|
|
46
|
-
variant="baseStandard"
|
|
47
|
-
background={themeValues.backgroundColor}
|
|
48
|
-
borderRadius={borderRadius}
|
|
49
|
-
padding="0"
|
|
50
|
-
margin="0"
|
|
51
|
-
minWidth={width}
|
|
52
|
-
extraStyles={extraStyles}
|
|
53
|
-
>
|
|
54
|
-
<Cover singleChild fillCenter>
|
|
55
|
-
<Stack
|
|
56
|
-
fullHeight
|
|
57
|
-
childGap="0"
|
|
58
|
-
bottomItem={numberOfChildren}
|
|
59
|
-
direction="row"
|
|
60
|
-
>
|
|
61
|
-
{headerText && (
|
|
62
|
-
<CardHeader
|
|
63
|
-
headerText={headerText}
|
|
64
|
-
headerColor={themeValues.headerColor}
|
|
65
|
-
headerVariant={headerVariant}
|
|
66
|
-
backgroundColor={themeValues.headerBackgroundColor}
|
|
67
|
-
borderRadius={borderRadius}
|
|
68
|
-
padding={padding}
|
|
69
|
-
as={headerAs}
|
|
70
|
-
></CardHeader>
|
|
71
|
-
)}
|
|
72
|
-
{Image && !imgSrc && (
|
|
73
|
-
<Box
|
|
74
|
-
minHeight={imgHeight}
|
|
75
|
-
padding="0"
|
|
76
|
-
background={themeValues.imageBackgroundColor}
|
|
77
|
-
>
|
|
78
|
-
<Cover minHeight={imgHeight} singleChild>
|
|
79
|
-
<Center intrinsic>
|
|
80
|
-
<Image alt={imgAltText} />
|
|
81
|
-
</Center>
|
|
82
|
-
</Cover>
|
|
83
|
-
</Box>
|
|
84
|
-
)}
|
|
85
|
-
{imgSrc && (
|
|
86
|
-
<CardImage
|
|
87
|
-
height={imgHeight}
|
|
88
|
-
objectFit={imgObjectFit}
|
|
89
|
-
backgroundColor={themeValues.imageBackgroundColor}
|
|
90
|
-
src={imgSrc}
|
|
91
|
-
alt={imgAltText}
|
|
92
|
-
/>
|
|
93
|
-
)}
|
|
94
|
-
{text && (
|
|
95
|
-
<CardText
|
|
96
|
-
padding={padding}
|
|
97
|
-
titleText={titleText}
|
|
98
|
-
text={text}
|
|
99
|
-
titleVariant={titleVariant}
|
|
100
|
-
/>
|
|
101
|
-
)}
|
|
102
|
-
{children}
|
|
103
|
-
</Stack>
|
|
104
|
-
</Cover>
|
|
105
|
-
</BoxWithShadow>
|
|
106
|
-
);
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
export default themeComponent(
|
|
110
|
-
withWindowSize(CardAlt),
|
|
111
|
-
"CardAlt",
|
|
112
|
-
fallbackValues
|
|
113
|
-
);
|