sag_components 1.0.804 → 1.0.806

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/stories/components/CollapseHeader.style.js +1 -1
  2. package/dist/stories/components/EventListItem.js +12 -22
  3. package/dist/stories/components/EventListItem.style.js +6 -8
  4. package/dist/stories/components/LinkButton.js +10 -0
  5. package/dist/stories/components/OneColumnContainer.js +1 -4
  6. package/dist/stories/components/OneColumnContainer.style.js +8 -8
  7. package/dist/stories/components/TotalHorizontalCharts.js +0 -1
  8. package/dist/stories/components/icons/ArrowSelectIcon.js +2 -2
  9. package/package.json +1 -1
package/dist/stories/components/CollapseHeader.style.js CHANGED
@@ -13,7 +13,7 @@ const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_t
13
13
  const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n"])));
14
14
  const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n align-content: center;\n align-items: center;\n gap: 20px;\n"])));
15
15
  const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #E41111;\n border: 2px solid #E41111;\n font-size: 20px;\n padding: 6px 18px;\n"])));
16
- const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n border: 1px solid #ccc;\n padding: 2px 10px;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
16
+ const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px 10px;\n border-radius: 8px;\n border: 1px solid #ccc;\n color: ", ";\n &:hover {\n cursor: ", ";\n }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
17
17
  const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n line-height: 19px;\n font-size: 14px;\n font-weight: 400;\n margin: 3px 10px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
18
  const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n overflow: visible;\n font-size: 18px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
19
19
  const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: absolute;\n left: ", ";\n top: ", ";\n z-index:1000;\n"])), props => props.left, props => props.top);
package/dist/stories/components/EventListItem.js CHANGED
@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.default = exports.EventListItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
9
+ var _LinkButton = _interopRequireDefault(require("./LinkButton"));
10
10
  var _EventListItem = require("./EventListItem.style");
11
- /* EventListItem */
12
11
  const EventListItem = props => {
13
12
  const {
14
13
  eventName,
@@ -25,36 +24,27 @@ const EventListItem = props => {
25
24
  });
26
25
  };
27
26
  return /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItemControlsContainer, {
28
- id: "EventListItemControlsContainer",
29
27
  height: height,
30
28
  width: width
31
- }, /*#__PURE__*/_react.default.createElement(_EventListItem.EventListItemControls, {
32
- id: "EventListItemControls",
33
- width: width,
34
- key: _EventListItem.EventName
35
29
  }, /*#__PURE__*/_react.default.createElement(_EventListItem.Period, {
36
- id: "Period",
37
- width: width
30
+ className: "Period"
38
31
  }, period), /*#__PURE__*/_react.default.createElement(_EventListItem.EventName, {
39
- id: "EventName",
40
- width: width
41
- }, eventName), /*#__PURE__*/_react.default.createElement(_EventListItem.SelectButtonContainer, {
42
- id: "SelectButtonContainer"
43
- }, /*#__PURE__*/_react.default.createElement(_EventListItem.SelectButtonSubContainer, {
44
- id: "SelectButtonSubContainer",
45
- selectTextColor: selectTextColor,
32
+ className: "EventName"
33
+ }, eventName), /*#__PURE__*/_react.default.createElement(_EventListItem.SelectButtonContainer, null, /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
34
+ size: "medium",
35
+ text: "Select",
36
+ rightIcon: "Select",
37
+ textColor: selectTextColor,
46
38
  onClick: handleOnClick
47
- }, "Select", ' ', /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
48
- id: "ArrowSelectIcon"
49
- })))));
39
+ })));
50
40
  };
51
41
  exports.EventListItem = EventListItem;
52
42
  var _default = exports.default = EventListItem;
53
43
  EventListItem.defaultProps = {
54
44
  eventName: '',
55
- period: 'DD/MM/YYYY - DD/MM/YYYY',
56
- width: '260px',
57
- height: '350px',
45
+ period: 'DD.MM.YYYY - DD.MM.YYYY',
46
+ width: 'auto',
47
+ height: 'auto',
58
48
  selectTextColor: '#212121',
59
49
  onClick: () => {}
60
50
  };
package/dist/stories/components/EventListItem.style.js CHANGED
@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.Period = exports.EventName = exports.EventListItemControlsContainer = exports.EventListItemControls = void 0;
7
+ exports.SelectButtonContainer = exports.Period = exports.EventName = exports.EventListItemControlsContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
11
- const EventListItemControlsContainer = exports.EventListItemControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background: #ffffff;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n padding: 20px 20px 10px 20px;\n"])), props => props.width, props => props.height);
12
- const EventListItemControls = exports.EventListItemControls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-content: center;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background: #ffffff;\n"])));
13
- const EventName = exports.EventName = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n line-height: 30px;\n min-height: 60px;\n font-size: 20px;\n @media (max-width: 1536px) {\n font-size: 18px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n max-width: 90%;\n"])));
14
- const Period = exports.Period = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #b1b1b1;\n font-weight: 400;\n line-height: 24px;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
15
- const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: flex-end;\n"])));
16
- const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n padding: 2px 10px;\n\n justify-content: flex-end;\n gap: 8px;\n color: ", ";\n border-radius: 12px;\n &:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n }\n"])), props => props.selectTextColor);
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
+ const EventListItemControlsContainer = exports.EventListItemControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: column;\n align-content: center;\n background-color: #ffffff;\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);\n padding: 20px 12px 12px;\n border-radius: 12px;\n"])), props => props.width, props => props.height);
12
+ const EventName = exports.EventName = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
13
+ const Period = exports.Period = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: #b1b1b1;\n font-size: 16px;\n margin-bottom: 8px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
14
+ const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-top: auto;\n gap: 8px;\n color: ", ";\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])), props => props.selectTextColor);
package/dist/stories/components/LinkButton.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
3
4
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
@@ -18,6 +19,7 @@ var _ExitIcon = require("./icons/ExitIcon");
18
19
  var _EyeIcon = require("./icons/EyeIcon");
19
20
  var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
20
21
  var _MenuItemRightIcon = require("./icons/MenuItemRightIcon");
22
+ var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
21
23
  var _InfoIcon = require("./icons/InfoIcon");
22
24
  const LinkButton = props => {
23
25
  const {
@@ -134,6 +136,14 @@ const LinkButton = props => {
134
136
  width: iconWidth,
135
137
  color: color
136
138
  }));
139
+ case 'select':
140
+ return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
141
+ className: "SelectRightIcon"
142
+ }, /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
143
+ height: iconHeight,
144
+ width: iconWidth,
145
+ color: color
146
+ }));
137
147
  case 'info':
138
148
  return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
139
149
  className: "InfoIcon"
package/dist/stories/components/OneColumnContainer.js CHANGED
@@ -13,9 +13,6 @@ var _InfoIcon = require("./icons/InfoIcon");
13
13
  var _ExportIcon = require("./icons/ExportIcon");
14
14
  var _OneColumnContainer = require("./OneColumnContainer.style");
15
15
  require("react-loading-skeleton/dist/skeleton.css");
16
- /**
17
- * Primary UI component for user interaction
18
- */
19
16
  const OneColumnContainer = props => {
20
17
  const {
21
18
  children,
@@ -105,7 +102,7 @@ const OneColumnContainer = props => {
105
102
  exports.OneColumnContainer = OneColumnContainer;
106
103
  OneColumnContainer.defaultProps = {
107
104
  children: '',
108
- display: 'flex',
105
+ display: 'block',
109
106
  isLoading: '',
110
107
  gridTemplateColumns: '',
111
108
  itemClass: '',
package/dist/stories/components/OneColumnContainer.style.js CHANGED
@@ -8,13 +8,13 @@ exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv
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;
11
- const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n font-family: \"Poppins\", sans-serif;\n display: flex;\n position: relative;\n border-radius: 10px;\n align-items: center;\n justify-content: center;\n overflow: ", ";\n background-color: white; \n"])), props => props.width, props => props.height, props => props.overflow);
12
- const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: white;\n margin: 15px 20px 0px 20px;\n"])), props => props.width, props => props.height);
13
- const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n overflow: hidden;\n"])));
14
- const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n overflow: hidden;\n"])));
15
- const ColumnTitle = exports.ColumnTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 20px;\n left: 20px;\n width: 85%;\n height: 26px;\n color: black;\n font-family: \"Poppins\", sans-serif;\n font-size: 20px;\n font-weight: 500;\n overflow: hidden;\n display: flex;\n flex-wrap: nowrap; \n align-items: center; \n justify-content: flex-start;\n"])));
16
- const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n top: 10px;\n right: 10px;\n position: absolute;\n"])));
17
- const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n gap: 10px;\n"])));
18
- const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n align-items: flex-start;\n justify-content: center; \n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
11
+ const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n overflow: ", ";\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background-color: white; \n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
12
+ const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n /* align-items: flex-start; */\n justify-content: center; \n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
13
+ const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n background: white;\n margin: 15px 20px 0px 20px;\n"])), props => props.width, props => props.height);
14
+ const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n overflow: hidden;\n"])));
15
+ const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n overflow: hidden;\n"])));
16
+ const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n display: inline-block;\n font-size: 20px;\n font-weight: 500;\n padding: 20px 20px 0;\n"])));
17
+ const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n top: 10px;\n right: 10px;\n position: absolute;\n"])));
18
+ const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n gap: 10px;\n"])));
19
19
  const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n z-index: 99;\n top: 12px;\n right: ", "; \n user-select: none;\n"])), props => props.right);
20
20
  const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n justify-content: flex-end;\n align-items: center; \n gap: 8px; \n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 13px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 13px;\n height: 13px;\n }\n @media (max-width: 1366px) {\n width: 12px;\n height: 12px;\n }\n }\n"])), props => props.textColor);
package/dist/stories/components/TotalHorizontalCharts.js CHANGED
@@ -78,7 +78,6 @@ const TotalHorizontalCharts = props => {
78
78
  const {
79
79
  x,
80
80
  y,
81
- width,
82
81
  height,
83
82
  payload,
84
83
  fill,
package/dist/stories/components/icons/ArrowSelectIcon.js CHANGED
@@ -9,14 +9,14 @@ var _react = _interopRequireDefault(require("react"));
9
9
  const ArrowSelectIcon = _ref => {
10
10
  let {
11
11
  // eslint-disable-next-line react/prop-types
12
- width = '17',
12
+ width = '18',
13
13
  height = '18',
14
14
  color = '#229E38'
15
15
  } = _ref;
16
16
  return /*#__PURE__*/_react.default.createElement("svg", {
17
17
  width: width,
18
18
  height: height,
19
- viewBox: "0 0 17 18",
19
+ viewBox: "0 0 18 18",
20
20
  fill: "none",
21
21
  xmlns: "http://www.w3.org/2000/svg"
22
22
  }, /*#__PURE__*/_react.default.createElement("path", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.804",
3
+ "version": "1.0.806",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {