feature: support hide close button on banner (#151)

mondaycom · Jun 22, 2021 · 8dbfceb · 8dbfceb
1 parent b90a3f7
commit 8dbfceb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.46",
+  "version": "0.3.47",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -167,4 +167,4 @@
     "not and_qq > 0",
     "not and_uc > 0"
   ]
-}
+}
diff --git a/src/components/AlertBanner/AlertBanner.jsx b/src/components/AlertBanner/AlertBanner.jsx
@@ -11,7 +11,7 @@ import "./AlertBanner.scss";
 const NOOP = () => {};
 
 const AlertBanner = forwardRef(
-  ({ children: originalChildren, className, backgroundColor, onClose, ariaLabel }, ref) => {
+  ({ children: originalChildren, className, backgroundColor, onClose, ariaLabel, isCloseHidden }, ref) => {
     const classNames = useMemo(() => {
       return cx(className, "monday-alert-banner", `monday-alert-banner--background-color-${backgroundColor}`);
     }, [className, backgroundColor]);
@@ -56,16 +56,18 @@ const AlertBanner = forwardRef(
           })}
         </div>
         <div className="monday-alert-banner__close-button-wrapper">
-          <Button
-            className="monday-alert-banner__alert-banner-close-btn"
-            onClick={onClose}
-            size={Button.sizes.SMALL}
-            kind={Button.kinds.TERTIARY}
-            color={isDarkBackground ? Button.colors.ON_INVERTED_BACKGROUND : Button.colors.ON_PRIMARY_COLOR}
-            ariaLabel="close-toast"
-          >
-            <Icon iconType={Icon.type.SVG} clickable={false} icon={CloseSmall} iconSize="20px" ignoreFocusStyle />
-          </Button>
+          {isCloseHidden ? null : (
+            <Button
+              className="monday-alert-banner__alert-banner-close-btn"
+              onClick={onClose}
+              size={Button.sizes.SMALL}
+              kind={Button.kinds.TERTIARY}
+              color={isDarkBackground ? Button.colors.ON_INVERTED_BACKGROUND : Button.colors.ON_PRIMARY_COLOR}
+              ariaLabel="close-toast"
+            >
+              <Icon iconType={Icon.type.SVG} clickable={false} icon={CloseSmall} iconSize="20px" ignoreFocusStyle />
+            </Button>
+          )}
         </div>
       </div>
     );
@@ -84,13 +86,15 @@ AlertBanner.propTypes = {
     AlertBanner.backgroundColors.POSITIVE,
     AlertBanner.backgroundColors.DARK
   ]),
+  isCloseHidden: PropTypes.bool,
   /** ARIA description for the progress bar */
   ariaLabel: PropTypes.string,
   onClose: PropTypes.func
 };
 
 AlertBanner.defaultProps = {
   backgroundColor: AlertBanner.backgroundColors.PRIMARY,
+  isCloseHidden: false,
   className: "",
   ariaLabel: "",
   onClose: NOOP

diff --git a/src/components/AlertBanner/__stories__/AlertBanner.stories.js b/src/components/AlertBanner/__stories__/AlertBanner.stories.js
@@ -16,6 +16,7 @@ export const Sandbox = () => (
       )}
       className={select("With custom class", ["alert-banner--custom-class", ""], "")}
       ariaLabel={text("Bar Aria Label", "my awesome alert banner")}
+      isCloseHidden={boolean("Is close hidden", false)}
     >
       <AlertBannerText text="Lorem ipsum" />
       <AlertBannerLink text="Lorem ipsum" href="https://monday.com" />

diff --git a/src/components/AlertBanner/__tests__/AlertBanner.jest.js b/src/components/AlertBanner/__tests__/AlertBanner.jest.js
@@ -84,4 +84,9 @@ describe("AlertBanner", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it("should render correctly with hidden close button", () => {
+    const tree = renderer.create(<AlertBanner isCloseHidden></AlertBanner>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner.jest.js.snap b/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner.jest.js.snap
@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AlertBanner should render correctly with hidden close button 1`] = `
+<div
+  aria-label="banner"
+  className="monday-alert-banner monday-alert-banner--background-color-primary"
+  role="banner"
+>
+  <div
+    className="monday-alert-banner__inner"
+  />
+  <div
+    className="monday-alert-banner__close-button-wrapper"
+  />
+</div>
+`;
+
 exports[`AlertBanner should render correctly without props 1`] = `
 <div
   aria-label="banner"