carbon-react 111.17.0 → 111.18.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.
Files changed (9) hide show
  1. package/esm/components/card/card.component.d.ts +3 -1
  2. package/esm/components/card/card.component.js +4 -1
  3. package/esm/components/card/card.style.d.ts +1 -0
  4. package/esm/components/card/card.style.js +6 -1
  5. package/lib/components/card/card.component.d.ts +3 -1
  6. package/lib/components/card/card.component.js +4 -1
  7. package/lib/components/card/card.style.d.ts +1 -0
  8. package/lib/components/card/card.style.js +6 -1
  9. package/package.json +1 -1
package/esm/components/card/card.component.d.ts CHANGED
@@ -22,6 +22,8 @@ export interface CardProps extends MarginProps {
22
22
  children: React.ReactNode;
23
23
  /** Flag to indicate if card is draggable */
24
24
  draggable?: boolean;
25
+ /** Height of the component (any valid CSS value) */
26
+ height?: string;
25
27
  /** Flag to indicate if card is interactive */
26
28
  interactive?: boolean;
27
29
  /** Size of card for applying padding */
@@ -32,7 +34,7 @@ export interface CardProps extends MarginProps {
32
34
  hoverBoxShadow?: BoxShadowsType;
33
35
  }
34
36
  declare const Card: {
35
- ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
37
+ ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
36
38
  displayName: string;
37
39
  };
38
40
  export default Card;
package/esm/components/card/card.component.js CHANGED
@@ -22,6 +22,7 @@ const Card = ({
22
22
  children,
23
23
  cardWidth = "500px",
24
24
  draggable,
25
+ height,
25
26
  interactive,
26
27
  spacing = "medium",
27
28
  boxShadow,
@@ -60,7 +61,8 @@ const Card = ({
60
61
  spacing: spacing,
61
62
  boxShadow: boxShadow,
62
63
  hoverBoxShadow: hoverBoxShadow,
63
- onClick: interactive && !draggable ? action : undefined
64
+ onClick: interactive && !draggable ? action : undefined,
65
+ height: height
64
66
  }, interactive && {
65
67
  tabIndex: 0,
66
68
  type: "button"
@@ -78,6 +80,7 @@ Card.propTypes = {
78
80
  "data-role": PropTypes.string,
79
81
  "dataRole": PropTypes.string,
80
82
  "draggable": PropTypes.bool,
83
+ "height": PropTypes.string,
81
84
  "hoverBoxShadow": PropTypes.any,
82
85
  "interactive": PropTypes.bool,
83
86
  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
package/esm/components/card/card.style.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface StyledCardProps extends MarginProps {
7
7
  cardWidth: string;
8
8
  interactive: boolean;
9
9
  draggable: boolean;
10
+ height?: string;
10
11
  spacing: CardSpacing;
11
12
  boxShadow?: BoxShadowsType;
12
13
  hoverBoxShadow?: BoxShadowsType;
package/esm/components/card/card.style.js CHANGED
@@ -11,6 +11,7 @@ const StyledCard = styled.div`
11
11
  cardWidth,
12
12
  interactive,
13
13
  draggable,
14
+ height,
14
15
  spacing,
15
16
  boxShadow = "boxShadow050",
16
17
  hoverBoxShadow = "boxShadow100"
@@ -19,12 +20,16 @@ const StyledCard = styled.div`
19
20
  border: none;
20
21
  box-shadow: var(--${boxShadow});
21
22
  color: var(--colorsUtilityYin090);
23
+ display: flex;
24
+ flex-direction: column;
25
+ height: ${height};
26
+ justify-content: space-between;
22
27
  margin: 25px;
28
+ outline: none;
23
29
  padding: ${paddingSizes[spacing]};
24
30
  transition: all 0.3s ease-in-out;
25
31
  vertical-align: top;
26
32
  width: ${cardWidth};
27
- outline: none;
28
33
  ${margin}
29
34
 
30
35
  ${interactive && css`
package/lib/components/card/card.component.d.ts CHANGED
@@ -22,6 +22,8 @@ export interface CardProps extends MarginProps {
22
22
  children: React.ReactNode;
23
23
  /** Flag to indicate if card is draggable */
24
24
  draggable?: boolean;
25
+ /** Height of the component (any valid CSS value) */
26
+ height?: string;
25
27
  /** Flag to indicate if card is interactive */
26
28
  interactive?: boolean;
27
29
  /** Size of card for applying padding */
@@ -32,7 +34,7 @@ export interface CardProps extends MarginProps {
32
34
  hoverBoxShadow?: BoxShadowsType;
33
35
  }
34
36
  declare const Card: {
35
- ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
37
+ ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, height, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
36
38
  displayName: string;
37
39
  };
38
40
  export default Card;
package/lib/components/card/card.component.js CHANGED
@@ -41,6 +41,7 @@ const Card = ({
41
41
  children,
42
42
  cardWidth = "500px",
43
43
  draggable,
44
+ height,
44
45
  interactive,
45
46
  spacing = "medium",
46
47
  boxShadow,
@@ -80,7 +81,8 @@ const Card = ({
80
81
  spacing: spacing,
81
82
  boxShadow: boxShadow,
82
83
  hoverBoxShadow: hoverBoxShadow,
83
- onClick: interactive && !draggable ? action : undefined
84
+ onClick: interactive && !draggable ? action : undefined,
85
+ height: height
84
86
  }, interactive && {
85
87
  tabIndex: 0,
86
88
  type: "button"
@@ -98,6 +100,7 @@ Card.propTypes = {
98
100
  "data-role": _propTypes.default.string,
99
101
  "dataRole": _propTypes.default.string,
100
102
  "draggable": _propTypes.default.bool,
103
+ "height": _propTypes.default.string,
101
104
  "hoverBoxShadow": _propTypes.default.any,
102
105
  "interactive": _propTypes.default.bool,
103
106
  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
package/lib/components/card/card.style.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface StyledCardProps extends MarginProps {
7
7
  cardWidth: string;
8
8
  interactive: boolean;
9
9
  draggable: boolean;
10
+ height?: string;
10
11
  spacing: CardSpacing;
11
12
  boxShadow?: BoxShadowsType;
12
13
  hoverBoxShadow?: BoxShadowsType;
package/lib/components/card/card.style.js CHANGED
@@ -27,6 +27,7 @@ const StyledCard = _styledComponents.default.div`
27
27
  cardWidth,
28
28
  interactive,
29
29
  draggable,
30
+ height,
30
31
  spacing,
31
32
  boxShadow = "boxShadow050",
32
33
  hoverBoxShadow = "boxShadow100"
@@ -35,12 +36,16 @@ const StyledCard = _styledComponents.default.div`
35
36
  border: none;
36
37
  box-shadow: var(--${boxShadow});
37
38
  color: var(--colorsUtilityYin090);
39
+ display: flex;
40
+ flex-direction: column;
41
+ height: ${height};
42
+ justify-content: space-between;
38
43
  margin: 25px;
44
+ outline: none;
39
45
  padding: ${paddingSizes[spacing]};
40
46
  transition: all 0.3s ease-in-out;
41
47
  vertical-align: top;
42
48
  width: ${cardWidth};
43
- outline: none;
44
49
  ${_styledSystem.margin}
45
50
 
46
51
  ${interactive && (0, _styledComponents.css)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "111.17.0",
3
+ "version": "111.18.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",