This package has been deprecated

Author message:

[DEPRECATED] - This package has been replaced by @hashicorp/react-text-split.This package is deprecated, and will no longer be maintained. Please check the hashicorp/react-components repository for a list of maintained packages, and file an issue if you need a replacement for this package.

@hashicorp/react-text-and-content

Text and Content

Text section accompanied by either an image, a code block or a logo grid.

Props

• enableLogoGridIntegrationLinks (boolean) [optional] - If true, logo-grid items will link to integration pages
• brand (string, ["hashicorp","terraform","vault","consul","nomad","packer","vagrant"]) [optional] - Controls link and button coloration
• linkStyle (string, ["link","button"]) [optional] - Controls the appearance of links
• data - (arr) - Array of objects from the CMS, object props below
  • reverseDirection (string)) - reverses the item order on desktop, placing text on the right
  • text (string) A markdown string of the text to be displayed
  • content (object) - either an image object, a code-block object or a logo-grid object from Dato
  • links (array) [optional] - An array of { title, url, external } to be rendered below text content.
  • hasShadow (bool) [optional] - when used with an image block type, adds a drop shadow to the image
  • hasBorder (bool) [optional] - when used with an image block type, adds a border to the image
• headingClassNames (object) [optional] - className strings to add to markdown Headings by level. customizes the Headings of text, see MarkedJS Renderer

MarkedJS Renderer

To temporarily alleviate some styling debt issues TextAndContent can dynamically mutate the markdown of the text prop. This is achieved by extending the renderer of MarkedJS.

Our customizations occur within the temporary_generateMarkedOptions function on index.js

Customizations:

• All <p>, <ul>, and <ol> tags will by default include a hardcoded body text class of .g-type-body for consistency
• All heading tags can be customized via the headingClassNames prop. text, for example { 2: 'g-type-section-1' } outputs all h2 tags as <h2 class='g-type-section-1'> we filter out anything with a non-numeric key, and of course only options 1 thru 6 will work ;)
• All <a> tags will include a brand class to match the provided brand prop. If no brand prop is provided, no class will be added.