@appquality/unguess-design-system 2.10.55 → 2.10.58
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 +38 -0
- package/build/index.js +43 -28
- package/build/stories/navigation/page-header/_types.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,41 @@
|
|
|
1
|
+
# v2.10.58 (Tue Jun 21 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Fix/page header [#73](https://github.com/AppQuality/unguess-design-system/pull/73) ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.57 (Mon Jun 20 2022)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `master`
|
|
16
|
+
|
|
17
|
+
- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
|
|
18
|
+
- fix(page-header): remove typos from story ([@cannarocks](https://github.com/cannarocks))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
# v2.10.56 (Mon Jun 20 2022)
|
|
27
|
+
|
|
28
|
+
#### ⚠️ Pushed to `master`
|
|
29
|
+
|
|
30
|
+
- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
|
|
31
|
+
- fix(page-header): transform counter prop from array of counter to generic React Node ([@cannarocks](https://github.com/cannarocks))
|
|
32
|
+
|
|
33
|
+
#### Authors: 1
|
|
34
|
+
|
|
35
|
+
- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
1
39
|
# v2.10.55 (Mon Jun 20 2022)
|
|
2
40
|
|
|
3
41
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -1966,18 +1966,30 @@ Modal.Footer = reactModals.Footer;
|
|
|
1966
1966
|
var templateObject_1$j;
|
|
1967
1967
|
|
|
1968
1968
|
var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
|
|
1969
|
-
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "
|
|
1969
|
+
var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
1970
1970
|
var theme = _a.theme;
|
|
1971
|
-
return theme.space.base *
|
|
1971
|
+
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
1972
1972
|
}, function (_a) {
|
|
1973
1973
|
var theme = _a.theme;
|
|
1974
|
-
return theme.
|
|
1974
|
+
return theme.breakpoints.sm;
|
|
1975
|
+
}, function (_a) {
|
|
1976
|
+
var theme = _a.theme;
|
|
1977
|
+
return theme.space.md;
|
|
1975
1978
|
});
|
|
1976
|
-
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
1979
|
+
var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
1977
1980
|
var theme = _a.theme;
|
|
1978
1981
|
return theme.palette.grey["100"];
|
|
1982
|
+
}, function (_a) {
|
|
1983
|
+
var theme = _a.theme;
|
|
1984
|
+
return "".concat(theme.space.md, " ").concat(theme.space.base * 6, "px");
|
|
1985
|
+
}, function (_a) {
|
|
1986
|
+
var theme = _a.theme;
|
|
1987
|
+
return theme.breakpoints.sm;
|
|
1988
|
+
}, function (_a) {
|
|
1989
|
+
var theme = _a.theme;
|
|
1990
|
+
return "".concat(theme.space.lg, " ").concat(theme.space.md);
|
|
1979
1991
|
});
|
|
1980
|
-
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px
|
|
1992
|
+
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n"], ["\n padding: ", "px\n ", "px;\n"])), function (_a) {
|
|
1981
1993
|
var theme = _a.theme;
|
|
1982
1994
|
return theme.space.base * 4;
|
|
1983
1995
|
}, function (_a) {
|
|
@@ -2024,28 +2036,21 @@ var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign
|
|
|
2024
2036
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2025
2037
|
var templateObject_1$h;
|
|
2026
2038
|
|
|
2027
|
-
var
|
|
2028
|
-
/**
|
|
2029
|
-
* Use Paragraph to render blocks of text with Garden styling.
|
|
2030
|
-
*/
|
|
2031
|
-
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2032
|
-
var templateObject_1$g;
|
|
2033
|
-
|
|
2034
|
-
var MainContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2039
|
+
var MainContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2035
2040
|
var InformationContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"], ["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"])), theme.space.xs);
|
|
2036
2041
|
var MetaContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
|
|
2037
2042
|
var Overline = styled__default["default"](MD)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n margin-bottom: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), theme.palette.grey[600], theme.space.md, theme.fontWeights.semibold, theme.lineHeights.md);
|
|
2038
2043
|
var Title = styled__default["default"].h1(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), theme.colors.primaryHue, theme.fontSizes.xxxl, theme.fontWeights.semibold, theme.lineHeights.xxxl);
|
|
2039
|
-
var Description$1 = styled__default["default"](
|
|
2040
|
-
var
|
|
2041
|
-
var
|
|
2042
|
-
var
|
|
2044
|
+
var Description$1 = styled__default["default"](LG)(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n color: ", ";\n margin: ", " 0;\n line-height: ", ";\n"], ["\n color: ", ";\n margin: ", " 0;\n line-height: ", ";\n"])), theme.palette.grey[600], theme.space.md, theme.lineHeights.lg);
|
|
2045
|
+
var Counters = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: ", ";\n\n > *:first-child {\n padding-left: 0;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n margin-top: ", ";\n\n > *:first-child {\n padding-left: 0;\n }\n"])), theme.space.md);
|
|
2046
|
+
var StyledCol = styled__default["default"](Col)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
2047
|
+
var Image = styled__default["default"].img(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: auto;\n height: 100%;\n max-height: ", ";\n"], ["\n width: auto;\n height: 100%;\n max-height: ", ";\n"])), theme.components.pageHeader.imgMaxHeight);
|
|
2043
2048
|
var Main = function (props) {
|
|
2044
|
-
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters &&
|
|
2049
|
+
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ orderXs: 1, orderSm: 2, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
|
|
2045
2050
|
};
|
|
2046
|
-
var templateObject_1$
|
|
2051
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
|
|
2047
2052
|
|
|
2048
|
-
var StyledPageHeader = styled__default["default"].div(templateObject_1$
|
|
2053
|
+
var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2049
2054
|
var theme = _a.theme;
|
|
2050
2055
|
return theme.palette.white;
|
|
2051
2056
|
}, function (_a) {
|
|
@@ -2061,9 +2066,12 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$e || (tem
|
|
|
2061
2066
|
var theme = _a.theme;
|
|
2062
2067
|
return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
|
|
2063
2068
|
});
|
|
2064
|
-
var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"])), function (_a) {
|
|
2069
|
+
var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
2065
2070
|
var theme = _a.theme;
|
|
2066
|
-
return theme.space.
|
|
2071
|
+
return "".concat(theme.space.xs, " 0");
|
|
2072
|
+
}, function (_a) {
|
|
2073
|
+
var theme = _a.theme;
|
|
2074
|
+
return theme.space.xs;
|
|
2067
2075
|
});
|
|
2068
2076
|
var ButtonContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
|
|
2069
2077
|
var theme = _a.theme;
|
|
@@ -2086,7 +2094,7 @@ var PageHeader = function (props) {
|
|
|
2086
2094
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2087
2095
|
PageHeader.Main = Main;
|
|
2088
2096
|
PageHeader.Buttons = Buttons;
|
|
2089
|
-
var templateObject_1$
|
|
2097
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8;
|
|
2090
2098
|
|
|
2091
2099
|
var _path$5;
|
|
2092
2100
|
|
|
@@ -2125,15 +2133,15 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2125
2133
|
})));
|
|
2126
2134
|
};
|
|
2127
2135
|
|
|
2128
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2136
|
+
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
|
|
2129
2137
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2130
|
-
var templateObject_1$
|
|
2138
|
+
var templateObject_1$e;
|
|
2131
2139
|
|
|
2132
2140
|
/**
|
|
2133
2141
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2134
2142
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2135
2143
|
**/
|
|
2136
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2144
|
+
var StyledItem = styled__default["default"].li(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
|
|
2137
2145
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2138
2146
|
}, function (props) {
|
|
2139
2147
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2152,7 +2160,7 @@ var MenuItem = function (_a) {
|
|
|
2152
2160
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2153
2161
|
return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
|
|
2154
2162
|
};
|
|
2155
|
-
var templateObject_1$
|
|
2163
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2156
2164
|
|
|
2157
2165
|
var _path$3;
|
|
2158
2166
|
|
|
@@ -2209,8 +2217,15 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2209
2217
|
})));
|
|
2210
2218
|
};
|
|
2211
2219
|
|
|
2212
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2220
|
+
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
|
|
2213
2221
|
var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
|
|
2222
|
+
var templateObject_1$c;
|
|
2223
|
+
|
|
2224
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
|
|
2225
|
+
/**
|
|
2226
|
+
* Use Paragraph to render blocks of text with Garden styling.
|
|
2227
|
+
*/
|
|
2228
|
+
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2214
2229
|
var templateObject_1$b;
|
|
2215
2230
|
|
|
2216
2231
|
var getInitials = function (name) {
|