@gitlab/ui/dist/components/utilities/intersperse/intersperse.documentation.js

GitLab UI Components

import examples from './examples';

var description = "## Intersperse\n\nThe intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";

var intersperse_documentation = {
  followsDesignSystem: false,
  description,
  examples
};

export default intersperse_documentation;