Wikia · vforge · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018 · Nov 14, 2018
@@ -151,7 +151,8 @@ var BannerNotification = function BannerNotification(_ref) {
   var className = _ref.className,
       type = _ref.type,
       text = _ref.text,
-      onClose = _ref.onClose;
+      onClose = _ref.onClose,
+      children = _ref.children;
   return React.createElement("div", {
     className: "wds-banner-notification ".concat(getClassName(type), " ").concat(className)
   }, React.createElement("div", {
@@ -160,22 +161,36 @@ var BannerNotification = function BannerNotification(_ref) {
     name: getIconName(type)
   })), React.createElement("span", {
     className: "wds-banner-notification__text"
-  }, text), onClose && React.createElement(Icon, {
+  }, children || text), onClose && React.createElement(Icon, {
     name: "cross-tiny",
     className: "wds-banner-notification__close",
     onClick: onClose
   }));
 };
 
 BannerNotification.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * An additional class name
+   */
   className: PropTypes.string,
   onClose: PropTypes.func,
-  text: PropTypes.string.isRequired,
+
+  /**
+   * Text to display if there are no children.
+   */
+  text: PropTypes.string,
   type: PropTypes.oneOf(['alert', 'warning', 'success', 'message']).isRequired
 };
 BannerNotification.defaultProps = {
+  children: null,
   className: '',
-  onClose: null
+  onClose: null,
+  text: ''
 };
 
 module.exports = BannerNotification;
@@ -220,7 +220,8 @@ var BannerNotification = function BannerNotification(_ref) {
   var className = _ref.className,
       type = _ref.type,
       text = _ref.text,
-      onClose = _ref.onClose;
+      onClose = _ref.onClose,
+      children = _ref.children;
   return React.createElement("div", {
     className: "wds-banner-notification ".concat(getClassName(type), " ").concat(className)
   }, React.createElement("div", {
@@ -229,22 +230,36 @@ var BannerNotification = function BannerNotification(_ref) {
     name: getIconName(type)
   })), React.createElement("span", {
     className: "wds-banner-notification__text"
-  }, text), onClose && React.createElement(Icon, {
+  }, children || text), onClose && React.createElement(Icon, {
     name: "cross-tiny",
     className: "wds-banner-notification__close",
     onClick: onClose
   }));
 };
 
 BannerNotification.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+
+  /**
+   * An additional class name
+   */
   className: PropTypes.string,
   onClose: PropTypes.func,
-  text: PropTypes.string.isRequired,
+
+  /**
+   * Text to display if there are no children.
+   */
+  text: PropTypes.string,
   type: PropTypes.oneOf(['alert', 'warning', 'success', 'message']).isRequired
 };
 BannerNotification.defaultProps = {
+  children: null,
   className: '',
-  onClose: null
+  onClose: null,
+  text: ''
 };
 
 var messageType = PropTypes.shape({

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.d9510727.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.eddb265d.js"></script></body></html>
@@ -9,3 +9,11 @@ But it can be rendered with close buttton:
 <IconSprite />{ /* add sprite so we can see icons in this example */ }
 <BannerNotification type={'alert'} text={'lorem ipsum - alert'} onClose={() => alert('Click')} />
 ```
+
+Or with extra HTML:
+```js
+<IconSprite />{ /* add sprite so we can see icons in this example */ }
+<BannerNotification type={'alert'}onClose={() => alert('Click')}>
+    This is a text <a href="http://example.com">with a link</a>
+</BannerNotification>
+```
@@ -124,6 +124,40 @@ exports[`BannerNotification renders correctly 4`] = `
 </div>
 `;
 
+exports[`BannerNotification renders correctly 5`] = `
+<div
+  className="wds-banner-notification wds-message "
+>
+  <div
+    className="wds-banner-notification__icon"
+  >
+    <svg
+      className="wds-icon wds-icon-small"
+    >
+      <use
+        xlinkHref="#wds-icons-flag-small"
+      />
+    </svg>
+  </div>
+  <span
+    className="wds-banner-notification__text"
+  >
+    <em>
+      Note
+    </em>
+    : this is html.
+  </span>
+  <svg
+    className="wds-icon wds-banner-notification__close wds-icon-tiny"
+    onClick={[Function]}
+  >
+    <use
+      xlinkHref="#wds-icons-cross-tiny"
+    />
+  </svg>
+</div>
+`;
+
 exports[`BannerNotification renders correctly without action 1`] = `
 <div
   className="wds-banner-notification wds-message "

@@ -36,27 +36,39 @@ function getClassName(type) {
  * This is a single component used in `BannerNotifications` component.
  */
 const BannerNotification = ({
-    className, type, text, onClose,
+    className, type, text, onClose, children,
 }) => (
     <div className={`wds-banner-notification ${getClassName(type)} ${className}`}>
         <div className="wds-banner-notification__icon">
             <Icon name={getIconName(type)} />
         </div>
-        <span className="wds-banner-notification__text">{text}</span>
+        <span className="wds-banner-notification__text">{children || text}</span>
         {onClose && <Icon name="cross-tiny" className="wds-banner-notification__close" onClick={onClose} />}
     </div>
 );
 
 BannerNotification.propTypes = {
+    /**
+     * @ignore
+     */
+    children: PropTypes.node,
+    /**
+     * An additional class name
+     */
     className: PropTypes.string,
     onClose: PropTypes.func,
-    text: PropTypes.string.isRequired,
+    /**
+     * Text to display if there are no children.
+     */
+    text: PropTypes.string,
     type: PropTypes.oneOf(['alert', 'warning', 'success', 'message']).isRequired,
 };
 
 BannerNotification.defaultProps = {
+    children: null,
     className: '',
     onClose: null,
+    text: '',
 };
 
 export default BannerNotification;
@@ -30,6 +30,15 @@ test('BannerNotification renders correctly', () => {
         <BannerNotification type="alert" text="lorem ipsum - alert" onClose={noop} />,
     );
     expect(component.toJSON()).toMatchSnapshot();
+
+    /* eslint-disable */
+    component = renderer.create(
+        <BannerNotification type="message" onClose={noop}>
+            <em>Note</em>: this is html.
+        </BannerNotification>,
+    );
+    /* eslint-enable */
+    expect(component.toJSON()).toMatchSnapshot();
 });
 
 test('BannerNotification renders correctly without action', () => {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.d9510727.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.eddb265d.js"></script></body></html>