wix-style-react/src/Range/docs/Range.content.js

wix-style-react

export default {
  description:
    'Range allows users to enter a range of values or dates. It’s a container that wraps and merges two input fields such as `<Input/> ` or `<Datepicker/>`.',
  do: [
    'Use it to specify a range of dates',
    'Use it to specify a range of numeric values such as duration',
  ],
  dont: [
    'Don’t use it to merge dependent fields, i.e. price input with currency selection. Use <Layout/> to place inputs in 12px proximity to one another.',
  ],
  featureExamples: [
    {
      title: 'Structure',
      description: `Component is an empty container that merges two input fields horizontally.`,
      example: '_structure',
    },
    {
      title: 'Range type',
      description: `Accept three types of data inputs as child elements:<br/>
        &emsp;- \`<DatePicker/>\` <br/>
        &emsp;- \`<NumberInput/>\` <br/>
        &emsp;- \`<Input/> \` - use with number values only.`,
      example: '_rangeType',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Disabled start or end of a range',
      description: `Control interaction states per each field - make it disabled, readOnly, etc.`,
      example: '_disabled',
    },
    {
      title: 'Multiple values',
      description: `Use range to control a single entity that is combined from two values, e.g. duration from hours and minutes.`,
      example: '_multipleValues',
    },
  ],
};