Merge pull request #55 from storyblok/hotfix/datepicker

Fix component: datepicker

src/components/Datepicker/Datepicker.stories.js

@@ -7,8 +7,7 @@ const Template = (args) => ({
   props: Object.keys(args),
 
   data: () => ({
-    internalDatetimeValue: '',
-    internalTimeValue: '',
+    internalDatetimeValue: '2017-09-09 00:00',
   }),
 
   template: `
@@ -19,6 +18,7 @@ const Template = (args) => ({
       :tz-tooltip="tzTooltip"
       :type="type"
       v-model="internalDatetimeValue"
+      style="width: 29.4rem"
     />
   `,
 })

src/components/Datepicker/Datepicker.vue

@@ -134,7 +134,6 @@ export default {
     value: {
       type: String,
       default: '',
-      required: true,
     },
   },
 
@@ -210,6 +209,13 @@ export default {
     },
   },
 
+  watch: {
+    value: {
+      handler: 'syncInternalValue',
+      immediate: true,
+    },
+  },
+
   mounted() {
     this.$nextTick(() => {
       this.inputElement = this.$refs.input && this.$refs.input.$el
@@ -219,6 +225,7 @@ export default {
   methods: {
     handleCancelAction() {
       this.closeOverlay()
+      this.syncInternalValue(this.value)
     },
 
     handleDoneAction() {
@@ -251,6 +258,7 @@ export default {
 
       if (this.type === 'date') {
         this.closeOverlay()
+        this.handleDoneAction()
         return
       }
 
@@ -268,6 +276,10 @@ export default {
     },
 
     handleInputClick() {
+      if (this.disabled) {
+        return
+      }
+
       this.isOverlayVisible = true
       this.internalVisualization =
         this.type === 'time' ? INTERNAL_VIEWS.TIME : INTERNAL_VIEWS.CALENDAR
@@ -283,6 +295,11 @@ export default {
       this.isOverlayVisible = false
     },
 
+    syncInternalValue(value) {
+      this.internalValue = value
+      this.internalDate = value || dayjs().format()
+    },
+
     $_wrapClose(e) {
       if (!this.$el.contains(e.target)) {
         this.closeOverlay()

src/components/Datepicker/__tests__/Datepicker.spec.js

@@ -128,6 +128,7 @@ describe('SbDatepicker component', () => {
     const wrapper = factory({
       ...SbDatepickerData.args,
       ...WithTzOffset.args,
+      value: '2017-09-09',
     })
 
     it('Should exist the SbTooltip component with correct label', () => {

src/components/Datepicker/__tests__/DatepickerYears.spec.js

@@ -8,8 +8,8 @@ describe('SbDatepickerYears component', () => {
 
   describe('Test component method to handle the MONTHS', () => {
     it('Should emit date for input on click', async () => {
-      const value = dayjs().format()
-      await wrapper.setProps({ value })
+      const internalDate = dayjs().format()
+      await wrapper.setProps({ internalDate })
       await wrapper.find('.sb-datepicker-years__item').trigger('click')
       expect(wrapper.emitted().input[0].length).toBe(1)
     })

src/components/Datepicker/components/DatepickerMonths.vue

@@ -49,7 +49,7 @@ export default {
     monthsList() {
       return this.months.map((month) => {
         return {
-          checked: dayjs(this.value).format('MMM') === month,
+          checked: dayjs(this.internalDate).format('MMM') === month,
           label: month,
         }
       })
@@ -65,7 +65,7 @@ export default {
     handleMonthClick($event, month) {
       $event.stopPropagation()
       const monthIndex = this.months.indexOf(month)
-      const value = dayjs(this.value).month(monthIndex).format()
+      const value = dayjs(this.internalDate).month(monthIndex).format()
       this.$emit('input', value)
     },
   },

src/components/Datepicker/components/DatepickerTime.vue

@@ -36,7 +36,7 @@ export default {
   name: 'SbDatepickerTime',
 
   props: {
-    value: {
+    internalDate: {
       type: String,
       default: null,
     },
@@ -76,7 +76,7 @@ export default {
   },
 
   watch: {
-    value: {
+    internalDate: {
       handler: '$_syncValue',
       immediate: true,
     },
@@ -96,7 +96,10 @@ export default {
     $_processInput() {
       const hours = this.internalHour || 0
       const minutes = this.internalMinutes || 0
-      const value = dayjs(this.value).hour(hours).minute(minutes).format()
+      const value = dayjs(this.internalDate)
+        .hour(hours)
+        .minute(minutes)
+        .format()
 
       this.$emit('input', value)
     },

src/components/Datepicker/components/DatepickerYears.vue

@@ -23,7 +23,7 @@ export default {
       type: Number,
       default: 30,
     },
-    value: {
+    internalDate: {
       type: String,
       default: null,
     },
@@ -48,7 +48,7 @@ export default {
     },
 
     currentYear() {
-      return dayjs(this.value).year()
+      return dayjs(this.internalDate).year()
     },
   },
 
@@ -60,7 +60,7 @@ export default {
      */
     handleYearClick($event, year) {
       $event.stopPropagation()
-      const value = dayjs(this.value).year(year).format()
+      const value = dayjs(this.internalDate).year(year).format()
 
       this.$emit('input', value)
     },

src/components/Datepicker/datepicker.scss

@@ -22,7 +22,6 @@
 
 .sb-datepicker {
   position: relative;
-  width: 29.4rem;
 
   &__input {
     position: relative;
@@ -39,13 +38,16 @@
 
   &__overlay {
     @include popoverComponent();
+    max-width: 29.4rem;
     width: 100%;
     box-sizing: border-box;
+    z-index: 1;
   }
 
   &__actions {
     display: flex;
     justify-content: space-between;
+    background-color: $white;
   }
 
   &__action-button {
@@ -130,6 +132,7 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(6, 1fr);
+  background-color: $white;
 
   &__item {
     @include flexCentering();
@@ -152,6 +155,7 @@
 
   &__numbers-container {
     display: flex;
+    background-color: $white;
   }
 
   &__number-column {