diff --git a/package.json b/package.json index c011cefaca..1432cc26f8 100644 --- 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" ] -} +} \ No newline at end of file diff --git a/src/components/AlertBanner/AlertBanner.jsx b/src/components/AlertBanner/AlertBanner.jsx index b79a96c041..56be664180 100644 --- 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( })}
- + {isCloseHidden ? null : ( + + )}
); @@ -84,6 +86,7 @@ AlertBanner.propTypes = { AlertBanner.backgroundColors.POSITIVE, AlertBanner.backgroundColors.DARK ]), + isCloseHidden: PropTypes.bool, /** ARIA description for the progress bar */ ariaLabel: PropTypes.string, onClose: PropTypes.func @@ -91,6 +94,7 @@ AlertBanner.propTypes = { 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 index 52a709a67c..131ace18fa 100644 --- 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)} > diff --git a/src/components/AlertBanner/__tests__/AlertBanner.jest.js b/src/components/AlertBanner/__tests__/AlertBanner.jest.js index 00ac861a20..fe6c99ccca 100644 --- 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().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 index 233304b0e5..10fd6c79f4 100644 --- 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`] = ` +
+
+
+
+`; + exports[`AlertBanner should render correctly without props 1`] = `