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

wix-style-react

export default {
  description:
    'The InfoIcon provides additional information when hovering over the icon. It’s used in multiple components, and sometimes by itself, next to various actions or features.',
  do: ['Use it when features can be explained in one sentence.'],
  dont: [
    "Don't use it when the feature requires a knowledge article to be explained. Use ‘read more’ instead.",
  ],
  featureExamples: [
    {
      title: 'Size',
      description: `Supports two sizes:<br/> 
        &emsp;- \`small\` - Use it next to small and tiny texts.<br/>
        &emsp;- \`medium\` Use it next to headings and medium texts.<br/>`,
      example: '_size',
    },
    {
      title: 'Adding a text link',
      description: `Use the \`TextButton\` with skin \`light\` when you need to add a link for more information.`,
      example: '_textLink',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Using InfoIcon in a form',
      description: `Some components like \`FormField\` and \`SidePanel\` appear with a built-in info icon.
        In other cases, insert the InfoIcon inline to a Text component. `,
      example: '_usingInfoIcon',
    },
  ],
};