diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 530b397c9144ec..9412de832e3ea6 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -152,12 +152,6 @@ border-radius: 0 $radius-round-rectangle $radius-round-rectangle 0 !important; } } - - &.is-24-hour { - .components-datetime__time-field-day { - order: 0 !important; - } - } } .components-datetime__time-legend { diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap new file mode 100644 index 00000000000000..d67e11da54846e --- /dev/null +++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap @@ -0,0 +1,689 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TimePicker matches the snapshot when the is12hour prop is false 1`] = ` +
+
+ + Date + +
+
+ +
+
+ +
+
+ +
+
+
+
+ + Time + +
+
+ + + +
+
+
+
+`; + +exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`] = ` +
+
+ + Date + +
+
+ +
+
+ +
+
+ +
+
+
+
+ + Time + +
+
+ + + +
+
+ + AM + + + PM + +
+
+
+
+`; + +exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = ` +
+
+ + Date + +
+
+ +
+
+ +
+
+ +
+
+
+
+ + Time + +
+
+ + + +
+
+ + AM + + + PM + +
+
+
+
+`; + +exports[`TimePicker matches the snapshot when the is12hour prop is undefined 1`] = ` +
+
+ + Date + +
+
+ +
+
+ +
+
+ +
+
+
+
+ + Time + +
+
+ + + +
+
+
+
+`; diff --git a/packages/components/src/date-time/test/time.js b/packages/components/src/date-time/test/time.js index 64c868ea293aa1..3d61d058f330ce 100644 --- a/packages/components/src/date-time/test/time.js +++ b/packages/components/src/date-time/test/time.js @@ -9,18 +9,24 @@ import { shallow } from 'enzyme'; import TimePicker from '../time'; describe( 'TimePicker', () => { - it( 'should have the correct CSS class if 12-hour clock is specified', () => { - const onChangeSpy = jest.fn(); - const picker = shallow( ); - expect( picker.hasClass( 'is-12-hour' ) ).toBe( true ); + it( 'matches the snapshot when the is12hour prop is true', () => { + const wrapper = shallow( ); + expect( wrapper ).toMatchSnapshot(); } ); - it( 'should have the correct CSS class if 24-hour clock is specified', () => { - const onChangeSpy = jest.fn(); - const picker = shallow( - - ); - expect( picker.hasClass( 'is-24-hour' ) ).toBe( true ); + it( 'matches the snapshot when the is12hour prop is false', () => { + const wrapper = shallow( ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'matches the snapshot when the is12hour prop is specified', () => { + const wrapper = shallow( ); + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'matches the snapshot when the is12hour prop is undefined', () => { + const wrapper = shallow( ); + expect( wrapper ).toMatchSnapshot(); } ); it( 'should call onChange with an updated day', () => { diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js index 1db16f6b362d2a..8cb80cdee21674 100644 --- a/packages/components/src/date-time/time.js +++ b/packages/components/src/date-time/time.js @@ -43,6 +43,9 @@ class TimePicker extends Component { this.updateMinutes = this.updateMinutes.bind( this ); this.onChangeHours = this.onChangeHours.bind( this ); this.onChangeMinutes = this.onChangeMinutes.bind( this ); + this.renderMonth = this.renderMonth.bind( this ); + this.renderDay = this.renderDay.bind( this ); + this.renderDayMonthFormat = this.renderDayMonthFormat.bind( this ); } componentDidMount() { @@ -189,52 +192,65 @@ class TimePicker extends Component { this.setState( { minutes: event.target.value } ); } + renderMonth( month ) { + return ( +
+ +
+ ); + } + + renderDay( day ) { + return ( +
+ +
+ ); + } + + renderDayMonthFormat( is12Hour ) { + const { day, month } = this.state; + const layout = [ this.renderDay( day ), this.renderMonth( month ) ]; + return is12Hour ? layout : layout.reverse(); + } + render() { const { is12Hour } = this.props; - const { day, month, year, minutes, hours, am } = this.state; - + const { year, minutes, hours, am } = this.state; return ( -
+
{ __( 'Date' ) }
-
- -
-
- -
+ { this.renderDayMonthFormat( is12Hour ) }