feat: introduce MessageBox and Bar components (#1356)

* feat: update fundamental-styles to 0.19
* feat: introduce MessageBox and Bar components

Author: qbalukom

.storybook/main.js

@@ -50,11 +50,6 @@ module.exports = {
                 },
                 {
                     loader: 'css-loader',
-                    options: {
-                        modules: {
-                            localIdentName: '[local]-[sha1:hash:hex:6]'
-                        }
-                    }
                 }
             ]
         });

package-lock.json

@@ -50,14 +50,14 @@
     "@babel/runtime-corejs3": "^7.12.5",
     "@popperjs/core": "^2.5.4",
     "chain-function": "^1.0.1",
-    "classnames": "^2.2.6",
-    "fundamental-styles": "0.13.1-rc.2",
+    "classnames": "^2.3.1",
+    "fundamental-styles": "0.19.0",
     "hoist-non-react-statics": "^3.3.2",
     "keycode": "^2.2.0",
     "moment": "^2.29.1",
     "prop-types": "^15.7.1",
     "react-foco": "^1.3.0",
-    "react-focus-lock": "^2.5.0",
+    "react-focus-lock": "^2.5.2",
     "react-overlays": "^4.1.1",
     "react-popper": "^2.2.4",
     "react-required-if": "^1.0.3",

package.json

@@ -0,0 +1,101 @@
+import classnamesBind from 'classnames/bind';
+import PropTypes from 'prop-types';
+import React from 'react';
+import withStyles from '../utils/withStyles';
+
+import barStyles from 'fundamental-styles/dist/bar.css';
+
+const classnames = classnamesBind.bind(barStyles);
+
+const BAR_TYPES = [
+    'default',
+    'header',
+    'subheader',
+    'header-with-subheader',
+    'footer',
+    'floating-footer'
+];
+
+/** The **Bar** component is a container that holds titles, buttons and input
+ * controls. Its contents are distributed into three areas: left, middle and
+ * right. This component’s primary function is to display page **headers** and
+ * **footers**. It is mainly used to construct a **Page**, and acts as a
+ * building block for other components like **Dialog**, **Popover** etc.
+ *
+ * @returns {Node} Bar component
+ */
+function Bar({
+    className,
+    cozy,
+    cssNamespace,
+    leftComponents,
+    middleComponents,
+    rightComponents,
+    type,
+    ...props
+}) {
+    let Tag;
+    switch (type) {
+        case 'header':
+        case 'header-with-subheader':
+            Tag = 'header';
+            break;
+        case 'footer':
+        case 'floating-footer':
+            Tag = 'footer';
+            break;
+        default:
+            Tag = 'div';
+    }
+
+    const barClasses = classnames(
+        `${cssNamespace}-bar`,
+        {
+            [`${cssNamespace}-bar--${type}`]: type !== 'default',
+            [`${cssNamespace}-bar--cozy`]: cozy
+        },
+        className,
+    );
+
+    const elementClasses = classnames(`${cssNamespace}-bar__element`);
+
+    return (
+        <Tag className={barClasses} {...props}>
+            {leftComponents && <div className={classnames(`${cssNamespace}-bar__left`)}>
+                {leftComponents.map((child, index) => (
+                    <div className={elementClasses} key={index}>{child}</div>
+                ))}
+            </div>}
+            {middleComponents && <div className={classnames(`${cssNamespace}-bar__middle`)}>
+                {middleComponents.map((child, index) => (
+                    <div className={elementClasses} key={index}>{child}</div>
+                ))}
+            </div>}
+            {rightComponents && <div className={classnames(`${cssNamespace}-bar__right`)}>
+                {rightComponents.map((child, index) => (
+                    <div className={elementClasses} key={index}>{child}</div>
+                ))}
+            </div>}
+        </Tag>
+    );
+}
+Bar.propTypes = {
+    /** CSS class(es) to add to the element */
+    className: PropTypes.string,
+    /** Set to **true** to enable cozy mode */
+    cozy: PropTypes.bool,
+    /** Node(s) to render within the component */
+    leftComponents: PropTypes.node,
+    /** Node(s) to render within the component */
+    middleComponents: PropTypes.node,
+    /** Node(s) to render within the component */
+    rightComponents: PropTypes.node,
+    /** Bar type */
+    type: PropTypes.oneOf(BAR_TYPES)
+};
+Bar.defaultProps = {
+    cozy: false,
+    type: 'default'
+};
+
+export default withStyles(Bar);

src/Bar/Bar.js

@@ -0,0 +1,32 @@
+import Bar from './Bar';
+import { mount } from 'enzyme';
+import React from 'react';
+
+describe('<Bar />', () => {
+    test('should be created', () => {
+        const component = mount(
+            <Bar
+                leftComponents={[<span>Left Text</span>]}
+                middleComponents={[<span>Middle Text</span>]}
+                rightComponents={[<span>Right Text</span>]} />
+        );
+
+        expect(component.find('.fd-bar__left').text()).toBe('Left Text');
+        expect(component.find('.fd-bar__middle').text()).toBe('Middle Text');
+        expect(component.find('.fd-bar__right').text()).toBe('Right Text');
+    });
+
+    describe('Prop spreading', () => {
+        test('should allow props to be spread to the component', () => {
+            const component = mount(
+                <Bar data-sample='Sample' />
+            );
+
+            expect(
+                component.getDOMNode()
+                    .attributes['data-sample']
+                    .value
+            ).toBe('Sample');
+        });
+    });
+});