oolib 2.173.0 → 2.173.2
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.
- package/dist/index.d.ts +2 -2
- package/dist/index.js +4 -2
- package/dist/stories/v2/components/TagDisplay.stories.d.ts +23 -8
- package/dist/stories/v2/components/TagDisplay.stories.js +38 -39
- package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts +1 -1
- package/dist/v2/components/Tags/Comps/TagDisplay/index.js +2 -2
- package/dist/v2/components/Tags/Comps/TagDisplay/styled.js +22 -13
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -75,8 +75,8 @@ export { default as MetaBlockV2 } from "./v2/components/MetaBlock";
|
|
|
75
75
|
export { DateRangePicker as DateRangePickerV2 } from "./v2/components/DateRangePicker";
|
|
76
76
|
export { HomeCover as HomeCoverV2 } from "./v2/components/HomeCover";
|
|
77
77
|
export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
|
|
78
|
-
export { TagClear, TagLink, TagSelect } from "./components/Tags";
|
|
78
|
+
export { TagClear, TagLink, TagSelect, TagDisplay } from "./components/Tags";
|
|
79
79
|
export { BannerAlert, BannerInfo } from "./components/Banners";
|
|
80
80
|
export { BannerContext, useBannerContext, BannerProvider } from "./components/Banners/bannerContext";
|
|
81
81
|
export { TagDisplay as TagDisplayV2, TagLink as TagLinkV2, TagClear as TagClearV2 } from "./v2/components/Tags";
|
|
82
|
-
export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact } from "./v2/components/Buttons";
|
|
82
|
+
export { ButtonPrimary as ButtonPrimaryV2, ButtonSecondary as ButtonSecondaryV2, ButtonTertiary as ButtonTertiaryV2, ButtonGhost as ButtonGhostV2, ButtonPrimaryCompact, ButtonSecondaryCompact, ButtonTertiaryCompact } from "./v2/components/Buttons";
|
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.
|
|
21
|
-
exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
|
|
20
|
+
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.DataVizAccordion = exports.BarChart = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.TagDisplay = exports.TagSelect = exports.TagLink = exports.TagClear = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
21
|
+
exports.HomeCoverV2 = exports.DateRangePickerV2 = exports.MetaBlockV2 = exports.colors2 = exports.TabBarV2 = exports.ButtonTertiaryCompact = exports.ButtonSecondaryCompact = exports.ButtonPrimaryCompact = exports.ButtonGhostV2 = exports.ButtonTertiaryV2 = exports.ButtonSecondaryV2 = exports.ButtonPrimaryV2 = exports.TagClearV2 = exports.TagLinkV2 = exports.TagDisplayV2 = exports.HintsProvider = exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = 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; } });
|
|
@@ -42,6 +42,7 @@ var Tags_1 = require("./components/Tags");
|
|
|
42
42
|
Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return Tags_1.TagClear; } });
|
|
43
43
|
Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return Tags_1.TagLink; } });
|
|
44
44
|
Object.defineProperty(exports, "TagSelect", { enumerable: true, get: function () { return Tags_1.TagSelect; } });
|
|
45
|
+
Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return Tags_1.TagDisplay; } });
|
|
45
46
|
__exportStar(require("./components/Breadcrumbs"), exports);
|
|
46
47
|
// export * from './components/BlockLabel';
|
|
47
48
|
__exportStar(require("./components/InlineAlert"), exports);
|
|
@@ -191,6 +192,7 @@ var Buttons_1 = require("./v2/components/Buttons");
|
|
|
191
192
|
Object.defineProperty(exports, "ButtonPrimaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonPrimary; } });
|
|
192
193
|
Object.defineProperty(exports, "ButtonSecondaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonSecondary; } });
|
|
193
194
|
Object.defineProperty(exports, "ButtonTertiaryV2", { enumerable: true, get: function () { return Buttons_1.ButtonTertiary; } });
|
|
195
|
+
Object.defineProperty(exports, "ButtonGhostV2", { enumerable: true, get: function () { return Buttons_1.ButtonGhost; } });
|
|
194
196
|
Object.defineProperty(exports, "ButtonPrimaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonPrimaryCompact; } });
|
|
195
197
|
Object.defineProperty(exports, "ButtonSecondaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonSecondaryCompact; } });
|
|
196
198
|
Object.defineProperty(exports, "ButtonTertiaryCompact", { enumerable: true, get: function () { return Buttons_1.ButtonTertiaryCompact; } });
|
|
@@ -63,13 +63,28 @@ declare namespace _default {
|
|
|
63
63
|
}
|
|
64
64
|
export default _default;
|
|
65
65
|
export function Playground(args: any): import("react").JSX.Element;
|
|
66
|
-
export function
|
|
67
|
-
export
|
|
68
|
-
export
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
export
|
|
72
|
-
export
|
|
73
|
-
export
|
|
66
|
+
export function Tag_Display(args: any): import("react").JSX.Element;
|
|
67
|
+
export namespace Tag_Display {
|
|
68
|
+
export namespace args_1 {
|
|
69
|
+
let variant: string;
|
|
70
|
+
}
|
|
71
|
+
export { args_1 as args };
|
|
72
|
+
export namespace argTypes_1 {
|
|
73
|
+
export namespace variant_1 {
|
|
74
|
+
let name_6: string;
|
|
75
|
+
export { name_6 as name };
|
|
76
|
+
let options_1: string[];
|
|
77
|
+
export { options_1 as options };
|
|
78
|
+
export namespace control_3 {
|
|
79
|
+
let type_3: string;
|
|
80
|
+
export { type_3 as type };
|
|
81
|
+
}
|
|
82
|
+
export { control_3 as control };
|
|
83
|
+
export let defaultValue: string;
|
|
84
|
+
}
|
|
85
|
+
export { variant_1 as variant };
|
|
86
|
+
}
|
|
87
|
+
export { argTypes_1 as argTypes };
|
|
88
|
+
}
|
|
74
89
|
declare const availableColors: string[];
|
|
75
90
|
declare const availableTextColors: string[];
|
|
@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
20
20
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
21
21
|
};
|
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
exports.
|
|
23
|
+
exports.Tag_Display = exports.Playground = void 0;
|
|
24
24
|
var Tags_1 = require("../../../v2/components/Tags");
|
|
25
25
|
var Typo2_1 = require("../../../v2/components/Typo2");
|
|
26
26
|
var themes_1 = require("../../../v2/themes");
|
|
@@ -61,7 +61,7 @@ exports.default = {
|
|
|
61
61
|
},
|
|
62
62
|
args: {
|
|
63
63
|
display: "Tag Display",
|
|
64
|
-
size: "
|
|
64
|
+
size: "Small",
|
|
65
65
|
value: "text",
|
|
66
66
|
id: "tags",
|
|
67
67
|
tagColor: "",
|
|
@@ -73,20 +73,14 @@ var GenTag = function (_a) {
|
|
|
73
73
|
args[args["size"]] = true;
|
|
74
74
|
args.tagColor = themes_1.colors[args.tagColor];
|
|
75
75
|
args.textColor = themes_1.colors[args.textColor];
|
|
76
|
-
return (React.createElement("div",
|
|
76
|
+
return (React.createElement("div", { style: { padding: "2rem" } },
|
|
77
77
|
React.createElement(Comp, __assign({}, args, { variant: variant }))));
|
|
78
78
|
};
|
|
79
79
|
var Playground = function (args) {
|
|
80
80
|
return (React.createElement("div", { style: { display: 'flex', flexDirection: "column", gap: '3rem', margin: '2rem 10rem' } },
|
|
81
81
|
React.createElement("div", null,
|
|
82
|
-
React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "
|
|
82
|
+
React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Default"),
|
|
83
83
|
React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay })),
|
|
84
|
-
React.createElement("div", null,
|
|
85
|
-
React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Secondary"),
|
|
86
|
-
React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "secondary" })),
|
|
87
|
-
React.createElement("div", null,
|
|
88
|
-
React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Grey"),
|
|
89
|
-
React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "grey" })),
|
|
90
84
|
React.createElement("div", null,
|
|
91
85
|
React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Positive"),
|
|
92
86
|
React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "positive" })),
|
|
@@ -104,35 +98,40 @@ var Playground = function (args) {
|
|
|
104
98
|
React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "special" }))));
|
|
105
99
|
};
|
|
106
100
|
exports.Playground = Playground;
|
|
107
|
-
var
|
|
108
|
-
return React.createElement(
|
|
109
|
-
};
|
|
110
|
-
exports.Tag_Display_Primary = Tag_Display_Primary;
|
|
111
|
-
var Tag_Display_Secondary = function (args) {
|
|
112
|
-
return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "secondary" });
|
|
113
|
-
};
|
|
114
|
-
exports.Tag_Display_Secondary = Tag_Display_Secondary;
|
|
115
|
-
var Tag_Display_Grey = function (args) {
|
|
116
|
-
return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "grey" });
|
|
101
|
+
var Tag_Display = function (args) {
|
|
102
|
+
return React.createElement(Tags_1.TagDisplay, __assign({}, args));
|
|
117
103
|
};
|
|
118
|
-
exports.
|
|
119
|
-
|
|
120
|
-
|
|
104
|
+
exports.Tag_Display = Tag_Display;
|
|
105
|
+
exports.Tag_Display.args = {
|
|
106
|
+
variant: "default"
|
|
121
107
|
};
|
|
122
|
-
exports.
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
};
|
|
130
|
-
exports.Tag_Display_Warning = Tag_Display_Warning;
|
|
131
|
-
var Tag_Display_Negative = function (args) {
|
|
132
|
-
return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "negative" });
|
|
133
|
-
};
|
|
134
|
-
exports.Tag_Display_Negative = Tag_Display_Negative;
|
|
135
|
-
var Tag_Display_Special = function (args) {
|
|
136
|
-
return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "special" });
|
|
108
|
+
exports.Tag_Display.argTypes = {
|
|
109
|
+
variant: {
|
|
110
|
+
name: "Variant",
|
|
111
|
+
options: ["positive", "inProgress", "warning", "negative", "special", "default"],
|
|
112
|
+
control: { type: "select" },
|
|
113
|
+
defaultValue: "default",
|
|
114
|
+
},
|
|
137
115
|
};
|
|
138
|
-
|
|
116
|
+
// Tag_Display.parameters = { controls: { exclude: ["value", "tagColor"] } };
|
|
117
|
+
// export const Tag_Display_Secondary = (args) => {
|
|
118
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="secondary" />;
|
|
119
|
+
// };
|
|
120
|
+
// export const Tag_Display_Grey = (args) => {
|
|
121
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="grey" />;
|
|
122
|
+
// };
|
|
123
|
+
// export const Tag_Display_Positive = (args) => {
|
|
124
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="positive" />;
|
|
125
|
+
// };
|
|
126
|
+
// export const Tag_Display_InProgress = (args) => {
|
|
127
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="inProgress" />;
|
|
128
|
+
// };
|
|
129
|
+
// export const Tag_Display_Warning = (args) => {
|
|
130
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="warning" />;
|
|
131
|
+
// };
|
|
132
|
+
// export const Tag_Display_Negative = (args) => {
|
|
133
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="negative" />;
|
|
134
|
+
// };
|
|
135
|
+
// export const Tag_Display_Special = (args) => {
|
|
136
|
+
// return <GenTag args={args} Comp={TagDisplay} variant="special" />;
|
|
137
|
+
// };
|
|
@@ -7,7 +7,7 @@ export interface TagDisplayProps {
|
|
|
7
7
|
XS?: boolean;
|
|
8
8
|
tagColor?: string;
|
|
9
9
|
textColor?: string;
|
|
10
|
-
variant?: '
|
|
10
|
+
variant?: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | 'grey' | "default";
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
13
|
* @component Renders a TagDisplay component with customizable text, style and variant.
|
|
@@ -22,9 +22,9 @@ var getTypoComp_1 = require("../../utils/getTypoComp");
|
|
|
22
22
|
* @return {ReactElement} The rendered TagDisplay component.
|
|
23
23
|
*/
|
|
24
24
|
var TagDisplay = function (_a) {
|
|
25
|
-
var display = _a.display, title = _a.title, style = _a.style, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? '
|
|
25
|
+
var display = _a.display, title = _a.title, style = _a.style, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
|
|
26
26
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
27
|
-
var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo:
|
|
27
|
+
var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: "tag" }); // secondary variant has a different typo - "UI_CAPTION"
|
|
28
28
|
return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, textColor: textColor, tagColor: tagColor, size: size, style: style, title: title },
|
|
29
29
|
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
30
30
|
};
|
|
@@ -42,28 +42,37 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
42
42
|
var styled_1 = require("../styled");
|
|
43
43
|
var themes_1 = require("../../../../themes");
|
|
44
44
|
var grey10 = themes_1.colors.grey10, grey30 = themes_1.colors.grey30, grey40 = themes_1.colors.grey40, white = themes_1.colors.white, grey80 = themes_1.colors.grey80, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
|
|
45
|
-
exports.StyledTagDisplay = styled_components_1.default.div(
|
|
45
|
+
exports.StyledTagDisplay = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: max-content;\n ", "\n ", "\n"], ["\n width: max-content;\n ", "\n ", "\n"])), function (_a) {
|
|
46
46
|
var size = _a.size;
|
|
47
47
|
return (0, styled_1.commonStyle)({ size: size });
|
|
48
48
|
}, function (_a) {
|
|
49
49
|
var variant = _a.variant, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
|
|
50
50
|
switch (variant) {
|
|
51
|
-
case 'primary':
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
// case 'primary':
|
|
52
|
+
// return css`
|
|
53
|
+
// background-color: ${tagColor || grey40};
|
|
54
|
+
// color: ${textColor || white};
|
|
55
|
+
// `;
|
|
56
|
+
// case 'secondary':
|
|
57
|
+
// return css`
|
|
58
|
+
// background: none;
|
|
59
|
+
// border: ${(size === 'XS' || size === 'S') ? '1px' : '2px'} solid ${tagColor || grey10};
|
|
60
|
+
// color: ${textColor || grey80};
|
|
61
|
+
// padding: 4px 10px;
|
|
62
|
+
// border-radius: 3.1rem;
|
|
63
|
+
// `;
|
|
55
64
|
case 'positive':
|
|
56
|
-
return (0, styled_components_1.css)(
|
|
65
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), green, textColor || white);
|
|
57
66
|
case 'inProgress':
|
|
58
|
-
return (0, styled_components_1.css)(
|
|
67
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), blue, textColor || white);
|
|
59
68
|
case 'warning':
|
|
60
|
-
return (0, styled_components_1.css)(
|
|
69
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), yellow, textColor || white);
|
|
61
70
|
case 'negative':
|
|
62
|
-
return (0, styled_components_1.css)(
|
|
71
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), tagColor || error, textColor || white);
|
|
63
72
|
case 'special':
|
|
64
|
-
return (0, styled_components_1.css)(
|
|
65
|
-
|
|
66
|
-
return (0, styled_components_1.css)(
|
|
73
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), tagColor || purple, textColor || white);
|
|
74
|
+
default:
|
|
75
|
+
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), tagColor || grey40, textColor || white);
|
|
67
76
|
}
|
|
68
77
|
});
|
|
69
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
78
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|