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

GitLab UI Components

import examples from './examples';

var description = "# Friendly wrap\n\n<!-- STORY -->\n\nThe friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements to specific break-symbols.\n\n[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\n\n## Internet Explorer 11\n\nIE11 doesn't support the `<wbr>` element: https://caniuse.com/#search=wbr\nTo use this component on IE11, you'll need some CSS to preserve its behaviour:\n\n```css\nwbr {\n  display: inline-block;\n}\n```\n\n\n## Usage\n\n\n### Default\n\nBy default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially useful when displaying paths or URLs:\n\n```html\n<gl-friendly-wrap text=\"/some/file/path\" />\n```\n\nThe code above renders to the following HTML:\n\n```html\n<span class=\"text-break\">/<wbr>some/<wbr>file/<wbr>path</span>\n```\n\n### Custom symbols\n\nMultiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"[';', '-', '.']\"\n  text=\"some;text-that.needs;to-be.wrapped\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>\n```\n\n### Break words\n\nSymbols can be words too:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"['and']\"\n  text=\"it goes on and on and on and on\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">it goes on and<wbr> on and<wbr> on and<wbr> on</span>\n```\n";

var friendly_wrap_documentation = {
  description: description,
  examples: examples,
  propsInfo: {
    text: {
      additionalInfo: 'Text to be wrapped'
    },
    symbols: {
      additionalInfo: 'A list of strings representing the break-words'
    }
  }
};

export default friendly_wrap_documentation;