@appquality/unguess-design-system 2.11.3 → 2.11.4

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v2.11.4 (Thu Aug 18 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(layout): add new breakpoint and move boxed to xxl ([@cannarocks](https://github.com/cannarocks))
+- fix(page-header): keep paddings even on large screen ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.11.3 (Wed Aug 17 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -261,7 +261,7 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
         thumbSize: "60px",
     } });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[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 }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[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 }) });
 
 var GlobalStyle = styled.createGlobalStyle(templateObject_1$1f || (templateObject_1$1f = __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  html {\n    overflow-y: auto;\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  html {\n    overflow-y: auto;\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);
 var templateObject_1$1f;
@@ -2439,7 +2439,7 @@ var PageContainer = styled__default["default"].div(templateObject_1$g || (templa
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])), function (_a) {
+var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: ", ";\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n\n  max-width: ", ";\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return "".concat(theme.space.xxl, " ").concat(theme.space.xxl, " ").concat(theme.space.md);
 }, function (_a) {
@@ -2453,10 +2453,10 @@ var StyledPageHeader = styled__default["default"].div(templateObject_2$b || (tem
     return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
 }, function (_a) {
     var theme = _a.theme;
-    return theme.breakpoints.xl;
+    return theme.breakpoints.xxl;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.breakpoints.xl;
+    return theme.breakpoints.xxl;
 });
 var PullLeft = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __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) {
     var theme = _a.theme;

package/build/stories/theme/index.d.ts

@@ -1,4 +1,12 @@
 declare const theme: {
+    breakpoints: {
+        xxl: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
     colors: {
         primaryHue: string;
         warningHue: string;
@@ -215,13 +223,6 @@ declare const theme: {
         sm: string;
         md: string;
     };
-    breakpoints: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
     fontSizes: {
         xs: string;
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.11.3",
+  "version": "2.11.4",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",