feat: add #date-picker including the docs and examples

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker.md

@@ -1,21 +1,26 @@
 ---
 title: 'DatePicker'
 draft: false
-status: 'wip'
+# status: 'imp'
 # order: 1
 ---
 
 import Tabs from 'Tags/Tabs'
 
+import DatePickerInfo from 'Pages/uilib/components/date-picker/date-picker-info'
+import DatePickerProperties from 'Pages/uilib/components/date-picker/date-picker-properties'
+import DatePickerEvents from 'Pages/uilib/components/date-picker/date-picker-events'
+
 # DatePicker
 
 <Tabs>
-  <Tabs.Content title="Info" selected>
-    ...
+  <Tabs.Content>
+    <DatePickerInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <DatePickerProperties />
   </Tabs.Content>
-  <Tabs.Content title="Details" disabled>
-  ...
+  <Tabs.Content>
+    <DatePickerEvents  />
   </Tabs.Content>
 </Tabs>
-
-**Under development**

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/Examples.js

@@ -0,0 +1,85 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+
+class Example extends PureComponent {
+  render() {
+    return (
+      <Fragment>
+        <ComponentBox>
+          {/* @jsx */ `
+<DatePicker
+  label="Range DatePicker:"
+  start_date="2019-05-1"
+  end_date="2019-05-17"
+  range={true}
+  show_input={true}
+  on_change={({ start_date, end_date }) => {
+    console.log('on_change', start_date, end_date)
+  }}
+  on_submit={({ start_date, end_date }) => {
+    console.log('on_submit', start_date, end_date)
+  }}
+  on_cancel={({ start_date, end_date }) => {
+    console.log('on_cancel', start_date, end_date)
+  }}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {/* @jsx */ `
+<DatePicker
+  label="Defualt DatePicker with Input:"
+  date={new Date()}
+  show_input={true}
+  // show_submit_button={true}
+  show_cancel_button={true}
+  on_change={({ date }) => {
+    console.log('on_change', date)
+  }}
+  on_cancel={({ date }) => {
+    console.log('on_cancel', date)
+  }}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {/* @jsx */ `
+<DatePicker
+  label="Defualt DatePicker:"
+  date="2019-05-05"
+  on_change={({ date }) => {
+    console.log('on_change', date)
+  }}
+  on_show={({ date }) => {
+    console.log('on_show', date)
+  }}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {/* @jsx */ `
+<DatePicker
+  label="Hidden Nav:"
+  date="2019-05-05"
+  hide_navigation={true}
+  hide_days={true}
+  on_change={({ date }) => {
+    console.log('on_change', date)
+  }}
+  on_hide={({ date }) => {
+    console.log('on_hide', date)
+  }}
+/>
+          `}
+        </ComponentBox>
+      </Fragment>
+    )
+  }
+}
+
+export default Example

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-events.md

@@ -0,0 +1,24 @@
+---
+draft: true
+---
+
+## Events
+
+| Events      | Description                                                                                 |
+| ----------- | ------------------------------------------------------------------------------------------- |
+| `on_change` | _(optional)_ will be called on a date change event. Returns an object with a date instance. |
+| `on_submit` | _(optional)_ will be called once a user presses the submit button.                          |
+| `on_cancel` | _(optional)_ will be called once a user presses the cancel button.                          |
+| `on_show`   | _(optional)_ will be called once date-picker is visible.                                    |
+| `on_hide`   | _(optional)_ will be called once date-picker is hidden.                                     |
+
+## Returned Object
+
+```js
+{
+  date: "return_format", /* Gets returned if range is true. Same as start_date and startDate */
+  start_date: "return_format",
+  end_date: "return_format",
+  days_between: number
+}
+```

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-info.md

@@ -0,0 +1,17 @@
+---
+draft: true
+---
+
+import Examples from 'Pages/uilib/components/date-picker/Examples'
+
+## Description
+
+The date-picker component should be used whenever there is to enter a single date or a date range/period with a start and end date.
+
+### Date Object
+
+The date-picker operates with a default JavaScript Date instance as well as string (ISO 8601) like `start_date="2019-05-05"`.
+
+## Demos
+
+<Examples />

packages/dnb-design-system-portal/src/pages/uilib/components/date-picker/date-picker-properties.md

@@ -0,0 +1,25 @@
+---
+draft: true
+---
+
+## Properties
+
+| Properties           | Description                                                                                                                                                          |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `date`               | _(optional)_ defines the pre filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.                                                 |
+| `start_date`         | _(optional)_ to set the pre filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.                        |
+| `end_date`           | _(optional)_ to set the pre filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.                          |
+| `return_format`      | _(optional)_ Defines how the returned date, as a string, should be formatted as. Defualts to `YYYY-MM-DD`.                                                           |
+| `range`              | _(optional)_ if the date picker should support a range of two dates (starting and ending date). Defaults to `false`.                                                 |
+| `show_input`         | _(optional)_ if the input fields with the mask should be visible. Defaults to `false`.                                                                               |
+| `mask_order`         | _(optional)_ to define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy`                                                                    |
+| `opened`             | _(optional)_ to open the date-picker by default. Defaults to `false`.                                                                                                |
+| `mask_placeholder`   | _(optional)_ to display the placeholder on input. Defaults to `dd/mm/åååå`.                                                                                          |
+| `hide_navigation`    | _(optional)_ if set to `true`, the navigation will be hidden. Defaults to `false`.                                                                                   |
+| `hide_days`          | _(optional)_ if set to `true`, the week days will be hidden. Defaults to `false`.                                                                                    |
+| `show_submit_button` | _(optional)_ if set to `true`, a submit button will be shown. Defaults to `false`.                                                                                   |
+| `show_cancel_button` | _(optional)_ if set to `true`, a cancel button will be shown. Defaults to `false`.                                                                                   |
+| `link`               | _(optional)_ link both calendars, once to user is navigating between months. Only meant to use if range is set to ture. Defaults to `false`.                         |
+| `first_day`          | _(optional)_ to define the first day of the week. Defaults to `monday`.                                                                                              |
+| `locale`             | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` locale object, like `import nbLocale from 'date-fns/locale/nb'`. Defaults to `nb`. |
+| `label`              | _(optional)_ a prepending label in sync with the date input field.                                                                                                   |

packages/dnb-ui-lib/src/components/date-picker/DatePicker.js

@@ -31,6 +31,10 @@ const renderProps = {
 
 export const propTypes = {
   id: PropTypes.string,
+  date: PropTypes.oneOfType([
+    PropTypes.instanceOf(Date),
+    PropTypes.string
+  ]), // e.g. 2019-04-03T00:00:00Z
   start_date: PropTypes.oneOfType([
     PropTypes.instanceOf(Date),
     PropTypes.string
@@ -39,8 +43,8 @@ export const propTypes = {
     PropTypes.instanceOf(Date),
     PropTypes.string
   ]), // e.g. 2019-04-03T00:00:00Z
-  mask: PropTypes.string,
-  mask_input: PropTypes.string,
+  mask_order: PropTypes.string,
+  mask_placeholder: PropTypes.string,
   return_format: PropTypes.string,
   hide_navigation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   hide_days: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -79,10 +83,11 @@ export const propTypes = {
 
 export const defaultProps = {
   id: null,
+  date: null,
   start_date: null,
   end_date: null,
-  mask: 'dd/mm/yyyy',
-  mask_input: 'dd/mm/åååå', // have to be same setup as "mask" - but can be like: dd/mm/åååå
+  mask_order: 'dd/mm/yyyy',
+  mask_placeholder: 'dd/mm/åååå', // have to be same setup as "mask" - but can be like: dd/mm/åååå
   return_format: 'YYYY-MM-DD',
   hide_navigation: false,
   hide_days: false,
@@ -125,8 +130,15 @@ export default class DatePicker extends PureComponent {
 
   static getDerivedStateFromProps(props, state) {
     if (state._listenForPropChanges) {
+      let startDate = null
+      if (props.date) {
+        startDate = props.date
+      }
       if (props.start_date) {
-        state.startDate = DatePicker.convertStringToDate(props.start_date)
+        startDate = props.start_date
+      }
+      if (startDate) {
+        state.startDate = DatePicker.convertStringToDate(startDate)
         if (!props.range) {
           state.endDate = state.startDate
         }
@@ -139,11 +151,8 @@ export default class DatePicker extends PureComponent {
     return state
   }
 
-  static convertStringToDate(stringDate) {
-    const date =
-      typeof stringDate === Date ? stringDate : parse(stringDate)
-    // new Date(stringDate)
-    return date
+  static convertStringToDate(date) {
+    return typeof date === Date ? date : parse(date)
   }
 
   constructor(props) {
@@ -172,8 +181,8 @@ export default class DatePicker extends PureComponent {
       _listenForPropChanges: true
     }
 
-    const separators = props.mask.match(/[^mdy]/g)
-    this.maskList = props.mask.split(/[^mdy]/).reduce((acc, cur) => {
+    const separators = props.mask_order.match(/[^mdy]/g)
+    this.maskList = props.mask_order.split(/[^mdy]/).reduce((acc, cur) => {
       acc.push(cur)
       if (separators.length > 0) {
         acc.push(separators.shift())
@@ -304,7 +313,6 @@ export default class DatePicker extends PureComponent {
       opened: true,
       _listenForPropChanges: false
     })
-
     if (this._hideTimeout) {
       clearTimeout(this._hideTimeout)
     }
@@ -362,8 +370,8 @@ export default class DatePicker extends PureComponent {
 
     return this.props.range
       ? {
-          startDate,
-          endDate,
+          // startDate,
+          // endDate,
           days_between: endDate
             ? differenceInCalendarDays(endDate, startDate)
             : null,
@@ -392,8 +400,8 @@ export default class DatePicker extends PureComponent {
       status,
       status_state,
       status_animation,
-      mask,
-      mask_input,
+      mask_order,
+      mask_placeholder,
 
       start_date: _start_date /* eslint-disable-line */,
       end_date: _end_date /* eslint-disable-line */,
@@ -461,9 +469,8 @@ export default class DatePicker extends PureComponent {
             <DatePickerInput
               id={id}
               disabled={disabled}
-              mask={mask}
-              mask_input={mask_input}
-              show_input={show_input}
+              maskOrder={mask_order}
+              maskPlaceholder={mask_placeholder}
               range={range}
               onChange={this.onInputChange}
               onFocus={this.showPicker}

packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js

@@ -21,8 +21,8 @@ import keycode from 'keycode'
 
 export const propTypes = {
   id: PropTypes.string,
-  mask: PropTypes.string,
-  mask_input: PropTypes.string,
+  maskOrder: PropTypes.string,
+  maskPlaceholder: PropTypes.string,
   separatorRexExp: PropTypes.instanceOf(RegExp),
   range: PropTypes.bool,
   onChange: PropTypes.func,
@@ -32,8 +32,8 @@ export const propTypes = {
 
 export const defaultProps = {
   id: null,
-  mask: 'dd/mm/yyyy',
-  mask_input: 'dd/mm/åååå',
+  maskOrder: 'dd/mm/yyyy',
+  maskPlaceholder: 'dd/mm/åååå',
   separatorRexExp: /[-/ ]/g,
   range: null,
   onChange: null,
@@ -53,8 +53,8 @@ export default class DatePickerInput extends PureComponent {
   constructor(props) {
     super(props)
 
-    const separators = props.mask.match(props.separatorRexExp)
-    this.maskList = props.mask
+    const separators = props.maskOrder.match(props.separatorRexExp)
+    this.maskList = props.maskOrder
       .split(props.separatorRexExp)
       .reduce((acc, cur) => {
         acc.push(cur)
@@ -305,8 +305,8 @@ export default class DatePickerInput extends PureComponent {
     this.refList = []
     return this.maskList.map((value, i) => {
       const state = value.slice(0, 1)
-      const index = this.props.mask.indexOf(value)
-      const placeholderChar = this.props.mask_input[index]
+      const index = this.props.maskOrder.indexOf(value)
+      const placeholderChar = this.props.maskPlaceholder[index]
       if (!this.props.separatorRexExp.test(value)) {
         const params = {
           onKeyDown: this.onKeyDownHandler,
@@ -384,8 +384,8 @@ export default class DatePickerInput extends PureComponent {
   generateEndDateList() {
     return this.maskList.map((value, i) => {
       const state = value.slice(0, 1)
-      const index = this.props.mask.indexOf(value)
-      const placeholderChar = this.props.mask_input[index]
+      const index = this.props.maskOrder.indexOf(value)
+      const placeholderChar = this.props.maskPlaceholder[index]
       if (!this.props.separatorRexExp.test(value)) {
         const params = {
           onKeyDown: this.onKeyDownHandler,