oolib 2.160.0 → 2.161.0

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/v2/components/cards/CardContent.stories.d.ts +10 -10
  2. package/dist/stories/v2/components/cards/ListContent.stories.d.ts +10 -4
  3. package/dist/stories/v2/components/cards/ListContent.stories.js +1 -5
  4. package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts +17 -24
  5. package/dist/stories/v2/components/cards/utils/cardArgTypes.js +11 -15
  6. package/dist/v2/components/cards/ListContent/index.d.ts +2 -1
  7. package/dist/v2/components/cards/ListContent/index.js +18 -23
  8. package/dist/v2/components/cards/ListContent/styled.d.ts +1 -3
  9. package/dist/v2/components/cards/ListContent/styled.js +23 -32
  10. package/package.json +1 -1
package/dist/stories/v2/components/cards/CardContent.stories.d.ts CHANGED
@@ -7,22 +7,12 @@ declare namespace _default {
7
7
  type: string;
8
8
  };
9
9
  };
10
- highlight: {
11
- name: string;
12
- control: string;
13
- options: string[];
14
- };
15
10
  desc: {
16
11
  name: string;
17
12
  control: {
18
13
  type: string;
19
14
  };
20
15
  };
21
- statusTagVariant: {
22
- name: string;
23
- control: string;
24
- options: string[];
25
- };
26
16
  cardLabel: {
27
17
  name: string;
28
18
  control: string;
@@ -60,6 +50,16 @@ declare namespace _default {
60
50
  name: string;
61
51
  control: string;
62
52
  };
53
+ highlight: {
54
+ name: string;
55
+ control: string;
56
+ options: string[];
57
+ };
58
+ statusTagVariant: {
59
+ name: string;
60
+ control: string;
61
+ options: string[];
62
+ };
63
63
  };
64
64
  let args: {
65
65
  cardLabel: string;
package/dist/stories/v2/components/cards/ListContent.stories.d.ts CHANGED
@@ -8,10 +8,6 @@ declare namespace _default {
8
8
  type: string;
9
9
  };
10
10
  };
11
- highlight: {
12
- name: string;
13
- control: string;
14
- };
15
11
  cardLabel: {
16
12
  name: string;
17
13
  control: string;
@@ -49,6 +45,16 @@ declare namespace _default {
49
45
  name: string;
50
46
  control: string;
51
47
  };
48
+ highlight: {
49
+ name: string;
50
+ control: string;
51
+ options: string[];
52
+ };
53
+ statusTagVariant: {
54
+ name: string;
55
+ control: string;
56
+ options: string[];
57
+ };
52
58
  };
53
59
  let args: {
54
60
  cardLabel: string;
package/dist/stories/v2/components/cards/ListContent.stories.js CHANGED
@@ -24,7 +24,6 @@ var cardArgTypes_1 = require("./utils/cardArgTypes");
24
24
  var parseCardArgs_1 = require("./utils/parseCardArgs");
25
25
  var Wrappers_1 = require("../../../../components/Wrappers");
26
26
  var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
27
- var Divider_1 = require("../../../../v2/components/Divider");
28
27
  exports.default = {
29
28
  title: "Oolib V 2.0/Components/ListContent",
30
29
  argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.listContentArgTypes),
@@ -46,9 +45,6 @@ var Playground = function (args) {
46
45
  var props = (0, parseCardArgs_1.parseCardArgs)(args);
47
46
  return (react_1.default.createElement(Container_1.Container, null,
48
47
  react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
49
- react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(react_1.default.Fragment, null,
50
- react_1.default.createElement("div", { style: { padding: "1px 0" } },
51
- react_1.default.createElement(Divider_1.Divider, null)),
52
- react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config })))); })))));
48
+ react_1.default.createElement(Wrappers_1.Wrapper700, { left: true }, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(ListContent_1.ListContent, __assign({}, props, { config: props.config }))); })))));
53
49
  };
54
50
  exports.Playground = Playground;
package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts CHANGED
@@ -68,44 +68,44 @@ export namespace commonCardArgTypes {
68
68
  export { control_6 as control };
69
69
  }
70
70
  export { metaDate_1 as metaDate };
71
- }
72
- export namespace cardContentArgTypes {
73
- namespace tagDisplay {
71
+ export namespace highlight {
74
72
  let name_7: string;
75
73
  export { name_7 as name };
76
- export namespace control_7 {
77
- let type: string;
78
- }
74
+ let control_7: string;
79
75
  export { control_7 as control };
76
+ let options_1: string[];
77
+ export { options_1 as options };
80
78
  }
81
- namespace highlight {
79
+ export namespace statusTagVariant {
82
80
  let name_8: string;
83
81
  export { name_8 as name };
84
82
  let control_8: string;
85
83
  export { control_8 as control };
86
- let options_1: string[];
87
- export { options_1 as options };
84
+ let options_2: string[];
85
+ export { options_2 as options };
88
86
  }
89
- namespace desc {
87
+ }
88
+ export namespace cardContentArgTypes {
89
+ namespace tagDisplay {
90
90
  let name_9: string;
91
91
  export { name_9 as name };
92
92
  export namespace control_9 {
93
- let type_1: string;
94
- export { type_1 as type };
93
+ let type: string;
95
94
  }
96
95
  export { control_9 as control };
97
96
  }
98
- namespace statusTagVariant {
97
+ namespace desc {
99
98
  let name_10: string;
100
99
  export { name_10 as name };
101
- let control_10: string;
100
+ export namespace control_10 {
101
+ let type_1: string;
102
+ export { type_1 as type };
103
+ }
102
104
  export { control_10 as control };
103
- let options_2: string[];
104
- export { options_2 as options };
105
105
  }
106
106
  }
107
107
  export namespace listContentArgTypes {
108
- export namespace statusTag {
108
+ namespace statusTag {
109
109
  let name_11: string;
110
110
  export { name_11 as name };
111
111
  export namespace control_11 {
@@ -114,11 +114,4 @@ export namespace listContentArgTypes {
114
114
  }
115
115
  export { control_11 as control };
116
116
  }
117
- export namespace highlight_1 {
118
- let name_12: string;
119
- export { name_12 as name };
120
- let control_12: string;
121
- export { control_12 as control };
122
- }
123
- export { highlight_1 as highlight };
124
117
  }
package/dist/stories/v2/components/cards/utils/cardArgTypes.js CHANGED
@@ -42,35 +42,31 @@ exports.commonCardArgTypes = {
42
42
  metaDate: {
43
43
  name: "Meta (Date)",
44
44
  control: "date",
45
- }
46
- };
47
- exports.cardContentArgTypes = {
48
- tagDisplay: {
49
- name: "Status Tag",
50
- control: { type: "text" },
51
45
  },
52
46
  highlight: {
53
47
  name: "Highlight",
54
48
  control: 'select',
55
49
  options: [undefined, 'primary', 'secondary'],
56
50
  },
51
+ statusTagVariant: {
52
+ name: "Status Tag Variant",
53
+ control: 'select',
54
+ options: [undefined, 'primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
55
+ },
56
+ };
57
+ exports.cardContentArgTypes = {
58
+ tagDisplay: {
59
+ name: "Status Tag",
60
+ control: { type: "text" },
61
+ },
57
62
  desc: {
58
63
  name: "Description",
59
64
  control: { type: "text" },
60
65
  },
61
- statusTagVariant: {
62
- name: "Status Tag Variant",
63
- control: 'select',
64
- options: ['primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
65
- }
66
66
  };
67
67
  exports.listContentArgTypes = {
68
68
  statusTag: {
69
69
  name: "Status Tag",
70
70
  control: { type: "text" },
71
71
  },
72
- highlight: {
73
- name: "Highlight",
74
- control: 'boolean',
75
- },
76
72
  };
package/dist/v2/components/cards/ListContent/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export function ListContent({ id, data, config, to, onClick, openInNewTab, statusTag, variant, highlight, }: {
1
+ export function ListContent({ id, data, config, to, onClick, openInNewTab, statusTag, variant, highlight, statusTagVariant, }: {
2
2
  id: any;
3
3
  data: any;
4
4
  config: any;
@@ -8,5 +8,6 @@ export function ListContent({ id, data, config, to, onClick, openInNewTab, statu
8
8
  statusTag: any;
9
9
  variant?: string;
10
10
  highlight: any;
11
+ statusTagVariant: any;
11
12
  }): React.JSX.Element;
12
13
  import React from "react";
package/dist/v2/components/cards/ListContent/index.js CHANGED
@@ -26,15 +26,16 @@ var themes_1 = require("../../../themes");
26
26
  var icons_1 = require("../../../../icons");
27
27
  var styled_js_1 = require("./styled.js");
28
28
  var white = themes_1.colors.white;
29
- var Star = icons_1.icons.Star;
29
+ var Star = icons_1.icons.Star, CrownSimple = icons_1.icons.CrownSimple;
30
30
  var CustomTag = function (_a) {
31
31
  var displayText = _a.displayText, tagVariant = _a.tagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
32
32
  return displayText ? (react_1.default.createElement(styled_js_1.StyledTagWrapper, { bothTagsDisplayTogether: bothTagsDisplayTogether },
33
- react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, variant: tagVariant || "primary", XS: true }))) : null;
33
+ react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, variant: tagVariant, XS: true }))) : null;
34
34
  };
35
35
  var ListContent = function (_a) {
36
36
  var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b, //alt = profile
37
- highlight = _a.highlight;
37
+ highlight = _a.highlight, // primary | secondary
38
+ statusTagVariant = _a.statusTagVariant;
38
39
  var theme = (0, styled_components_1.useTheme)();
39
40
  var localize = (0, utilsOolib_1.useLocale)();
40
41
  var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
@@ -53,31 +54,25 @@ var ListContent = function (_a) {
53
54
  openInNewTab: openInNewTab,
54
55
  }), LinkComp = _d.LinkComp, target = _d.target;
55
56
  var mediaConfigExists = config.video || config.image;
57
+ var HighLightIcon = highlight === 'secondary' ? Star : CrownSimple;
56
58
  return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
57
- react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined, mediaConfigExists: mediaConfigExists },
59
+ react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined, mediaConfigExists: mediaConfigExists, highlight: highlight },
58
60
  react_1.default.createElement(styled_js_1.StyledListWrapper, null,
61
+ react_1.default.createElement(styled_js_1.StyledMainSection, null,
62
+ react_1.default.createElement("div", null,
63
+ (cardLabel || statusTag) && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
64
+ react_1.default.createElement(CustomTag, { displayText: cardLabel, tagVariant: "primary", bothTagsDisplayTogether: bothTagsDisplayTogether }),
65
+ react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: statusTagVariant ? statusTagVariant : highlight == "primary" ? "positive" : "warning", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
66
+ title ? (react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
67
+ react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
68
+ react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title))))) : null),
69
+ (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, null,
70
+ react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
59
71
  variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule, null, (0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
60
72
  react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
61
73
  react_1.default.createElement(styled_js_1.StyledVideoOverlay, null))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title, aspectRatio: "13/10", height: "100%" }))))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
62
74
  react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title }))),
63
- react_1.default.createElement(styled_js_1.StyledMainSection, null,
64
- react_1.default.createElement("div", null,
65
- (cardLabel || statusTag) && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { mediaConfigExists: mediaConfigExists, highlight: highlight },
66
- react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
67
- react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
68
- title ? (react_1.default.createElement(styled_js_1.StyledTitleWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
69
- react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
70
- react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
71
- react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
72
- (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
73
- react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }))),
74
- ((metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 || cardLabel || statusTag) && !mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockAndTagsWrapper, null,
75
- react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
76
- react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
77
- react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether })),
78
- (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
79
- react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock, align: "right" })))))),
80
- highlight && (react_1.default.createElement(styled_js_1.StyledStarWrapper, null,
81
- react_1.default.createElement(Star, { size: 16, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })))))));
75
+ highlight && (react_1.default.createElement(styled_js_1.StyledHighlightWrapper, { highlight: highlight },
76
+ react_1.default.createElement(HighLightIcon, { size: 16, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })))))));
82
77
  };
83
78
  exports.ListContent = ListContent;
package/dist/v2/components/cards/ListContent/styled.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  export const StyledListElemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export const StyledStarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export const StyledHighlightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  export const StyledContentModule: import("styled-components").StyledComponent<"div", any, {}, never>;
5
5
  export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export const StyledVideoOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export const StyledMainSection: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
8
  export const StyledLabelAndStatusTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
9
  export const StyledTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
11
10
  export const StyledMetaBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
12
- export const StyledMetaBlockAndTagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
13
11
  export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/v2/components/cards/ListContent/styled.js CHANGED
@@ -7,50 +7,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.StyledContentModule2 = exports.StyledMetaBlockAndTagsWrapper = exports.StyledMetaBlockWrapper = exports.StyledTagWrapper = exports.StyledLabelAndStatusTagWrapper = exports.StyledTitleWrapper = exports.StyledMainSection = exports.StyledVideoOverlay = exports.StyledVideoWrapper = exports.StyledContentModule = exports.StyledStarWrapper = exports.StyledListWrapper = exports.StyledListElemContainer = void 0;
10
+ exports.StyledContentModule2 = exports.StyledMetaBlockWrapper = exports.StyledTagWrapper = exports.StyledLabelAndStatusTagWrapper = exports.StyledMainSection = exports.StyledVideoOverlay = exports.StyledVideoWrapper = exports.StyledContentModule = exports.StyledHighlightWrapper = exports.StyledListWrapper = exports.StyledListElemContainer = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var themes_1 = require("../../../themes");
13
13
  var mixins_1 = require("../../../../themes/mixins");
14
- var grey50 = themes_1.colors.grey50, yellow = themes_1.colors.yellow, white = themes_1.colors.white;
14
+ var grey10 = themes_1.colors.grey10, grey50 = themes_1.colors.grey50, yellow = themes_1.colors.yellow, white = themes_1.colors.white, green = themes_1.colors.green;
15
15
  var SIZE_OF_HIGHLIGHT = "28px";
16
- var SIZE_OF_META_BLOCK_WRAPPER = "19rem";
17
- exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n padding-inline: 12px;\n padding-block: ", ";\n cursor: pointer;\n border-radius: 8px;\n border: 1px solid ", ";\n\n ", " {\n &:hover {\n border: 1px solid ", ";\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n }\n }\n"], ["\n height: 100%;\n width: 100%;\n padding-inline: 12px;\n padding-block: ", ";\n cursor: pointer;\n border-radius: 8px;\n border: 1px solid ", ";\n\n ", " {\n &:hover {\n border: 1px solid ", ";\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n }\n }\n"])), function (_a) {
16
+ exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n padding-inline: 12px;\n padding-block: ", ";\n cursor: pointer;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n border-inline: 1px solid ", ";\n\n ", " {\n &:hover {\n border-radius: 8px;\n border: 1px solid ", ";\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n }\n }\n"], ["\n height: 100%;\n width: 100%;\n padding-inline: 12px;\n padding-block: ", ";\n cursor: pointer;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n border-inline: 1px solid ", ";\n\n ", " {\n &:hover {\n border-radius: 8px;\n border: 1px solid ", ";\n box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n }\n }\n"])), function (_a) {
18
17
  var mediaConfigExists = _a.mediaConfigExists;
19
18
  return mediaConfigExists ? "12px" : "14px";
20
- }, white, (0, mixins_1.mediaQuery)("sm"), grey50);
19
+ }, grey10, white, white, (0, mixins_1.mediaQuery)("sm"), function (_a) {
20
+ var highlight = _a.highlight;
21
+ if (highlight == "primary")
22
+ return green;
23
+ else if (highlight == "secondary")
24
+ return yellow;
25
+ else
26
+ return grey50;
27
+ });
21
28
  exports.StyledListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 12px;\n position: relative;\n"], ["\n display: flex;\n gap: 12px;\n position: relative;\n"])));
22
- exports.StyledStarWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 0;\n right: 0;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 6px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 0;\n right: 0;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 6px;\n background-color: ", "; \n border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, yellow);
29
+ exports.StyledHighlightWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 0;\n right: 0;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 6px;\n background-color: ", "; \n border-radius: 4px;\n"], ["\n width: ", ";\n height: ", ";\n position: absolute;\n top: 0;\n right: 0;\n display: flex; \n justify-content: center;\n align-items: center;\n padding: 6px;\n background-color: ", "; \n border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, function (_a) {
30
+ var highlight = _a.highlight;
31
+ return highlight === "secondary" ? yellow : green;
32
+ });
23
33
  exports.StyledContentModule = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n min-height: 91px;\n min-width: 121px;\n width: 121px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n border-radius: 4px;\n\n ", " {\n min-height: 120px;\n min-width: 159px;\n width: 159px;\n }\n"], ["\n min-height: 91px;\n min-width: 121px;\n width: 121px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n border-radius: 4px;\n\n ", " {\n min-height: 120px;\n min-width: 159px;\n width: 159px;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
24
34
  exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
25
35
  exports.StyledVideoOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
26
36
  exports.StyledMainSection = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow: hidden;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n overflow: hidden;\n"])));
27
- exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", " ; // this condition avoids title from being cutoff\n"], ["\n width: ", " ; // this condition avoids title from being cutoff\n"])), function (_a) {
28
- var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
29
- return highlight && !mediaConfigExists ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)") : '100%';
30
- });
31
- exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: ", ";\n margin-bottom: ", ";\n display: flex;\n gap: 6px;\n"], ["\n width: ", ";\n margin-bottom: ", ";\n display: flex;\n gap: 6px;\n"])), function (_a) {
32
- var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
33
- if (mediaConfigExists && highlight)
34
- return "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)"); // 6px gap between highlight and tag
35
- else if (mediaConfigExists && !highlight)
36
- return "100%";
37
- else if (!mediaConfigExists)
38
- return "calc(100% - ".concat(SIZE_OF_META_BLOCK_WRAPPER, ")");
39
- }, function (_a) {
40
- var mediaConfigExists = _a.mediaConfigExists;
41
- return mediaConfigExists ? "8px" : "0px";
37
+ exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", "; // 6px gap between highlight and tag\n margin-bottom: 8px;\n display: flex;\n gap: 6px;\n"], ["\n width: ", "; // 6px gap between highlight and tag\n margin-bottom: 8px;\n display: flex;\n gap: 6px;\n"])), function (_a) {
38
+ var highlight = _a.highlight;
39
+ return highlight ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)") : "100%";
42
40
  });
43
- exports.StyledTagWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n max-width: ", "; // 3px is the half of the space between tags\n"], ["\n max-width: ", "; // 3px is the half of the space between tags\n"])), function (_a) {
41
+ exports.StyledTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n max-width: ", "; // 3px is the half of the space between tags\n"], ["\n max-width: ", "; // 3px is the half of the space between tags\n"])), function (_a) {
44
42
  var bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
45
43
  return bothTagsDisplayTogether ? "calc(50% - 3px)" : "100%";
46
44
  });
47
- exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
48
- var mediaConfigExists = _a.mediaConfigExists;
49
- return mediaConfigExists ? "auto" : SIZE_OF_META_BLOCK_WRAPPER;
50
- }, function (_a) {
51
- var mediaConfigExists = _a.mediaConfigExists;
52
- return mediaConfigExists ? "4px" : "0px";
53
- });
54
- exports.StyledMetaBlockAndTagsWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n"], ["\n width: 100%;\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n"])));
55
- exports.StyledContentModule2 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
56
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
45
+ exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin-top: 6px;\n"], ["\n margin-top: 6px;\n"])));
46
+ exports.StyledContentModule2 = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n align-items: flex-end;\n gap: 1rem;\n flex-shrink: 0;\n ", " {\n flex-direction: row;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
47
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.160.0",
3
+ "version": "2.161.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",