@appquality/unguess-design-system 2.10.4 → 2.10.5
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/CHANGELOG.md +12 -0
- package/build/index.js +24 -26
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v2.10.5 (Wed May 04 2022)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `master`
|
|
4
|
+
|
|
5
|
+
- fix(dropdowns-menu): remove width auto for all dropdowns menu ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v2.10.4 (Tue May 03 2022)
|
|
2
14
|
|
|
3
15
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -236,8 +236,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
|
|
|
236
236
|
|
|
237
237
|
var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
|
|
238
238
|
|
|
239
|
-
var GlobalStyle = styled.createGlobalStyle(templateObject_1$
|
|
240
|
-
var templateObject_1$
|
|
239
|
+
var GlobalStyle = styled.createGlobalStyle(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"], ["\n ::-webkit-scrollbar-track:hover {\n border-left: solid 1px ", ";\n border-right: solid 1px ", ";\n }\n\n ::-webkit-scrollbar {\n width: 10px;\n }\n\n ::-webkit-scrollbar-track {\n border: solid 2px transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 10px 10px ", ";\n border: solid 2px transparent;\n border-radius: 25px;\n }\n\n /* This stuff is for Firefox */\n * {\n scrollbar-color: ", " #FFFFFF;\n scrollbar-width: thin;\n }\n \n body {\n font-family: ", ";\n margin: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n svg {\n max-height: 100%;\n }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
|
|
240
|
+
var templateObject_1$T;
|
|
241
241
|
|
|
242
242
|
/**
|
|
243
243
|
* Accordions are headers that can be expanded to reveal content or collapsed to hide it.
|
|
@@ -253,7 +253,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
|
|
|
253
253
|
Accordion.Panel = reactAccordions.Accordion.Panel;
|
|
254
254
|
|
|
255
255
|
// import useWindowSize from "../../hooks/useWindowSize";
|
|
256
|
-
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$
|
|
256
|
+
var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
257
257
|
return props.avatarType &&
|
|
258
258
|
props.avatarType !== "image" &&
|
|
259
259
|
"background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
|
|
@@ -278,7 +278,7 @@ var Avatar = function (props) {
|
|
|
278
278
|
return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
|
|
279
279
|
};
|
|
280
280
|
Avatar.Text = UgAvatar.Text;
|
|
281
|
-
var templateObject_1$
|
|
281
|
+
var templateObject_1$S;
|
|
282
282
|
|
|
283
283
|
/**
|
|
284
284
|
* Breadcrumbs mark and communicate a user’s location in the product.
|
|
@@ -299,7 +299,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
|
|
|
299
299
|
*/
|
|
300
300
|
var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
|
|
301
301
|
|
|
302
|
-
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
302
|
+
var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject([""], [""])));
|
|
303
303
|
/**
|
|
304
304
|
* Buttons let users take action quickly.
|
|
305
305
|
* Use a Button to enable actions or decisions that are important to a user’s workflow.
|
|
@@ -311,7 +311,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
|
|
|
311
311
|
var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
|
|
312
312
|
Button.StartIcon = UgButton.StartIcon;
|
|
313
313
|
Button.EndIcon = UgButton.EndIcon;
|
|
314
|
-
var templateObject_1$
|
|
314
|
+
var templateObject_1$R;
|
|
315
315
|
|
|
316
316
|
/**
|
|
317
317
|
A Button group lets users make a selection from a set of options.
|
|
@@ -364,13 +364,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
|
|
|
364
364
|
Tag.Avatar = reactTags.Tag.Avatar;
|
|
365
365
|
Tag.Close = reactTags.Tag.Close;
|
|
366
366
|
|
|
367
|
-
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$
|
|
367
|
+
var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
|
|
368
368
|
/**
|
|
369
369
|
* A Label is used to specify a title for an input.
|
|
370
370
|
* <hr>
|
|
371
371
|
**/
|
|
372
372
|
var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
|
|
373
|
-
var templateObject_1$
|
|
373
|
+
var templateObject_1$Q;
|
|
374
374
|
|
|
375
375
|
var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
|
|
376
376
|
|
|
@@ -577,7 +577,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
|
|
|
577
577
|
})));
|
|
578
578
|
};
|
|
579
579
|
|
|
580
|
-
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$
|
|
580
|
+
var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n"], ["\n background-color: ", ";\n border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
|
|
581
581
|
/**
|
|
582
582
|
* A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
|
|
583
583
|
* <hr>
|
|
@@ -592,13 +592,13 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
|
|
|
592
592
|
- To communicate a typing status, use Inline instead
|
|
593
593
|
*/
|
|
594
594
|
var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
|
|
595
|
-
var templateObject_1$
|
|
595
|
+
var templateObject_1$P;
|
|
596
596
|
|
|
597
597
|
var CampaignCardSkeleton = function () {
|
|
598
598
|
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
|
|
599
599
|
};
|
|
600
600
|
|
|
601
|
-
var flexCenter = styled.css(templateObject_1$
|
|
601
|
+
var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
602
602
|
var flexColumnCenter = styled.css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
|
|
603
603
|
var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
|
|
604
604
|
var theme = _a.theme;
|
|
@@ -617,7 +617,7 @@ var cardStyle = styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
617
617
|
var theme = _a.theme;
|
|
618
618
|
return theme.shadows.boxShadow(theme);
|
|
619
619
|
});
|
|
620
|
-
var templateObject_1$
|
|
620
|
+
var templateObject_1$O, templateObject_2$h, templateObject_3$c, templateObject_4$8;
|
|
621
621
|
|
|
622
622
|
var getStatusIcon = function (status) {
|
|
623
623
|
switch (status) {
|
|
@@ -641,7 +641,7 @@ var getTypeDataIcon = function (type) {
|
|
|
641
641
|
return SvgFunctionalTestRoundIcon;
|
|
642
642
|
}
|
|
643
643
|
};
|
|
644
|
-
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$
|
|
644
|
+
var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
|
|
645
645
|
var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
|
|
646
646
|
var theme = _a.theme;
|
|
647
647
|
return theme.palette.grey["700"];
|
|
@@ -703,9 +703,9 @@ var CampaignCard = function (props) {
|
|
|
703
703
|
}
|
|
704
704
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
|
|
705
705
|
};
|
|
706
|
-
var templateObject_1$
|
|
706
|
+
var templateObject_1$N, templateObject_2$g, templateObject_3$b, templateObject_4$7, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
|
|
707
707
|
|
|
708
|
-
var Wrapper = styled__default["default"](Card)(templateObject_1$
|
|
708
|
+
var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
709
709
|
var theme = _a.theme;
|
|
710
710
|
return theme.borderRadii.lg;
|
|
711
711
|
}, function (_a) {
|
|
@@ -766,7 +766,7 @@ var ProductCard = function (props) {
|
|
|
766
766
|
}
|
|
767
767
|
return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
|
|
768
768
|
};
|
|
769
|
-
var templateObject_1$
|
|
769
|
+
var templateObject_1$M, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
|
|
770
770
|
|
|
771
771
|
/**
|
|
772
772
|
* Title is a basic component used to display a title. Often used in card headers.
|
|
@@ -972,7 +972,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
|
|
|
972
972
|
})));
|
|
973
973
|
};
|
|
974
974
|
|
|
975
|
-
var StyledTag = styled__default["default"](Tag)(templateObject_1$
|
|
975
|
+
var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"], ["\n background-color: transparent;\n pointer-events: none;\n font-weight: ", ";\n ", "\n svg {\n margin-right: ", " !important;\n }\n\n span {\n font-weight: ", ";\n margin-left: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
976
976
|
var theme = _a.theme;
|
|
977
977
|
return theme.fontWeights.regular;
|
|
978
978
|
}, function (_a) {
|
|
@@ -1008,7 +1008,7 @@ var Counter = function (props) {
|
|
|
1008
1008
|
return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), props.children, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
|
|
1009
1009
|
};
|
|
1010
1010
|
Counter.Avatar = StyledTag.Avatar;
|
|
1011
|
-
var templateObject_1$
|
|
1011
|
+
var templateObject_1$L;
|
|
1012
1012
|
|
|
1013
1013
|
/**
|
|
1014
1014
|
* A Drawer is a container for supplementary content that is anchored to the edge of a page.
|
|
@@ -1024,26 +1024,25 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
|
|
|
1024
1024
|
Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
|
|
1025
1025
|
Drawer.Close = reactModals.DrawerModal.Close;
|
|
1026
1026
|
|
|
1027
|
-
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$
|
|
1028
|
-
var templateObject_1$
|
|
1027
|
+
var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
|
|
1028
|
+
var templateObject_1$K;
|
|
1029
1029
|
|
|
1030
1030
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
1031
1031
|
__proto__: null,
|
|
1032
1032
|
Field: Field$1
|
|
1033
1033
|
});
|
|
1034
1034
|
|
|
1035
|
-
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$
|
|
1035
|
+
var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"], ["\n &[disabled] svg {\n opacity: 0.5;\n }\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
1036
1036
|
var theme = _a.theme;
|
|
1037
1037
|
return theme.palette.blue[100];
|
|
1038
1038
|
});
|
|
1039
1039
|
var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
|
|
1040
|
-
var templateObject_1$
|
|
1040
|
+
var templateObject_1$J;
|
|
1041
1041
|
|
|
1042
|
-
var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n width: auto !important;\n min-width: 100%;\n"], ["\n width: auto !important;\n min-width: 100%;\n"])));
|
|
1043
1042
|
/**
|
|
1044
1043
|
* A Menu is a wrapper for items elements
|
|
1045
1044
|
**/
|
|
1046
|
-
var Menu = function (props) { return jsxRuntime.jsx(
|
|
1045
|
+
var Menu = function (props) { return jsxRuntime.jsx(reactDropdowns.Menu, __assign({}, props)); };
|
|
1047
1046
|
// Extras
|
|
1048
1047
|
var PreviousItem = function (props) { return jsxRuntime.jsx(reactDropdowns.PreviousItem, __assign({}, props)); };
|
|
1049
1048
|
var Separator = function (props) { return jsxRuntime.jsx(reactDropdowns.Separator, __assign({}, props)); };
|
|
@@ -1051,8 +1050,7 @@ var NextItem = function (props) { return jsxRuntime.jsx(reactDropdowns.NextItem,
|
|
|
1051
1050
|
var ItemMeta = function (props) { return jsxRuntime.jsx(reactDropdowns.ItemMeta, __assign({}, props)); };
|
|
1052
1051
|
var MediaBody = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaBody, __assign({}, props)); };
|
|
1053
1052
|
var MediaFigure = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaFigure, __assign({}, props)); };
|
|
1054
|
-
var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
|
|
1055
|
-
var templateObject_1$J;
|
|
1053
|
+
var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaItem, __assign({}, props)); };
|
|
1056
1054
|
|
|
1057
1055
|
/**
|
|
1058
1056
|
* Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
|