sag_components 1.0.687 → 1.0.688

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 (11) hide show
  1. package/dist/stories/components/Button.js +1 -0
  2. package/dist/stories/components/EventInfo.js +92 -0
  3. package/dist/stories/components/EventInfo.style.js +20 -0
  4. package/dist/stories/components/FilterButton.js +4 -10
  5. package/dist/stories/components/FilterButton.style.js +1 -1
  6. package/dist/stories/components/SagIconButton.js +2 -5
  7. package/dist/stories/components/SearchInput.js +2 -5
  8. package/dist/stories/components/TabMenu.js +18 -16
  9. package/dist/stories/components/TabMenu.style.js +5 -9
  10. package/dist/stories/components/icons/FilterIcon.js +7 -16
  11. package/package.json +1 -1
package/dist/stories/components/Button.js CHANGED
@@ -157,6 +157,7 @@ const Button = props => {
157
157
  type: "submit",
158
158
  width: width || null,
159
159
  height: height || (size === 'small' ? '33px' : '45px'),
160
+ disabled: disabled,
160
161
  text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
161
162
  background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
162
163
  border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
package/dist/stories/components/EventInfo.js ADDED
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
10
+ var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
11
+ var _SpotlightProductIcon = require("./icons/SpotlightProductIcon");
12
+ var _BannersDropdown = require("./BannersDropdown");
13
+ var _EventInfo = require("./EventInfo.style");
14
+ const EventInfo = props => {
15
+ const {
16
+ title,
17
+ subTitle,
18
+ productsData,
19
+ onSpotlightProductClick,
20
+ onClickBannersDropdown
21
+ } = props;
22
+ const [IsProductsListOpen, setIsProductsListOpen] = (0, _react.useState)(false);
23
+ const displayBannersDropdown = () => /*#__PURE__*/_react.default.createElement(_BannersDropdown.BannersDropdown, {
24
+ banners: [{
25
+ checked: true,
26
+ name: 'StopAndShop'
27
+ }, {
28
+ checked: true,
29
+ name: 'FoodLion'
30
+ }, {
31
+ checked: true,
32
+ name: 'GiantFood'
33
+ }, {
34
+ checked: true,
35
+ name: 'TheGiantCompany'
36
+ }, {
37
+ checked: true,
38
+ name: 'Hannaford'
39
+ }],
40
+ onClick: banners => {
41
+ onClickBannersDropdown({
42
+ banners
43
+ });
44
+ }
45
+ });
46
+ return /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoMainContainer, {
47
+ id: "EventInfoMainContainer"
48
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContainer, {
49
+ id: "EventInfoContainer"
50
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitleContainer, {
51
+ id: "EventInfoTitleContainer"
52
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoTitle, {
53
+ id: "EventInfoTitle"
54
+ }, title), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
55
+ id: "EventInfoSubTitle"
56
+ }, "|"), /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoSubTitle, {
57
+ id: "EventInfoSubTitle"
58
+ }, productsData ? productsData === null || productsData === void 0 ? void 0 : productsData.length : ''), displayBannersDropdown()), /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
59
+ id: "ProductButtonContainer",
60
+ onClick: () => {
61
+ setIsProductsListOpen(!IsProductsListOpen);
62
+ }
63
+ }, IsProductsListOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
64
+ color: "#212121"
65
+ }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
66
+ color: "#212121"
67
+ }))), IsProductsListOpen && /*#__PURE__*/_react.default.createElement(_EventInfo.EventInfoContentContainer, {
68
+ id: "EventInfoContentContainer"
69
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.ProductsTitle, {
70
+ id: "ProductsTitle"
71
+ }, subTitle), productsData === null || productsData === void 0 ? void 0 : productsData.map(item => /*#__PURE__*/_react.default.createElement(_EventInfo.ProductContainer, {
72
+ id: "ProductContainer"
73
+ }, /*#__PURE__*/_react.default.createElement(_EventInfo.Product, {
74
+ id: "Product"
75
+ }, item.label), item.ShowSpotlightProductButton ? /*#__PURE__*/_react.default.createElement(_EventInfo.ProductButtonContainer, {
76
+ id: "ProductButtonContainer",
77
+ background: "#F8CD00",
78
+ onClick: () => {
79
+ onSpotlightProductClick({
80
+ value: item.value,
81
+ label: item.label
82
+ });
83
+ }
84
+ }, /*#__PURE__*/_react.default.createElement(_SpotlightProductIcon.SpotlightProductIcon, null)) : ''))));
85
+ };
86
+ var _default = exports.default = EventInfo;
87
+ EventInfo.defaultProps = {
88
+ title: 'Products Variety',
89
+ subTitle: 'Product Name',
90
+ onSpotlightProductClick: () => {},
91
+ onClickBannersDropdown: () => {}
92
+ };
package/dist/stories/components/EventInfo.style.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ProductsTitle = exports.ProductContainer = exports.ProductButtonContainer = exports.Product = exports.EventInfoTitleContainer = exports.EventInfoTitle = exports.EventInfoSubTitle = exports.EventInfoMainContainer = exports.EventInfoContentContainer = exports.EventInfoContainer = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
+ const EventInfoMainContainer = exports.EventInfoMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin: 0;\n padding: 10px;\n border-radius: 12px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n"])));
12
+ const EventInfoContainer = exports.EventInfoContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 10px;\n"])));
13
+ const EventInfoTitleContainer = exports.EventInfoTitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin: 10px;\n gap: 15px;\n"])));
14
+ const EventInfoTitle = exports.EventInfoTitle = _styledComponents.default.h3(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 20px;\n\n margin: 0;\n"])));
15
+ const EventInfoSubTitle = exports.EventInfoSubTitle = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #757171;\n font-weight: 500;\n font-size: 20px;\n margin: 0;\n"])));
16
+ const EventInfoContentContainer = exports.EventInfoContentContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: 20px;\n line-height: 25px;\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n margin: 10px;\n padding: 10px 20px 20px 50px;\n"])));
17
+ const ProductsTitle = exports.ProductsTitle = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 14px;\n margin: 10px 0;\n"])));
18
+ const ProductContainer = exports.ProductContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border-bottom: 1px solid #00000010;\n width: 100%;\n gap: 20px;\n"])));
19
+ const Product = exports.Product = _styledComponents.default.h3(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n"])));
20
+ const ProductButtonContainer = exports.ProductButtonContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: ", ";\n border-radius: 12px;\n height: 25px;\n padding: 0 15px;\n user-select: none;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n gap: 10px;\n"])), props => props.background || '#ffffff');
package/dist/stories/components/FilterButton.js CHANGED
@@ -1,33 +1,29 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.FilterButton = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = _interopRequireDefault(require("react"));
9
9
  var _FilterButton = require("./FilterButton.style");
10
10
  var _FilterIcon = require("./icons/FilterIcon");
11
11
  const FilterButton = props => {
12
12
  const {
13
13
  color,
14
- activeColor,
15
14
  height,
16
15
  buttonText,
17
16
  iconWidth,
18
17
  iconHeight,
19
18
  disabled,
20
- openState,
21
19
  onButtonClick
22
20
  } = props;
23
- const [activeState, setActiveState] = (0, _react.useState)(openState);
24
21
  const onClickHandler = event => {
25
22
  onButtonClick(event);
26
- setActiveState(!activeState);
27
23
  };
28
24
  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
29
25
  height: height,
30
- color: activeState ? activeColor : color,
26
+ color: color,
31
27
  disabled: disabled,
32
28
  onClick: event => {
33
29
  onClickHandler(event);
@@ -35,7 +31,7 @@ const FilterButton = props => {
35
31
  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
36
32
  width: iconWidth,
37
33
  height: iconHeight,
38
- color: activeState ? activeColor : color
34
+ color: color
39
35
  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
40
36
  };
41
37
  exports.FilterButton = FilterButton;
@@ -44,10 +40,8 @@ FilterButton.defaultProps = {
44
40
  buttonText: 'Filter',
45
41
  height: '40px',
46
42
  color: '#212121',
47
- activeColor: '#229E38',
48
43
  iconHeight: 12,
49
44
  iconWidth: 12,
50
- openState: false,
51
45
  disabled: false,
52
46
  onButtonClick: () => {}
53
47
  };
package/dist/stories/components/FilterButton.style.js CHANGED
@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
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 ", ";\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, props => props.color);
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
12
  const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
package/dist/stories/components/SagIconButton.js CHANGED
@@ -28,8 +28,7 @@ const SagIconButton = props => {
28
28
  iconHeight,
29
29
  disabled,
30
30
  openState,
31
- onButtonClick,
32
- className
31
+ onButtonClick
33
32
  } = props;
34
33
  const [activeState, setActiveState] = (0, _react.useState)(openState);
35
34
  const onClickHandler = event => {
@@ -101,7 +100,6 @@ const SagIconButton = props => {
101
100
  }
102
101
  };
103
102
  return /*#__PURE__*/_react.default.createElement(_SagIconButton.SagIconButtonWrapper, {
104
- className: className,
105
103
  height: height,
106
104
  color: activeState ? activeColor : color,
107
105
  backgroundColor: backgroundColor,
@@ -109,12 +107,11 @@ const SagIconButton = props => {
109
107
  onClick: event => {
110
108
  onClickHandler(event);
111
109
  }
112
- }, getIcon(iconName), buttonText && /*#__PURE__*/_react.default.createElement(_SagIconButton.SpanText, null, buttonText));
110
+ }, getIcon(iconName), /*#__PURE__*/_react.default.createElement(_SagIconButton.SpanText, null, buttonText));
113
111
  };
114
112
  exports.SagIconButton = SagIconButton;
115
113
  var _default = exports.default = SagIconButton;
116
114
  SagIconButton.defaultProps = {
117
- className: '',
118
115
  iconName: 'filter',
119
116
  buttonText: 'Filter',
120
117
  height: '40px',
package/dist/stories/components/SearchInput.js CHANGED
@@ -13,14 +13,12 @@ const SearchInput = props => {
13
13
  placeholder,
14
14
  onTyping,
15
15
  width,
16
- height,
17
- className
16
+ height
18
17
  } = props;
19
18
  const handleInputChange = e => {
20
19
  onTyping(e);
21
20
  };
22
21
  return /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldContainer, {
23
- className: className,
24
22
  width: width
25
23
  }, /*#__PURE__*/_react.default.createElement(_SearchInput.TextFieldInput, {
26
24
  type: "search",
@@ -34,6 +32,5 @@ SearchInput.defaultProps = {
34
32
  placeholder: 'Search',
35
33
  width: '100%',
36
34
  height: '40px',
37
- onTyping: () => {},
38
- className: ''
35
+ onTyping: () => {}
39
36
  };
package/dist/stories/components/TabMenu.js CHANGED
@@ -14,7 +14,6 @@ const TabMenu = props => {
14
14
  const {
15
15
  tabs,
16
16
  color,
17
- children,
18
17
  showActions,
19
18
  showFilterButton,
20
19
  showViewOptionsButton,
@@ -39,19 +38,14 @@ const TabMenu = props => {
39
38
  }, [currentTab]);
40
39
  return /*#__PURE__*/_react.default.createElement(_TabMenu.TabMenuContainer, {
41
40
  className: className
42
- }, showFilterButton && /*#__PURE__*/_react.default.createElement(_TabMenu.SagIconButtonWrap, {
43
- id: "filterButton",
44
- iconName: "Filter",
45
- buttonText: "",
46
- openState: panelIsOpen,
47
- activeColor: activeColor,
48
- onButtonClick: onFilterButtonClick
49
- }), /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, {
41
+ }, /*#__PURE__*/_react.default.createElement(_TabMenu.Nav, {
50
42
  className: "Nav"
51
43
  }, /*#__PURE__*/_react.default.createElement(_TabMenu.Tabs, {
52
44
  className: "Tabs"
53
- }, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab, {
54
- key: tab.title.replace(/\s/g, ''),
45
+ }, tabs.length > 1 ? tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_TabMenu.Tab
46
+ // eslint-disable-next-line react/no-array-index-key
47
+ , {
48
+ key: index,
55
49
  isActive: index === activeTab,
56
50
  className: "tab ".concat(index === activeTab ? 'active' : ''),
57
51
  color: color,
@@ -67,16 +61,24 @@ const TabMenu = props => {
67
61
  color: color,
68
62
  width: "".concat(100 / tabs.length, "%"),
69
63
  role: "presentation"
70
- }))), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, {
71
- className: "ActionsWrapper"
72
- }, showLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Label, {
64
+ }))), showLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TabMenu.Label, {
73
65
  className: "Label"
74
66
  }, /*#__PURE__*/_react.default.createElement("span", null, "Platform: "), "Total"), /*#__PURE__*/_react.default.createElement("span", {
75
67
  className: "separator"
76
- }, "|")), children || '', showViewOptionsButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
68
+ }, "|")), showActions && /*#__PURE__*/_react.default.createElement(_TabMenu.ActionsWrapper, {
69
+ className: "ActionsWrapper"
70
+ }, showFilterButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
71
+ id: "filterButton",
72
+ iconName: "Filter",
73
+ buttonText: "Filter",
74
+ openState: panelIsOpen,
75
+ activeColor: activeColor,
76
+ onButtonClick: onFilterButtonClick
77
+ }), showViewOptionsButton && /*#__PURE__*/_react.default.createElement(_SagIconButton.default, {
78
+ id: "viewIndicatorButton",
77
79
  iconName: "ViewIndicator",
78
80
  buttonText: "View Indicator"
79
- }), showSearchInput && /*#__PURE__*/_react.default.createElement(_TabMenu.SearchInputWrap, {
81
+ }), showSearchInput && /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
80
82
  width: inputWidth,
81
83
  onTyping: e => onSearchFieldTyping(e)
82
84
  })), /*#__PURE__*/_react.default.createElement(_TabMenu.Body, {
package/dist/stories/components/TabMenu.style.js CHANGED
@@ -4,19 +4,15 @@ 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.SearchInputWrap = exports.SagIconButtonWrap = exports.PresentationSlider = exports.Nav = exports.Label = exports.Body = exports.ActionsWrapper = void 0;
7
+ exports.Tabs = exports.TabMenuContainer = exports.Tab = exports.PresentationSlider = exports.Nav = exports.Label = 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 _SagIconButton = _interopRequireDefault(require("./SagIconButton"));
11
- var _SearchInput = _interopRequireDefault(require("./SearchInput"));
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
13
- const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n align-items: center;\n"])));
14
- 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, _templateObject8;
11
+ const TabMenuContainer = exports.TabMenuContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n"])));
12
+ const Nav = exports.Nav = _styledComponents.default.nav(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([" \n display: inline-block;\n margin-right: auto;\n"])));
15
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"])));
16
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);
17
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);
18
16
  const Body = exports.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 24px 0;\n width: 100%;\n"])));
19
17
  const Label = exports.Label = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 400;\n padding: 8px;\n color: #5a5a5a;\n background-color: #E7E7E7;\n border-radius: 4px;\n > span {\n font-weight: 500;\n }\n ~ span {\n margin: 0 24px;\n font-weight: 400;\n }\n"])));
20
- const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n"])));
21
- const SagIconButtonWrap = exports.SagIconButtonWrap = (0, _styledComponents.default)(_SagIconButton.default)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n"])));
22
- const SearchInputWrap = exports.SearchInputWrap = (0, _styledComponents.default)(_SearchInput.default)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: auto;\n"])));
18
+ const ActionsWrapper = exports.ActionsWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 10px;\n"])));
package/dist/stories/components/icons/FilterIcon.js CHANGED
@@ -8,29 +8,20 @@ exports.default = exports.FilterIcon = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  const FilterIcon = _ref => {
10
10
  let {
11
- width = '17',
12
- height = '17',
11
+ width = '12',
12
+ height = '12',
13
13
  color = '#212121'
14
14
  } = _ref;
15
15
  return /*#__PURE__*/_react.default.createElement("svg", {
16
- width: "19",
17
- height: "19",
18
- viewBox: "0 0 17 17",
16
+ width: width,
17
+ height: height,
18
+ viewBox: "0 0 12 12",
19
19
  fill: "none",
20
20
  xmlns: "http://www.w3.org/2000/svg"
21
- }, /*#__PURE__*/_react.default.createElement("g", {
22
- id: "Filter Active"
23
21
  }, /*#__PURE__*/_react.default.createElement("path", {
24
- id: "icon",
25
- d: "M2.5 4.48438C2.5 3.94531 2.92188 3.5 3.46094 3.5H13.5156C14.0547 3.5 14.5 3.94531 14.5 4.48438C14.5 4.71875 14.4062 4.92969 14.2656 5.09375L10.375 9.89844V13.25C10.375 13.6719 10.0234 14 9.60156 14C9.4375 14 9.27344 13.9531 9.13281 13.8359L6.97656 12.125C6.74219 11.9375 6.625 11.6797 6.625 11.3984V9.89844L2.71094 5.09375C2.57031 4.92969 2.5 4.71875 2.5 4.48438ZM3.78906 4.625L7.60938 9.33594C7.70312 9.45312 7.75 9.57031 7.75 9.6875V11.3047L9.25 12.5V9.6875C9.25 9.57031 9.27344 9.45312 9.36719 9.33594L13.2109 4.625H3.78906Z",
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",
26
23
  fill: color
27
- }), /*#__PURE__*/_react.default.createElement("circle", {
28
- id: "Ellipse 8",
29
- cx: "13.5",
30
- cy: "4.5",
31
- r: "3",
32
- fill: color
33
- })));
24
+ }));
34
25
  };
35
26
  exports.FilterIcon = FilterIcon;
36
27
  var _default = exports.default = FilterIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.687",
3
+ "version": "1.0.688",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {