wix-style-react
Version:
72 lines (71 loc) • 3.15 kB
JavaScript
export default {
description:
'Calendar Panel component lets a user pick a date while providing a great overview of available selections.It’s built using `<Calendar/>` and `<CalendarPanelFooter/>` components. ',
do: [
'Use it when a wider view of available dates should be seen',
'Use it when needed to select recurring range of days, for example in charts',
'Use it when extra validation is needed before submitting the date selection',
],
dont: [
'Don’t use it in compact layouts, use <Calendar/> instead',
'Don’t use it in forms, use <DatePicker/> instead',
],
featureExamples: [
{
title: 'Presets',
description: `Empower the user to quickly select a predefined range or date using \`presets\` prop.`,
example: '_presets',
},
{
title: 'Footer',
description: `Make the date selection secure by using \`footer\` prop which adds summarized date selection and confirmation actions.`,
example: '_footer',
},
{
title: 'Number of Months',
description: `Specify a number of months visible inside of a panel with \`numOfMonths\` prop.<br/>
<br/>
By default panel displays 2 months at once. Display a single month only when presets are available.`,
example: '_numberOfMonths',
},
{
title: 'Selection Mode',
description: `Enable users to select the range of dates with \`selectionMode\` prop. It supports 2 values:<br/>
 - \`day\` (default) - lets to select 1 day.<br/>
 - \`range\` - lets to select any range of dates.`,
example: '_selectionMode',
},
{
title: 'Month and Year Selection',
description: `Let the user quickly change the month and year values with:<br/>
 - \`showMonthDropdown\` (default) - enables month selection dropdown.<br/>
 - \`showYearDropdown\` - enables year selection dropdown.`,
example: '_monthAndYearSelection',
},
{
title: 'Excluding Dates',
description: `Control what dates the user can select with 2 props:<br/>
 - \`filterDate\` (default) - define what dates will be selectable.<br/>
 - \`excludePastDates\` - allow selecting only today and future dates.`,
example: '_excludingDates',
},
{
title: 'Localization',
description: `Change the language using \`locale\` prop. Some languages will change the start of the week day and order of month and year.
First Day of the week can be controlled manually with \`firstDayOfWeek\` prop.<br/>
<br/>
Presets and footer actions aren’t controlled by this and have to be translated manually.<br/>
<br/>
When using \`Yoshi 5\` with \`BM Flow\` there's no need to use \`locale\` prop anymore. It is handled automatically.`,
example: '_localization',
},
],
commonUseCaseExamples: [
{
title: 'Trigger',
description: `Call it out from any action component such as \`<IconButton/>\`, \`<TextButton/>\`, \`<Button/>\`, etc.
Use it to filter data and content.`,
example: '_trigger',
},
],
};