@appquality/unguess-design-system 2.10.58 → 2.10.59

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 (3) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/build/index.js +56 -12
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v2.10.59 (Tue Jun 21 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@marcbon](https://github.com/marcbon))
6
+ - refactor(navigation): fix page-header spacings + remove sidebar feature check ([@marcbon](https://github.com/marcbon))
7
+
8
+ #### Authors: 1
9
+
10
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
11
+
12
+ ---
13
+
1
14
  # v2.10.58 (Tue Jun 21 2022)
2
15
 
3
16
  #### 🐛 Bug Fix
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" })] })), features &&
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;
@@ -2037,14 +2033,62 @@ var CursorPagination = reactPagination.CursorPagination;
2037
2033
  var templateObject_1$h;
2038
2034
 
2039
2035
  var MainContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
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
+ 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
+ });
2041
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 display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
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);
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);
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);
2044
+ 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) {
2045
+ var theme = _a.theme;
2046
+ return theme.palette.grey[600];
2047
+ }, function (_a) {
2048
+ var theme = _a.theme;
2049
+ return theme.space.md;
2050
+ }, function (_a) {
2051
+ var theme = _a.theme;
2052
+ return theme.fontWeights.semibold;
2053
+ }, function (_a) {
2054
+ var theme = _a.theme;
2055
+ return theme.lineHeights.md;
2056
+ });
2057
+ 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) {
2058
+ var theme = _a.theme;
2059
+ return theme.colors.primaryHue;
2060
+ }, function (_a) {
2061
+ var theme = _a.theme;
2062
+ return theme.fontSizes.xxxl;
2063
+ }, function (_a) {
2064
+ var theme = _a.theme;
2065
+ return theme.fontWeights.semibold;
2066
+ }, function (_a) {
2067
+ var theme = _a.theme;
2068
+ return theme.lineHeights.xxxl;
2069
+ });
2070
+ 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) {
2071
+ var theme = _a.theme;
2072
+ return theme.palette.grey[600];
2073
+ }, function (_a) {
2074
+ var theme = _a.theme;
2075
+ return theme.space.md;
2076
+ }, function (_a) {
2077
+ var theme = _a.theme;
2078
+ return theme.lineHeights.lg;
2079
+ });
2080
+ 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) {
2081
+ var theme = _a.theme;
2082
+ return theme.space.md;
2083
+ }, function (_a) {
2084
+ var theme = _a.theme;
2085
+ return theme.space.sm;
2086
+ });
2046
2087
  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);
2088
+ 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) {
2089
+ var theme = _a.theme;
2090
+ return theme.components.pageHeader.imgMaxHeight;
2091
+ });
2048
2092
  var Main = function (props) {
2049
2093
  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 }) }) })))] }) }));
2050
2094
  };
@@ -2068,7 +2112,7 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (tem
2068
2112
  });
2069
2113
  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) {
2070
2114
  var theme = _a.theme;
2071
- return "".concat(theme.space.xs, " 0");
2115
+ return "".concat(theme.space.xs, " 10px");
2072
2116
  }, function (_a) {
2073
2117
  var theme = _a.theme;
2074
2118
  return theme.space.xs;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.10.58",
3
+ "version": "2.10.59",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/css-bedrock": "^9.0.0",
6
6
  "@zendeskgarden/react-accordions": "^8.49.0",