sag_components 1.0.570 → 1.0.571

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 (9) hide show
  1. package/dist/stories/components/FilterButton.js +47 -0
  2. package/dist/stories/components/FilterButton.style.js +12 -0
  3. package/dist/stories/components/SearchInput.js +36 -0
  4. package/dist/stories/components/SearchInput.style.js +12 -0
  5. package/dist/stories/components/TabMenu.js +11 -2
  6. package/dist/stories/components/TabMenu.style.js +7 -6
  7. package/dist/stories/components/icons/FilterIcon.js +27 -0
  8. package/dist/stories/components/icons/SearchIcon.js +27 -0
  9. package/package.json +1 -1
package/dist/stories/components/FilterButton.js ADDED
@@ -0,0 +1,47 @@
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.FilterButton = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _FilterButton = require("./FilterButton.style");
10
+ var _FilterIcon = require("./icons/FilterIcon");
11
+ const FilterButton = props => {
12
+ const {
13
+ color,
14
+ height,
15
+ buttonText,
16
+ iconWidth,
17
+ iconHeight,
18
+ disabled,
19
+ onButtonClick
20
+ } = props;
21
+ const onClickHandler = event => {
22
+ onButtonClick(event);
23
+ };
24
+ return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
25
+ height: height,
26
+ color: color,
27
+ disabled: disabled,
28
+ onClick: event => {
29
+ onClickHandler(event);
30
+ }
31
+ }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
32
+ width: iconWidth,
33
+ height: iconHeight,
34
+ color: color
35
+ }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
36
+ };
37
+ exports.FilterButton = FilterButton;
38
+ var _default = exports.default = FilterButton;
39
+ FilterButton.defaultProps = {
40
+ buttonText: 'Filter',
41
+ height: '40px',
42
+ color: '#212121',
43
+ iconHeight: 12,
44
+ iconWidth: 12,
45
+ disabled: false,
46
+ onButtonClick: () => {}
47
+ };
package/dist/stories/components/FilterButton.style.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.SpanText = exports.FilterButtonWrapper = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2;
11
+ const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid #B1B1B1;\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color);
12
+ const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/SearchInput.js ADDED
@@ -0,0 +1,36 @@
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 = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _SearchInput = require("./SearchInput.style");
10
+ var _SearchIcon = _interopRequireDefault(require("./icons/SearchIcon"));
11
+ const SearchInput = props => {
12
+ const {
13
+ placeholder,
14
+ onTyping,
15
+ width,
16
+ height
17
+ } = props;
18
+ const handleInputChange = e => {
19
+ onTyping(e);
20
+ };
21
+ return /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldContainer, {
22
+ width: width
23
+ }, /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldInput, {
24
+ type: "search",
25
+ height: height,
26
+ placeholder: placeholder,
27
+ onChange: handleInputChange
28
+ }), /*#__PURE__*/_react.default.createElement(_SearchIcon.default, null));
29
+ };
30
+ var _default = exports.default = SearchInput;
31
+ SearchInput.defaultProps = {
32
+ placeholder: 'Search',
33
+ width: '100%',
34
+ height: '40px',
35
+ onTyping: () => {}
36
+ };
package/dist/stories/components/SearchInput.style.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TextFieldInput = exports.TextFieldContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2;
11
+ const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: ", ";\n > svg {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 10px;\n \n }\n"])), props => props.width);
12
+ const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n padding: 6px 16px;\n border-radius: 8px;\n border: 1px solid #B1B1B1;\n background: transparent;\n text-indent: 14px;\n &:hover, \n &:focus {\n border: 1px solid #212121;\n }\n &::placeholder {\n color: #B1B1B1;\n }\n"])), props => props.height);
package/dist/stories/components/TabMenu.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
4
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
@@ -7,10 +8,14 @@ Object.defineProperty(exports, "__esModule", {
7
8
  exports.default = void 0;
8
9
  var _react = _interopRequireWildcard(require("react"));
9
10
  var _TabMenu = require("./TabMenu.style");
11
+ var _SearchInput = _interopRequireDefault(require("./SearchInput"));
12
+ var _FilterButton = _interopRequireDefault(require("./FilterButton"));
10
13
  const TabMenu = props => {
11
14
  const {
12
15
  tabs,
13
16
  color,
17
+ showActions,
18
+ inputWidth,
14
19
  onTabChange
15
20
  } = props;
16
21
  const [activeTab, setActiveTab] = (0, _react.useState)(1);
@@ -29,16 +34,20 @@ const TabMenu = props => {
29
34
  color: color,
30
35
  width: "".concat(100 / tabs.length, "%"),
31
36
  role: "presentation"
32
- }))), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
37
+ }))), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, null, /*#__PURE__*/_react.default.createElement(_FilterButton.default, null), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
38
+ width: inputWidth
39
+ })), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
33
40
  id: "tabsBody"
34
41
  }, tabs[activeTab].content));
35
42
  };
36
43
  TabMenu.defaultProps = {
37
44
  color: '#229E38',
45
+ showActions: true,
46
+ inputWidth: '100%',
38
47
  tabs: [
39
48
  // { title: 'Tab 1', content: <ReportTable /> },
40
49
  {
41
- title: 'longggggg',
50
+ title: 'longggg',
42
51
  content: 'Content for Tab 2'
43
52
  }, {
44
53
  title: 'short',
package/dist/stories/components/TabMenu.style.js CHANGED
@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlider = exports.Nav = exports.Body = void 0;
7
+ exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlider = exports.Nav = exports.Body = exports.ActionsWrapper = 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, _templateObject4, _templateObject5, _templateObject6;
11
- const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n"])));
12
- const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n display: inline-block;\n"])));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
+ const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 10px;\n"])));
12
+ const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n display: inline-block;\n"])));
13
13
  const Tabs = exports.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n"])));
14
14
  const Tab = exports.Tab = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n position: relative;\n text-align: center;\n flex: 1;\n padding: 8px 12px;\n font-size: 16px;\n color: #000000;\n &.active {\n font-weight: 600;\n color: ", ";\n }\n"])), props => props.color);
15
- const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #EAEAEA;\n &::before {\n content: '';\n position: absolute;\n left: 0;\n z-index: 1;\n width: ", ";\n height: 2px;\n background-color: ", ";\n transform: translateX(calc(100% * ", "));\n transition: transform .35s ease;\n }\n"])), props => props.width, props => props.color, props => props.activeTab);
16
- const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 24px 0;\n "])));
15
+ const PresentationSlider = exports.PresentationSlider = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: #EAEAEA;\n &::before {\n content: '';\n position: absolute;\n left: 0;\n z-index: 1;\n width: ", ";\n height: 2px;\n background-color: ", ";\n transform: translateX(calc(100% * ", "));\n transition: transform .35s ease;\n }\n"])), props => props.width, props => props.color, props => props.activeTab);
16
+ const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 24px 0;\n width: 100%;\n"])));
17
+ const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 10px;\n"])));
package/dist/stories/components/icons/FilterIcon.js ADDED
@@ -0,0 +1,27 @@
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.FilterIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ const FilterIcon = _ref => {
10
+ let {
11
+ width = '12',
12
+ height = '12',
13
+ color = '#212121'
14
+ } = _ref;
15
+ return /*#__PURE__*/_react.default.createElement("svg", {
16
+ width: width,
17
+ height: height,
18
+ viewBox: "0 0 12 12",
19
+ fill: "none",
20
+ xmlns: "http://www.w3.org/2000/svg"
21
+ }, /*#__PURE__*/_react.default.createElement("path", {
22
+ d: "M0 1.73438C0 1.19531 0.421875 0.75 0.960938 0.75H11.0156C11.5547 0.75 12 1.19531 12 1.73438C12 1.96875 11.9062 2.17969 11.7656 2.34375L7.875 7.14844V10.5C7.875 10.9219 7.52344 11.25 7.10156 11.25C6.9375 11.25 6.77344 11.2031 6.63281 11.0859L4.47656 9.375C4.24219 9.1875 4.125 8.92969 4.125 8.64844V7.14844L0.210938 2.34375C0.0703125 2.17969 0 1.96875 0 1.73438ZM1.28906 1.875L5.10938 6.58594C5.20312 6.70312 5.25 6.82031 5.25 6.9375V8.55469L6.75 9.75V6.9375C6.75 6.82031 6.77344 6.70312 6.86719 6.58594L10.7109 1.875H1.28906Z",
23
+ fill: color
24
+ }));
25
+ };
26
+ exports.FilterIcon = FilterIcon;
27
+ var _default = exports.default = FilterIcon;
package/dist/stories/components/icons/SearchIcon.js ADDED
@@ -0,0 +1,27 @@
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.SearchIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ const SearchIcon = _ref => {
10
+ let {
11
+ width = '13',
12
+ height = '13',
13
+ color = '#212121'
14
+ } = _ref;
15
+ return /*#__PURE__*/_react.default.createElement("svg", {
16
+ width: width,
17
+ height: height,
18
+ viewBox: "0 0 13 13",
19
+ fill: "none",
20
+ xmlns: "http://www.w3.org/2000/svg"
21
+ }, /*#__PURE__*/_react.default.createElement("path", {
22
+ d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
23
+ fill: color
24
+ }));
25
+ };
26
+ exports.SearchIcon = SearchIcon;
27
+ var _default = exports.default = SearchIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.570",
3
+ "version": "1.0.571",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {