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

wix-style-react

export default {
  description:
    'Card folder tabs allow users to organize content by a certain criteria in a card layout. ',
  do: [
    'Use it to distribute content within a card.',
    'Use it to group card content by a specific criteria, such as status or type.  ',
  ],
  dont: ['Don’t use it to distribute content of a page. Use <Tabs/> instead.'],
  featureExamples: [
    {
      title: 'Structure',
      description: `This component is composed of a \`<CardFolderTabs>\` wrapper that holds any number of \`<CardFolderTabs.Tab/>\` items inside of it.
        You can specify content for each tab separately.`,
      example: '_structure',
    },
    {
      title: 'Tab button width',
      description: `Specify maximum allowed tab width in pixels or percentage with \`maxTabWidth\` prop. Stretch tabs equally to fill the full width of a card with \`fluid\` prop.
        <br/>
        <br/>
        Initially all tab buttons are sized to be equal with a maximum width of 138px. Set \`maxTabWidth\` value  to “fit-content” to size them to match title width.
        <br/>`,
      example: '_tabButtonWidth',
    },
    {
      title: 'Disabled',
      description: `Restrict users from opening a certain tab with \`disabled\` prop.`,
      example: '_disabled',
    },
    {
      title: 'Custom title',
      description: `Customize the tab title by overriding default text string value of \`name\` prop to any required components or their composition.`,
      example: '_customTitle',
    },
    {
      title: 'Text overflow',
      description: `Control text overflow with \`ellipsis\` prop. By default, tab titles that exceed \`maxTabWidth\` will be truncated and displayed in a tooltip when the user hover over a tab. Set \`ellipsis\` to false to enable text wrapping.`,
      example: '_textOverflow',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Empty state',
      description: `Use section \`<EmptyState/>\`  as tab content when there’s no data to display. `,
      example: '_emptyState',
    },
  ],
};