feat: add support for #date-picker form-row context

dnbexperience · Jul 4, 2019 · 4b90591 · 4b90591
1 parent 14f92eb
commit 4b90591
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 29 deletions.
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -18,6 +18,7 @@ import {
 import { format, parse, differenceInCalendarDays } from 'date-fns'
 import nbLocale from 'date-fns/locale/nb'
 
+import Context from '../../shared/Context'
 import FormLabel from '../form-label/FormLabel'
 import FormStatus from '../form-status/FormStatus'
 import DatePickerRange from './DatePickerRange'
@@ -92,6 +93,7 @@ export const propTypes = {
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   sync: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   label: PropTypes.string,
+  label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   status: PropTypes.string,
   status_state: PropTypes.string,
@@ -137,6 +139,7 @@ export const defaultProps = {
   link: false,
   sync: true,
   label: null,
+  label_direction: null,
   disabled: null,
   status: null,
   status_state: 'error',
@@ -156,6 +159,7 @@ export default class DatePicker extends PureComponent {
   static propTypes = propTypes
   static defaultProps = defaultProps
   static renderProps = renderProps
+  static contextType = Context
 
   static blurDelay = 201 // some ms more than "dropdownSlideDown 200ms"
 
@@ -458,6 +462,7 @@ export default class DatePicker extends PureComponent {
 
     const {
       label,
+      label_direction,
       only_month,
       hide_navigation_buttons,
       show_input /* eslint-disable-line */,
@@ -521,16 +526,25 @@ export default class DatePicker extends PureComponent {
 
     const inputParams = { ['aria-expanded']: opened }
 
+    const wrapperParams = {
+      className: classnames(
+        'dnb-date-picker__wrapper',
+        status && `dnb-date-picker__status--${status_state}`,
+        label_direction && `dnb-date-picker--${label_direction}`
+      )
+    }
+
     validateDOMAttributes(this.props, pickerParams)
     validateDOMAttributes(null, inputParams)
 
     return (
-      <>
+      <span {...wrapperParams}>
         {label && (
           <FormLabel
             id={id + '-label'}
             for_id={id}
             text={label}
+            direction={label_direction}
             disabled={isTrue(disabled)}
           />
         )}
@@ -626,7 +640,7 @@ export default class DatePicker extends PureComponent {
             </span>
           </span>
         </span>
-      </>
+      </span>
     )
   }
 }
diff --git a/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -70,7 +70,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
   sync={true}
 >
   <span
-    className="dnb-date-picker__wrapper dnb-date-picker__wrapper__status--error"
+    className="dnb-date-picker__wrapper dnb-date-picker__status--error"
   >
     <span
       className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker__status--error dnb-date-picker--show-footer"

diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss b/packages/dnb-ui-lib/src/components/date-picker/style/_date-picker.scss
@@ -338,4 +338,27 @@
   .dnb-form-status {
     margin-top: 0.375rem;
   }
+
+  // Wrapper layout handling
+  &__wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+  &__wrapper#{&}--vertical {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  &__wrapper#{&}--vertical#{&}--stretch .dnb-input {
+    width: 100%;
+  }
+  &__wrapper#{&}--stretch {
+    display: flex;
+  }
+  &__wrapper[class*='__status'] {
+    align-items: flex-start;
+    > .dnb-form-label {
+      // vertical align the current font
+      margin-top: 0.25rem;
+    }
+  }
 }
diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss b/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss
@@ -146,10 +146,12 @@
   }
 
   /* stylelint-disable */
-  &:not(#{&}--opened)#{&}__status--error
+  &__status--error
+    &:not(#{&}--opened)
     .dnb-input__shell:not([data-input-state='focus'])
     &__input,
-  &:not(#{&}--opened)#{&}__status--error
+  &__status--error
+    &:not(#{&}--opened)
     .dnb-input__shell:not([data-input-state='focus'])
     &__input
     ~ &--separator {

diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -183,7 +183,7 @@ export default class FormRow extends PureComponent {
         size,
         direction,
         vertical,
-        label_direction: vertical ? 'vertical' : direction,
+        label_direction: isTrue(vertical) ? 'vertical' : direction,
         disabled
       }
     })

diff --git a/packages/dnb-ui-lib/stories/components/DatePicker.js b/packages/dnb-ui-lib/stories/components/DatePicker.js
@@ -7,7 +7,7 @@ import React, { useState } from 'react'
 import { Wrapper, Box } from '../helpers'
 // import styled from '@emotion/styled'
 
-import { DatePicker } from '../../src/components'
+import { DatePicker, FormRow } from '../../src/components'
 
 export default [
   'DatePicker',
@@ -17,28 +17,31 @@ export default [
         <CustomDate />
       </Box>
       <Box>
-        <DatePicker
-          label="Range DatePicker:"
-          // start_date={new Date()}
-          // start_date="2019-01-15"
-          start_date="1981-01-15"
-          end_date="2019-06-15"
-          range={true}
-          // link={true}
-          // sync={false}
-          opened={false}
-          show_input={true}
-          on_change={props => {
-            console.log('on_change', props)
-          }}
-          on_submit={props => {
-            console.log('on_submit', props)
-          }}
-          on_cancel={props => {
-            console.log('on_cancel', props)
-          }}
-          status="Please select a valid date"
-        />
+        <FormRow vertical>
+          <DatePicker
+            label="Range DatePicker:"
+            // label_direction="vertical"
+            // start_date={new Date()}
+            // start_date="2019-01-15"
+            start_date="1981-01-15"
+            end_date="2019-06-15"
+            range={true}
+            // link={true}
+            // sync={false}
+            opened={false}
+            show_input={true}
+            on_change={props => {
+              console.log('on_change', props)
+            }}
+            on_submit={props => {
+              console.log('on_submit', props)
+            }}
+            on_cancel={props => {
+              console.log('on_cancel', props)
+            }}
+            status="Please select a valid date"
+          />
+        </FormRow>
       </Box>
       <Box>
         <DatePicker