feat(datepicker): datepicker component (#1007)

* feat(datepicker): init

* feat(datepicker): update

* feat(datepicker): datefns and calculations

* feat(datepicker): update structure and events

* feat(datepicker): update calculations

* feat(datepicker): update

* feat(datepicker): update

* feat(datepicker): update stories

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): test a11y fix

* feat(datepicker): code improvements

* feat(datepicker): header and calendar update

* feat(datepicker): readability

* feat(datepicker): code improvement

---------

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

components/datepicker/datepicker._test.js

@@ -0,0 +1,95 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import DtDatepicker from './datepicker.vue';
+
+// Constants
+const basePropsData = {};
+
+describe('DtDatepicker Tests', function () {
+  let testContext;
+  // Wrappers
+  let wrapper;
+  let childContainer;
+
+  // Environment
+  let propsData = basePropsData;
+  let attrs = {};
+  let slots = {};
+  let provide = {};
+
+  // Helpers
+  const _setChildWrappers = () => {
+    childContainer = wrapper.find('[data-qa="child-container"]');
+  };
+
+  const _setWrappers = () => {
+    wrapper = shallowMount(DtDatepicker, {
+      propsData,
+      attrs,
+      slots,
+      provide,
+      localVue: testContext.localVue,
+    });
+    _setChildWrappers();
+  };
+
+  // Shared Examples
+  const itBehavesLikeSomeExpectation = () => {
+    it('should be equal', function () { assert.strictEqual(1, 1); });
+  };
+
+  // Setup
+  beforeAll(() => {
+    testContext = {};
+    testContext.localVue = createLocalVue();
+  });
+  beforeEach(function () {});
+
+  // Teardown
+  afterEach(function () {
+    propsData = basePropsData;
+    attrs = {};
+    slots = {};
+    provide = {};
+  });
+  afterAll(function () {});
+
+  describe('Presentation Tests', function () {
+    /*
+     * Test(s) to ensure that the component is correctly rendering
+     */
+
+    describe('When some description of the current environment', function () {});
+  });
+
+  describe('Accessibility Tests', function () {
+    /*
+     * Test(s) to ensure that the component is accessible
+     */
+
+    describe('When some description of the current environment', function () {});
+  });
+
+  describe('Interactivity Tests', function () {
+    /*
+     * Test(s) to ensure that the component correctly handles user input
+     */
+
+    describe('When some description of the current environment', function () {});
+  });
+
+  describe('Validation Tests', function () {
+    /*
+     * Test(s) to ensure that custom validators are working as expected
+     */
+
+    describe('When some description of the current environment', function () {});
+  });
+
+  describe('Extendability Tests', function () {
+    /*
+     * Test(s) to ensure that the component can be correctly extended
+     */
+
+    describe('When some description of the current environment', function () {});
+  });
+});

components/datepicker/datepicker.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Story, Subtitle, Controls, Meta } from '@storybook/blocks';
+import * as DtDatepickerStories from './datepicker.stories.js';
+
+<Meta of={DtDatepickerStories}/>
+
+# DtDatepicker
+
+<Subtitle>
+  Some description of the component functionality.
+</Subtitle>
+
+## Base Style
+
+Some description of how to use the base component, potential gotchas and limitations.
+
+<Canvas of={DtDatepickerStories.Default} />
+
+## Variants
+
+<Canvas of={DtDatepickerStories.Variants} />
+
+## Slots, Props & Events
+
+<Controls />
+
+## Usage
+
+### Import
+
+```jsx
+import { DtDatepicker } from '@dialpad/dialtone-vue';
+```
+
+### With Some Variant
+
+```jsx
+<dt-datepicker
+  some="variant"
+/>
+```
+
+### With Some Other Variant
+
+```jsx
+<dt-datepicker
+  some-other="variant"
+/>
+```

components/datepicker/datepicker.stories.js

@@ -0,0 +1,87 @@
+import { createTemplateFromVueFile } from '@/common/storybook_utils';
+import { action } from '@storybook/addon-actions';
+import DtDatepicker from './datepicker.vue';
+import DtDatepickerDefaultTemplate from './datepicker_default.story.vue';
+
+export const argsData = {
+  prevMonthLabel: 'Previous month',
+  nextMonthLabel: 'Next month',
+  prevYearLabel: 'Previous year',
+  nextYearLabel: 'Next year',
+  onSelectedDate: action('selected-date'),
+};
+
+export const argTypesData = {
+  // Props
+  prevMonthLabel: {
+    control: 'text',
+    table: {
+      category: 'props',
+      type: {
+        summary: 'String',
+      },
+    },
+  },
+  nextMonthLabel: {
+    control: 'text',
+    table: {
+      category: 'props',
+      type: {
+        summary: 'String',
+      },
+    },
+  },
+  prevYearLabel: {
+    control: 'text',
+    table: {
+      category: 'props',
+      type: {
+        summary: 'String',
+      },
+    },
+  },
+  nextYearLabel: {
+    control: 'text',
+    table: {
+      category: 'props',
+      type: {
+        summary: 'String',
+      },
+    },
+  },
+
+  // Action Event Handlers
+  onSelectedDate: {
+    table: {
+      disable: true,
+    },
+  },
+
+  'selected-date': {
+    description: 'Event fired when a date is selected',
+    table: {
+      type: { summary: 'event' },
+    },
+  },
+};
+
+export default {
+  title: 'Components/Datepicker',
+  component: DtDatepicker,
+  args: argsData,
+  argTypes: argTypesData,
+  excludeStories: /.*Data$/,
+};
+
+// Templates
+const Template = (args, { argTypes }) => createTemplateFromVueFile(
+  args,
+  argTypes,
+  DtDatepickerDefaultTemplate,
+);
+
+// Stories
+export const Default = {
+  render: Template,
+  args: {},
+};

components/datepicker/datepicker.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="d-datepicker">
+    <div class="d-datepicker--header">
+      <month-year-picker
+        :prev-month-label="prevMonthLabel"
+        :next-month-label="nextMonthLabel"
+        :prev-year-label="prevYearLabel"
+        :next-year-label="nextYearLabel"
+        :selected-date="selectedDate"
+        @calendar-days="updateCalendarDays"
+      />
+    </div>
+    <div class="d-datepicker--body">
+      <calendar
+        :locale="locale"
+        :calendar-days="calendarDays"
+        @select-date="$emit('selected-date', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MonthYearPicker from './modules/month-year-picker.vue';
+import Calendar from './modules/calendar.vue';
+
+export default {
+  name: 'DtDatepicker',
+
+  components: { MonthYearPicker, Calendar },
+
+  props: {
+    /**
+     * Label for the previous month button
+     *
+     * @type {String}
+     */
+    prevMonthLabel: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Label for the next month button
+     *
+     * @type {String}
+     */
+    nextMonthLabel: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Label for the previous year button
+     *
+     * @type {String}
+     */
+    prevYearLabel: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Label for the next year button
+     *
+     * @type {String}
+     */
+    nextYearLabel: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Locale for the calendar
+     *
+     * @type {String}
+     */
+    locale: {
+      type: String,
+      default: 'en-US',
+    },
+
+    /**
+     * Selected date
+     *
+     * @type {Date}
+     */
+    selectedDate: {
+      type: Date,
+      default: () => (new Date()),
+    },
+  },
+
+  emits: [
+    /**
+     * Event fired when a date is selected
+     *
+     * @event selected-date
+     * @type {Date}
+     */
+    'selected-date',
+  ],
+
+  data () {
+    return {
+      calendarDays: [],
+    };
+  },
+
+  methods: {
+    updateCalendarDays (days) {
+      this.calendarDays = days;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.d-datepicker{
+  max-width: 308px;
+  padding: 16px;
+
+  p{
+    font-family: inherit;
+    margin: 0;
+    display: flex;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+
+  &--body{
+    padding: 0 8px;
+  }
+}
+</style>

components/datepicker/datepicker_constants.js

@@ -0,0 +1,6 @@
+/**
+ * Week start day
+ * 0 - Sunday
+ * 1 - Monday
+ */
+export const WEEK_START = 0;