Skip to content

Commit

Permalink
chore(docs): update DatePicker docs (#6689)
Browse files Browse the repository at this point in the history 
* chore(docs): start updating DatePicker docs

* chore(docs): add DatePicker prop docs

* chore(docs): add references, add list styles

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@tw15egan @kodiakhq
tw15egan and kodiakhq[bot] authored Aug 20, 2020
1 parent 218d1be commit 1fbca23
Show file tree
Hide file tree
Showing 5 changed files with 323 additions and 188 deletions.
4 changes: 4 additions & 0 deletions packages/react/.storybook/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,7 @@ $prefix: 'bx';
}
}
}

.sbdocs-li {
list-style: circle;
}
156 changes: 23 additions & 133 deletions packages/react/src/components/DatePicker/DatePicker-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,11 @@
*/

import React from 'react';
import { action, decorateAction } from '@storybook/addon-actions';

import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
import DatePicker from '../DatePicker';
import DatePickerInput from '../DatePickerInput';
import DatePickerSkeleton from '../DatePicker/DatePicker.Skeleton';
import WithState from '../../tools/withState';

// Datepickers last argument contains an instance of flatpickr
// and will cause action logger to enter an infinite loop. Just don't log that argument
const datePickerOnChangeActions = decorateAction([
(args) => args.slice(0, args.length - 2),
]);
import mdx from './DatePicker.mdx';

const patterns = {
'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
Expand All @@ -33,10 +25,9 @@ const sizes = {

const props = {
datePicker: () => ({
dateFormat: text('The date format (dateFormat in <DatePicker>)', 'm/d/Y'),
id: 'date-picker',
light: boolean('Light variant (light in <DatePicker>)', false),
onChange: datePickerOnChangeActions('onPickerChange'),
onClose: action('onClose'),
}),
datePickerInput: () => ({
id: 'date-picker-input-id',
Expand Down Expand Up @@ -68,8 +59,6 @@ const props = {
'Icon description (iconDescription in <DatePickerInput>)',
'Icon description'
),
onClick: action('onClick'),
onChange: action('onInputChange'),
}),
};

Expand All @@ -84,152 +73,53 @@ export default {
DatePickerInput,
DatePickerSkeleton,
},
docs: {
page: mdx,
},
},
};

export const Simple = () => (
<DatePicker
{...props.datePicker()}
short={boolean('Use shorter width (short in <DatePicker>)', false)}
datePickerType="simple">
<DatePickerInput {...props.datePickerInput()} />
<DatePicker datePickerType="simple">
<DatePickerInput placeholder="mm/dd/yyyy" labelText="Date Picker label" />
</DatePicker>
);

Simple.storyName = 'simple';

Simple.parameters = {
info: {
text: 'A simple Date Picker consists of an input field and no calendar.',
},
};

export const SingleWithCalendar = () => (
<DatePicker
{...props.datePicker()}
datePickerType="single"
dateFormat={text('The date format (dateFormat in <DatePicker>)', 'm/d/Y')}>
<DatePickerInput
openCalendar={() => console.log('click')}
{...props.datePickerInput()}
/>
export const Single = () => (
<DatePicker datePickerType="single">
<DatePickerInput placeholder="mm/dd/yyyy" labelText="Date Picker label" />
</DatePicker>
);

SingleWithCalendar.storyName = 'single with calendar';

SingleWithCalendar.parameters = {
info: {
text: `
A single Date Picker consists of an input field and a calendar.
`,
},
};
Single.storyName = 'single with calendar';

export const RangeWithCalendar = () => {
const datePickerInputProps = props.datePickerInput();
export const Range = () => {
return (
<DatePicker
{...props.datePicker()}
datePickerType="range"
dateFormat={text(
'The date format (dateFormat in <DatePicker>)',
'm/d/Y'
)}>
<DatePicker datePickerType="range">
<DatePickerInput
{...datePickerInputProps}
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start date"
/>
<DatePickerInput
{...datePickerInputProps}
id="date-picker-input-id-end"
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</DatePicker>
);
};

RangeWithCalendar.storyName = 'range with calendar';

RangeWithCalendar.parameters = {
info: {
text: `
A range Date Picker consists of two input fields and a calendar.
`,
},
};
Range.storyName = 'range with calendar';

export const RangeWithCalendarAndMinMaxDates = () => {
const datePickerInputProps = props.datePickerInput();
return (
<DatePicker
{...props.datePicker()}
minDate="1/10/2020"
maxDate="1/20/2020"
datePickerType="range"
dateFormat="m/d/Y">
<DatePickerInput {...datePickerInputProps} id="date-picker-input-id" />
<DatePickerInput {...datePickerInputProps} id="date-picker-input-id-2" />
</DatePicker>
);
};

RangeWithCalendarAndMinMaxDates.storyName =
'range with calendar and min/max dates';

RangeWithCalendarAndMinMaxDates.parameters = {
info: {
text: `
A range Date Picker consists of two input fields and a calendar, and optionally, the minDate and maxDate fields.
`,
},
};

export const FullyControlled = () => (
<WithState initialState={{ date: '' }}>
{({ state, setState }) => (
<>
<DatePicker
datePickerType="single"
dateFormat="m/d/Y"
value={state.date}
onChange={(eventOrDates) => {
const value = eventOrDates.target
? eventOrDates.target.value
: eventOrDates[0];
setState({ date: value });
}}>
<DatePickerInput
{...props.datePickerInput()}
id="date-picker-input-id"
/>
</DatePicker>
<button type="button" onClick={() => setState({ date: '01/01/2011' })}>
Click me to set to 01/01/2011
</button>
</>
)}
</WithState>
export const DatePickerPlayground = () => (
<DatePicker {...props.datePicker()} datePickerType="single">
<DatePickerInput {...props.datePickerInput()} />
</DatePicker>
);

FullyControlled.storyName = 'fully controlled';

FullyControlled.parameters = {
info: {
text: `
If your application needs to control the value of the date picker and
be notified of any changes.
`,
},
};

export const Skeleton = () => <DatePickerSkeleton range />;

Skeleton.storyName = 'skeleton';

Skeleton.parameters = {
info: {
text: `
Placeholder skeleton state to use when content is loading.
`,
},
};
108 changes: 55 additions & 53 deletions packages/react/src/components/DatePicker/DatePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,58 +151,58 @@ export default class DatePicker extends Component {
light: PropTypes.bool,

/**
* The language locale used to format the days of the week, months, and numbers.
*
* * `ar` - Arabic
* * `at` - Austria
* * `be` - Belarusian
* * `bg` - Bulgarian
* * `bn` - Bangla
* * `cat` - Catalan
* * `cs` - Czech
* * `cy` - Welsh
* * `da` - Danish
* * `de` - German
* * `en` - English
* * `eo` - Esperanto
* * `es` - Spanish
* * `et` - Estonian
* * `fa` - Persian
* * `fi` - Finnish
* * `fr` - French
* * `gr` - Greek
* * `he` - Hebrew
* * `hi` - Hindi
* * `hr` - Croatian
* * `hu` - Hungarian
* * `id` - Indonesian
* * `it` - Italian
* * `ja` - Japanese
* * `ko` - Korean
* * `lt` - Lithuanian
* * `lv` - Latvian
* * `mk` - Macedonian
* * `mn` - Mongolian
* * `ms` - Malaysian
* * `my` - Burmese
* * `nl` - Dutch
* * `no` - Norwegian
* * `pa` - Punjabi
* * `pl` - Polish
* * `pt` - Portuguese
* * `ro` - Romanian
* * `si` - Sinhala
* * `sk` - Slovak
* * `sl` - Slovenian
* * `sq` - Albanian
* * `sr` - Serbian
* * `sv` - Swedish
* * `th` - Thai
* * `tr` - Turkish
* * `uk` - Ukrainian
* * `vn` - Vietnamese
* * `zh` - Mandarin
*/
* The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
*
* `ar` - Arabic
`at` - Austria
`be` - Belarusian
`bg` - Bulgarian
`bn` - Bangla
`cat` - Catalan
`cs` - Czech
`cy` - Welsh
`da` - Danish
`de` - German
`en` - English
`eo` - Esperanto
`es` - Spanish
`et` - Estonian
`fa` - Persian
`fi` - Finnish
`fr` - French
`gr` - Greek
`he` - Hebrew
`hi` - Hindi
`hr` - Croatian
`hu` - Hungarian
`id` - Indonesian
`it` - Italian
`ja` - Japanese
`ko` - Korean
`lt` - Lithuanian
`lv` - Latvian
`mk` - Macedonian
`mn` - Mongolian
`ms` - Malaysian
`my` - Burmese
`nl` - Dutch
`no` - Norwegian
`pa` - Punjabi
`pl` - Polish
`pt` - Portuguese
`ro` - Romanian
`si` - Sinhala
`sk` - Slovak
`sl` - Slovenian
`sq` - Albanian
`sr` - Serbian
`sv` - Swedish
`th` - Thai
`tr` - Turkish
`uk` - Ukrainian
`vn` - Vietnamese
`zh` - Mandarin
*/
locale: PropTypes.oneOf([
'ar',
'at',
Expand Down Expand Up @@ -336,7 +336,9 @@ export default class DatePicker extends Component {
maxDate: maxDate,
plugins: [
datePickerType === 'range'
? new carbonFlatpickrRangePlugin({ input: this.toInputField })
? new carbonFlatpickrRangePlugin({
input: this.toInputField,
})
: () => {},
appendTo
? carbonFlatpickrAppendToPlugin({
Expand Down
Loading

0 comments on commit 1fbca23

Please sign in to comment.