@eeacms/volto-banner - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -7,4 +7,14 @@ ### Changelog
 
-#### [2.0.0](https://github.com/eea/volto-banner/compare/1.0.4...2.0.0)
+#### [2.1.0](https://github.com/eea/volto-banner/compare/2.0.0...2.1.0)
 
+- bump version [`3987512`](https://github.com/eea/volto-banner/commit/3987512e7d129fe098e44c5530b3df8d71d8d0b4)
+- [Feature #146857] Separate close behaviour for static and dynamic banner [`6a29aa2`](https://github.com/eea/volto-banner/commit/6a29aa2ed162ffdd354f7d9cc5708b7233972442)
+- [Feature #146857] Add banner close button - code review fix [`3274f93`](https://github.com/eea/volto-banner/commit/3274f935b5d21f87ed1e15ebe9a117847200a811)
+- [Feature #146857] Add banner close button [`8844b17`](https://github.com/eea/volto-banner/commit/8844b17c691f9602d6d0121025a5d79cebe7bceb)
+
+### [2.0.0](https://github.com/eea/volto-banner/compare/1.0.4...2.0.0)
+
+> 16 February 2022
+
+- [Feature #142078] Volto banner enhancements [`#16`](https://github.com/eea/volto-banner/pull/16)
 - Upgrade to 2.x.x [`2522d5e`](https://github.com/eea/volto-banner/commit/2522d5e4aae9318708705591cdab2e5016da12b9)
@@ -17,3 +27,2 @@ - Update docs [`9b862c6`](https://github.com/eea/volto-banner/commit/9b862c62bba19e7822277540f2b644f8251ed5c7)
 - Breaking change. Bump version to 2.0.0 [`fbb32d4`](https://github.com/eea/volto-banner/commit/fbb32d4a3cff8f395aa050b1c47ddcf94d3b6703)
-- [Feature #142078] Volto banner enhancements [`b7750a9`](https://github.com/eea/volto-banner/commit/b7750a908b1fa21d8368f8f5cd4c647bbb2a4cee)
 
@@ -20,0 +29,0 @@ #### [1.0.4](https://github.com/eea/volto-banner/compare/1.0.3...1.0.4)

package.json

 {
   "name": "@eeacms/volto-banner",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "@eeacms/volto-banner: Volto add-on",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/index.js

@@ -5,2 +5,3 @@ import StagingBanner from './StagingBanner';
 import infoSVG from '@plone/volto/icons/info.svg';
+import closeSVG from '@plone/volto/icons/circle-dismiss.svg';
 
@@ -14,2 +15,4 @@ const applyConfig = (config) => {
     bannerIconColor: 'black',
+    bannerCloseIcon: closeSVG,
+    bannerCloseIconColor: 'black',
     ...(config.settings.stagingBanner || {}),
@@ -16,0 +19,0 @@ };

src/StagingBanner.jsx

@@ -29,3 +29,3 @@ import React from 'react';
 
-const StagingBanner = ({ banner, location, token, dispatch }) => {
+const StagingBanner = ({ banner, token, dispatch }) => {
   const bannerConfig = {
@@ -43,3 +43,12 @@ ...(config.settings.stagingBanner || {}),
 
-  const [node, setNode] = React.useState('');
+  const [node, setNode] = React.useState(''),
+    [staticBannerVisible, setStaticBannerVisible] = React.useState(true),
+    [dynamicBannerVisible, setDynamicBannerVisible] = React.useState(true),
+    hideStaticBanner = React.useCallback(() => {
+      setStaticBannerVisible(false);
+    }, [setStaticBannerVisible]),
+    hideDynamicBanner = React.useCallback(() => {
+      setDynamicBannerVisible(false);
+    }, [setDynamicBannerVisible]);
+
   React.useEffect(() => {
@@ -56,3 +65,3 @@ setNode(document.querySelector(bannerConfig.parentNodeSelector));
         token,
-        staticBanner.enabled,
+        staticBannerVisible && staticBanner.enabled,
         staticBanner.visible_to_all,
@@ -73,9 +82,20 @@ ) && (
             </Message.Content>
-            {bannerConfig.bannerIcon && (
-              <Icon
-                name={bannerConfig.bannerIcon}
-                color={bannerConfig.bannerIconColor || 'black'}
-                size="32px"
-              />
-            )}
+            <div>
+              {bannerConfig.bannerIcon && (
+                <Icon
+                  name={bannerConfig.bannerIcon}
+                  color={bannerConfig.bannerIconColor || 'black'}
+                  size="32px"
+                />
+              )}
+              {bannerConfig.bannerCloseIcon && (
+                <Icon
+                  name={bannerConfig.bannerCloseIcon}
+                  color={bannerConfig.bannerCloseIconColor || 'black'}
+                  className="close-button"
+                  size="32px"
+                  onClick={hideStaticBanner}
+                />
+              )}
+            </div>
           </Container>
@@ -86,3 +106,3 @@ </Message>
         token,
-        dynamicBanner.enabled,
+        dynamicBannerVisible && dynamicBanner.enabled,
         dynamicBanner.visible_to_all,
@@ -110,9 +130,20 @@ ) &&
               </Message.Content>
-              {bannerConfig.bannerIcon && (
-                <Icon
-                  name={bannerConfig.bannerIcon}
-                  color={bannerConfig.bannerIconColor || 'black'}
-                  size="32px"
-                />
-              )}
+              <div>
+                {bannerConfig.bannerIcon && (
+                  <Icon
+                    name={bannerConfig.bannerIcon}
+                    color={bannerConfig.bannerIconColor || 'black'}
+                    size="32px"
+                  />
+                )}
+                {bannerConfig.bannerCloseIcon && (
+                  <Icon
+                    name={bannerConfig.bannerCloseIcon}
+                    color={bannerConfig.bannerCloseIconColor || 'black'}
+                    className="close-button"
+                    size="32px"
+                    onClick={hideDynamicBanner}
+                  />
+                )}
+              </div>
             </Container>
@@ -119,0 +150,0 @@ </Message>

No alert changes

Improved metrics

Total package byte prevSize

59888

increased by3.6%

Lines of code

737

increased by4.69%

No dependency changes