@thecb/components 10.4.0-beta.4 → 10.4.0-beta.6
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 +21 -29
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +21 -29
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/atoms/badge/Badge.theme.js +2 -2
- package/src/components/atoms/button-with-action/ButtonWithAction.stories.js +27 -9
- package/src/components/atoms/button-with-action/ButtonWithAction.theme.js +9 -10
- package/src/components/atoms/placeholder/Placeholder.js +73 -86
package/dist/index.cjs.js
CHANGED
|
@@ -12598,22 +12598,21 @@ var WHITE$1 = WHITE,
|
|
|
12598
12598
|
MANATEE_GREY$1 = MANATEE_GREY,
|
|
12599
12599
|
MATISSE_BLUE$1 = MATISSE_BLUE,
|
|
12600
12600
|
RASPBERRY$1 = RASPBERRY,
|
|
12601
|
-
ERROR_COLOR$1 = ERROR_COLOR
|
|
12602
|
-
STORM_GREY$1 = STORM_GREY;
|
|
12601
|
+
ERROR_COLOR$1 = ERROR_COLOR;
|
|
12603
12602
|
var LINK_TEXT_DECORATION$1 = LINK_TEXT_DECORATION;
|
|
12604
12603
|
var disabledBorderColor = {
|
|
12605
|
-
primary:
|
|
12606
|
-
secondary:
|
|
12604
|
+
primary: MANATEE_GREY$1,
|
|
12605
|
+
secondary: MANATEE_GREY$1,
|
|
12607
12606
|
back: TRANSPARENT$1,
|
|
12608
|
-
smallPrimary:
|
|
12609
|
-
smallSecondary:
|
|
12607
|
+
smallPrimary: MANATEE_GREY$1,
|
|
12608
|
+
smallSecondary: MANATEE_GREY$1,
|
|
12610
12609
|
smallGhost: TRANSPARENT$1,
|
|
12611
12610
|
ghost: TRANSPARENT$1,
|
|
12612
12611
|
tertiary: TRANSPARENT$1,
|
|
12613
|
-
danger:
|
|
12614
|
-
dangerSecondary:
|
|
12615
|
-
whiteSecondary:
|
|
12616
|
-
whitePrimary:
|
|
12612
|
+
danger: MANATEE_GREY$1,
|
|
12613
|
+
dangerSecondary: MANATEE_GREY$1,
|
|
12614
|
+
whiteSecondary: MANATEE_GREY$1,
|
|
12615
|
+
whitePrimary: MANATEE_GREY$1
|
|
12617
12616
|
};
|
|
12618
12617
|
var disabledColor = {
|
|
12619
12618
|
primary: WHITE$1,
|
|
@@ -20581,7 +20580,7 @@ var BoxWithShadow$1 = themeComponent(BoxWithShadow, "BoxWithShadow", fallbackVal
|
|
|
20581
20580
|
|
|
20582
20581
|
// import theme from "styled-theming";
|
|
20583
20582
|
var MATISSE_BLUE$2 = MATISSE_BLUE,
|
|
20584
|
-
STORM_GREY$
|
|
20583
|
+
STORM_GREY$1 = STORM_GREY;
|
|
20585
20584
|
var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
|
|
20586
20585
|
|
|
20587
20586
|
/*
|
|
@@ -20590,8 +20589,8 @@ var LINK_TEXT_DECORATION$2 = LINK_TEXT_DECORATION;
|
|
|
20590
20589
|
*/
|
|
20591
20590
|
|
|
20592
20591
|
var color$5 = "".concat(MATISSE_BLUE$2);
|
|
20593
|
-
var activeColor$2 = "".concat(STORM_GREY$
|
|
20594
|
-
var activeBreadcrumbColor = "".concat(STORM_GREY$
|
|
20592
|
+
var activeColor$2 = "".concat(STORM_GREY$1);
|
|
20593
|
+
var activeBreadcrumbColor = "".concat(STORM_GREY$1);
|
|
20595
20594
|
var fontSize$2 = "0.875rem";
|
|
20596
20595
|
var lineHeight = "1.25rem";
|
|
20597
20596
|
var fontWeight$1 = "400";
|
|
@@ -27777,9 +27776,7 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
|
|
|
27777
27776
|
action = _ref.action,
|
|
27778
27777
|
destination = _ref.destination,
|
|
27779
27778
|
children = _ref.children,
|
|
27780
|
-
dataQa = _ref.dataQa
|
|
27781
|
-
_ref$disabled = _ref.disabled,
|
|
27782
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
27779
|
+
dataQa = _ref.dataQa;
|
|
27783
27780
|
return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
|
|
27784
27781
|
to: destination,
|
|
27785
27782
|
"data-qa": dataQa,
|
|
@@ -27789,14 +27786,13 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
|
|
|
27789
27786
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
27790
27787
|
padding: "0",
|
|
27791
27788
|
minHeight: "100%",
|
|
27792
|
-
extraStyles:
|
|
27789
|
+
extraStyles: "cursor: pointer;"
|
|
27793
27790
|
}, children)) : /*#__PURE__*/React__default.createElement(Box, {
|
|
27794
|
-
onClick:
|
|
27791
|
+
onClick: action,
|
|
27795
27792
|
padding: "0",
|
|
27796
27793
|
minHeight: "100%",
|
|
27797
|
-
|
|
27798
|
-
|
|
27799
|
-
extraStyles: disabled ? "cursor: default;" : "cursor: pointer;"
|
|
27794
|
+
extraStyles: "cursor: pointer;",
|
|
27795
|
+
dataQa: dataQa
|
|
27800
27796
|
}, children);
|
|
27801
27797
|
};
|
|
27802
27798
|
var Placeholder = function Placeholder(_ref2) {
|
|
@@ -27810,16 +27806,12 @@ var Placeholder = function Placeholder(_ref2) {
|
|
|
27810
27806
|
variant = _ref2.variant,
|
|
27811
27807
|
largeIcon = _ref2.largeIcon,
|
|
27812
27808
|
themeValues = _ref2.themeValues,
|
|
27813
|
-
dataQa = _ref2.dataQa
|
|
27814
|
-
_ref2$disabled = _ref2.disabled,
|
|
27815
|
-
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
|
|
27816
|
-
var tintedColor = "".concat(curriedTint$1(0.9, themeValues.color));
|
|
27809
|
+
dataQa = _ref2.dataQa;
|
|
27817
27810
|
return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
|
|
27818
27811
|
isLink: isLink,
|
|
27819
27812
|
action: action,
|
|
27820
27813
|
destination: destination,
|
|
27821
|
-
dataQa: dataQa
|
|
27822
|
-
disabled: disabled
|
|
27814
|
+
dataQa: dataQa
|
|
27823
27815
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
27824
27816
|
padding: "0",
|
|
27825
27817
|
borderRadius: "4px",
|
|
@@ -27827,14 +27819,14 @@ var Placeholder = function Placeholder(_ref2) {
|
|
|
27827
27819
|
minHeight: themeValues.height,
|
|
27828
27820
|
hiddenStyles: !visible,
|
|
27829
27821
|
extraStyles: "\n background: linear-gradient(\n to right,\n ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n rgba(255, 255, 255, 0) 0%\n ),\n linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: 5px 1px, 1px 5px;\n display: flex;\n justify-content: center;\n align-items:center;"),
|
|
27830
|
-
hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY :
|
|
27822
|
+
hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
|
|
27831
27823
|
}, /*#__PURE__*/React__default.createElement(Center, {
|
|
27832
27824
|
maxWidth: "300px"
|
|
27833
27825
|
}, /*#__PURE__*/React__default.createElement(Box, {
|
|
27834
27826
|
padding: "0",
|
|
27835
27827
|
tabIndex: "0",
|
|
27836
27828
|
onKeyPress: function onKeyPress(e) {
|
|
27837
|
-
return e.key === "Enter" &&
|
|
27829
|
+
return e.key === "Enter" && action();
|
|
27838
27830
|
}
|
|
27839
27831
|
}, /*#__PURE__*/React__default.createElement(Cluster, {
|
|
27840
27832
|
justify: "center",
|