diff --git a/src/components/CvDatePicker/CvDatePicker.stories.js b/src/components/CvDatePicker/CvDatePicker.stories.js index 29de945b0..a12687617 100644 --- a/src/components/CvDatePicker/CvDatePicker.stories.js +++ b/src/components/CvDatePicker/CvDatePicker.stories.js @@ -15,7 +15,9 @@ const initArgs = { const now = new Date(); const tomorrow = new Date(); +const nextWeek = new Date(); tomorrow.setDate(now.getDate() + 1); +nextWeek.setDate(now.getDate() + 7); export default { title: `${sbCompPrefix}/CvDatePicker`, @@ -30,10 +32,30 @@ export default { }, argTypes: { dateLabel: { type: String, description: 'Date picker label' }, + dateEndLabel: { + type: String, + description: 'Date picker end label (when using kind="range")', + }, invalidMessage: { type: String, description: 'Date picker text on invalid value', }, + kind: { + type: String, + description: 'Date picker kind (also known as mode in flatpickr).', + options: ['short', 'simple', 'single', 'range'], + control: { type: 'select' }, + }, + disabled: { + type: Boolean, + description: 'If true, the date picker will be disabled', + }, + calOptions: { + type: Object, + description: `You can pass flatpickr options through this prop. + See https://flatpickr.js.org/options/ for more details. + Some of the options is not supported (for example, onChange, onReady, mode, nextArrow, prevArrow).`, + }, }, }; @@ -172,6 +194,35 @@ const TemplateSingleUsingDate = args => { export const SingleUsingDate = TemplateSingleUsingDate.bind({}); SingleUsingDate.args = initArgs; +/* SINGLE USING MIN MAX PARAMS STORY */ + +const templateSingleUsingMinMax = ` +