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

wix-style-react

export default {
  description:
    'Card gallery item is an interactive component that allows users to display media content and actions related to it in a grid layout.',
  do: [
    'Use it to represent a content entity, such a blog post, product or event.',
    'Use it to display content that users can interact with.',
    'Use it to display content for grid layout.',
  ],
  dont: [
    'Don’t use it to display static media. Use <Image/> or <Preview/> instead.',
    'Don’t use it to display content in a custom layout. Use <Card/> instead.',
  ],
  featureExamples: [
    {
      title: 'Background',
      description: `Define a gallery item's background using one of the following:<br/>
        &emsp;- \`backgroundImageUrl\` - use it to pass a link to the background image source file.<br/>
        &emsp;- \`backgroundImageNode\` - use it to pass a custom component as a background.`,
      example: '_background',
    },
    {
      title: 'Title',
      description: `Give more context to a card with following props:<br/>
        &emsp;- \`title\` - use it for a short and descriptive card title.<br/>
        &emsp;- \`subtitle\` - use it for a short caption to provide more narrative.`,
      example: '_title',
    },
    {
      title: 'Badge',
      description: `Emphasise item status with a \`badge\`. Use it to promote new items or highlight ones that require attention.`,
      example: '_badge',
    },
    {
      title: 'Actions',
      description: `Define primary and secondary actions for an item with \`primaryActionProps\` and \`secondaryActionProps\`. 
        This component is an interactive element so primary action is mandatory, while the secondary button is optional.`,
      example: '_actions',
    },
    {
      title: 'Settings menu',
      description: `Allow users to act on a specific item by providing a settings menu.
        Popover menu can contain any required number of actions inside of it.`,
      example: '_settingsMenu',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Product list',
      description: `Use \`<CardGalleryItem/>\` to list down visual items, such as dishes, blog posts, products or their collections.
        These lists are commonly accompanied by an \`<AddItem/>\` component at the end of the list which allows users to add a new item to the grid.`,
      example: '_productsList',
    },
  ],
};