refactor: migrated deprecated StatusAlert

src/CookiePolicyBanner/CookiePolicyBanner.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { StatusAlert } from '@edx/paragon';
 
 import CookiePolicyBanner from '.';
 import {
@@ -30,14 +29,13 @@ describe('CookiePolicyBanner', () => {
   const expectedPolicyHTML = 'foobar';
   // eslint-disable-next-line
   const expectedDialog = <span dangerouslySetInnerHTML={{ __html: expectedPolicyHTML }} />;
-
   createHasViewedCookieBanner.mockImplementation(() => {});
   getIETFTag.mockImplementation(() => expectedTag);
   getPolicyHTML.mockImplementation(() => expectedPolicyHTML);
   hasViewedCookieBanner.mockImplementation(() => !isOpen);
 
   const isClosedBanner = () => {
-    expect(mountedBanner.state('open')).toBe(false);
+    expect(mountedBanner.state('show')).toBe(false);
     expect(mountedBanner.html()).toBeNull();
   };
 
@@ -49,25 +47,23 @@ describe('CookiePolicyBanner', () => {
     expect(wrapperDiv.prop('aria-live')).toBe('polite');
   };
 
-  const isValidStatusAlert = ({ statusAlert, open }) => {
+  const isValidStatusAlert = ({ statusAlert, show }) => {
     expect(statusAlert.prop('className')).toEqual('edx-cookie-banner');
-    expect(statusAlert.prop('open')).toEqual(open);
-    expect(statusAlert.prop('dialog').type).toEqual(expectedDialog.type);
-    expect(statusAlert.prop('dialog').props).toEqual(expectedDialog.props);
+    expect(statusAlert.prop('show')).toEqual(show);
+    expect(statusAlert.prop('children').type).toEqual(expectedDialog.type);
+    expect(statusAlert.prop('children').props).toEqual(expectedDialog.props);
     expect(statusAlert.prop('onClose')).toEqual(mountedBanner.instance().onClose);
   };
 
   const isOpenBanner = () => {
-    expect(mountedBanner.state('open')).toBe(true);
-
+    expect(mountedBanner.state('show')).toBe(true);
     const wrapperDiv = mountedBanner.find('div').first();
     isValidWrapperDiv(wrapperDiv);
-
-    const statusAlerts = mountedBanner.find(StatusAlert);
+    const statusAlerts = mountedBanner.find('.edx-cookie-banner').first();
     expect(statusAlerts.length).toBe(1);
 
     const statusAlert = statusAlerts.first();
-    isValidStatusAlert({ statusAlert, open: isOpen });
+    isValidStatusAlert({ statusAlert, show: isOpen });
   };
 
   beforeEach(() => {
@@ -105,7 +101,7 @@ describe('CookiePolicyBanner', () => {
 
     isOpenBanner();
 
-    mountedBanner.find(StatusAlert).prop('onClose')();
+    mountedBanner.find('.edx-cookie-banner').first().prop('onClose')();
 
     isClosedBanner();
 

src/CookiePolicyBanner/index.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-danger */
 import React, { Component } from 'react';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
 import {
@@ -24,39 +24,39 @@ class CookieBanner extends Component {
 
     this.onClose = this.onClose.bind(this);
 
-    this.state = { open: false };
+    this.state = { show: false };
   }
 
   componentDidMount() {
     this.toggleDisplay(!hasViewedCookieBanner(this.props.isViewedCookieName));
   }
 
   componentDidUpdate() {
-    if (this.state.open === true) {
+    if (this.state.show === true) {
       if (document.querySelectorAll('.edx-cookie-banner .btn') && document.querySelectorAll('.edx-cookie-banner .btn').length > 0) {
         document.querySelectorAll('.edx-cookie-banner .btn')[0].blur();
       }
     }
   }
 
   onClose(event) {
-    this.setState({ open: false }, () => {
+    this.setState({ show: false }, () => {
       createHasViewedCookieBanner(this.props.isViewedCookieName);
       this.props.onClose(event);
     });
   }
 
-  toggleDisplay(open) {
-    this.setState({ open });
+  toggleDisplay(show) {
+    this.setState({ show });
   }
 
   render() {
     const { languageCode, policyText } = this.props;
-    const { open } = this.state;
+    const { show } = this.state;
     const ietfTag = languageCode
       ? getIETFTagFromLanguageCode(languageCode) : getIETFTag();
 
-    if (open) {
+    if (show) {
       return (
         <div
           lang={IETF_TAGS_TO_LANGUAGE_CODE[ietfTag]}
@@ -65,13 +65,14 @@ class CookieBanner extends Component {
           aria-label={IETF_TAGS_TO_CONTAINER_ROLE_LABEL[ietfTag]}
           aria-live="polite"
         >
-          <StatusAlert
+          <Alert
             className="edx-cookie-banner"
-            open={this.state.open}
+            show={this.state.show}
             closeButtonAriaLabel={IETF_TAGS_TO_CLOSE_BUTTON_LABEL[ietfTag]}
-            dialog={(<span dangerouslySetInnerHTML={{ __html: getPolicyHTML(ietfTag, policyText) }} />)}
             onClose={this.onClose}
-          />
+          >
+            <span dangerouslySetInnerHTML={{ __html: getPolicyHTML(ietfTag, policyText) }} />
+          </Alert>
         </div>
       );
     }