[SDAN-519] Toggle map display in Agenda Preview

assets/agenda/components/AgendaPreviewImage.jsx

@@ -1,29 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {isEmpty} from 'lodash';
-import {getLocations, mapsKey} from 'maps/utils';
+import {shouldRenderLocation, getLocations} from 'maps/utils';
 import StaticMap from 'maps/components/static';
+import BannerDrop from 'components/BannerDrop';
+import {gettext} from '../../utils';
+import {get} from 'lodash';
 
 /**
  * Display map image for item location
  * @param {Object} item
  * @param {function} onClick
  */
 export default function AgendaPreviewImage({item, onClick}) {
-    if (isEmpty(mapsKey())) {
+    if (!shouldRenderLocation(item)) {
         return null;
     }
 
     const locations = getLocations(item);
 
-    if (isEmpty(locations)) {
-        return null;
-    }
-
     return (
-        <figure className="wire-column__preview__image" onClick={() => onClick(item)}>
-            <StaticMap locations={locations} />
-        </figure>
+        <BannerDrop label={gettext('Show Map')} isOpen={get(item, 'coverages.length', 0) === 0}>
+            <div className="wire-column__preview__image" onClick={() => onClick(item)}>
+                <StaticMap locations={locations} />
+            </div>
+        </BannerDrop>
     );
 }
 

assets/agenda/components/AgendaTime.jsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import {SCHEDULE_TYPE} from '../utils';
 import {bem} from 'ui/utils';
 import {formatAgendaDate, formatDate, DATE_FORMAT, getScheduleType} from 'utils';
+import {shouldRenderLocation} from'maps/utils';
 
 export default function AgendaTime({item, group, suppliedNodes, withGroupDate}) {
     const getClassNames = (modifier = 'event') => {
@@ -55,7 +56,9 @@ export default function AgendaTime({item, group, suppliedNodes, withGroupDate})
         }
     };
 
-    return [(<div key='local-time' className={classNames('wire-column__preview__content-header', {'mb-0': isRemoteTimezone}, {'mb-2': !isRemoteTimezone})}>
+    const margin = !isRemoteTimezone && !shouldRenderLocation(item);
+
+    return [(<div key='local-time' className={classNames('wire-column__preview__content-header', {'mb-0': !margin}, {'mb-2': margin})}>
         <div className={classNames(getClassNames(),
             {'p-0': isRemoteTimezone})}>{getDates()}</div>
         {suppliedNodes}

assets/components/BannerDrop.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+class BannerDrop extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: this.props.isOpen };
+        this.toggleOpen = this.toggleOpen.bind(this);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.state.open !== nextProps.isOpen) {
+            this.setState({ open: nextProps.isOpen });
+        }
+    }
+
+    toggleOpen() {
+        this.setState({ open: !this.state.open});
+    }
+
+    render() {
+        return (<div className="banner-drop">
+            <div className={classNames('banner-drop__child',
+                {'banner-drop__child--active': this.state.open})}>
+                {this.props.children}
+            </div>
+            {this.props.label && <div className={classNames('banner-drop__text', 'pl-5', 'ml-5',
+                {'banner-drop__text--active': this.state.open})}>{this.props.label}</div>}
+            <div className="banner-drop__toggle">
+                <div className="banner-drop__line banner-drop__line--left" />
+                <button type="button" className={classNames({'active': this.state.open})}>
+                    <i className="banner-drop__toggle icon-small--arrow-down" onClick={this.toggleOpen} />
+                </button>
+                <div className="banner-drop__line banner-drop__line--right" />
+            </div>
+        </div>);
+    }
+}
+
+BannerDrop.propTypes = {
+    children: PropTypes.node,
+    label: PropTypes.string,
+    isOpen: PropTypes.bool,
+};
+
+export default BannerDrop;

assets/maps/utils.js

@@ -167,3 +167,7 @@ export function getMapSource(locations, scale = 1) {
 
     return src;
 }
+
+export function shouldRenderLocation(item) {
+    return !isEmpty(mapsKey()) && !isEmpty(getLocations(item));
+}

assets/styles/custom-variables.scss

@@ -3,6 +3,7 @@
 $body-text: #444;
 $gray-light: #c9c9c9;
 $gray-mid: #9a9a9a;
+$gray-dark: #747474;
 $background-color: #f8f8f8;
 $main-blue: #00acec;
 $mid-blue: #006f98;

assets/styles/index.scss

@@ -1310,7 +1310,7 @@ article.list {
     padding: 0 15px;
     font-size: 1.25rem;
     font-weight: 300;
-    color: #747474;   
+    color: $gray-dark;   
 }
 .wire-articles__group {
     flex: 0 0 100%;
@@ -2002,7 +2002,7 @@ article.list {
 
 .wire-articles__item__meta-info {
     font-size: 0.8125rem;
-    color: #747474;
+    color: $gray-dark;
     line-height: 1.2;
     display: flex;
     flex-direction: column;
@@ -2330,7 +2330,7 @@ a.wire-articles__versions {
 }
 
 .wire-column__preview__date {
-    color: #747474;
+    color: $gray-dark;
     line-height: 1rem;
     font-size: .8125rem;
 
@@ -2685,7 +2685,7 @@ a.wire-articles__versions {
 
 .wire-column__preview__versions__meta {
     font-size: 0.8125rem;
-    color: #747474;
+    color: $gray-dark;
     line-height: 1.4;
     display: flex;
     flex-direction: column;
@@ -3158,7 +3158,7 @@ a.wire-articles__versions {
     font-size: 0.8125rem;
     margin-top: 10px;
     span {
-        color: #747474;
+        color: $gray-dark;
     }
 }
 
@@ -3320,4 +3320,75 @@ a.wire-articles__versions {
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
+}
+
+.banner-drop {
+    padding-bottom: 20px;
+    &__toggle {
+        margin-left: -10.5px;
+        line-height: 0;
+        display: flex;
+
+        i {
+            height: 15px;
+            padding-left: 5px;
+        }
+
+        button {
+            width: 30px;
+            height: 30px;
+            border: 1px solid rgba(123, 123, 123, 0.5);
+            @include border-radius(50%);
+            background: white;
+
+            &:focus {
+                outline:0;
+            }
+            transition: transform 0.5s ease-out;
+        }
+
+        button.active {
+            transform: rotate(180deg);
+        }
+    }
+
+
+    &__line {
+        height: 1px;
+        margin: auto 0.4rem auto 0;
+        background: rgba(123, 123, 123, 0.5);
+        margin-top:11px;
+        width: 50%;
+
+        &--left {
+            margin-right: 2px;
+        }
+
+        &--right {
+            margin-left: 2px;
+        }
+    }
+
+    &__child {
+        max-height: 0px;
+        overflow: hidden;
+        transition: max-height 0.5s ease-out;
+
+        &--active {
+            height: auto;
+            max-height: 500px;
+        }
+    }
+
+    &__text {
+        margin-bottom: -10px;
+        font-size: 0.8125rem;
+        color: $gray-dark;
+        opacity: 1;
+        transition: opacity 0.5s ease-out;
+
+        &--active {
+            opacity: 0;
+        }
+    }
+}