beem-component 1.3.1 → 1.3.4
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/components/Accordion/Accordion.js +8 -8
- package/dist/components/Accordion/Accordion.stories.js +11 -1
- package/dist/components/ProgressRing/progressRing.js +0 -3
- package/package.json +1 -1
- package/src/App.js +5 -0
- package/src/lib/components/Accordion/Accordion.js +5 -6
- package/src/lib/components/Accordion/Accordion.stories.js +6 -1
- package/src/lib/components/ProgressRing/progressRing.js +0 -1
|
@@ -19,7 +19,7 @@ var _iconStyles = require("../iconStyles");
|
|
|
19
19
|
|
|
20
20
|
var _icons = require("@material-ui/icons");
|
|
21
21
|
|
|
22
|
-
var _excluded = ["children", "disabled", "expandIcon"],
|
|
22
|
+
var _excluded = ["children", "disabled", "expandIcon", "Open"],
|
|
23
23
|
_excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
|
|
24
24
|
|
|
25
25
|
var _templateObject, _templateObject2, _templateObject3;
|
|
@@ -61,9 +61,9 @@ var Dropdown = function Dropdown(value, rest) {
|
|
|
61
61
|
|
|
62
62
|
if (!value.expandIcon) {
|
|
63
63
|
return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
|
|
64
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)
|
|
65
|
-
}, rest)) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
|
|
66
64
|
icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowUp, null)
|
|
65
|
+
}, rest)) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
|
|
66
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)
|
|
67
67
|
}, rest));
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -74,9 +74,7 @@ var Dropdown = function Dropdown(value, rest) {
|
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: row;\n
|
|
78
|
-
/* padding: 0.571rem; */
|
|
79
|
-
, _colors.BmPrimaryWhite);
|
|
77
|
+
var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: row;\n padding: 0.571rem 1.143rem;\n background: ", ";\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n"])), _colors.BmPrimaryWhite);
|
|
80
78
|
|
|
81
79
|
var BmAccordionDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n"])));
|
|
82
80
|
|
|
@@ -86,9 +84,10 @@ var BmAccordion = function BmAccordion(_ref) {
|
|
|
86
84
|
var children = _ref.children,
|
|
87
85
|
disabled = _ref.disabled,
|
|
88
86
|
expandIcon = _ref.expandIcon,
|
|
87
|
+
Open = _ref.Open,
|
|
89
88
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
90
89
|
|
|
91
|
-
var _useState = (0, _react.useState)(false),
|
|
90
|
+
var _useState = (0, _react.useState)(Open ? true : false),
|
|
92
91
|
_useState2 = _slicedToArray(_useState, 2),
|
|
93
92
|
toggle = _useState2[0],
|
|
94
93
|
setToggle = _useState2[1];
|
|
@@ -138,7 +137,8 @@ BmAccordion.propTypes = {
|
|
|
138
137
|
expandIcon: _propTypes.default.string,
|
|
139
138
|
leadingIcon: _propTypes.default.node,
|
|
140
139
|
trailingIcon: _propTypes.default.node,
|
|
141
|
-
disabled: _propTypes.default.bool
|
|
140
|
+
disabled: _propTypes.default.bool,
|
|
141
|
+
Open: _propTypes.default.bool
|
|
142
142
|
};
|
|
143
143
|
var _default = BmAccordion;
|
|
144
144
|
exports.default = _default;
|
|
@@ -40,6 +40,15 @@ var _default = {
|
|
|
40
40
|
type: "boolean"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
+
Open: {
|
|
44
|
+
description: "Accordion body will be open initially",
|
|
45
|
+
defaultValue: {
|
|
46
|
+
summary: false
|
|
47
|
+
},
|
|
48
|
+
control: {
|
|
49
|
+
type: "boolean"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
43
52
|
children: {
|
|
44
53
|
description: "Accordion Title Text",
|
|
45
54
|
defaultValue: {
|
|
@@ -75,7 +84,8 @@ var optionSize = {
|
|
|
75
84
|
|
|
76
85
|
var Accordion = function Accordion() {
|
|
77
86
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
|
|
78
|
-
disabled: (0, _addonKnobs.boolean)("disabled", false)
|
|
87
|
+
disabled: (0, _addonKnobs.boolean)("disabled", false),
|
|
88
|
+
Open: (0, _addonKnobs.boolean)("disabled", false)
|
|
79
89
|
}, /*#__PURE__*/_react.default.createElement(_Accordion.default.Title, {
|
|
80
90
|
leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Home, null),
|
|
81
91
|
trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
|
|
@@ -128,9 +128,6 @@ var BmProgressRing = function BmProgressRing(props) {
|
|
|
128
128
|
progress = props.progress,
|
|
129
129
|
variant = props.variant,
|
|
130
130
|
children = props.children;
|
|
131
|
-
console.log({
|
|
132
|
-
children: children
|
|
133
|
-
});
|
|
134
131
|
var initialMeasure = measurement(size);
|
|
135
132
|
circumference = initialMeasure.circumference;
|
|
136
133
|
radius = initialMeasure.radius;
|
package/package.json
CHANGED
package/src/App.js
CHANGED
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
BmIcons,
|
|
7
7
|
BmNoteBar,
|
|
8
8
|
BmTab,
|
|
9
|
+
BmAccordion,
|
|
9
10
|
MainWrapper,
|
|
10
11
|
} from "./lib/components";
|
|
11
12
|
import { GlobalStyle } from "./lib/components/globalStyles";
|
|
@@ -46,6 +47,10 @@ export const App = () => {
|
|
|
46
47
|
<BmNoteBar closeButton>
|
|
47
48
|
<p>Hello</p>
|
|
48
49
|
</BmNoteBar>
|
|
50
|
+
<BmAccordion Open>
|
|
51
|
+
<BmAccordion.Title>Hello</BmAccordion.Title>
|
|
52
|
+
<BmAccordion.Body>Helloooo</BmAccordion.Body>
|
|
53
|
+
</BmAccordion>
|
|
49
54
|
{/* </MainWrapper> */}
|
|
50
55
|
</>
|
|
51
56
|
);
|
|
@@ -13,9 +13,9 @@ const Dropdown = (value, rest) => {
|
|
|
13
13
|
}
|
|
14
14
|
if (!value.expandIcon) {
|
|
15
15
|
return value.toggle ? (
|
|
16
|
-
<BmIcons icon={<KeyboardArrowDown />} {...rest} />
|
|
17
|
-
) : (
|
|
18
16
|
<BmIcons icon={<KeyboardArrowUp />} {...rest} />
|
|
17
|
+
) : (
|
|
18
|
+
<BmIcons icon={<KeyboardArrowDown />} {...rest} />
|
|
19
19
|
);
|
|
20
20
|
}
|
|
21
21
|
if (value.expandIcon && value.expandIcon !== "none") {
|
|
@@ -26,9 +26,7 @@ const BmAccordionMenu = styled.div`
|
|
|
26
26
|
display: flex;
|
|
27
27
|
align-items: center;
|
|
28
28
|
flex-direction: row;
|
|
29
|
-
${"" /* padding: 0.571rem; */}
|
|
30
29
|
padding: 0.571rem 1.143rem;
|
|
31
|
-
border: 1px solid
|
|
32
30
|
background: ${BmPrimaryWhite};
|
|
33
31
|
> *:not(:last-child) {
|
|
34
32
|
margin-right: 0.5rem;
|
|
@@ -46,8 +44,8 @@ const BmAccordionWrapper = styled.div`
|
|
|
46
44
|
flex-direction: column;
|
|
47
45
|
`;
|
|
48
46
|
|
|
49
|
-
const BmAccordion = ({ children, disabled, expandIcon, ...rest }) => {
|
|
50
|
-
const [toggle, setToggle] = useState(false);
|
|
47
|
+
const BmAccordion = ({ children, disabled, expandIcon, Open, ...rest }) => {
|
|
48
|
+
const [toggle, setToggle] = useState(Open ? true : false);
|
|
51
49
|
|
|
52
50
|
return (
|
|
53
51
|
<BmAccordionWrapper>
|
|
@@ -99,6 +97,7 @@ BmAccordion.propTypes = {
|
|
|
99
97
|
leadingIcon: PropTypes.node,
|
|
100
98
|
trailingIcon: PropTypes.node,
|
|
101
99
|
disabled: PropTypes.bool,
|
|
100
|
+
Open: PropTypes.bool,
|
|
102
101
|
};
|
|
103
102
|
|
|
104
103
|
export default BmAccordion;
|
|
@@ -20,6 +20,11 @@ export default {
|
|
|
20
20
|
defaultValue: { summary: false },
|
|
21
21
|
control: { type: "boolean" },
|
|
22
22
|
},
|
|
23
|
+
Open: {
|
|
24
|
+
description: "Accordion body will be open initially",
|
|
25
|
+
defaultValue: { summary: false },
|
|
26
|
+
control: { type: "boolean" },
|
|
27
|
+
},
|
|
23
28
|
children: {
|
|
24
29
|
description: "Accordion Title Text",
|
|
25
30
|
defaultValue: { summary: undefined },
|
|
@@ -48,7 +53,7 @@ const optionSize = {
|
|
|
48
53
|
export const Accordion = () => {
|
|
49
54
|
return (
|
|
50
55
|
<div>
|
|
51
|
-
<BmAccordion disabled={boolean("disabled", false)}>
|
|
56
|
+
<BmAccordion disabled={boolean("disabled", false)} Open={boolean("disabled", false)}>
|
|
52
57
|
<BmAccordion.Title
|
|
53
58
|
leadingIcon={<Home />}
|
|
54
59
|
trailingIcon={<Favorite />}
|