Reports page design changes

src/javascript/app/App/Components/Elements/Calendar/calendar-header.jsx

@@ -19,6 +19,7 @@ const CalendarHeader = ({
     calendar_view,
     disable_month_selector,
     disable_year_selector,
+    hide_disabled_periods,
     isPeriodDisabled,
     navigateTo,
     switchView,
@@ -42,20 +43,26 @@ const CalendarHeader = ({
     const is_next_month_disabled  = isPeriodDisabled(addMonths(moment_date, 1), 'month');
     const is_next_year_disabled   = isPeriodDisabled(addYears(moment_date, num_of_years), 'month');
     const is_select_year_disabled = isPeriodDisabled(moment_date.clone().year(end_of_decade), 'year') || disable_year_selector;
+    const should_hide_next_month  = is_next_month_disabled && hide_disabled_periods;
+    const should_hide_prev_month  = is_prev_month_disabled && hide_disabled_periods;
+    const should_hide_prev_year   = is_prev_year_disabled && hide_disabled_periods;
+    const should_hide_next_year   = is_next_year_disabled && hide_disabled_periods;
 
     return (
         <div className='calendar__header'>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--prev-year', {
-                    'calendar__nav--disabled': is_prev_year_disabled,
+                    'calendar__nav--disabled' : is_prev_year_disabled,
+                    'calendar__nav--is-hidden': should_hide_prev_year,
                 })}
                 onClick={is_prev_year_disabled ? undefined : () => navigateTo(subYears(calendar_date, num_of_years))}
             >
                 <Icon icon='IconChevronDoubleLeft' className='calendar__icon' />
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--prev-month', {
-                    'calendar__nav--disabled': is_prev_month_disabled,
+                    'calendar__nav--disabled' : is_prev_month_disabled,
+                    'calendar__nav--is-hidden': should_hide_prev_month,
                 })}
                 is_hidden={!is_date_view}
                 onClick={is_prev_month_disabled ? undefined : () => navigateTo(subMonths(calendar_date, 1))}
@@ -96,7 +103,8 @@ const CalendarHeader = ({
 
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--next-month', {
-                    'calendar__nav--disabled': is_next_month_disabled,
+                    'calendar__nav--disabled' : is_next_month_disabled,
+                    'calendar__nav--is-hidden': should_hide_next_month,
                 })}
                 is_hidden={!is_date_view}
                 onClick={is_next_month_disabled ? undefined : () => navigateTo(addMonths(calendar_date, 1))}
@@ -105,7 +113,8 @@ const CalendarHeader = ({
             </CalendarButton>
             <CalendarButton
                 className={classNames('calendar__nav calendar__nav--next-year', {
-                    'calendar__nav--disabled': is_next_year_disabled,
+                    'calendar__nav--disabled' : is_next_year_disabled,
+                    'calendar__nav--is-hidden': should_hide_next_year,
                 })}
                 onClick={is_next_year_disabled ? undefined : () => navigateTo(addYears(calendar_date, num_of_years))}
             >
@@ -116,10 +125,15 @@ const CalendarHeader = ({
 };
 
 CalendarHeader.propTypes = {
-    calendar_date         : PropTypes.string,
+    calendar_date: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.number,
+    ]),
     calendar_view         : PropTypes.string,
     disable_month_selector: PropTypes.bool,
     disable_year_selector : PropTypes.bool,
+    hide_disabled_periods : PropTypes.bool,
     isPeriodDisabled      : PropTypes.func,
     navigateTo            : PropTypes.func,
     switchView            : PropTypes.func,

src/javascript/app/App/Components/Elements/Calendar/panels/calendar-days.jsx

@@ -20,6 +20,7 @@ const getDays = ({
     calendar_date,
     date_format,
     has_range_selection,
+    hide_others,
     holidays,
     hovered_date,
     isPeriodDisabled,
@@ -104,6 +105,7 @@ const getDays = ({
                     'calendar__cell--active-duration': is_active && has_range_selection && !is_today,
                     'calendar__cell--today-duration' : is_today && has_range_selection,
                     'calendar__cell--disabled'       : is_disabled,
+                    'calendar__cell--is-hidden'      : is_other_month && hide_others,
                     'calendar__cell--other'          : is_other_month,
                     'calendar__cell--between-hover'  : is_between_hover && has_range_selection,
                     'calendar__cell--between'        : is_between && has_range_selection,

src/javascript/app/App/Components/Elements/Label/label.jsx

@@ -8,14 +8,23 @@ const available_modes = [
     'warn',
     'danger',
     'info',
+    'success-invert',
+    'warn-invert',
 ];
 
-const Label = ({ mode, children }) => {
+const available_sizes = [
+    'regular',
+    'large',
+];
+
+const Label = ({ mode, children, size = 'regular' }) => {
     const type = available_modes.some(m => m === mode) ? mode : 'default';
+    const scale = available_sizes.some(s => s === size) ? size : 'regular';
 
     return (
         <span className={classNames('label', {
-            [`label--${type}`]: type,
+            [`label--${scale}`]: scale,
+            [`label--${type}`] : type,
         })}
         >{children}
         </span>

src/javascript/app/App/Components/Elements/Popover/popover.jsx

@@ -26,7 +26,7 @@ class Popover extends React.PureComponent {
             is_open         : !this.state.is_open && Boolean(this.props.message),
             target_rectangle: this.target_reference.current.getBoundingClientRect(),
         });
-    }
+    };
 
     render() {
         const {
@@ -35,6 +35,7 @@ class Popover extends React.PureComponent {
             classNameBubble,
             classNameTarget,
             classNameTargetIcon,
+            disable_target_icon,
             has_error,
             icon,
             margin,
@@ -49,11 +50,13 @@ class Popover extends React.PureComponent {
                 onMouseLeave={this.toggleIsOpen}
             >
                 <div className={classNames(classNameTarget, 'popover__target')} ref={this.target_reference}>
-                    <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
-                        {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
-                        {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
-                        {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
-                    </i>
+                    { !disable_target_icon &&
+                        <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
+                            {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
+                            {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
+                            {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
+                        </i>
+                    }
 
                     { children }
                 </div>
@@ -79,6 +82,7 @@ Popover.propTypes = {
     classNameBubble    : PropTypes.string,
     classNameTarget    : PropTypes.string,
     classNameTargetIcon: PropTypes.string,
+    disable_target_icon: PropTypes.bool,
     has_error          : PropTypes.bool,
     icon               : PropTypes.string,
     margin             : PropTypes.number,

src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx

@@ -1,3 +1,4 @@
+import classNames                  from 'classnames';
 import React                       from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import Icon                        from 'Assets/icon.jsx';
@@ -7,6 +8,7 @@ class VerticalTabContentContainer extends React.PureComponent {
     render() {
         const {
             action_bar,
+            action_bar_classname,
             is_routed,
             items,
             selected,
@@ -17,11 +19,17 @@ class VerticalTabContentContainer extends React.PureComponent {
         return (
             <div className='vertical-tab__content'>
                 { action_bar &&
-                    <div className='vertical-tab__action-bar'>
+                    <div className={classNames('vertical-tab__action-bar', {
+                        [action_bar_classname]: !!action_bar_classname,
+                    })}
+                    >
                         {
-                            action_bar.map(({ icon, onClick, title }) => (
-                                <Icon className='vertical-tab__action-bar--icon' key={title} icon={icon} onClick={onClick} />
-                            ))
+                            action_bar.map(({ component, icon, onClick, title }) => {
+                                const Component = component;
+                                return (
+                                    component ? <Component key={title} /> : <Icon className='vertical-tab__action-bar--icon' key={title} icon={icon} onClick={onClick} />
+                                );
+                            })
                         }
                     </div>
                 }

src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx

@@ -47,6 +47,7 @@ class VerticalTab extends React.PureComponent {
                 />
                 <VerticalTabContentContainer
                     action_bar={this.props.action_bar}
+                    action_bar_classname={this.props.action_bar_classname}
                     items={this.props.list}
                     selected={this.state.selected}
                     is_routed={this.props.is_routed}
@@ -59,16 +60,18 @@ class VerticalTab extends React.PureComponent {
 VerticalTab.propTypes = {
     action_bar: PropTypes.arrayOf(
         PropTypes.shape({
-            icon   : PropTypes.string,
-            onClick: PropTypes.func,
-            title  : PropTypes.string,
+            component: PropTypes.func,
+            icon     : PropTypes.string,
+            onClick  : PropTypes.func,
+            title    : PropTypes.string,
         })
     ),
-    current_path : PropTypes.string,
-    header_title : PropTypes.string,
-    is_full_width: PropTypes.bool,
-    is_routed    : PropTypes.bool,
-    list         : PropTypes.arrayOf(
+    action_bar_classname: PropTypes.string,
+    current_path        : PropTypes.string,
+    header_title        : PropTypes.string,
+    is_full_width       : PropTypes.bool,
+    is_routed           : PropTypes.bool,
+    list                : PropTypes.arrayOf(
         PropTypes.shape({
             default: PropTypes.bool,
             icon   : PropTypes.string,