sag_components 1.0.377 → 1.0.378

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/dist/stories/components/IconButton.js +51 -30
  2. package/dist/stories/components/IconButton.style.js +8 -7
  3. package/dist/stories/components/icons/DocumentIcon.js +48 -0
  4. package/dist/stories/components/icons/DownloadIcon.js +6 -5
  5. package/package.json +1 -1
package/dist/stories/components/IconButton.js CHANGED
@@ -1,69 +1,80 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.default = exports.IconButton = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
10
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
11
10
  var _react = _interopRequireWildcard(require("react"));
12
11
  var _DownloadIcon = require("./icons/DownloadIcon");
12
+ var _DocumentIcon = require("./icons/DocumentIcon");
13
13
  var _BellIcon = require("./icons/BellIcon");
14
14
  var _ExitIcon = require("./icons/ExitIcon");
15
15
  var _FlyIcon = require("./icons/FlyIcon");
16
16
  var _MaintenanceIcon = require("./icons/MaintenanceIcon");
17
17
  var _EyeIcon = require("./icons/EyeIcon");
18
18
  var _IconButton = require("./IconButton.style");
19
- var _excluded = ["buttonText", "iconName", "width", "height", "disabled", "onClick"];
20
19
  /* IconButton */
21
- var IconButton = exports.IconButton = function IconButton(_ref) {
22
- var buttonText = _ref.buttonText,
23
- iconName = _ref.iconName,
24
- _ref$width = _ref.width,
25
- width = _ref$width === void 0 ? 30 : _ref$width,
26
- _ref$height = _ref.height,
27
- height = _ref$height === void 0 ? 30 : _ref$height,
28
- _ref$disabled = _ref.disabled,
29
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
30
- onClick = _ref.onClick,
31
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
20
+ var IconButton = exports.IconButton = function IconButton(props) {
21
+ var buttonText = props.buttonText,
22
+ iconName = props.iconName,
23
+ IconColor = props.IconColor,
24
+ backgroundColor = props.backgroundColor,
25
+ borderColor = props.borderColor,
26
+ borderRadius = props.borderRadius,
27
+ iconWidth = props.iconWidth,
28
+ iconHeight = props.iconHeight,
29
+ disabled = props.disabled,
30
+ onClick = props.onClick;
32
31
  var _useState = (0, _react.useState)(false),
33
32
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
34
33
  mouseDownPressed = _useState2[0],
35
34
  setMouseDownPressed = _useState2[1];
36
- var getIcon = function getIcon(iconName, iconHeight, iconWidth) {
37
- switch (iconName) {
35
+ var getIcon = function getIcon(icon) {
36
+ switch (icon) {
38
37
  case 'download':
39
38
  return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
40
39
  height: iconHeight,
41
- width: iconWidth
40
+ width: iconWidth,
41
+ color: IconColor
42
+ });
43
+ case 'document':
44
+ return /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
45
+ height: iconHeight,
46
+ width: iconWidth,
47
+ color: IconColor
42
48
  });
43
49
  case 'fly':
44
50
  return /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
45
51
  height: iconHeight,
46
- width: iconWidth
52
+ width: iconWidth,
53
+ color: IconColor
47
54
  });
48
55
  case 'bell':
49
56
  return /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
50
57
  height: iconHeight,
51
- width: iconWidth
58
+ width: iconWidth,
59
+ color: IconColor
52
60
  });
53
61
  case 'maintenance':
54
62
  return /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
55
63
  height: iconHeight,
56
- width: iconWidth
64
+ width: iconWidth,
65
+ color: IconColor
57
66
  });
58
67
  case 'exit':
59
68
  return /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
60
69
  height: iconHeight,
61
- width: iconWidth
70
+ width: iconWidth,
71
+ color: IconColor
62
72
  });
63
73
  case 'eye':
64
74
  return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
65
75
  height: iconHeight,
66
- width: iconWidth
76
+ width: iconWidth,
77
+ color: IconColor
67
78
  });
68
79
  default:
69
80
  return '';
@@ -91,19 +102,29 @@ var IconButton = exports.IconButton = function IconButton(_ref) {
91
102
  if (disabled) return;
92
103
  onClick(event);
93
104
  };
94
- return /*#__PURE__*/_react.default.createElement(_IconButton.ControlsContainer, {
95
- height: height,
96
- width: width
97
- }, /*#__PURE__*/_react.default.createElement(_IconButton.ControlsSubContainer, {
105
+ return /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
98
106
  className: getClassNameExtention(),
99
- height: height,
100
- width: width,
107
+ backgroundColor: backgroundColor,
108
+ borderColor: borderColor,
109
+ borderRadius: borderRadius,
101
110
  onMouseDown: onMouseDownHandler,
102
111
  onMouseUp: onMouseUpHandler,
103
112
  onPointerOut: onPointerOutHandler,
104
113
  onClick: function onClick(event) {
105
114
  onClickHandler(event);
106
115
  }
107
- }, (buttonText !== '' || buttonText !== undefined) && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText), getIcon(iconName, height, width)));
116
+ }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText));
108
117
  };
109
- var _default = exports.default = IconButton;
118
+ var _default = exports.default = IconButton;
119
+ IconButton.defaultProps = {
120
+ buttonText: '',
121
+ iconName: 'eye',
122
+ IconColor: '#212121',
123
+ backgroundColor: '#229E38',
124
+ borderColor: '#B1B1B1',
125
+ borderRadius: '50%',
126
+ iconHeight: 18,
127
+ iconWidth: 18,
128
+ disabled: false,
129
+ onClick: function onClick() {}
130
+ };
package/dist/stories/components/IconButton.style.js CHANGED
@@ -4,14 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.SpanText = exports.ControlsSubContainer = exports.ControlsContainer = void 0;
7
+ exports.SpanText = exports.IconButtonContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3;
11
- var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 100px;\n width: ", ";\n height: ", ";\n"])), function (props) {
12
- return props.width.toString().concat('', 'px');
10
+ var _templateObject, _templateObject2;
11
+ var IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 12px 20px; \n border-radius: ", ";\n border: 1px solid ", ";\n background: ", ";\n &:hover, &:focus {\n cursor: pointer;\n background-color: #e7f0ff;\n }\n &.disabled {\n background-color: #ccc;\n }\n &.mouseDownPressed {\n margin: 1px 0;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n }\n"])), function (props) {
12
+ return props.borderRadius;
13
13
  }, function (props) {
14
- return props.height.toString().concat('', 'px');
14
+ return props.borderColor.toString();
15
+ }, function (props) {
16
+ return props.backgroundColor.toString();
15
17
  });
16
- var ControlsSubContainer = exports.ControlsSubContainer = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 2px 0 2px; \n border: none;\n background: transparent;\n &:hover {\n cursor: pointer;\n background-color: #e7f0ff;\n }\n &.disabled {\n background-color: #ccc;\n }\n &.mouseDownPressed {\n margin: 1px 0 1px; \n box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n }\n"])));
17
- var SpanText = exports.SpanText = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
18
+ var SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/icons/DocumentIcon.js ADDED
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.DocumentIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var DocumentIcon = exports.DocumentIcon = function DocumentIcon(_ref) {
10
+ var _ref$width = _ref.width,
11
+ width = _ref$width === void 0 ? '19' : _ref$width,
12
+ _ref$height = _ref.height,
13
+ height = _ref$height === void 0 ? '20' : _ref$height,
14
+ _ref$color = _ref.color,
15
+ color = _ref$color === void 0 ? '#212121' : _ref$color;
16
+ return /*#__PURE__*/_react.default.createElement("svg", {
17
+ xmlns: "http://www.w3.org/2000/svg",
18
+ width: width,
19
+ height: height,
20
+ viewBox: "0 0 20 19",
21
+ fill: "none"
22
+ }, /*#__PURE__*/_react.default.createElement("path", {
23
+ d: "M10.5156 17.5H1.51563C0.963341 17.5 0.515625 17.0523 0.515625 16.5V1.5C0.515625 0.947715 0.96334 0.5 1.51563 0.5H13.5156C14.0679 0.5 14.5156 0.947715 14.5156 1.5V5.5",
24
+ stroke: color,
25
+ strokeLinecap: "round"
26
+ }), /*#__PURE__*/_react.default.createElement("path", {
27
+ d: "M3.51562 5.5L9.51563 5.5",
28
+ stroke: color,
29
+ strokeLinecap: "round"
30
+ }), /*#__PURE__*/_react.default.createElement("path", {
31
+ d: "M3.51562 8.5H6.51563",
32
+ stroke: color,
33
+ strokeLinecap: "round"
34
+ }), /*#__PURE__*/_react.default.createElement("path", {
35
+ d: "M3.51562 11.5H5.51563",
36
+ stroke: color,
37
+ strokeLinecap: "round"
38
+ }), /*#__PURE__*/_react.default.createElement("circle", {
39
+ cx: "12.3866",
40
+ cy: "11.371",
41
+ r: "4.12098",
42
+ fill: "transparent"
43
+ }), /*#__PURE__*/_react.default.createElement("path", {
44
+ d: "M16.5068 11.3703C16.5068 9.91856 15.7107 8.56049 14.4464 7.81122C13.1585 7.08537 11.5898 7.08537 10.3254 7.81122C9.03754 8.56049 8.26489 9.91856 8.26489 11.3703C8.26489 12.8454 9.03754 14.2034 10.3254 14.9527C11.5898 15.6786 13.1585 15.6786 14.4464 14.9527C15.7107 14.2034 16.5068 12.8454 16.5068 11.3703ZM15.5469 15.0698C14.704 15.819 13.5801 16.2405 12.3859 16.2405C9.69315 16.2405 7.51562 14.0629 7.51562 11.3703C7.51562 8.701 9.69315 6.5 12.3859 6.5C15.0551 6.5 17.2561 8.701 17.2561 11.3703C17.2561 12.5878 16.8112 13.6883 16.0854 14.5547L19.3869 17.8561C19.5273 17.9966 19.5273 18.2542 19.3869 18.3947C19.2463 18.5351 18.9888 18.5351 18.8483 18.3947L15.5469 15.0698Z",
45
+ fill: color
46
+ }));
47
+ };
48
+ var _default = exports.default = DocumentIcon;
package/dist/stories/components/icons/DownloadIcon.js CHANGED
@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = exports.DownloadIcon = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var DownloadIcon = exports.DownloadIcon = function DownloadIcon(_ref) {
10
- var clicked = _ref.clicked,
11
- _ref$width = _ref.width,
12
- width = _ref$width === void 0 ? "8" : _ref$width,
10
+ var _ref$width = _ref.width,
11
+ width = _ref$width === void 0 ? '8' : _ref$width,
13
12
  _ref$height = _ref.height,
14
- height = _ref$height === void 0 ? "9" : _ref$height;
13
+ height = _ref$height === void 0 ? '9' : _ref$height,
14
+ _ref$color = _ref.color,
15
+ color = _ref$color === void 0 ? '#212121' : _ref$color;
15
16
  return /*#__PURE__*/_react.default.createElement("svg", {
16
17
  width: width,
17
18
  height: height,
@@ -20,7 +21,7 @@ var DownloadIcon = exports.DownloadIcon = function DownloadIcon(_ref) {
20
21
  xmlns: "http://www.w3.org/2000/svg"
21
22
  }, /*#__PURE__*/_react.default.createElement("path", {
22
23
  d: "M9.57031 14.8438L3.94531 9.84375C3.67188 9.64844 3.67188 9.21875 3.90625 8.98438C4.10156 8.71094 4.53125 8.71094 4.76562 8.90625L9.375 13.0078V0.625C9.375 0.3125 9.64844 0 10 0C10.3125 0 10.625 0.3125 10.625 0.625V13.0078L15.1953 8.94531C15.4297 8.71094 15.8594 8.71094 16.0547 8.98438C16.2891 9.21875 16.2891 9.64844 16.0156 9.84375L10.3906 14.8438C10.2734 14.9609 10.1172 15 10 15C9.84375 15 9.6875 14.9609 9.57031 14.8438ZM17.5 12.5C18.8672 12.5 20 13.6328 20 15V17.5C20 18.9062 18.8672 20 17.5 20H2.5C1.09375 20 0 18.9062 0 17.5V15C0 13.6328 1.09375 12.5 2.5 12.5H4.375C4.6875 12.5 5 12.8125 5 13.125C5 13.4766 4.6875 13.75 4.375 13.75H2.5C1.79688 13.75 1.25 14.3359 1.25 15V17.5C1.25 18.2031 1.79688 18.75 2.5 18.75H17.5C18.1641 18.75 18.75 18.2031 18.75 17.5V15C18.75 14.3359 18.1641 13.75 17.5 13.75H15.625C15.2734 13.75 15 13.4766 15 13.125C15 12.8125 15.2734 12.5 15.625 12.5H17.5ZM17.1875 16.25C17.1875 16.7969 16.7578 17.1875 16.25 17.1875C15.7031 17.1875 15.3125 16.7969 15.3125 16.25C15.3125 15.7422 15.7031 15.3125 16.25 15.3125C16.7578 15.3125 17.1875 15.7422 17.1875 16.25Z",
23
- fill: "#1B30AA"
24
+ fill: color
24
25
  }));
25
26
  };
26
27
  var _default = exports.default = DownloadIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.377",
3
+ "version": "1.0.378",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {