sag_components 1.0.690 → 1.0.692

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/BannerEventBox.style.js +1 -1
  2. package/dist/stories/components/BannerEventBoxList.js +16 -11
  3. package/dist/stories/components/BannerEventBoxList.style.js +10 -11
  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/LinkButton.js +27 -0
  7. package/dist/stories/components/icons/ArrowDownIcon.js +2 -2
  8. package/dist/stories/components/icons/MenuItemOpenIcon.js +3 -3
  9. package/dist/stories/components/icons/MenuItemRightIcon.js +28 -0
  10. package/dist/stories/components/icons/MenuItemUpIcon.js +3 -3
  11. package/package.json +1 -1
package/dist/stories/components/BannerEventBox.style.js CHANGED
@@ -8,7 +8,7 @@ exports.TitleWrapper = exports.Text = exports.Seperator = exports.MoreInfo = exp
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
11
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n font-family: 'Poppins', sans-serif;\n color: #212121;\n background-color: white;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);\n"])), props => props.width, props => props.height);
11
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n font-family: 'Poppins', sans-serif;\n color: #212121;\n background-color: white;\n padding: 20px;\n border-radius: 12px;\n border: 1px solid #D0D0D0;\n"])), props => props.width, props => props.height);
12
12
  const TitleWrapper = exports.TitleWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n margin-bottom: 20px;\n gap: 6px;\n"])));
13
13
  const CardTitle = exports.CardTitle = _styledComponents.default.h5(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 400;\n margin: 0;\n"])));
14
14
  const Headline = exports.Headline = _styledComponents.default.h6(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 500;\n margin: 0;\n"])));
package/dist/stories/components/BannerEventBoxList.js CHANGED
@@ -7,20 +7,19 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
- var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
11
- var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
12
10
  var _BannerEventBoxList = require("./BannerEventBoxList.style");
13
11
  var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
12
+ var _LinkButton = _interopRequireDefault(require("./LinkButton"));
14
13
  const BannerEventBoxList = props => {
15
14
  const {
16
- title,
17
15
  className,
18
16
  eventName,
19
17
  eventType,
20
18
  width,
21
19
  height,
22
20
  data,
23
- retailerFile
21
+ retailerFile,
22
+ toggleColor
24
23
  } = props;
25
24
  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
26
25
  const handleToggle = () => {
@@ -30,12 +29,18 @@ const BannerEventBoxList = props => {
30
29
  className: className
31
30
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
32
31
  onClick: () => handleToggle()
33
- }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemTitle, {
34
- id: "CollapseMenuItemTitle"
35
- }, title), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.RightIconContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
36
- color: "#212121"
37
- }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
38
- color: "#212121"
32
+ }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
33
+ text: "Event Info",
34
+ leftIcon: "info",
35
+ rightIcon: "arrowdown",
36
+ textColor: toggleColor,
37
+ color: toggleColor
38
+ }) : /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
39
+ text: "Event Info",
40
+ leftIcon: "info",
41
+ rightIcon: "arrowright",
42
+ textColor: toggleColor,
43
+ color: toggleColor
39
44
  }))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContentContainer, {
40
45
  id: "CollapseMenuItemContentContainer"
41
46
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventType, null, eventType), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventName, null, "Event Name |", ' ', /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.EventNameSpan, null, eventName)), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.MainContainer, {
@@ -53,12 +58,12 @@ const BannerEventBoxList = props => {
53
58
  })))));
54
59
  };
55
60
  BannerEventBoxList.defaultProps = {
56
- title: 'Title',
57
61
  className: '',
58
62
  width: 'auto',
59
63
  height: 'auto',
60
64
  eventType: 'Event Type',
61
65
  eventName: 'Event Name',
66
+ toggleColor: '#212121',
62
67
  data: [{
63
68
  banner: 'Stop&Shop',
64
69
  description: 'description',
package/dist/stories/components/BannerEventBoxList.style.js CHANGED
@@ -4,16 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.RightIconContainer = exports.MainContainer = exports.EventType = exports.EventNameSpan = exports.EventName = exports.CollapseMenuItemTitle = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
7
+ exports.ToggleContainer = exports.MainContainer = exports.EventType = exports.EventNameSpan = exports.EventName = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = 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, _templateObject7, _templateObject8, _templateObject9;
11
- const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background: white;\n padding: 20px;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n"])));
12
- const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: 'pointer';\n"])));
13
- const CollapseMenuItemTitle = exports.CollapseMenuItemTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
14
- const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
15
- const RightIconContainer = exports.RightIconContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n margin-left: auto;\n"])));
16
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n /* position: relative; */\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n padding-bottom: 25px;\n"])), props => props.width, props => props.height);
17
- const EventType = exports.EventType = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 16px 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
- const EventName = exports.EventName = _styledComponents.default.h3(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 0 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
19
- const EventNameSpan = exports.EventNameSpan = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n"])));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
11
+ const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background: white;\n padding: 20px 24px;\n box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, 0.2);\n"])));
12
+ const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n"])));
13
+ const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
14
+ const ToggleContainer = exports.ToggleContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n right: 0;\n cursor: 'pointer';\n"])));
15
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n padding-bottom: 4px;\n"])), props => props.width, props => props.height);
16
+ const EventType = exports.EventType = _styledComponents.default.h3(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 16px 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
17
+ const EventName = exports.EventName = _styledComponents.default.h3(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 500;\n margin: 0 0 20px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
+ const EventNameSpan = exports.EventNameSpan = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n"])));
package/dist/stories/components/DropdownMultiNew.style.js CHANGED
@@ -11,8 +11,8 @@ 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 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
- 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');
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: transparent; \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
+ 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: transparent; \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
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;
package/dist/stories/components/DropdownSingleNew.style.js CHANGED
@@ -11,14 +11,14 @@ 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' : '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 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
- 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');
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: transparent; \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
+ 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: transparent; \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
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
  });
21
- const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: #fff; \n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), props => {
21
+ const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: ", ";\n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), props => props.backgroundColor || 'transparent', props => {
22
22
  var _props$filteredoption2;
23
23
  return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
24
24
  });
package/dist/stories/components/LinkButton.js CHANGED
@@ -16,6 +16,9 @@ var _BellIcon = require("./icons/BellIcon");
16
16
  var _MaintenanceIcon = require("./icons/MaintenanceIcon");
17
17
  var _ExitIcon = require("./icons/ExitIcon");
18
18
  var _EyeIcon = require("./icons/EyeIcon");
19
+ var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
20
+ var _MenuItemRightIcon = require("./icons/MenuItemRightIcon");
21
+ var _InfoIcon = require("./icons/InfoIcon");
19
22
  const LinkButton = props => {
20
23
  const {
21
24
  text,
@@ -115,6 +118,30 @@ const LinkButton = props => {
115
118
  width: iconWidth,
116
119
  color: color
117
120
  }));
121
+ case 'arrowdown':
122
+ return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
123
+ className: "ArrowDownIcon"
124
+ }, /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
125
+ height: iconHeight,
126
+ width: iconWidth,
127
+ color: color
128
+ }));
129
+ case 'arrowright':
130
+ return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
131
+ className: "ArrowRightIcon"
132
+ }, /*#__PURE__*/_react.default.createElement(_MenuItemRightIcon.MenuItemRightIcon, {
133
+ height: iconHeight,
134
+ width: iconWidth,
135
+ color: color
136
+ }));
137
+ case 'info':
138
+ return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
139
+ className: "InfoIcon"
140
+ }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
141
+ height: iconHeight,
142
+ width: iconWidth,
143
+ color: color
144
+ }));
118
145
  default:
119
146
  return '';
120
147
  }
package/dist/stories/components/icons/ArrowDownIcon.js CHANGED
@@ -9,8 +9,8 @@ var _react = _interopRequireDefault(require("react"));
9
9
  const ArrowDownIcon = _ref => {
10
10
  let {
11
11
  clicked,
12
- width = "8",
13
- height = "9"
12
+ width = '8',
13
+ height = '9'
14
14
  } = _ref;
15
15
  return /*#__PURE__*/_react.default.createElement("svg", {
16
16
  width: width,
package/dist/stories/components/icons/MenuItemOpenIcon.js CHANGED
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
9
9
  const MenuItemOpenIcon = _ref => {
10
10
  let {
11
11
  clicked,
12
- width = "16",
13
- height = "16",
14
- color = "#7E7E7E"
12
+ width = '16',
13
+ height = '16',
14
+ color = '#7E7E7E'
15
15
  } = _ref;
16
16
  return /*#__PURE__*/_react.default.createElement("svg", {
17
17
  width: width,
package/dist/stories/components/icons/MenuItemRightIcon.js ADDED
@@ -0,0 +1,28 @@
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.MenuItemRightIcon = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ const MenuItemRightIcon = _ref => {
10
+ let {
11
+ clicked,
12
+ width = '16',
13
+ height = '16',
14
+ color = '#212121'
15
+ } = _ref;
16
+ return /*#__PURE__*/_react.default.createElement("svg", {
17
+ width: width,
18
+ height: height,
19
+ viewBox: "0 0 16 16",
20
+ fill: "none",
21
+ xmlns: "http://www.w3.org/2000/svg"
22
+ }, /*#__PURE__*/_react.default.createElement("path", {
23
+ d: "M11.2969 7.20312C11.5781 7.51562 11.5781 7.98438 11.2969 8.26562L5.29688 14.2656C4.98438 14.5782 4.51562 14.5782 4.23438 14.2656C3.92188 13.9844 3.92188 13.5156 4.23438 13.2344L9.70312 7.76562L4.23438 2.26562C3.92188 1.98438 3.92188 1.51562 4.23438 1.23438C4.51562 0.921875 4.98438 0.921875 5.26562 1.23438L11.2969 7.20312Z",
24
+ fill: color
25
+ }));
26
+ };
27
+ exports.MenuItemRightIcon = MenuItemRightIcon;
28
+ var _default = exports.default = MenuItemRightIcon;
package/dist/stories/components/icons/MenuItemUpIcon.js CHANGED
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
9
9
  const MenuItemUpIcon = _ref => {
10
10
  let {
11
11
  clicked,
12
- width = "16",
13
- height = "16",
14
- color = "#212121"
12
+ width = '16',
13
+ height = '16',
14
+ color = '#212121'
15
15
  } = _ref;
16
16
  return /*#__PURE__*/_react.default.createElement("svg", {
17
17
  width: width,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.690",
3
+ "version": "1.0.692",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {