import React from 'react';
import imgUrl from '../../../images/stencil.png';
export default ((_ref, components) => {
  let {
    mode,
    theme
  } = _ref;
  return {
    header: {
      title: 'Let users pick one or more options from a short list.',
      imgUrl: imgUrl,
      description: 'Checkboxes provide a natural and familiar way to indicate preference, allowing users to choose more than one option at a time. Use checkboxes with five or fewer options displayed simultaneously.'
    },
    tabsList: ['variant', 'sizes', 'shapes'],
    tabsDetail: {
      variant: {
        displayName: 'Variant',
        description: 'A checkbox can be any of the four available variants.',
        componentsList: ['A', 'B'],
        componentsDetail: {
          A: {
            size: 'md'
          },
          B: {
            size: 'md',
            variant: 'secondary'
          }
        }
      },
      shapes: {
        displayName: 'Shapes',
        description: 'A checkbox can be any of the four available variants.',
        componentsList: ['A', 'B', 'C'],
        componentsDetail: {
          A: {
            size: 'md'
          },
          B: {
            shape: 'line',
            size: 'line-md'
          },
          C: {
            type: 'circle',
            size: 'md'
          }
        }
      }
    }
  };
});