oolib 2.153.0 → 2.154.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 (33) hide show
  1. package/dist/components/cards/CardContent/index.d.ts +0 -11
  2. package/dist/components/cards/CardContent/index.js +144 -76
  3. package/dist/components/cards/CardContent/styled.d.ts +0 -7
  4. package/dist/components/cards/CardContent/styled.js +60 -53
  5. package/dist/components/cards/ListContent/index.d.ts +0 -12
  6. package/dist/components/cards/ListContent/index.js +172 -87
  7. package/dist/components/cards/ListContent/styled.d.ts +0 -7
  8. package/dist/components/cards/ListContent/styled.js +71 -26
  9. package/dist/index.d.ts +1 -1
  10. package/dist/index.js +4 -4
  11. package/dist/stories/Oolib/components/TagLink.stories.js +1 -3
  12. package/dist/stories/Oolib/components/cards/CardContent.stories.d.ts +0 -73
  13. package/dist/stories/Oolib/components/cards/CardContent.stories.js +35 -35
  14. package/dist/stories/Oolib/components/cards/ListContent.stories.d.ts +0 -75
  15. package/dist/stories/Oolib/components/cards/ListContent.stories.js +38 -38
  16. package/dist/stories/v2/components/ImagePlaceHolder.stories.d.ts +19 -0
  17. package/dist/stories/v2/components/ImagePlaceHolder.stories.js +35 -0
  18. package/dist/stories/v2/components/cards/ListContent.stories.d.ts +72 -0
  19. package/dist/stories/v2/components/cards/ListContent.stories.js +54 -0
  20. package/dist/stories/v2/components/cards/utils/cardArgTypes.d.ts +18 -0
  21. package/dist/stories/v2/components/cards/utils/cardArgTypes.js +11 -1
  22. package/dist/v2/components/Divider/index.d.ts +2 -0
  23. package/dist/v2/components/Divider/index.js +19 -0
  24. package/dist/v2/components/ImagePlaceholder/index.d.ts +4 -1
  25. package/dist/v2/components/ImagePlaceholder/index.js +44 -4
  26. package/dist/v2/components/ImagePlaceholder/styled.js +9 -3
  27. package/dist/v2/components/MetaBlock/index.js +16 -9
  28. package/dist/v2/components/Tags/Comps/TagDisplay/styled.js +2 -2
  29. package/dist/v2/components/cards/ListContent/index.d.ts +12 -0
  30. package/dist/v2/components/cards/ListContent/index.js +83 -0
  31. package/dist/v2/components/cards/ListContent/styled.d.ts +13 -0
  32. package/dist/v2/components/cards/ListContent/styled.js +56 -0
  33. package/package.json +1 -1
@@ -1,87 +1,172 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ListContent = void 0;
7
- var react_1 = __importDefault(require("react"));
8
- var styled_components_1 = require("styled-components");
9
- var injectHttps_1 = require("../../../utils/injectHttps");
10
- var utilsOolib_1 = require("../../../utilsOolib");
11
- var ActionMenu_1 = require("../../ActionMenu");
12
- var ImageInput_1 = require("../../ImageInput");
13
- var Tags_1 = require("../../Tags");
14
- var VideoInput_1 = __importDefault(require("../../VideoInput"));
15
- var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
16
- var CardPlaceholder_1 = require("../comps/CardPlaceholder");
17
- var LineClampWrapper_1 = require("../comps/LineClampWrapper");
18
- var styled_1 = require("../styled");
19
- var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
20
- var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
21
- var mediaDataExists_1 = require("../utils/mediaDataExists");
22
- var parseCardConfig_1 = require("../utils/parseCardConfig");
23
- var styled_js_1 = require("./styled.js");
24
- var ProfileImageInput_1 = require("../../ImageInput/derivedComps/ProfileImageInput");
25
- var _EXPORTS_1 = require("../../../utils/_EXPORTS");
26
- var mixins_1 = require("../../../themes/mixins");
27
- var ListContent = function (_a) {
28
- var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
29
- var theme = (0, styled_components_1.useTheme)();
30
- var localize = (0, utilsOolib_1.useLocale)();
31
- var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
32
- var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
33
- var _c = (0, parseCardConfig_1.parseCardConfig)({
34
- config: config,
35
- data: data,
36
- parseSpecialSyntax: parseSpecialSyntax,
37
- }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlock = _c.metaBlock;
38
- var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
39
- if (dontRenderRes)
40
- return dontRenderRes;
41
- var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
42
- to: to,
43
- openInNewTab: openInNewTab,
44
- }), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
45
- var mediaConfigExists = config.video || config.image;
46
- return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
47
- react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
48
- react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: mediaConfigExists /*cuz if it does space needs to be allocated for it */, actions: actions },
49
- react_1.default.createElement(styled_js_1.StyledHeader, null,
50
- (cardLabel || statusTag) &&
51
- react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, { style: { maxWidth: '100%', paddingBottom: '0.7rem' } },
52
- cardLabel && (react_1.default.createElement("div", { title: cardLabel, style: { maxWidth: '100%' } },
53
- react_1.default.createElement(styled_1.StyledLabel, { color: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors) }, cardLabel))),
54
- statusTag && (react_1.default.createElement(Tags_1.TagDisplay, { variant: "secondary", XS: true, display: statusTag }))),
55
- title ? (react_1.default.createElement("div", { style: { flexGrow: 1 } },
56
- react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
57
- react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
58
- react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null,
59
- (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
60
- react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
61
- variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
62
- mediaConfigExists && react_1.default.createElement(react_1.default.Fragment, null,
63
- !(0, mediaDataExists_1.imageDataExists)(image) && !(0, mediaDataExists_1.videoDataExists)(video) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
64
- react_1.default.createElement(CardPlaceholder_1.CardPlaceholder, { style: { height: "100%", width: "auto" } }))),
65
- (0, mediaDataExists_1.videoDataExists)(video) && !(0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
66
- react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
67
- react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
68
- react_1.default.createElement("div", { style: {
69
- position: "absolute",
70
- top: 0,
71
- left: 0,
72
- width: "100%",
73
- height: "100%",
74
- } })))) : null,
75
- (0, mediaDataExists_1.imageDataExists)(image) && (react_1.default.createElement(styled_js_1.StyledMediaMask, null,
76
- // <div
77
- // // style={{
78
- // // width: "14rem",
79
- // // }}
80
- // >
81
- react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })
82
- // </div>
83
- ))),
84
- actions && react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actions, align: "right" })))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
85
- react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title })))))));
86
- };
87
- exports.ListContent = ListContent;
1
+ // import React from "react";
2
+ // import { useTheme } from "styled-components";
3
+ // import { injectHttps } from "../../../utils/injectHttps";
4
+ // import { getPrimaryColorText, useLocale } from "../../../utilsOolib";
5
+ // import { ActionMenu } from "../../ActionMenu";
6
+ // import { ImageInput } from "../../ImageInput";
7
+ // import { TagDisplay } from "../../Tags";
8
+ // import VideoInput from "../../VideoInput";
9
+ // import MetaBlock from "../../MetaBlock";
10
+ // import { CardPlaceholder } from "../comps/CardPlaceholder";
11
+ // import { LineClampWrapper } from "../comps/LineClampWrapper";
12
+ // import { StyledLabel, StyledTitle, StyledTitleSpan } from "../styled";
13
+ // import { decideLinkCompAndTarget } from "../utils/decideLinkCompAndTarget";
14
+ // import { dontRenderIfBothOnClickAndTo } from "../utils/dontRenderIfBothOnClickAndTo";
15
+ // import { imageDataExists, videoDataExists } from "../utils/mediaDataExists";
16
+ // import { parseCardConfig } from "../utils/parseCardConfig";
17
+ // import {
18
+ // StyledContentModule2,
19
+ // StyledHeader,
20
+ // StyledListElemContainer,
21
+ // StyledListWrapper,
22
+ // StyledMediaMask,
23
+ // StyledStatusTagCardLabelWrapper,
24
+ // StyledVideoWrapper,
25
+ // } from "./styled.js";
26
+ // import { ProfileImageInput } from "../../ImageInput/derivedComps/ProfileImageInput";
27
+ // import { useScreenWidth } from "../../../utils/_EXPORTS";
28
+ // import { getBreakPoint } from "../../../themes/mixins";
29
+ // export const ListContent = ({
30
+ // id,
31
+ // data,
32
+ // config,
33
+ // to,
34
+ // onClick,
35
+ // openInNewTab,
36
+ // actions,
37
+ // statusTag,
38
+ // variant = "content", //alt = profile
39
+ // }) => {
40
+ // const theme = useTheme();
41
+ // const localize = useLocale();
42
+ // const screenWidth = useScreenWidth()
43
+ // const { parseSpecialSyntax } = theme || {};
44
+ // const { cardLabel, title, video, image, metaBlock } = parseCardConfig({
45
+ // config,
46
+ // data,
47
+ // parseSpecialSyntax,
48
+ // });
49
+ // let dontRenderRes = dontRenderIfBothOnClickAndTo({ onClick, to });
50
+ // if (dontRenderRes) return dontRenderRes;
51
+ // const { LinkComp, target, externalUrl } = decideLinkCompAndTarget({
52
+ // to,
53
+ // openInNewTab,
54
+ // });
55
+ // const mediaConfigExists = config.video || config.image;
56
+ // return (
57
+ // <LinkComp target={target} href={injectHttps(to)} to={to}>
58
+ // <StyledListElemContainer
59
+ // id={id}
60
+ // onClick={onClick ? e => onClick(e,data) : undefined}
61
+ // /** imp to pass data cuz its used by some on okf eg. LinkOrEmbedModal*/
62
+ // >
63
+ // <StyledListWrapper
64
+ // mediaConfigExists={
65
+ // mediaConfigExists /*cuz if it does space needs to be allocated for it */
66
+ // }
67
+ // actions={actions}
68
+ // >
69
+ // <StyledHeader>
70
+ // {(cardLabel || statusTag) &&
71
+ // <StyledStatusTagCardLabelWrapper style={{maxWidth: '100%', paddingBottom: '0.7rem'}}>
72
+ // {cardLabel && (
73
+ // <div title={cardLabel} style={{maxWidth: '100%'}}>
74
+ // <StyledLabel color={getPrimaryColorText(theme?.colors)}>
75
+ // {cardLabel}
76
+ // </StyledLabel>
77
+ // </div>
78
+ // )}
79
+ // {statusTag && (
80
+ // <TagDisplay variant={"secondary"} XS display={statusTag} />
81
+ // )}
82
+ // </StyledStatusTagCardLabelWrapper>}
83
+ // {title ? (
84
+ // <div style={{flexGrow: 1}}>
85
+ // <LineClampWrapper noOfLines_M={6} noOfLines_D={3} title={title}>
86
+ // <StyledTitle capitalize className="StyledTitle">
87
+ // <StyledTitleSpan className="StyledTitleSpan">
88
+ // {localize(title)}
89
+ // </StyledTitleSpan>
90
+ // </StyledTitle>
91
+ // </LineClampWrapper>
92
+ // </div>
93
+ // ) : null}
94
+ // {metaBlock?.length > 0 && (
95
+ // <div style={{ width: "100%", paddingTop: "1rem" }}>
96
+ // <MetaBlock data={data} config={metaBlock} />
97
+ // </div>
98
+ // )}
99
+ // </StyledHeader>
100
+ // {variant === "content" ? (
101
+ // (mediaConfigExists || actions) && (
102
+ // <StyledContentModule2>
103
+ // {mediaConfigExists && <>
104
+ // {!imageDataExists(image) && !videoDataExists(video) && (
105
+ // <StyledMediaMask>
106
+ // <CardPlaceholder
107
+ // style={{ height: "100%", width: "auto" }}
108
+ // />
109
+ // </StyledMediaMask>
110
+ // )}
111
+ // {videoDataExists(video) && !imageDataExists(image) ? (
112
+ // <StyledMediaMask>
113
+ // <StyledVideoWrapper>
114
+ // <VideoInput
115
+ // value={video}
116
+ // readOnly={true}
117
+ // light={true}
118
+ // height={"100%"}
119
+ // />
120
+ // {/**below div ensures the video is not clickable */}
121
+ // <div
122
+ // style={{
123
+ // position: "absolute",
124
+ // top: 0,
125
+ // left: 0,
126
+ // width: "100%",
127
+ // height: "100%",
128
+ // }}
129
+ // />
130
+ // </StyledVideoWrapper>
131
+ // </StyledMediaMask>
132
+ // ) : null}
133
+ // {imageDataExists(image) && (
134
+ // <StyledMediaMask>
135
+ // {
136
+ // // <div
137
+ // // // style={{
138
+ // // // width: "14rem",
139
+ // // // }}
140
+ // // >
141
+ // <ImageInput
142
+ // stretchToFullHeight
143
+ // value={image}
144
+ // aspectRatio={"5/3"}
145
+ // readOnly={true}
146
+ // enableCaptions={false}
147
+ // disableImageBorder={true}
148
+ // defaultImageSpread={"cover"}
149
+ // />
150
+ // // </div>
151
+ // }
152
+ // </StyledMediaMask>
153
+ // )}
154
+ // </>}
155
+ // {actions && <ActionMenu actions={actions} align="right" />}
156
+ // </StyledContentModule2>
157
+ // )
158
+ // ) : (
159
+ // <StyledContentModule2>
160
+ // <ProfileImageInput
161
+ // readOnly
162
+ // value={image}
163
+ // size={screenWidth >= getBreakPoint('sm') ? 60 : 70}
164
+ // imageTitle={title}
165
+ // />
166
+ // </StyledContentModule2>
167
+ // )}
168
+ // </StyledListWrapper>
169
+ // </StyledListElemContainer>
170
+ // </LinkComp>
171
+ // );
172
+ // };
@@ -1,7 +0,0 @@
1
- export const StyledListElemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export const StyledStatusTagCardLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export const StyledMediaMask: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,26 +1,71 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __importDefault = (this && this.__importDefault) || function (mod) {
7
- return (mod && mod.__esModule) ? mod : { "default": mod };
8
- };
9
- Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.StyledVideoWrapper = exports.StyledMediaMask = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
11
- var styled_components_1 = __importDefault(require("styled-components"));
12
- var themes_1 = require("../../../themes");
13
- var mixins_1 = require("../../../themes/mixins");
14
- var Typo_1 = require("../../Typo");
15
- var styled_1 = require("../styled");
16
- exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n #CardPlaceholder {\n opacity: 1;\n }\n }\n"], ["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n #CardPlaceholder {\n opacity: 1;\n }\n }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
17
- exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"])));
18
- exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n \n min-width: 0;\n flex-grow: 1;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n \n min-width: 0;\n flex-grow: 1;\n"])));
19
- /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
20
- var mediaContainerWidth = 70;
21
- var mediaContainerWidth_SM = 60;
22
- exports.StyledListWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: auto;\n display: flex;\n gap:2rem;\n position: relative;\n \n"], ["\n width: auto;\n display: flex;\n gap:2rem;\n position: relative;\n \n"])));
23
- exports.StyledContentModule2 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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"));
24
- exports.StyledMediaMask = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n height: 84px;\n width: ", "px;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n height: 84px;\n width: ", "px;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
25
- exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"], ["\n width: 14rem;\n height: 8.4rem;\n ", " {\n height: 6rem;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
26
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
1
+ // import styled from "styled-components";
2
+ // import { colors } from "../../../themes";
3
+ // import { ellipsis, mediaQuery } from "../../../themes/mixins";
4
+ // import { LABEL } from "../../Typo";
5
+ // import { CSSTitleAnimationOnHover } from "../styled";
6
+ // export const StyledListElemContainer = styled.div`
7
+ // border-bottom: 1px solid ${colors.greyColor15};
8
+ // margin-bottom: 2rem;
9
+ // padding-bottom: 2rem;
10
+ // cursor: pointer;
11
+ // &:hover {
12
+ // ${CSSTitleAnimationOnHover};
13
+ // #CardPlaceholder {
14
+ // opacity: 1;
15
+ // }
16
+ // }
17
+ // `;
18
+ // export const StyledStatusTagCardLabelWrapper = styled.div`
19
+ // display: flex;
20
+ // gap: 1rem;
21
+ // align-items: center;
22
+ // flex-wrap: wrap;
23
+ // `
24
+ // export const StyledHeader = styled.div`
25
+ // display: flex;
26
+ // align-items: flex-start;
27
+ // flex-direction: column;
28
+ // flex-wrap: wrap;
29
+ // min-width: 0;
30
+ // flex-grow: 1;
31
+ // `;
32
+ // /** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
33
+ // const mediaContainerWidth = 70;
34
+ // const mediaContainerWidth_SM = 60;
35
+ // export const StyledListWrapper = styled.div`
36
+ // width: auto;
37
+ // display: flex;
38
+ // gap:2rem;
39
+ // position: relative;
40
+ // `;
41
+ // export const StyledContentModule2 = styled.div`
42
+ // display: flex;
43
+ // flex-direction: column-reverse;
44
+ // justify-content: flex-end;
45
+ // align-items: flex-end;
46
+ // gap: 1rem;
47
+ // flex-shrink: 0;
48
+ // ${mediaQuery("sm")} {
49
+ // flex-direction: row;
50
+ // align-items: center;
51
+ // }
52
+ // `;
53
+ // export const StyledMediaMask = styled.div`
54
+ // display: flex;
55
+ // flex-direction: column;
56
+ // align-items: center;
57
+ // overflow: hidden;
58
+ // height: 84px;
59
+ // width: ${mediaContainerWidth}px;
60
+ // ${mediaQuery("sm")} {
61
+ // width: ${mediaContainerWidth_SM}px;
62
+ // height: 6rem;
63
+ // }
64
+ // `;
65
+ // export const StyledVideoWrapper = styled.div`
66
+ // width: 14rem;
67
+ // height: 8.4rem;
68
+ // ${mediaQuery("sm")} {
69
+ // height: 6rem;
70
+ // }
71
+ // `
package/dist/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export * from "./v2/components/Buttons";
19
19
  export * from "./v2/components/Typo2";
20
20
  export * from "./v2/components/BlockLabel";
21
21
  export * from "./v2/components/cards/CardContent";
22
+ export * from "./v2/components/cards/ListContent";
22
23
  export * from "./v2/components/Tags";
23
24
  export * from "./v2/components/ImagePlaceholder";
24
25
  export * from "./v2/components/TextInputs";
@@ -49,7 +50,6 @@ export { TimePicker } from "./components/TimePicker";
49
50
  export { TimeRangePicker } from "./components/TimeRangePicker";
50
51
  export { DateTimePicker } from "./components/DateTimePicker";
51
52
  export { DateTimeRangePicker } from "./components/DateTimeRangePicker";
52
- export { ListContent } from "./components/cards/ListContent";
53
53
  export { CardEmbed } from "./components/cards/CardEmbed";
54
54
  export { CardProfile } from "./components/cards/CardProfile";
55
55
  export { ListProfile } from "./components/cards/ListProfile";
package/dist/index.js CHANGED
@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  return (mod && mod.__esModule) ? mod : { "default": mod };
18
18
  };
19
19
  Object.defineProperty(exports, "__esModule", { value: true });
20
- exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
- exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = void 0;
20
+ exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
21
+ exports.HintsProvider = exports.colors2 = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = void 0;
22
22
  //css and styling related ( styled-components )
23
23
  var globalStyles_1 = require("./globalStyles");
24
24
  Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -103,8 +103,7 @@ var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
103
103
  Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
104
104
  //cards
105
105
  // export {CardContent} from './components/cards/CardContent'
106
- var ListContent_1 = require("./components/cards/ListContent");
107
- Object.defineProperty(exports, "ListContent", { enumerable: true, get: function () { return ListContent_1.ListContent; } });
106
+ // export {ListContent} from './components/cards/ListContent'
108
107
  var CardEmbed_1 = require("./components/cards/CardEmbed");
109
108
  Object.defineProperty(exports, "CardEmbed", { enumerable: true, get: function () { return CardEmbed_1.CardEmbed; } });
110
109
  var CardProfile_1 = require("./components/cards/CardProfile");
@@ -176,6 +175,7 @@ __exportStar(require("./v2/components/Buttons"), exports);
176
175
  __exportStar(require("./v2/components/Typo2"), exports);
177
176
  __exportStar(require("./v2/components/BlockLabel"), exports);
178
177
  __exportStar(require("./v2/components/cards/CardContent"), exports);
178
+ __exportStar(require("./v2/components/cards/ListContent"), exports);
179
179
  __exportStar(require("./v2/components/Tags"), exports);
180
180
  __exportStar(require("./v2/components/ImagePlaceholder"), exports);
181
181
  __exportStar(require("./v2/components/TextInputs"), exports);
@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.Tag_Link_Secondary = exports.Tag_Link_Primary = void 0;
15
- var react_router_dom_1 = require("react-router-dom");
16
15
  var Tags_1 = require("../../../components/Tags");
17
16
  exports.default = {
18
17
  title: 'Components/Tag Link',
@@ -51,8 +50,7 @@ var GenTag = function (_a) {
51
50
  backgroundColor: args.invert ? '#383838' : '',
52
51
  padding: '20px',
53
52
  } },
54
- React.createElement(react_router_dom_1.MemoryRouter, null,
55
- React.createElement(Comp, __assign({}, args, { variant: variant })))));
53
+ React.createElement(Comp, __assign({}, args, { variant: variant }))));
56
54
  };
57
55
  var Tag_Link_Primary = function (args) {
58
56
  return React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink });
@@ -1,79 +1,6 @@
1
1
  declare namespace _default {
2
2
  let title: string;
3
- let argTypes: {
4
- tagDisplay: {
5
- name: string;
6
- control: {
7
- type: string;
8
- };
9
- };
10
- highlight: {
11
- name: string;
12
- control: {
13
- type: string;
14
- };
15
- };
16
- actions: {
17
- name: string;
18
- control: {
19
- type: string;
20
- };
21
- };
22
- cardLabel: {
23
- name: string;
24
- control: string;
25
- };
26
- title: {
27
- name: string;
28
- control: string;
29
- };
30
- mediaType: {
31
- name: string;
32
- control: string;
33
- options: string[];
34
- };
35
- image: {
36
- name: string;
37
- control: string;
38
- if: {
39
- arg: string;
40
- eq: string;
41
- };
42
- };
43
- video: {
44
- name: string;
45
- control: string;
46
- if: {
47
- arg: string;
48
- eq: string;
49
- };
50
- };
51
- metaText: {
52
- name: string;
53
- control: string;
54
- };
55
- metaName: {
56
- name: string;
57
- control: string;
58
- };
59
- metaDate: {
60
- name: string;
61
- control: string;
62
- };
63
- };
64
- let args: {
65
- actions: boolean;
66
- cardLabel: string;
67
- title: string;
68
- metaText: string;
69
- metaName: string;
70
- metaDate: number;
71
- mediaType: string;
72
- image: string;
73
- video: string;
74
- };
75
3
  }
76
4
  export default _default;
77
5
  export function CardContent(args: any): React.JSX.Element;
78
- export function Playground(args: any): React.JSX.Element;
79
6
  import React from "react";
@@ -1,47 +1,47 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
4
  };
16
5
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Playground = exports.CardContent = void 0;
6
+ exports.CardContent = void 0;
18
7
  var react_1 = __importDefault(require("react"));
19
- var Container_1 = require("../../../../components/Container");
20
- var Paddings_1 = require("../../../../components/Paddings");
21
- var WrapperCardGrid_1 = require("../../../../components/Wrappers/WrapperCardGrid");
22
- var Wrappers_1 = require("../../../../components/Wrappers");
23
- var CardContent_1 = require("../../../../components/cards/CardContent");
24
- var cardArgTypes_1 = require("./utils/cardArgTypes");
25
- var parseCardArgs_1 = require("./utils/parseCardArgs");
26
- var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
8
+ // import { Container } from "../../../../components/Container";
9
+ // import { PaddingTopBottom30 } from "../../../../components/Paddings";
10
+ // import { WrapperCardGrid } from "../../../../components/Wrappers/WrapperCardGrid";
11
+ // import { Wrapper1500 } from "../../../../components/Wrappers";
12
+ // import { CardContent as CardContent_ } from "../../../../components/cards/CardContent";
13
+ // import { commonCardArgs, commonCardArgTypes, cardContentArgs, cardContentArgTypes } from "./utils/cardArgTypes";
14
+ // import { parseCardArgs } from "./utils/parseCardArgs";
15
+ // import { makeArrayFromLength } from "../../../../utils/makeArrayFromLength";
27
16
  exports.default = {
28
17
  title: "Components/CardContent",
29
- argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.cardContentArgTypes),
30
- args: __assign(__assign({}, cardArgTypes_1.commonCardArgs), cardArgTypes_1.cardContentArgs),
18
+ // argTypes: {
19
+ // ...commonCardArgTypes,
20
+ // ...cardContentArgTypes
21
+ // },
22
+ // args: {
23
+ // ...commonCardArgs,
24
+ // ...cardContentArgs
25
+ // },
31
26
  };
32
27
  var CardContent = function (args) {
33
- var props = (0, parseCardArgs_1.parseCardArgs)(args);
34
- return (react_1.default.createElement(Container_1.Container, null,
35
- react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
36
- react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null,
37
- react_1.default.createElement(CardContent_1.CardContent, __assign({}, props, { config: props.config }))))));
28
+ // const props = parseCardArgs(args);
29
+ return (react_1.default.createElement(react_1.default.Fragment, null));
38
30
  };
39
31
  exports.CardContent = CardContent;
40
- var Playground = function (args) {
41
- var props = (0, parseCardArgs_1.parseCardArgs)(args);
42
- return (react_1.default.createElement(Container_1.Container, null,
43
- react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
44
- react_1.default.createElement(Wrappers_1.Wrapper1500, { left: true },
45
- react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(CardContent_1.CardContent, __assign({}, props, { config: props.config }))); }))))));
46
- };
47
- exports.Playground = Playground;
32
+ // export const Playground = (args) => {
33
+ // const props = parseCardArgs(args);
34
+ // return (
35
+ // <Container>
36
+ // {/* <PaddingTopBottom30>
37
+ // <Wrapper1500 left>
38
+ // <WrapperCardGrid>
39
+ // {makeArrayFromLength(50).map(d => (
40
+ // <CardContent_ {...props} config={props.config} />
41
+ // )) }
42
+ // </WrapperCardGrid>
43
+ // </Wrapper1500>
44
+ // </PaddingTopBottom30> */}
45
+ // </Container>
46
+ // );
47
+ // };