Skip to content

Commit

Permalink
fix: fix #date-picker where inactive days got styled wrong, if the da…
Browse files Browse the repository at this point in the history
…te was todays date
  • Loading branch information
tujoworker committed May 27, 2019
1 parent 5ba394a commit d537dd9
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 110 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -813,7 +813,6 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = `
* Utilities
*/
:root {
--date-picker-today-color: var(--color-emerald-green);
--date-picker-header-color: var(--color-emerald-green);
--date-picker-labels-day-color: var(--color-emerald-green);
--date-picker-selected-color: var(--color-mint-green-25);
Expand Down Expand Up @@ -864,9 +863,6 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = `
font-variant-numeric: tabular-nums;
font-feature-settings: \\"lnum\\"; }
.dnb-date-picker__day--today .dnb-button {
color: var(--date-picker-today-color); }
.dnb-date-picker__day--preview .dnb-button,
.dnb-date-picker__day--inactive .dnb-button,
.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
@import '../../../../style/themes/imports.scss';

:root {
// The DNB UX team has desiced to not show today diffrently
--date-picker-today-color: var(--color-emerald-green);
--date-picker-header-color: var(--color-emerald-green);
--date-picker-labels-day-color: var(--color-emerald-green);
--date-picker-selected-color: var(--color-mint-green-25);
Expand Down Expand Up @@ -79,9 +77,10 @@
@include numberFeature(tabular-nums, lnum);
}

&--today .dnb-button {
color: var(--date-picker-today-color);
}
// The DNB UX team has desiced to not show today diffrently
// &--today .dnb-button {
// color: var(--color-);
// }

&--preview .dnb-button,
&--inactive .dnb-button,
Expand Down
107 changes: 107 additions & 0 deletions packages/dnb-ui-lib/stories/components/DatePicker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/**
* dnb-ui-lib Component Story
*
*/

import React, { useState } from 'react'
import { Wrapper, Box } from '../helpers'
// import styled from '@emotion/styled'

import { DatePicker } from '../../src/components'

export default [
'DatePicker',
() => (
<Wrapper>
<Box>
<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}
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)
}}
/>
</Box>
<Box>
<DatePicker
label="Range DatePicker:"
// start_date="2019-05-01"
// end_date="2019-06-17"
// min_date="2019-05-02"
// max_date="2019-06-15"
range={true}
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)
}}
/>
</Box>
<Box>
<DatePicker
label="Defualt DatePicker with Input:"
date="2019-05-05"
show_input={true}
// show_submit_button={true}
show_cancel_button={true}
on_change={props => {
console.log('on_change', props)
}}
/>
</Box>
<Box>
<DatePicker
label="Hidden Nav:"
date="2019-05-05"
hide_navigation={true}
hide_days={true}
/>
</Box>
<Box>
<DatePicker
label="Show month only:"
date="2019-02-05"
// hide_navigation_buttons={true}
only_month={true}
/>
</Box>
</Wrapper>
)
]

const CustomDate = () => {
const [date, setDate] = useState('2019-02-15')
console.log('date', date)
return (
<DatePicker
label="Defualt DatePicker:"
date={date}
return_format="YYYY-MM-DD"
on_change={({ date }) => {
console.log('on_change', date)
setDate(date)
}}
/>
)
}
104 changes: 3 additions & 101 deletions packages/dnb-ui-lib/stories/componentsStories.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import styled from '@emotion/styled'

// UI Components
import Radio from './components/Radio'
import DatePicker from './components/DatePicker'
import {
Button,
Tabs,
Expand All @@ -23,15 +24,15 @@ import {
Checkbox,
Logo,
StepIndicator,
ProgressIndicator,
DatePicker
ProgressIndicator
} from '../src/components'
import { H2, P, Hr } from '../src/elements'

const stories = []
export default stories

stories.push(Radio)
stories.push(DatePicker)

const CustomStyle = styled.div`
p {
Expand Down Expand Up @@ -273,105 +274,6 @@ stories.push([
)
])

stories.push([
'DatePicker',
() => (
<CustomStyle>
<Wrapper>
<Box>
<CustomDate />
</Box>
<Box>
<DatePicker
label="Range DatePicker:"
// start_date={new Date()}
// start_date="2019-01-15"
start_date="1981-01-15"
end_date="2019-02-15"
range={true}
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)
}}
/>
</Box>
<Box>
<DatePicker
label="Range DatePicker:"
// start_date="2019-05-01"
// end_date="2019-06-17"
// min_date="2019-05-02"
// max_date="2019-06-15"
range={true}
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)
}}
/>
</Box>
<Box>
<DatePicker
label="Defualt DatePicker with Input:"
date="2019-05-05"
show_input={true}
// show_submit_button={true}
show_cancel_button={true}
on_change={props => {
console.log('on_change', props)
}}
/>
</Box>
<Box>
<DatePicker
label="Hidden Nav:"
date="2019-05-05"
hide_navigation={true}
hide_days={true}
/>
</Box>
<Box>
<DatePicker
label="Show month only:"
date="2019-02-05"
// hide_navigation_buttons={true}
only_month={true}
/>
</Box>
</Wrapper>
</CustomStyle>
)
])

const CustomDate = () => {
const [date, setDate] = useState('2019-02-15')
console.log('date', date)
return (
<DatePicker
label="Defualt DatePicker:"
date={date}
return_format="YYYY-MM-DD"
on_change={({ date }) => {
console.log('on_change', date)
setDate(date)
}}
/>
)
}

const svg = props => (
<svg
width="24"
Expand Down

0 comments on commit d537dd9

Please sign in to comment.