carbon-react 104.39.0 → 104.40.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 (5) hide show
  1. package/esm/components/grid/grid-item/grid-item.style.d.ts +1 -0
  2. package/esm/components/grid/grid-item/grid-item.style.js +48 -16
  3. package/lib/components/grid/grid-item/grid-item.style.d.ts +1 -0
  4. package/lib/components/grid/grid-item/grid-item.style.js +49 -16
  5. package/package.json +1 -1
package/esm/components/grid/grid-item/grid-item.style.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ export function getSpacing(prop: any): any;
1
2
  export default GridItemStyle;
2
3
  declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
package/esm/components/grid/grid-item/grid-item.style.js CHANGED
@@ -3,10 +3,9 @@ import { grid, flexbox } from "styled-system";
3
3
  import styledSystemPropTypes from "@styled-system/prop-types";
4
4
  import { padding } from "@styled-system/space";
5
5
  import PropTypes from "prop-types";
6
- import { baseTheme } from "../../../style/themes";
7
6
  import { filterStyledSystemPaddingProps } from "../../../style/utils";
8
7
 
9
- function responsiveGridItem(responsiveSettings, theme) {
8
+ function responsiveGridItem(responsiveSettings) {
10
9
  return responsiveSettings.map(setting => {
11
10
  const {
12
11
  alignSelf,
@@ -26,24 +25,59 @@ function responsiveGridItem(responsiveSettings, theme) {
26
25
  justify-self: ${justifySelf || "stretch"};
27
26
  grid-column: ${gridColumn};
28
27
  grid-row: ${gridRow};
29
- padding: ${getSpacing(p, theme)};
30
- padding-left: ${getSpacing(pl, theme)};
31
- padding-right: ${getSpacing(pr, theme)};
32
- padding-top: ${getSpacing(pt, theme)};
33
- padding-bottom: ${getSpacing(pb, theme)};
28
+ padding: ${getSpacing(p)};
29
+ padding-left: ${getSpacing(pl)};
30
+ padding-right: ${getSpacing(pr)};
31
+ padding-top: ${getSpacing(pt)};
32
+ padding-bottom: ${getSpacing(pb)};
34
33
  }
35
34
  `;
36
35
  });
37
36
  }
38
37
 
39
- function getSpacing(prop, theme) {
40
- if (prop && typeof prop === "number") {
41
- return `${theme.space[prop]}px`;
38
+ export function getSpacing(prop) {
39
+ if (typeof prop === "number") {
40
+ switch (prop) {
41
+ case 0:
42
+ return "var(--spacing000)";
43
+
44
+ case 1:
45
+ return "var(--spacing100)";
46
+
47
+ case 2:
48
+ return "var(--spacing200)";
49
+
50
+ case 3:
51
+ return "var(--spacing300)";
52
+
53
+ case 4:
54
+ return "var(--spacing400)";
55
+
56
+ case 5:
57
+ return "var(--spacing500)";
58
+
59
+ case 6:
60
+ return "var(--spacing600)";
61
+
62
+ case 7:
63
+ return "var(--spacing700)";
64
+
65
+ case 8:
66
+ return "var(--spacing800)";
67
+
68
+ case 9:
69
+ return "var(--spacing900)";
70
+
71
+ case 10:
72
+ return "var(--spacing1000)";
73
+
74
+ default:
75
+ return "var(--spacing100)";
76
+ }
42
77
  }
43
78
 
44
79
  return prop;
45
80
  }
46
-
47
81
  const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
48
82
  const GridItemStyle = styled.div`
49
83
  margin: 0;
@@ -70,10 +104,9 @@ const GridItemStyle = styled.div`
70
104
  gridColumn
71
105
  })}
72
106
  ${({
73
- responsiveSettings,
74
- theme
107
+ responsiveSettings
75
108
  }) => responsiveSettings && css`
76
- ${responsiveGridItem(responsiveSettings, theme)};
109
+ ${responsiveGridItem(responsiveSettings)};
77
110
  `}
78
111
  `;
79
112
  GridItemStyle.propTypes = {
@@ -93,7 +126,6 @@ GridItemStyle.propTypes = {
93
126
  };
94
127
  GridItemStyle.defaultProps = {
95
128
  gridColumn: "1 / 13",
96
- gridRow: "auto",
97
- theme: baseTheme
129
+ gridRow: "auto"
98
130
  };
99
131
  export default GridItemStyle;
package/lib/components/grid/grid-item/grid-item.style.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ export function getSpacing(prop: any): any;
1
2
  export default GridItemStyle;
2
3
  declare const GridItemStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
package/lib/components/grid/grid-item/grid-item.style.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.getSpacing = getSpacing;
6
7
  exports.default = void 0;
7
8
 
8
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -15,8 +16,6 @@ var _space = require("@styled-system/space");
15
16
 
16
17
  var _propTypes2 = _interopRequireDefault(require("prop-types"));
17
18
 
18
- var _themes = require("../../../style/themes");
19
-
20
19
  var _utils = require("../../../style/utils");
21
20
 
22
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +24,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
25
24
 
26
25
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
26
 
28
- function responsiveGridItem(responsiveSettings, theme) {
27
+ function responsiveGridItem(responsiveSettings) {
29
28
  return responsiveSettings.map(setting => {
30
29
  const {
31
30
  alignSelf,
@@ -45,19 +44,55 @@ function responsiveGridItem(responsiveSettings, theme) {
45
44
  justify-self: ${justifySelf || "stretch"};
46
45
  grid-column: ${gridColumn};
47
46
  grid-row: ${gridRow};
48
- padding: ${getSpacing(p, theme)};
49
- padding-left: ${getSpacing(pl, theme)};
50
- padding-right: ${getSpacing(pr, theme)};
51
- padding-top: ${getSpacing(pt, theme)};
52
- padding-bottom: ${getSpacing(pb, theme)};
47
+ padding: ${getSpacing(p)};
48
+ padding-left: ${getSpacing(pl)};
49
+ padding-right: ${getSpacing(pr)};
50
+ padding-top: ${getSpacing(pt)};
51
+ padding-bottom: ${getSpacing(pb)};
53
52
  }
54
53
  `;
55
54
  });
56
55
  }
57
56
 
58
- function getSpacing(prop, theme) {
59
- if (prop && typeof prop === "number") {
60
- return `${theme.space[prop]}px`;
57
+ function getSpacing(prop) {
58
+ if (typeof prop === "number") {
59
+ switch (prop) {
60
+ case 0:
61
+ return "var(--spacing000)";
62
+
63
+ case 1:
64
+ return "var(--spacing100)";
65
+
66
+ case 2:
67
+ return "var(--spacing200)";
68
+
69
+ case 3:
70
+ return "var(--spacing300)";
71
+
72
+ case 4:
73
+ return "var(--spacing400)";
74
+
75
+ case 5:
76
+ return "var(--spacing500)";
77
+
78
+ case 6:
79
+ return "var(--spacing600)";
80
+
81
+ case 7:
82
+ return "var(--spacing700)";
83
+
84
+ case 8:
85
+ return "var(--spacing800)";
86
+
87
+ case 9:
88
+ return "var(--spacing900)";
89
+
90
+ case 10:
91
+ return "var(--spacing1000)";
92
+
93
+ default:
94
+ return "var(--spacing100)";
95
+ }
61
96
  }
62
97
 
63
98
  return prop;
@@ -89,10 +124,9 @@ const GridItemStyle = _styledComponents.default.div`
89
124
  gridColumn
90
125
  })}
91
126
  ${({
92
- responsiveSettings,
93
- theme
127
+ responsiveSettings
94
128
  }) => responsiveSettings && (0, _styledComponents.css)`
95
- ${responsiveGridItem(responsiveSettings, theme)};
129
+ ${responsiveGridItem(responsiveSettings)};
96
130
  `}
97
131
  `;
98
132
  GridItemStyle.propTypes = {
@@ -112,8 +146,7 @@ GridItemStyle.propTypes = {
112
146
  };
113
147
  GridItemStyle.defaultProps = {
114
148
  gridColumn: "1 / 13",
115
- gridRow: "auto",
116
- theme: _themes.baseTheme
149
+ gridRow: "auto"
117
150
  };
118
151
  var _default = GridItemStyle;
119
152
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "104.39.0",
3
+ "version": "104.40.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "engineStrict": true,
6
6
  "engines": {