Updates Media Date Range to utilise “mobile first” approach to layout

On screens smaller than 480px:

* removes selected date text on button (leaving just an icon)
* displays only 1 month of calendar at a time (instead of two)

Adds tests to cover this.

assets/stylesheets/sections/media.scss

@@ -5,6 +5,7 @@
 @import '../shared/mixins/clear-text';
 @import '../shared/mixins/heading';
 @import '../shared/mixins/long-content-fade';
+@import '../shared/mixins/hide-content-accessibly';
 
 @import '../shared/colors';
 @import '../shared/extends';

client/my-sites/media-library/media-date-range.jsx

@@ -222,7 +222,7 @@ export class MediaDateRange extends Component {
 					from: this.momentDateToNative( this.state.startDate ),
 					to: this.momentDateToNative( this.state.endDate ),
 				} }
-				numberOfMonths={ 2 }
+				numberOfMonths={ window.matchMedia( '(min-width: 480px)' ).matches ? 2 : 1 }
 				calendarViewDate={ this.momentDateToNative( this.state.startDate ) }
 				disabledDays={ [
 					{
@@ -264,8 +264,8 @@ export class MediaDateRange extends Component {
 				onClick={ this.togglePopover }
 				compact
 			>
-				<Gridicon className="media-library__date-range-icon" icon="calendar" />
-				<span>
+				<Gridicon className="media-library__date-range-btn-icon" icon="calendar" />
+				<span className="media-library__date-range-btn-text">
 					{ this.dateToHumanReadable( this.state.startDate ) }
 					-
 					{ this.dateToHumanReadable( this.state.endDate ) }

client/my-sites/media-library/media-date-range.scss

@@ -32,14 +32,29 @@
 	}
 }
 
-.media-library__date-range-icon {
+.media-library__date-range-btn-icon {
 	margin-right: 5px;
 }
 
+.media-library__date-range-btn-text {
+	@include hide-content-accessibly;
+
+	@include breakpoint( '>480px' ) {
+		clip: default;
+		height: auto;
+		overflow: visible;
+		position: static;
+		width: auto;
+	}
+}
+
 .media-library__date-range-popover-inner {
 	padding: 15px;
-	width: 400px;
-	max-width: 100%;
+	max-width: 90%;
+
+	@include breakpoint( '>480px' ) {
+		width: 400px;
+	}
 }
 
 .media-library__date-range-popover-header {
@@ -56,14 +71,21 @@
 
 	.DayPicker-wrapper {
 		display: flex;
+		flex-direction: column;
+
+		@include breakpoint( '>480px' ) {
+			flex-direction: row;
+		}
 	}
 
 	.DayPicker-Month {
 		margin-right: 1em;
 
-		&:last-child {
-			margin-left: 1em;
-			margin-right: 0;
+		@include breakpoint( '>480px' ) {
+			&:last-child {
+				margin-left: 1em;
+				margin-right: 0;
+			}
 		}
 	}
 

client/my-sites/media-library/test/__snapshots__/media-data-range.jsx.snap

@@ -11,11 +11,13 @@ exports[`MediaDateRange should render 1`] = `
     type="button"
   >
     <t
-      className="media-library__date-range-icon"
+      className="media-library__date-range-btn-icon"
       icon="calendar"
       size={24}
     />
-    <span>
+    <span
+      className="media-library__date-range-btn-text"
+    >
       01/05/2018
       -
       01/06/2018

client/my-sites/media-library/test/media-data-range.jsx

@@ -21,6 +21,12 @@ describe( 'MediaDateRange', () => {
 	let fixedEndDate;
 
 	beforeEach( () => {
+		Object.defineProperty( window, 'matchMedia', {
+			value: jest.fn( () => {
+				return { matches: true };
+			} ),
+		} );
+
 		// Note: forces locale to UK date format to make
 		// test easier to assert again
 		moment.locale( [ 'en-GB' ] );
@@ -174,6 +180,19 @@ describe( 'MediaDateRange', () => {
 		);
 	} );
 
+	test( 'should show 1 month calendar view on screens <480px', () => {
+		Object.defineProperty( window, 'matchMedia', {
+			value: jest.fn( () => {
+				return { matches: false };
+			} ),
+		} );
+
+		const wrapper = shallow( <MediaDateRange moment={ moment } /> );
+		const datePicker = wrapper.find( DatePicker );
+
+		expect( datePicker.props().numberOfMonths ).toEqual( 1 );
+	} );
+
 	describe( 'text inputs', () => {
 		let startDate;
 		let endDate;