Fixes #2618 Improve Sidecard component styles

docma-config.json

@@ -120,6 +120,8 @@
             "web/client/components/mapcontrols/annotations/Annotations.jsx",
             "web/client/components/mapcontrols/annotations/AnnotationsEditor.jsx",
             "web/client/components/mapcontrols/annotations/AnnotationsConfig.js",
+            "web/client/components/misc/cardgrids/SideCard.jsx",
+            "web/client/components/misc/cardgrids/SideGrid.jsx",
             "web/client/components/misc/enhancers/emptyState.jsx",
             "web/client/components/misc/enhancers/tooltip.jsx",
             "web/client/components/misc/panels/Accordion.jsx",

web/client/components/misc/cardgrids/SideCard.jsx

@@ -8,24 +8,48 @@
 
 
 const React = require('react');
+/**
+ * Component for rendering a rectangular card with preview, title, description and caption.
+ * @memberof components.misc.cardgrids
+ * @name SideCard
+ * @class
+ * @prop {string} className custom class
+ * @prop {object} style inline style
+ * @prop {bool} selected hilglight the card with selected style
+ * @prop {node} preview insert a glyphicon or img node
+ * @prop {node|string} title text for title
+ * @prop {node|string} description text for description
+ * @prop {node|string} caption text for caption
+ * @prop {node} tools add a node to the right of card
+ * @prop {node} body add a node to the bottom of card
+ * @prop {string} size size of card, 'sm' for small
+ * @prop {function} onClick callback on card click
+ */
 
-module.exports = ({onClick=() => {}, size, title, preview, description, caption, tools, selected, ...more} = {}) =>
-<div className={`mapstore-side-card${selected ? ' selected' : ''}${size ? ' ms-' + size : ''}`} onClick={() => onClick({title, preview, description, caption, tools, ...more})}>
-  <div className="mapstore-side-preview">
-      {preview}
-  </div>
-  <div className="mapstore-side-card-info">
-      <div className="mapstore-side-card-title">
-          {title}
-      </div>
-      <div className="mapstore-side-card-desc">
-          {description}
-      </div>
-      <div className="mapstore-side-card-caption">
-          {caption}
-      </div>
-  </div>
-  <div className="mapstore-side-card-tool text-center">
-      {tools}
-  </div>
+module.exports = ({body, className = '', style = {}, onClick=() => {}, size, title, preview, description, caption, tools, selected, ...more} = {}) =>
+<div className={`mapstore-side-card${selected ? ' selected' : ''}${size ? ' ms-' + size : ''} ${className}`}
+    onClick={() => onClick({title, preview, description, caption, tools, ...more})}
+    style={style}>
+    <div className="ms-head">
+        {preview && <div className="mapstore-side-preview">
+            {preview}
+        </div>}
+        <div className="mapstore-side-card-info">
+            <div className="mapstore-side-card-title">
+                <span>{title}</span>
+            </div>
+            <div className="mapstore-side-card-desc">
+                <span>{description}</span>
+            </div>
+            {caption && <div className="mapstore-side-card-caption">
+                <span>{caption}</span>
+            </div>}
+        </div>
+        <div className="mapstore-side-card-tool text-center">
+            {tools}
+        </div>
+    </div>
+    {body && <div className="ms-body">
+        {body}
+    </div>}
 </div>;

web/client/components/misc/cardgrids/SideGrid.jsx

@@ -9,12 +9,24 @@
 const React = require('react');
 const SideCard = require('./SideCard');
 const {Row, Col} = require('react-bootstrap');
-module.exports = ({items=[], colProps={xs: 12}, onItemClick = () => {}, size} = {}) =>
-    (<div className="msSideGrid">
+/**
+ * Component for rendering a list of SideCard.
+ * @memberof components.misc.cardgrids
+ * @name SideGrid
+ * @class
+ * @prop {array} items array of list item
+ * @prop {function} onItemClick callback on item click
+ * @prop {string} size size of cards, 'sm' for small
+ * @prop {element} cardComponent custom component for card in list
+ * @prop {object} colProps props for react-bootstrap col component
+ */
+module.exports = ({cardComponent, items = [], colProps = {xs: 12}, onItemClick = () => {}, size = ''} = {}) => {
+    const Card = cardComponent || SideCard;
+    return (<div className="msSideGrid">
         <Row className="items-list">
             {items.map((item, i) =>
                 (<Col key={item.id || i} {...colProps}>
-                    <SideCard
+                    <Card
                         onClick={() => onItemClick(item)}
                         size={size}
                         {...item}
@@ -23,3 +35,4 @@ module.exports = ({items=[], colProps={xs: 12}, onItemClick = () => {}, size} =
             )}
         </Row>
     </div>);
+};

web/client/components/misc/cardgrids/__tests__/SideCard-test.jsx

@@ -34,4 +34,57 @@ describe('SideCard component', () => {
         const el = container.querySelector('.selected');
         expect(el).toExist();
     });
+
+    it('SideCard show/hide preview node', () => {
+        ReactDOM.render(<SideCard selected/>, document.getElementById("container"));
+        const container = document.getElementById('container');
+        let preview = container.querySelector('.mapstore-side-preview');
+        expect(preview).toNotExist();
+
+        ReactDOM.render(<SideCard preview={'icon'} selected/>, document.getElementById("container"));
+
+        preview = container.querySelector('.mapstore-side-preview');
+        expect(preview).toExist();
+        preview.innerHTML = 'icon';
+    });
+
+
+    it('SideCard show/hide caption node', () => {
+        ReactDOM.render(<SideCard selected/>, document.getElementById("container"));
+        const container = document.getElementById('container');
+        let caption = container.querySelector('.mapstore-side-caption');
+        expect(caption).toNotExist();
+
+        ReactDOM.render(<SideCard caption={'caption'} selected/>, document.getElementById("container"));
+
+        caption = container.querySelector('.mapstore-side-card-caption');
+        expect(caption).toExist();
+        caption.innerHTML = 'caption';
+    });
+
+    it('SideCard show/hide caption node', () => {
+        ReactDOM.render(<SideCard selected/>, document.getElementById("container"));
+        const container = document.getElementById('container');
+        let caption = container.querySelector('.mapstore-side-caption');
+        expect(caption).toNotExist();
+
+        ReactDOM.render(<SideCard caption={'caption'} selected/>, document.getElementById("container"));
+
+        caption = container.querySelector('.mapstore-side-card-caption');
+        expect(caption).toExist();
+        caption.innerHTML = 'caption';
+    });
+
+    it('SideCard show/hide body node', () => {
+        ReactDOM.render(<SideCard selected/>, document.getElementById("container"));
+        const container = document.getElementById('container');
+        let body = container.querySelector('.ms-body');
+        expect(body).toNotExist();
+
+        ReactDOM.render(<SideCard body={'body'} selected/>, document.getElementById("container"));
+
+        body = container.querySelector('.ms-body');
+        expect(body).toExist();
+        body.innerHTML = 'body';
+    });
 });

web/client/components/misc/cardgrids/__tests__/SideGrid-test.jsx

@@ -39,4 +39,27 @@ describe('SideGrid component', () => {
         el.click();
         expect(spyonItemClick).toHaveBeenCalled();
     });
+    it('Test SideGrid custom cards', () => {
+        const CustomCardComponent = ({title}) => <div className="custom-card-component">{title}</div>;
+
+        ReactDOM.render(<SideGrid
+            cardComponent={CustomCardComponent}
+            items={[{id: 'card-01', title: 'Card title 01'}, {id: 'card-02', title: 'Card title 02'}]}/>, document.getElementById("container"));
+
+        const container = document.getElementById('container');
+        const el = container.querySelector('.msSideGrid');
+        expect(el).toExist();
+
+        let customCards = container.getElementsByClassName('custom-card-component');
+        expect(customCards.length).toBe(2);
+        expect(customCards[0].innerHTML).toBe('Card title 01');
+        expect(customCards[1].innerHTML).toBe('Card title 02');
+
+        ReactDOM.render(<SideGrid
+            items={[{id: 'card-01', title: 'Card title 01'}, {id: 'card-02', title: 'Card title 02'}]}/>, document.getElementById("container"));
+
+        customCards = container.getElementsByClassName('custom-card-component');
+        expect(customCards.length).toBe(0);
+
+    });
 });

web/client/themes/default/less/common.less

@@ -137,4 +137,8 @@ textarea {
 
 .ms2-border-layout-content {
     background-color: @ms2-color-background;
+}
+
+.ms2-border-layout-body {
+    position: relative;
 }