sag_components 1.0.685 → 1.0.686

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 (10) hide show
  1. package/dist/stories/components/Button.js +30 -13
  2. package/dist/stories/components/Button.style.js +5 -4
  3. package/dist/stories/components/CampaignTool/Popup.js +18 -12
  4. package/dist/stories/components/DropdownMultiNew.style.js +2 -2
  5. package/dist/stories/components/DropdownSingleNew.style.js +3 -3
  6. package/dist/stories/components/EventInfo.js +92 -0
  7. package/dist/stories/components/EventInfo.style.js +20 -0
  8. package/dist/stories/components/FilterButton.js +4 -10
  9. package/dist/stories/components/FilterButton.style.js +1 -1
  10. package/package.json +1 -1
package/dist/stories/components/Button.js CHANGED
@@ -31,26 +31,25 @@ const Button = props => {
31
31
  hoverBackgroundColor,
32
32
  hoverBorderColor,
33
33
  disabledTextColor,
34
- // new
35
34
  disabledBackgroundColor,
36
- // new
37
35
  disabledBorderColor,
38
- // new
39
36
  leftIcon,
40
- // new
41
37
  rightIcon,
42
- // new
43
- onClick
44
- // radius, // removed
45
- // fontFamily, // removed
46
- // fontSize, // removed
47
- // shape, // removed
38
+ onClick,
39
+ isSubmitButton
48
40
  } = props;
49
41
  const [clicked, setClicked] = (0, _react.useState)(false);
50
42
  const [hover, setHover] = (0, _react.useState)(false);
43
+ const handleSubmitButtonOnClick = () => {
44
+ setClicked(true);
45
+ onClick("SubmitButtonOnClick: ".concat(text));
46
+ setTimeout(() => {
47
+ setClicked(false);
48
+ }, 300);
49
+ };
51
50
  const handleButtonClick = () => {
52
51
  setClicked(true);
53
- onClick(text);
52
+ onClick("ButtonOnClick: ".concat(text));
54
53
  setTimeout(() => {
55
54
  setClicked(false);
56
55
  }, 300);
@@ -152,7 +151,24 @@ const Button = props => {
152
151
  className: "ButtonContainer",
153
152
  width: width || null,
154
153
  height: height || (size === 'small' ? '33px' : '45px')
155
- }, /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
154
+ }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_Button.InputCommit, {
155
+ className: clicked ? 'InputCommit-clicked' : 'InputCommit',
156
+ value: text,
157
+ type: "submit",
158
+ width: width || null,
159
+ height: height || (size === 'small' ? '33px' : '45px'),
160
+ text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
161
+ background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
162
+ border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
163
+ hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
164
+ hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
165
+ hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
166
+ disabled_text_color: disabledTextColor || '#B1B1B1',
167
+ disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
168
+ disabled_border_color: disabledBorderColor || '#E3E4E5',
169
+ padding: size === 'small' ? '0 16px' : '0 20px',
170
+ onClick: !disabled ? handleSubmitButtonOnClick : null
171
+ }) : /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
156
172
  className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
157
173
  onMouseEnter: () => setHover(true),
158
174
  onMouseLeave: () => setHover(false),
@@ -195,5 +211,6 @@ Button.defaultProps = {
195
211
  disabledBorderColor: '',
196
212
  onClick: () => {},
197
213
  leftIcon: 'none',
198
- rightIcon: 'none'
214
+ rightIcon: 'none',
215
+ isSubmitButton: false
199
216
  };
package/dist/stories/components/Button.style.js CHANGED
@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.Label = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
7
+ exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = 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;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
11
11
  const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n //position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
12
- const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n flex-wrap: nowrap;\n overflow: hidden;\n width: ", ";\n height: ", "; \n color: ", "; \n border: ", "; \n border-radius: 12px;\n background-color: ", ";\n box-sizing: border-box;\n gap: 8px; \n padding: ", "; \n &:hover {\n background-color: ", ";\n border-color: ", "; \n color: ", "; \n box-shadow: ", ";\n cursor: ", ";\n }\n &.ButtonItem-clicked {\n background-color: ", ";\n //padding: 0 10px; \n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
12
+ const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n flex-wrap: nowrap;\n overflow: hidden;\n width: ", ";\n height: ", "; \n color: ", "; \n border: ", "; \n border-radius: 12px;\n background-color: ", ";\n box-sizing: border-box;\n gap: 8px; \n padding: ", "; \n &:hover {\n background-color: ", ";\n border-color: ", "; \n color: ", "; \n box-shadow: ", ";\n cursor: ", ";\n }\n &.ButtonItem-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins';\n font-style: normal;\n font-weight: 400; \n pointer-events: none;\n font-size: 14px;\n user-select: none; \n"])));
14
- const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n"])));
14
+ const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n"])));
15
+ const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif; \n border: ", ";\n border-radius: 8px;\n font-weight: 400;\n font-size: 14px; \n width: ", ";\n height: ", "; \n color: ", "; \n border: ", "; \n border-radius: 12px;\n background-color: ", "; \n cursor: pointer;\n padding: ", "; \n \n &:hover {\n background-color: ", ";\n border-color: ", "; \n color: ", "; \n box-shadow: ", ";\n cursor: ", ";\n }\n &.InputCommit-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
package/dist/stories/components/CampaignTool/Popup.js CHANGED
@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
+ var _reactHookForm = require("react-hook-form");
10
11
  var _MenuItemClosedIcon = require("../icons/MenuItemClosedIcon");
11
12
  var _MenuItemOpenIcon = require("../icons/MenuItemOpenIcon");
12
13
  var _PopupContent = _interopRequireDefault(require("./PopupContent"));
13
- var _reactHookForm = require("react-hook-form");
14
- var _SagButton = _interopRequireDefault(require("../../components/SagButton"));
14
+ var _SagButton = _interopRequireDefault(require("../SagButton"));
15
+ var _Button = _interopRequireDefault(require("../Button"));
15
16
  var _Popup = require("./Popup.style");
16
17
  const Popup = props => {
17
18
  const {
@@ -28,7 +29,7 @@ const Popup = props => {
28
29
  } = props;
29
30
  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
30
31
  const useFormMethods = (0, _reactHookForm.useForm)({
31
- mode: "onChange"
32
+ mode: 'onChange'
32
33
  });
33
34
  const divRef = (0, _react.useRef)(null);
34
35
  const [divHeight, setDivHeight] = (0, _react.useState)(0);
@@ -70,7 +71,7 @@ const Popup = props => {
70
71
  id: "AccordionItemContainer",
71
72
  onClick: handleToggle,
72
73
  style: {
73
- cursor: "pointer"
74
+ cursor: 'pointer'
74
75
  }
75
76
  }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
76
77
  id: "AccordionItemIconContainer"
@@ -79,7 +80,7 @@ const Popup = props => {
79
80
  subtitleTextColor: subtitleTextColor
80
81
  }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
81
82
  id: "AccordionContentContainer"
82
- }, console.log("rowsData", title, children.props.children), title === "Campaigns" ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === "Products" ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : "", /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
83
+ }, console.log('rowsData', title, children.props.children), title === 'Campaigns' ? children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[0] : title === 'Products' ? children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.children[1] : '', /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
83
84
  id: "PopupContent",
84
85
  width: "100%",
85
86
  height: "100%",
@@ -96,7 +97,7 @@ const Popup = props => {
96
97
  } = _ref2;
97
98
  return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
98
99
  id: "AccordionContainer",
99
- maxHeight: divHeight ? (divHeight - 190).toString().concat("", "px") : null
100
+ maxHeight: divHeight ? (divHeight - 190).toString().concat('', 'px') : null
100
101
  }, items.map((item, index) => {
101
102
  var _item$rowsData;
102
103
  return /*#__PURE__*/_react.default.createElement(AccordionItem, {
@@ -109,7 +110,7 @@ const Popup = props => {
109
110
  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
110
111
  id: "MainContainer"
111
112
  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
112
- onSubmit: useFormMethods.handleSubmit(submittedValues => console.log("submittedValues", submittedValues))
113
+ onSubmit: useFormMethods.handleSubmit(submittedValues => console.log('submittedValues', submittedValues))
113
114
  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
114
115
  id: "ModalOverlay",
115
116
  className: "modal-overlay",
@@ -135,11 +136,16 @@ const Popup = props => {
135
136
  value: "Save",
136
137
  type: "submit",
137
138
  style: {
138
- backgroundColor: "#BCC6DA",
139
- color: "white",
140
- transition: "background-color 0.3s, color 0.3s"
139
+ backgroundColor: '#BCC6DA',
140
+ color: 'white',
141
+ transition: 'background-color 0.3s, color 0.3s'
141
142
  },
142
143
  borderColor: borderColor
144
+ }), /*#__PURE__*/_react.default.createElement(_Button.default, {
145
+ text: "Save",
146
+ type: "primary",
147
+ size: "medium",
148
+ isSubmitButton: true
143
149
  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
144
150
  textColor: "#212121",
145
151
  backgroundColor: "#ffffff",
@@ -158,8 +164,8 @@ const Popup = props => {
158
164
  var _default = exports.default = Popup;
159
165
  Popup.defaultProps = {
160
166
  isPopupOpen: true,
161
- width: "800px",
162
- height: "600px",
167
+ width: '800px',
168
+ height: '600px',
163
169
  onSaveClick: () => {},
164
170
  onCancelClick: () => {},
165
171
  onOverlayClick: () => {}
package/dist/stories/components/DropdownMultiNew.style.js CHANGED
@@ -11,10 +11,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '27px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n height: 25px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none; \n"])), props => props.disabled ? '#888' : '#212121');
17
- const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n\n"])), props => {
17
+ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%; \n background-color: #fff; \n display: ", "; \n\n"])), props => {
18
18
  var _props$filteredoption;
19
19
  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
20
20
  });
package/dist/stories/components/DropdownSingleNew.style.js CHANGED
@@ -9,12 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
11
  /* eslint-disable no-nested-ternary */
12
- const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
12
+ const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px; \n"])), props => props.width || '300px');
13
13
  const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
14
- const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
14
+ const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
17
- const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
17
+ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n background-color: #fff; \n display: ", "; \n"])), props => {
18
18
  var _props$filteredoption;
19
19
  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
20
20
  });
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.685",
3
+ "version": "1.0.686",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {