oa-componentbook 1.0.1-stage.7 → 1.0.1-stage.8
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.
|
@@ -27,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
27
27
|
* @param {string} fontColor - The color of the text.
|
|
28
28
|
* @param {object} iconConfig - Configuration for the icon.
|
|
29
29
|
* @param {string} title - The title to be displayed.
|
|
30
|
+
* @param {string} borderColor - The border color of the component.
|
|
30
31
|
*
|
|
31
32
|
* @returns {ReactElement} A styled component with the specified properties.
|
|
32
33
|
*/
|
|
@@ -37,7 +38,8 @@ function CustomInfo(_ref) {
|
|
|
37
38
|
description,
|
|
38
39
|
fontColor,
|
|
39
40
|
iconConfig,
|
|
40
|
-
title
|
|
41
|
+
title,
|
|
42
|
+
borderColor
|
|
41
43
|
} = _ref;
|
|
42
44
|
/**
|
|
43
45
|
* Renders the icon based on the presence of a title.
|
|
@@ -65,7 +67,8 @@ function CustomInfo(_ref) {
|
|
|
65
67
|
}, renderIcon()) : renderIcon();
|
|
66
68
|
};
|
|
67
69
|
return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
|
|
68
|
-
$color: color
|
|
70
|
+
$color: color,
|
|
71
|
+
$borderColor: borderColor
|
|
69
72
|
}, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
70
73
|
color: fontColor,
|
|
71
74
|
typography: "type-t2-700"
|
|
@@ -96,7 +99,8 @@ CustomInfo.propTypes = {
|
|
|
96
99
|
position: _propTypes.default.oneOf(['left', 'right']),
|
|
97
100
|
tooltipText: _propTypes.default.string
|
|
98
101
|
}),
|
|
99
|
-
title: _propTypes.default.string
|
|
102
|
+
title: _propTypes.default.string,
|
|
103
|
+
borderColor: _propTypes.default.string
|
|
100
104
|
};
|
|
101
105
|
CustomInfo.defaultProps = {
|
|
102
106
|
buttonConfig: {
|
|
@@ -110,5 +114,6 @@ CustomInfo.defaultProps = {
|
|
|
110
114
|
},
|
|
111
115
|
fontColor: 'primary-content',
|
|
112
116
|
title: '',
|
|
113
|
-
description: ''
|
|
117
|
+
description: '',
|
|
118
|
+
borderColor: ''
|
|
114
119
|
};
|
|
@@ -8,8 +8,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _templateObject, _templateObject2, _templateObject3;
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
12
|
-
const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
11
|
+
const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
12
|
+
const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
13
13
|
const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
|
|
14
14
|
as: 'section'
|
|
15
|
-
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 12px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n \n button {\n margin-left: 8px;\n }
|
|
15
|
+
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 12px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n border: 1px solid var(--color-", ");\n\n button {\n margin-left: 8px;\n }\n"])), props => props.$color, props => props.$borderColor);
|