@opengeoweb/shared 4.0.0 → 4.1.0

package/index.esm.js

@@ -891,28 +891,29 @@ var AppLayout = function AppLayout(_ref) {
 
 var styles$5 = {
   header: function header(theme) {
-    var _ref;
-
-    return _ref = {
+    return _defineProperty({
       height: 40,
       backgroundColor: theme.palette.geowebColors.brand.brand,
       color: theme.palette.common.white,
       boxShadow: theme.shadows[1],
-      zIndex: 1000
-    }, _defineProperty(_ref, theme.breakpoints.down('sm'), {
-      padding: '0 8px'
-    }), _defineProperty(_ref, theme.breakpoints.up('sm'), {
+      zIndex: 1000,
+      padding: '0 16px'
+    }, theme.breakpoints.up('md'), {
       padding: '0 24px'
-    }), _ref;
+    });
   },
   title: {
-    marginLeft: 1,
-    fontSize: '1.25rem',
-    fontWeight: 400,
+    fontSize: '20px',
+    fontWeight: 500,
+    fontStretch: 'normal',
+    fontStyle: 'normal',
+    lineHeight: 'normal',
+    letterSpacing: '0.15px',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    letterSpacing: '0.15px'
+    color: 'geowebColors.typographyAndIcons.text',
+    marginLeft: 1
   },
   container: {
     height: '100%'
@@ -933,27 +934,35 @@ var AppHeader = function AppHeader(_ref2) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start"
-  }, menu)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 10,
+    xs: 6,
     sm: 6
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justifyContent: "center",
     alignItems: "center",
-    wrap: "nowrap"
-  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
+    wrap: "nowrap",
+    sx: {
+      button: {
+        marginLeft: 4,
+        color: 'geowebColors.typographyAndIcons.text'
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
+    style: {
+      position: 'relative',
+      top: '-1px',
+      right: '-1px'
+    }
+  })), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     sx: styles$5.title
-  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, title), menu)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3,
+    xs: 6,
+    sm: 6,
     container: true,
     justifyContent: "flex-end"
   }, userMenu)));
@@ -1192,11 +1201,7 @@ var styles$4 = {
     width: 16,
     fontSize: '0.5rem'
   },
-  large: {
-    height: 32,
-    width: 32,
-    fontSize: '0.938rem'
-  }
+  large: {}
 };
 
 var Avatar = function Avatar(_ref) {
@@ -1205,13 +1210,7 @@ var Avatar = function Avatar(_ref) {
       size = _ref$size === void 0 ? 'large' : _ref$size;
   return /*#__PURE__*/React.createElement(Avatar$1, {
     "data-testid": "avatar",
-    sx: Object.assign(Object.assign({}, styles$4[size]), {
-      fontWeight: 500,
-      color: 'geowebColors.brand.brand',
-      backgroundColor: 'common.white',
-      border: '0.1px solid',
-      borderColor: 'geowebColors.brand.brand'
-    })
+    sx: Object.assign({}, styles$4[size])
   }, children);
 };
 
@@ -1251,8 +1250,13 @@ var styles$3 = {
     }
   },
   button: {
-    color: 'common.white',
-    padding: 0
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    '&:hover': {
+      border: 'none',
+      background: 'transparent'
+    }
   }
 };
 
@@ -1376,8 +1380,8 @@ var ToolFooter = function ToolFooter() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var getStyle = function getStyle(size) {

package/index.umd.js

@@ -755,8 +755,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
     var styles$5 = {
       header: function header(theme) {
@@ -767,21 +767,24 @@
           backgroundColor: theme.palette.geowebColors.brand.brand,
           color: theme.palette.common.white,
           boxShadow: theme.shadows[1],
-          zIndex: 1000
-        }, _a[theme.breakpoints.down('sm')] = {
-          padding: '0 8px'
-        }, _a[theme.breakpoints.up('sm')] = {
+          zIndex: 1000,
+          padding: '0 16px'
+        }, _a[theme.breakpoints.up('md')] = {
           padding: '0 24px'
         }, _a;
       },
       title: {
-        marginLeft: 1,
-        fontSize: '1.25rem',
-        fontWeight: 400,
+        fontSize: '20px',
+        fontWeight: 500,
+        fontStretch: 'normal',
+        fontStyle: 'normal',
+        lineHeight: 'normal',
+        letterSpacing: '0.15px',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
-        letterSpacing: '0.15px'
+        color: 'geowebColors.typographyAndIcons.text',
+        marginLeft: 1
       },
       container: {
         height: '100%'
@@ -802,27 +805,35 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        justifyContent: "flex-start"
-      }, menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 10,
+        xs: 6,
         sm: 6
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justifyContent: "center",
         alignItems: "center",
-        wrap: "nowrap"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+        wrap: "nowrap",
+        sx: {
+          button: {
+            marginLeft: 4,
+            color: 'geowebColors.typographyAndIcons.text'
+          }
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
+        style: {
+          position: 'relative',
+          top: '-1px',
+          right: '-1px'
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         sx: styles$5.title
-      }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, title), menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
-        xs: 1,
-        sm: 3,
+        xs: 6,
+        sm: 6,
         container: true,
         justifyContent: "flex-end"
       }, userMenu)));
@@ -1037,11 +1048,7 @@
         width: 16,
         fontSize: '0.5rem'
       },
-      large: {
-        height: 32,
-        width: 32,
-        fontSize: '0.938rem'
-      }
+      large: {}
     };
 
     var Avatar = function Avatar(_a) {
@@ -1050,13 +1057,7 @@
           size = _b === void 0 ? 'large' : _b;
       return /*#__PURE__*/React__namespace.createElement(material.Avatar, {
         "data-testid": "avatar",
-        sx: __assign(__assign({}, styles$4[size]), {
-          fontWeight: 500,
-          color: 'geowebColors.brand.brand',
-          backgroundColor: 'common.white',
-          border: '0.1px solid',
-          borderColor: 'geowebColors.brand.brand'
-        })
+        sx: __assign({}, styles$4[size])
       }, children);
     };
 
@@ -1096,8 +1097,13 @@
         }
       },
       button: {
-        color: 'common.white',
-        padding: 0
+        padding: 0,
+        border: 'none',
+        background: 'transparent',
+        '&:hover': {
+          border: 'none',
+          background: 'transparent'
+        }
       }
     };
 
@@ -1221,8 +1227,8 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2021 - Finnish Meteorological Institute (FMI)
+     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2022 - Finnish Meteorological Institute (FMI)
      * */
 
     var getStyle = function getStyle(size) {

package/lib/components/AppHeader/AppHeader.stories.d.ts

@@ -6,8 +6,20 @@ export default _default;
 export declare const AppHeaderDark: {
     (): React.ReactElement;
     storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
 };
 export declare const AppHeaderLight: {
     (): React.ReactElement;
     storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
 };

package/lib/components/Avatar/Avatar.stories.d.ts

@@ -5,9 +5,25 @@ declare const _default: {
 export default _default;
 export declare const AvatarLight: {
     (): React.ReactElement;
-    storyName: string;
+    story: {
+        name: string;
+        parameters: {
+            zeplinLink: {
+                name: string;
+                link: string;
+            }[];
+        };
+    };
 };
 export declare const AvatarDark: {
     (): React.ReactElement;
-    storyName: string;
+    story: {
+        name: string;
+        parameters: {
+            zeplinLink: {
+                name: string;
+                link: string;
+            }[];
+        };
+    };
 };

package/lib/components/ToolContainer/ToolContainer.stories.d.ts

@@ -8,5 +8,21 @@ interface ToolContainerDemoProps {
     isSnapShot?: boolean;
 }
 export declare const ToolContainerDemo: React.FC<ToolContainerDemoProps>;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/components/ToolContainer/ToolHeader.stories.d.ts

@@ -3,8 +3,21 @@ declare const _default: {
     title: string;
 };
 export default _default;
-interface DemoStoryProps {
-    linkToZeplinDesign?: string;
-}
-export declare const ThemeLight: React.FC<DemoStoryProps>;
-export declare const ThemeDark: React.FC<DemoStoryProps>;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/components/UserMenu/CheatSheet/CheatSheet.stories.d.ts

@@ -3,8 +3,24 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ThemeLight: () => React.ReactElement;
-export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLight: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const ThemeDark: {
+    (): React.ReactElement;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
 export declare const ThemeLightSnapShot: {
     (): React.ReactElement;
     storyName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "4.0.0",
+    "@opengeoweb/theme": "4.1.0",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "4.0.0",
+    "@opengeoweb/form-fields": "4.1.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",