Merge pull request #384 from LianaHarris360/k-date-components

KDateComponents

CHANGELOG.md

@@ -13,6 +13,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 - [#361] - Fixes 'Property or method "disabled" is not defined on the instance but referenced during render.' raised by `KDropdownMenu`
 - [#377] - Implement `useKResponsiveWindow` composable.
 - [#380] - Wrap `KRadioButton` text.
+- [#384] - Add `KDateRange` to KDS
 
 <!-- Referenced PRs -->
 [#351]: https://github.com/learningequality/kolibri-design-system/pull/351
@@ -21,6 +22,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
 [#361]: https://github.com/learningequality/kolibri-design-system/pull/361
 [#377]: https://github.com/learningequality/kolibri-design-system/pull/377
 [#380]: https://github.com/learningequality/kolibri-design-system/pull/380
+[#384]: https://github.com/learningequality/kolibri-design-system/pull/384
 
 ## Version 1.4.x
 

docs/pages/kdaterange.vue

@@ -0,0 +1,77 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      The KDateRange is a modal component that contains two input components and a calendar component that 
+      allow for a start and end date selection. 
+      <div>
+        <KButton text="open demo" :primary="true" appearance="flat-button" :style="{ marginTop: '5px' }" @click="modalShown = true" />
+        <ClientOnly>
+          <KDateRange
+            v-if="modalShown"
+            class="demo"
+            :firstAllowedDate="firstAllowedDate"
+            :lastAllowedDate="lastAllowedDate"
+            submitText="Generate"
+            cancelText="Cancel"
+            title="Select a date range"
+            description="(Optional) Description of modal component"
+            dateLocale="en-US"
+            startDateLegendText="Start Date"
+            endDateLegendText="End Date"
+            previousMonthText="Previous Month"
+            nextMonthText="Next Month"
+            v-bind="errorMessages"
+            @submit="modalShown = false"
+            @cancel="modalShown = false"
+          />
+        </ClientOnly>
+      </div>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
+
+
+<script>
+
+  import format from 'date-fns/format';
+  import validationConstants from '../../lib/KDateRange/validationConstants';
+  import KButton from '../../lib/buttons-and-links/KButton';
+
+  export default {
+    components: {
+      KButton,
+    },
+    data() {
+      return {
+        firstAllowedDate: new Date(2022, 0, 1),
+        lastAllowedDate: new Date(),
+        modalShown: false,
+      };
+    },
+    computed: {
+      errorMessages() {
+        return {
+          [validationConstants.MALFORMED]: 'Please enter a valid date',
+          [validationConstants.START_DATE_AFTER_END_DATE]: 'Start date cannot be after end date',
+          [validationConstants.FUTURE_DATE]: 'Cannot select a future date',
+          [validationConstants.DATE_BEFORE_FIRST_ALLOWED]:
+            'Date must be after ' + format(this.firstAllowedDate, 'DD/MM/YYYY'),
+        };
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="css" scoped>
+
+  .demo {
+    height: 850px;
+  }
+
+</style>
+

docs/tableOfContents.js

@@ -190,6 +190,11 @@ export default [
         title: 'KLinearLoader',
         isCode: true,
       }),
+      new Page({
+        path: '/kdaterange',
+        title: 'KDateRange',
+        isCode: true,
+      }),
       new Page({
         path: '/kdropdownmenu',
         title: 'KDropdownMenu',