carbon-react 111.14.0 → 111.15.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 (15) hide show
  1. package/esm/components/box/box.component.d.ts +6 -1
  2. package/esm/components/box/box.component.js +7 -1
  3. package/esm/components/card/card.component.d.ts +8 -1
  4. package/esm/components/card/card.component.js +6 -0
  5. package/esm/components/card/card.style.d.ts +5 -0
  6. package/esm/components/card/card.style.js +5 -3
  7. package/esm/components/dismissible-box/dismissible-box.component.js +1 -0
  8. package/lib/components/box/box.component.d.ts +6 -1
  9. package/lib/components/box/box.component.js +8 -1
  10. package/lib/components/card/card.component.d.ts +8 -1
  11. package/lib/components/card/card.component.js +6 -0
  12. package/lib/components/card/card.style.d.ts +5 -0
  13. package/lib/components/card/card.style.js +5 -3
  14. package/lib/components/dismissible-box/dismissible-box.component.js +1 -0
  15. package/package.json +1 -1
package/esm/components/box/box.component.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import React from "react";
2
2
  import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
3
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
3
4
  declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
4
5
  export declare type OverflowWrap = "break-word" | "anywhere";
5
6
  export declare type ScrollVariant = "light" | "dark";
6
7
  export declare type BoxSizing = "content-box" | "border-box";
7
8
  export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
8
9
  export declare type Gap = AllowedNumericalValues | string;
10
+ declare type DesignTokensType = keyof typeof DesignTokens;
11
+ declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
9
12
  export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
10
13
  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
11
14
  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -22,6 +25,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
22
25
  columnGap?: Gap;
23
26
  /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
24
27
  rowGap?: Gap;
28
+ /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
29
+ boxShadow?: BoxShadowsType;
25
30
  }
26
- declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
31
+ export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
27
32
  export default Box;
package/esm/components/box/box.component.js CHANGED
@@ -4,7 +4,7 @@ import BaseTheme from "../../style/themes/base";
4
4
  import styledColor from "../../style/utils/color";
5
5
  import boxConfig from "./box.config";
6
6
  const GAP_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
7
- const Box = styled.div`
7
+ export const Box = styled.div`
8
8
  ${space}
9
9
  ${layout}
10
10
  ${flexbox}
@@ -69,6 +69,12 @@ const Box = styled.div`
69
69
  row-gap: ${boxConfig.gap(rowGap)};
70
70
  `}
71
71
  `};
72
+
73
+ ${({
74
+ boxShadow
75
+ }) => boxShadow && css`
76
+ box-shadow: var(--${boxShadow});
77
+ `}
72
78
  `;
73
79
  Box.defaultProps = {
74
80
  theme: BaseTheme
package/esm/components/card/card.component.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
3
4
  import { CardSpacing } from "./card.config";
5
+ declare type DesignTokensType = keyof typeof DesignTokens;
6
+ declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
4
7
  export interface CardProps extends MarginProps {
5
8
  /** Identifier used for testing purposes, applied to the root element of the component. */
6
9
  "data-element"?: string;
@@ -23,9 +26,13 @@ export interface CardProps extends MarginProps {
23
26
  interactive?: boolean;
24
27
  /** Size of card for applying padding */
25
28
  spacing?: CardSpacing;
29
+ /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
30
+ boxShadow?: BoxShadowsType;
31
+ /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
32
+ hoverBoxShadow?: BoxShadowsType;
26
33
  }
27
34
  declare const Card: {
28
- ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
35
+ ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
29
36
  displayName: string;
30
37
  };
31
38
  export default Card;
package/esm/components/card/card.component.js CHANGED
@@ -24,6 +24,8 @@ const Card = ({
24
24
  draggable,
25
25
  interactive,
26
26
  spacing = "medium",
27
+ boxShadow,
28
+ hoverBoxShadow,
27
29
  ...rest
28
30
  }) => {
29
31
  if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -56,6 +58,8 @@ const Card = ({
56
58
  interactive: !!interactive,
57
59
  draggable: !!draggable,
58
60
  spacing: spacing,
61
+ boxShadow: boxShadow,
62
+ hoverBoxShadow: hoverBoxShadow,
59
63
  onClick: interactive && !draggable ? action : undefined
60
64
  }, interactive && {
61
65
  tabIndex: 0,
@@ -67,12 +71,14 @@ const Card = ({
67
71
 
68
72
  Card.propTypes = {
69
73
  "action": PropTypes.func,
74
+ "boxShadow": PropTypes.any,
70
75
  "cardWidth": PropTypes.string,
71
76
  "children": PropTypes.node,
72
77
  "data-element": PropTypes.string,
73
78
  "data-role": PropTypes.string,
74
79
  "dataRole": PropTypes.string,
75
80
  "draggable": PropTypes.bool,
81
+ "hoverBoxShadow": PropTypes.any,
76
82
  "interactive": PropTypes.bool,
77
83
  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
78
84
  "__@toStringTag": PropTypes.string.isRequired,
package/esm/components/card/card.style.d.ts CHANGED
@@ -1,10 +1,15 @@
1
1
  import { MarginProps } from "styled-system";
2
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
2
3
  import { CardSpacing } from "./card.config";
4
+ declare type DesignTokensType = keyof typeof DesignTokens;
5
+ export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
3
6
  export interface StyledCardProps extends MarginProps {
4
7
  cardWidth: string;
5
8
  interactive: boolean;
6
9
  draggable: boolean;
7
10
  spacing: CardSpacing;
11
+ boxShadow?: BoxShadowsType;
12
+ hoverBoxShadow?: BoxShadowsType;
8
13
  }
9
14
  declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
10
15
  export default StyledCard;
package/esm/components/card/card.style.js CHANGED
@@ -11,11 +11,13 @@ const StyledCard = styled.div`
11
11
  cardWidth,
12
12
  interactive,
13
13
  draggable,
14
- spacing
14
+ spacing,
15
+ boxShadow = "boxShadow050",
16
+ hoverBoxShadow = "boxShadow100"
15
17
  }) => css`
16
18
  background-color: var(--colorsUtilityYang100);
17
19
  border: none;
18
- box-shadow: var(--boxShadow050);
20
+ box-shadow: var(--${boxShadow});
19
21
  color: var(--colorsUtilityYin090);
20
22
  margin: 25px;
21
23
  padding: ${paddingSizes[spacing]};
@@ -30,7 +32,7 @@ const StyledCard = styled.div`
30
32
 
31
33
  :hover,
32
34
  :focus {
33
- box-shadow: var(--boxShadow100);
35
+ box-shadow: var(--${hoverBoxShadow});
34
36
  }
35
37
  `}
36
38
 
package/esm/components/dismissible-box/dismissible-box.component.js CHANGED
@@ -465,6 +465,7 @@ DismissibleBox.propTypes = {
465
465
  "trimStart": PropTypes.func.isRequired,
466
466
  "valueOf": PropTypes.func.isRequired
467
467
  }), PropTypes.string]),
468
+ "boxShadow": PropTypes.any,
468
469
  "boxSizing": PropTypes.oneOf(["border-box", "content-box"]),
469
470
  "children": PropTypes.node,
470
471
  "color": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
package/lib/components/box/box.component.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import React from "react";
2
2
  import { SpaceProps, LayoutProps, FlexboxProps, ColorProps, PositionProps } from "styled-system";
3
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
3
4
  declare const GAP_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
4
5
  export declare type OverflowWrap = "break-word" | "anywhere";
5
6
  export declare type ScrollVariant = "light" | "dark";
6
7
  export declare type BoxSizing = "content-box" | "border-box";
7
8
  export declare type AllowedNumericalValues = typeof GAP_VALUES[number];
8
9
  export declare type Gap = AllowedNumericalValues | string;
10
+ declare type DesignTokensType = keyof typeof DesignTokens;
11
+ declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
9
12
  export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps, Omit<PositionProps, "zIndex"> {
10
13
  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
11
14
  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
@@ -22,6 +25,8 @@ export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorPr
22
25
  columnGap?: Gap;
23
26
  /** Row gap an integer multiplier of the base spacing constant (8px) or any valid CSS string." */
24
27
  rowGap?: Gap;
28
+ /** Design Token for Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Box component. */
29
+ boxShadow?: BoxShadowsType;
25
30
  }
26
- declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
31
+ export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
27
32
  export default Box;
package/lib/components/box/box.component.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.Box = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
@@ -87,7 +87,14 @@ const Box = _styledComponents.default.div`
87
87
  row-gap: ${_box.default.gap(rowGap)};
88
88
  `}
89
89
  `};
90
+
91
+ ${({
92
+ boxShadow
93
+ }) => boxShadow && (0, _styledComponents.css)`
94
+ box-shadow: var(--${boxShadow});
95
+ `}
90
96
  `;
97
+ exports.Box = Box;
91
98
  Box.defaultProps = {
92
99
  theme: _base.default
93
100
  };
package/lib/components/card/card.component.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
3
4
  import { CardSpacing } from "./card.config";
5
+ declare type DesignTokensType = keyof typeof DesignTokens;
6
+ declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
4
7
  export interface CardProps extends MarginProps {
5
8
  /** Identifier used for testing purposes, applied to the root element of the component. */
6
9
  "data-element"?: string;
@@ -23,9 +26,13 @@ export interface CardProps extends MarginProps {
23
26
  interactive?: boolean;
24
27
  /** Size of card for applying padding */
25
28
  spacing?: CardSpacing;
29
+ /** Design token for custom Box Shadow. Note: please check that the box shadow design token you are using is compatible with the Card component. */
30
+ boxShadow?: BoxShadowsType;
31
+ /** Design token for custom Box Shadow on hover. Interactive prop must be True. Note: please check that the box shadow design token you are using is compatible with the Card component. */
32
+ hoverBoxShadow?: BoxShadowsType;
26
33
  }
27
34
  declare const Card: {
28
- ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, ...rest }: CardProps): JSX.Element;
35
+ ({ "data-element": dataElement, "data-role": dataRole, dataRole: oldDataRole, action, children, cardWidth, draggable, interactive, spacing, boxShadow, hoverBoxShadow, ...rest }: CardProps): JSX.Element;
29
36
  displayName: string;
30
37
  };
31
38
  export default Card;
package/lib/components/card/card.component.js CHANGED
@@ -43,6 +43,8 @@ const Card = ({
43
43
  draggable,
44
44
  interactive,
45
45
  spacing = "medium",
46
+ boxShadow,
47
+ hoverBoxShadow,
46
48
  ...rest
47
49
  }) => {
48
50
  if (!isDeprecationWarningTriggered && oldDataRole) {
@@ -76,6 +78,8 @@ const Card = ({
76
78
  interactive: !!interactive,
77
79
  draggable: !!draggable,
78
80
  spacing: spacing,
81
+ boxShadow: boxShadow,
82
+ hoverBoxShadow: hoverBoxShadow,
79
83
  onClick: interactive && !draggable ? action : undefined
80
84
  }, interactive && {
81
85
  tabIndex: 0,
@@ -87,12 +91,14 @@ const Card = ({
87
91
 
88
92
  Card.propTypes = {
89
93
  "action": _propTypes.default.func,
94
+ "boxShadow": _propTypes.default.any,
90
95
  "cardWidth": _propTypes.default.string,
91
96
  "children": _propTypes.default.node,
92
97
  "data-element": _propTypes.default.string,
93
98
  "data-role": _propTypes.default.string,
94
99
  "dataRole": _propTypes.default.string,
95
100
  "draggable": _propTypes.default.bool,
101
+ "hoverBoxShadow": _propTypes.default.any,
96
102
  "interactive": _propTypes.default.bool,
97
103
  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
98
104
  "__@toStringTag": _propTypes.default.string.isRequired,
package/lib/components/card/card.style.d.ts CHANGED
@@ -1,10 +1,15 @@
1
1
  import { MarginProps } from "styled-system";
2
+ import * as DesignTokens from "@sage/design-tokens/js/base/common";
2
3
  import { CardSpacing } from "./card.config";
4
+ declare type DesignTokensType = keyof typeof DesignTokens;
5
+ export declare type BoxShadowsType = Extract<DesignTokensType, `boxShadow${string}`>;
3
6
  export interface StyledCardProps extends MarginProps {
4
7
  cardWidth: string;
5
8
  interactive: boolean;
6
9
  draggable: boolean;
7
10
  spacing: CardSpacing;
11
+ boxShadow?: BoxShadowsType;
12
+ hoverBoxShadow?: BoxShadowsType;
8
13
  }
9
14
  declare const StyledCard: import("styled-components").StyledComponent<"div", any, StyledCardProps, never>;
10
15
  export default StyledCard;
package/lib/components/card/card.style.js CHANGED
@@ -27,11 +27,13 @@ const StyledCard = _styledComponents.default.div`
27
27
  cardWidth,
28
28
  interactive,
29
29
  draggable,
30
- spacing
30
+ spacing,
31
+ boxShadow = "boxShadow050",
32
+ hoverBoxShadow = "boxShadow100"
31
33
  }) => (0, _styledComponents.css)`
32
34
  background-color: var(--colorsUtilityYang100);
33
35
  border: none;
34
- box-shadow: var(--boxShadow050);
36
+ box-shadow: var(--${boxShadow});
35
37
  color: var(--colorsUtilityYin090);
36
38
  margin: 25px;
37
39
  padding: ${paddingSizes[spacing]};
@@ -46,7 +48,7 @@ const StyledCard = _styledComponents.default.div`
46
48
 
47
49
  :hover,
48
50
  :focus {
49
- box-shadow: var(--boxShadow100);
51
+ box-shadow: var(--${hoverBoxShadow});
50
52
  }
51
53
  `}
52
54
 
package/lib/components/dismissible-box/dismissible-box.component.js CHANGED
@@ -479,6 +479,7 @@ DismissibleBox.propTypes = {
479
479
  "trimStart": _propTypes.default.func.isRequired,
480
480
  "valueOf": _propTypes.default.func.isRequired
481
481
  }), _propTypes.default.string]),
482
+ "boxShadow": _propTypes.default.any,
482
483
  "boxSizing": _propTypes.default.oneOf(["border-box", "content-box"]),
483
484
  "children": _propTypes.default.node,
484
485
  "color": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "111.14.0",
3
+ "version": "111.15.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",