@appquality/unguess-design-system 2.10.57 → 2.10.60
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 +37 -0
- package/build/index.js +99 -37
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v2.10.60 (Tue Jun 21 2022)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `master`
|
|
4
|
+
|
|
5
|
+
- fix(page-header): hide metaImage on mobile ([@marcbon](https://github.com/marcbon))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v2.10.59 (Tue Jun 21 2022)
|
|
14
|
+
|
|
15
|
+
#### ⚠️ Pushed to `master`
|
|
16
|
+
|
|
17
|
+
- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@marcbon](https://github.com/marcbon))
|
|
18
|
+
- refactor(navigation): fix page-header spacings + remove sidebar feature check ([@marcbon](https://github.com/marcbon))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
# v2.10.58 (Tue Jun 21 2022)
|
|
27
|
+
|
|
28
|
+
#### 🐛 Bug Fix
|
|
29
|
+
|
|
30
|
+
- Fix/page header [#73](https://github.com/AppQuality/unguess-design-system/pull/73) ([@marcbon](https://github.com/marcbon))
|
|
31
|
+
|
|
32
|
+
#### Authors: 1
|
|
33
|
+
|
|
34
|
+
- Marco Bonomo ([@marcbon](https://github.com/marcbon))
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v2.10.57 (Mon Jun 20 2022)
|
|
2
39
|
|
|
3
40
|
#### ⚠️ Pushed to `master`
|
package/build/index.js
CHANGED
|
@@ -1853,8 +1853,6 @@ var LoadingSidebar = function (props) {
|
|
|
1853
1853
|
};
|
|
1854
1854
|
var templateObject_1$o;
|
|
1855
1855
|
|
|
1856
|
-
var FEATURE_FLAG_CATALOG = 'catalog-pages';
|
|
1857
|
-
|
|
1858
1856
|
var TokenContainer = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
1859
1857
|
var ScrollingContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
|
|
1860
1858
|
var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
|
|
@@ -1870,7 +1868,6 @@ var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (t
|
|
|
1870
1868
|
*/
|
|
1871
1869
|
var Sidebar = function (props) {
|
|
1872
1870
|
var _a = React.useState(props.currentRoute || "home"), nav = _a[0], setNav = _a[1];
|
|
1873
|
-
var features = props.features;
|
|
1874
1871
|
var showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
|
|
1875
1872
|
var toggleNav = function () {
|
|
1876
1873
|
props.onToggleMenu && props.onToggleMenu();
|
|
@@ -1890,8 +1887,7 @@ var Sidebar = function (props) {
|
|
|
1890
1887
|
props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })), props.tokens && (jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded, style: { order: 0 } }))] })), props.tokens && (jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: {
|
|
1891
1888
|
marginLeft: theme.space.xs,
|
|
1892
1889
|
color: theme.palette.grey[800],
|
|
1893
|
-
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })),
|
|
1894
|
-
features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? (jsxRuntime.jsx(SvgTemplatesActive, {})) : (jsxRuntime.jsx(SvgTemplates, {})) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] }))), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
1890
|
+
} }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
|
|
1895
1891
|
props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
|
|
1896
1892
|
};
|
|
1897
1893
|
var templateObject_1$n, templateObject_2$d, templateObject_3$b;
|
|
@@ -1966,18 +1962,30 @@ Modal.Footer = reactModals.Footer;
|
|
|
1966
1962
|
var templateObject_1$j;
|
|
1967
1963
|
|
|
1968
1964
|
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: ", "
|
|
1965
|
+
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
1966
|
var theme = _a.theme;
|
|
1971
|
-
return theme.space.base *
|
|
1967
|
+
return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
|
|
1972
1968
|
}, function (_a) {
|
|
1973
1969
|
var theme = _a.theme;
|
|
1974
|
-
return theme.
|
|
1970
|
+
return theme.breakpoints.sm;
|
|
1971
|
+
}, function (_a) {
|
|
1972
|
+
var theme = _a.theme;
|
|
1973
|
+
return theme.space.md;
|
|
1975
1974
|
});
|
|
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) {
|
|
1975
|
+
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
1976
|
var theme = _a.theme;
|
|
1978
1977
|
return theme.palette.grey["100"];
|
|
1978
|
+
}, function (_a) {
|
|
1979
|
+
var theme = _a.theme;
|
|
1980
|
+
return "".concat(theme.space.md, " ").concat(theme.space.base * 6, "px");
|
|
1981
|
+
}, function (_a) {
|
|
1982
|
+
var theme = _a.theme;
|
|
1983
|
+
return theme.breakpoints.sm;
|
|
1984
|
+
}, function (_a) {
|
|
1985
|
+
var theme = _a.theme;
|
|
1986
|
+
return "".concat(theme.space.lg, " ").concat(theme.space.md);
|
|
1979
1987
|
});
|
|
1980
|
-
var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px
|
|
1988
|
+
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
1989
|
var theme = _a.theme;
|
|
1982
1990
|
return theme.space.base * 4;
|
|
1983
1991
|
}, function (_a) {
|
|
@@ -2024,28 +2032,72 @@ var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign
|
|
|
2024
2032
|
var CursorPagination = reactPagination.CursorPagination;
|
|
2025
2033
|
var templateObject_1$h;
|
|
2026
2034
|
|
|
2027
|
-
var
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
var
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
var
|
|
2036
|
-
var
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
var
|
|
2040
|
-
var
|
|
2041
|
-
|
|
2042
|
-
|
|
2035
|
+
var MainContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
2036
|
+
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\n @media screen and (max-width: ", ") \n height: auto;\n } \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\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
|
|
2037
|
+
var theme = _a.theme;
|
|
2038
|
+
return theme.space.xs;
|
|
2039
|
+
}, function (_a) {
|
|
2040
|
+
var theme = _a.theme;
|
|
2041
|
+
return theme.breakpoints.sm;
|
|
2042
|
+
});
|
|
2043
|
+
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 @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
|
|
2044
|
+
var theme = _a.theme;
|
|
2045
|
+
return theme.breakpoints.sm;
|
|
2046
|
+
});
|
|
2047
|
+
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"])), function (_a) {
|
|
2048
|
+
var theme = _a.theme;
|
|
2049
|
+
return theme.palette.grey[600];
|
|
2050
|
+
}, function (_a) {
|
|
2051
|
+
var theme = _a.theme;
|
|
2052
|
+
return theme.space.md;
|
|
2053
|
+
}, function (_a) {
|
|
2054
|
+
var theme = _a.theme;
|
|
2055
|
+
return theme.fontWeights.semibold;
|
|
2056
|
+
}, function (_a) {
|
|
2057
|
+
var theme = _a.theme;
|
|
2058
|
+
return theme.lineHeights.md;
|
|
2059
|
+
});
|
|
2060
|
+
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"])), function (_a) {
|
|
2061
|
+
var theme = _a.theme;
|
|
2062
|
+
return theme.colors.primaryHue;
|
|
2063
|
+
}, function (_a) {
|
|
2064
|
+
var theme = _a.theme;
|
|
2065
|
+
return theme.fontSizes.xxxl;
|
|
2066
|
+
}, function (_a) {
|
|
2067
|
+
var theme = _a.theme;
|
|
2068
|
+
return theme.fontWeights.semibold;
|
|
2069
|
+
}, function (_a) {
|
|
2070
|
+
var theme = _a.theme;
|
|
2071
|
+
return theme.lineHeights.xxxl;
|
|
2072
|
+
});
|
|
2073
|
+
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"])), function (_a) {
|
|
2074
|
+
var theme = _a.theme;
|
|
2075
|
+
return theme.palette.grey[600];
|
|
2076
|
+
}, function (_a) {
|
|
2077
|
+
var theme = _a.theme;
|
|
2078
|
+
return theme.space.md;
|
|
2079
|
+
}, function (_a) {
|
|
2080
|
+
var theme = _a.theme;
|
|
2081
|
+
return theme.lineHeights.lg;
|
|
2082
|
+
});
|
|
2083
|
+
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 > div {\n padding: 0;\n margin-right: ", ";\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 > div {\n padding: 0;\n margin-right: ", ";\n }\n"])), function (_a) {
|
|
2084
|
+
var theme = _a.theme;
|
|
2085
|
+
return theme.space.md;
|
|
2086
|
+
}, function (_a) {
|
|
2087
|
+
var theme = _a.theme;
|
|
2088
|
+
return theme.space.sm;
|
|
2089
|
+
});
|
|
2090
|
+
var StyledCol = styled__default["default"](Col)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
2091
|
+
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"])), function (_a) {
|
|
2092
|
+
var theme = _a.theme;
|
|
2093
|
+
return theme.components.pageHeader.imgMaxHeight;
|
|
2094
|
+
});
|
|
2043
2095
|
var Main = function (props) {
|
|
2044
|
-
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({
|
|
2096
|
+
return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ 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({ 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
2097
|
};
|
|
2046
|
-
var templateObject_1$
|
|
2098
|
+
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
2099
|
|
|
2048
|
-
var StyledPageHeader = styled__default["default"].div(templateObject_1$
|
|
2100
|
+
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
2101
|
var theme = _a.theme;
|
|
2050
2102
|
return theme.palette.white;
|
|
2051
2103
|
}, function (_a) {
|
|
@@ -2061,9 +2113,12 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$e || (tem
|
|
|
2061
2113
|
var theme = _a.theme;
|
|
2062
2114
|
return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
|
|
2063
2115
|
});
|
|
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) {
|
|
2116
|
+
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
2117
|
var theme = _a.theme;
|
|
2066
|
-
return theme.space.
|
|
2118
|
+
return "".concat(theme.space.xs, " 10px");
|
|
2119
|
+
}, function (_a) {
|
|
2120
|
+
var theme = _a.theme;
|
|
2121
|
+
return theme.space.xs;
|
|
2067
2122
|
});
|
|
2068
2123
|
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
2124
|
var theme = _a.theme;
|
|
@@ -2086,7 +2141,7 @@ var PageHeader = function (props) {
|
|
|
2086
2141
|
PageHeader.Breadcrumb = StyledBreadcrumb;
|
|
2087
2142
|
PageHeader.Main = Main;
|
|
2088
2143
|
PageHeader.Buttons = Buttons;
|
|
2089
|
-
var templateObject_1$
|
|
2144
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8;
|
|
2090
2145
|
|
|
2091
2146
|
var _path$5;
|
|
2092
2147
|
|
|
@@ -2125,15 +2180,15 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
|
|
|
2125
2180
|
})));
|
|
2126
2181
|
};
|
|
2127
2182
|
|
|
2128
|
-
var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$
|
|
2183
|
+
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
2184
|
var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
|
|
2130
|
-
var templateObject_1$
|
|
2185
|
+
var templateObject_1$e;
|
|
2131
2186
|
|
|
2132
2187
|
/**
|
|
2133
2188
|
* 1. Allows an item to contain a positioned sub-menu.
|
|
2134
2189
|
* 2. Reset stacking context for sub-menu css-arrows.
|
|
2135
2190
|
**/
|
|
2136
|
-
var StyledItem = styled__default["default"].li(templateObject_1$
|
|
2191
|
+
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
2192
|
return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
|
|
2138
2193
|
}, function (props) {
|
|
2139
2194
|
return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
|
|
@@ -2152,7 +2207,7 @@ var MenuItem = function (_a) {
|
|
|
2152
2207
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
2153
2208
|
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
2209
|
};
|
|
2155
|
-
var templateObject_1$
|
|
2210
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$4;
|
|
2156
2211
|
|
|
2157
2212
|
var _path$3;
|
|
2158
2213
|
|
|
@@ -2209,8 +2264,15 @@ var SvgInfoFill = function SvgInfoFill(props) {
|
|
|
2209
2264
|
})));
|
|
2210
2265
|
};
|
|
2211
2266
|
|
|
2212
|
-
var StyledButton$2 = styled__default["default"](Button)(templateObject_1$
|
|
2267
|
+
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
2268
|
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] }))); };
|
|
2269
|
+
var templateObject_1$c;
|
|
2270
|
+
|
|
2271
|
+
var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
|
|
2272
|
+
/**
|
|
2273
|
+
* Use Paragraph to render blocks of text with Garden styling.
|
|
2274
|
+
*/
|
|
2275
|
+
var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
|
|
2214
2276
|
var templateObject_1$b;
|
|
2215
2277
|
|
|
2216
2278
|
var getInitials = function (name) {
|