Deprecate <MessageBanner> dismissable prop (#2202)

* Deprecate <MessageBanner> dismissable prop

This prop has been replaced by `dismissible` and the code accounts for both spellings; we should document the mispelled one as deprecated.

* Mark deprecated via prop-types

* typo fix

* Update story name

* Update Dismissible story name

* Update readme.md

* gah

lib/MessageBanner/MessageBanner.js

@@ -5,6 +5,7 @@
 import React, { forwardRef, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { deprecated } from 'prop-types-extra';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 import { CSSTransition } from 'react-transition-group';
@@ -140,7 +141,7 @@ MessageBanner.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   contentClassName: PropTypes.string,
-  dismissable: PropTypes.bool,
+  dismissable: deprecated(PropTypes.bool),
   dismissButtonAriaLabel: PropTypes.string,
   dismissButtonProps: PropTypes.object,
   dismissible: PropTypes.bool,

lib/MessageBanner/readme.md

@@ -69,10 +69,11 @@ const [show, setShow] = useState(false);
 Name | Type | Description | Options | Default
 -- | -- | -- | -- | --
 aria-live | string | Sets the `aria-live`-attribute for the root element. | off, polite, assertive | assertive
-autoFocusDismissButton | bool | Autofocuses the dismiss button when the `<MessageBanner>` enters the DOM. This requires that the `dismissable`-prop is set to true | | false
+autoFocusDismissButton | bool | Autofocuses the dismiss button when the `<MessageBanner>` enters the DOM. This requires that the `dismissible`-prop is set to true | | false
 type | string | Sets the style of the `<MessageBanner>` | default, error, success, warning | default
 children | node | Renders the contents of the `<MessageBanner>` | |
-dismissable | boolean | Adds a close icon and makes the `<MessageBanner>` dismissable | true/false | false
+dismissable | boolean | Typo of dismissible, **deprecated** | true/false | false
+dismissible | boolean | Adds a close icon and makes the `<MessageBanner>` dismissible | true/false | false
 dismissButtonAriaLabel | string | Adds an aria-label attribute for the dismiss `<IconButton>`. | | "Hide message"
 dismissButtonProps | object | Add custom props for the dismiss button. This can be useful for e.g. adding a custom class name for the internal `<IconButton>`. | | {}
 icon | string | Renders an icon next to the message. Supports all icons available for the <a href="https://github.com/folio-org/stripes-components/tree/master/lib/Icon" target="_blank">`<Icon>`</a>-component. When the `type`-prop is set to either "success", "error" and "warning" the `<MessageBanner>` will have icons by default but these too can be overwritten by using the `icon`-prop. If you want to remove the icon entirely you can simply set `icon` to `null` | |

lib/MessageBanner/stories/Dismissable.js → lib/MessageBanner/stories/Dismissible.js

@@ -1,15 +1,15 @@
 /**
- * MessageBanner -> Dismissable
+ * MessageBanner -> Dismissible
  */
 
 import React from 'react';
 import MessageBanner from '../MessageBanner';
 
 const BasicUsage = () => (
   <div style={{ maxWidth: 850 }}>
-    <MessageBanner dismissable>Default</MessageBanner>
-    <MessageBanner dismissable type="success">Success</MessageBanner>
-    <MessageBanner dismissable type="error">
+    <MessageBanner dismissible>Default</MessageBanner>
+    <MessageBanner dismissible type="success">Success</MessageBanner>
+    <MessageBanner dismissible type="error">
       <strong>Patron</strong>
       {' '}
       has
@@ -18,8 +18,8 @@ const BasicUsage = () => (
       {' '}
       in place.
     </MessageBanner>
-    <MessageBanner dismissable type="warning">Warning</MessageBanner>
-    <MessageBanner dismissable type="warning">
+    <MessageBanner dismissible type="warning">Warning</MessageBanner>
+    <MessageBanner dismissible type="warning">
       With a lot of content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, turpis
       a egestas consequat, elit elit fringilla ligula, et luctus magna nunc et mauris. Praesent in felis
       mollis, congue tellus sed, faucibus arcu. Mauris iaculis quam eu elementum interdum. Donec nulla augue,

lib/MessageBanner/stories/MessageBanner.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import withReadme from 'storybook-readme/with-readme';
 import BasicUsage from './BasicUsage';
-import Dismissable from './Dismissable';
+import Dismissible from './Dismissible';
 import ShowHide from './ShowHide';
 import readme from '../readme.md';
 
@@ -17,4 +17,4 @@ _ShowHide.story = {
   name: 'Show/hide',
 };
 
-export const _Dismissable = Dismissable;
+export const _Dismissible = Dismissible;

lib/MessageBanner/tests/MessageBanner-test.js

@@ -35,7 +35,7 @@ describe('MessageBanner', () => {
           dismissButtonProps={{
             className: 'my-dismiss-button-class'
           }}
-          dismissable
+          dismissible
         >
           Test
         </MessageBanner>