open-index/open-npm huggingface dataset:
npm package: @hashicorp/hashi-alert
Description: small alert text with a link
Latest version: 2.0.0

### Alert

A small alert banner that links somewhere, such as to a new release or
announcement.

### Props

- `url` (str): where to link to when clicked
- `tag` (str): text contained inside the little "tag" to the left
- `tag_color` (str): border color of the tag on the left and the arrow on the right
- `text` (str): text in the main area
- `text_color` (str): dafaults to `light`, the value `dark` will change text to dark color

### Dependents:

- `hero`
npm package: @hashicorp/hashi-alert-banner
Description: alert banner with text and a link
Latest version: 1.2.3

### Alert Banner

An alert banner that links somewhere, such as to a new release or announcement. Sets a cookie when closed to hide itself on future page visits.

### Props

- `name` (str) [optional]: string used for cookie name (defaults to slugified text property)
- `url` (str): where to link to when clicked
- `tag` (str): text contained inside the tag
- `theme` (str): banner's thematic style
- `text` (str): text in the main area
- `link-text` (str): secondary text styled as a link
npm package: @hashicorp/hashi-basic-list
Description: simple vertical list with optional date and location render
Latest version: 2.0.0

# Basic List

A standard  vertical list with optional location and date.

### Props

- `date_icon` (bool) [default=true] - date displayed on the left side as an icon
- `_data` (arr) - array of data from the CMS
  - `title` (str) - name of the list item
  - `date` (date) [optional] - date displayed to the left
  - `location` (str) [optional] - displayed in small text above the title
  - `url` (str) [optional] - links the entire item if present
npm package: @hashicorp/hashi-button
Description: just a button
Author: Hashicorp - Jeff Escalante
Latest version: 2.0.0

# Button

A simple button.

### Props

* `title` (str) - button text
* `url` (str) _[optional]_ - where the button links to
* `external` (bool) _[optional]_ - opens the link in a new tab
* `theme` (str) _[optional]_ - a hashicorp-defined button theme
* `classes` (str) _[optional]_ - any additional classes needed on the button
* `ga_prefix` (str) _[optional]_ - a prefix to add the to GA event when clicked

> This component also will reflect any additional props you pass it to the top level, so you can attach things like `onClick` etc.

### Dependents

* hashi-hero
* hashi-logo-grid
npm package: @hashicorp/hashi-callouts
Description: a set of three horizontally-aligned images paired with a short title and descriptive text.
Author: Hashicorp - Jeff Escalante
Latest version: 3.0.0

# Callouts

A set of three horizontally-aligned images paired with a short title and descriptive text. They re-align vertically for mobile.

### Props

- `onDark` - when onDark, change colors to white
- `columnCount` (int) - the number of columns (3 or 4)
- `theme` (string) - declares the color theme
- `items` (arr) - array of callout items from the CMS
  - `image` (obj) [optional] - contains a url prop which links to the image
  - `title` (str) - short title
  - `description` (str) [optional] - markdown-enabled short description
  - `link` (obj) [optional] - contains a link dato object
npm package: @hashicorp/hashi-case-study-slider
Description: displays up to three case studies
Author: Hashicorp - Mike Wickett
Latest version: 3.0.0

# Case Study Slider

A slider component that can display up to three case studies and allow a visitor to toggle between them, and click through to read.

### Props

- `_data` (obj) - data from the CMS
  - `case_studies` (array, max items: 3) Collection of case study objects
    - `company` (obj) - company object from Dato
      - `monochrome_logo` (obj)
        - `url` (string) URL to logo
        - `alt` (string) alt text for logo
        - `format` (string) type of image (png, svg, etc)
      - `white_logo` (obj)
        - `url` (string) URL to logo
        - `alt` (string) alt text for logo
        - `format` (string) type of image (png, svg, etc)
    - `case_study_resource` (obj)
      - `slug` (string) Path to resource page
      - `image` (obj)
        - `url` (string) URL to image
        - `alt` (string) alt text for image
        - `format` (string) type of image (png, svg, etc)
    - `headline` (string) headline text of the case study
    - `description` (string) body copy for the case study
- `timing` (integer) - timing value for slide duration in seconds
- `dark` (boolean) - controls button color, progress bar color and logo color
npm package: @hashicorp/hashi-consent-manager
Description: A GDPR-compliant consent manager
Author: Hashicorp - Jennifer Yip
Latest version: 2.0.0

# Consent Manager

A GDPR-compliant consent manager.

### Props

- `version` (integer) - version number, bump up to override previous consent preferences
- `container` (string) - id of container where the consent manager should live
- `companyName` (string) - your company name to be inserted in various copy
- `privacyPolicyLink` (string) - link to your company's privacy policy
- `segmentWriteKey` (string) - your production segment write key
- `segmentServices` (array of objects) - use this to override the category or description of a service provided by Segment
  - `name` - name of the Segment integration, must match the integration you are overriding
  - `utilServerRoot` - root path of the instance of HashiCorp's `web-utility-server` to use. This is used to fetch integrations based on segment write key.
  - `category` _[optional]_ - new category name
  - `description` _[optional]_ - new description
- `categories` (array) - State of toggle
  - `name` - name of category
  - `description` - description for the category
- `additionalServices` (array of objects) - additional integrations outside of Segment that you wish to include in the consent manager
  - `name` - name of service
  - `description` - description of service
  - `category` - category of service
  - `body` _[optional]_ - javascript body associated with service _If present, overrides `url` below_
  - `url` _[optional]_ - url of js file associated with service
  - `async` (bool) _[optional]_ - add `async` property to script element
  - `addToBody` (bool) _[optional]_ - inject script before closing `<body>` tag
  - `dataAttrs` (arr) _[optional]_ - array of `data-` attributes to add to script tag
    - `name` (str) - name of data attribute (`data-name`)
    - `value` (str) - value of `data` attribute to set
npm package: @hashicorp/hashi-content
Description: Styled prose content
Author: Hashicorp - Mike Wickett
Latest version: 2.0.1

# Content

Styling wrapper for content markup, typically used to render markdown content. Support a small number of customizations, as well as a variable product color to be used as an accent.

### Props

- `data`: base64 encoded HTML markup to render
- `product` _[optional]_: lowercase product name (vault, nomad, consul, terraform) - this will set link colors to the selected product color as defined in `global-styles`
npm package: @hashicorp/hashi-docs-sidenav
Description: Sidebar used for navigation HashiCorp docs
Author: Hashicorp - Jeff Escalante
Latest version: 2.0.0

# Docs Sidenav

Side navigation for HashiCorp's product documentation. Fairly tightly tied to our specific documentation sites and the format that middleman uses to catalog pages and frontmatter at the moment.

> See props.js for data on props!
npm package: @hashicorp/hashi-email-subscribe
Description: a standard section used to prompt newsletter signups.
Author: Hashicorp - Jeff Escalante
Latest version: 2.0.0

# Email Subscribe

A standard section used to prompt newsletter signups.

> NOTE: requires styles for `hashi-input`, `hashi-section-header`, `hashi-button`, and `hashi-newsletter-signup` to be rendered correctly
npm package: @hashicorp/hashi-hero
Description: basic full page hero with a lot of customization options
Author: Hashicorp - Jeff Escalante
Latest version: 4.0.0

# Hero

Basic full page hero with a lot of customization options.

### Params

- `centered` (bool): [optional] centers all content if true
- `_data` (obj): data passed in from datocms
- `theme` (str): defaults to dark theme; `light` changes to light theme
- `background_image` (obj): [optional] url prop contains link to image
- `title_logo` (obj): [optional] url prop contains link to image. sits above
  headline.
- `title` (str): main title
- `description` (str): smaller text under the subtitle, markdown enabled
- `buttons` (arr): [optional] array of link objects
  - `title` (str): primary button text
  - `url` (str): where the button links to
- `help_text` (str): [optional] markdown, usually a small link at bottom
- `videos` (arr): [optional] array of videos to be played in a carousel
  - `name` (str): name to be displayed above progress bar
  - `playback_rate` (int): [optional] defaults to 1; video's playback speed
  - `src` (arr): url for video source
    - `src_type` (str): type of video source
    - `url` (str): url of video source
- `centered` (bool): centers all content if true

### Depends On

- hashi-button
- hashi-image
- hashi-alert
npm package: @hashicorp/hashi-image
Description: super optimized image element, pulls from dato and formats for 7 screen sizes in two formats. Skips optimization for SVGs.
Author: Hashicorp - Jeff Escalante
Latest version: 1.0.7

### Image

Super optimized image element, pulls from dato and formats for 7 screen sizes in
two formats. Skips optimization for SVGs.

### Props

* `src` (str): url of the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src)
* `steps` (arr): [optional] array of screen sizes to optimize for
* `sizes` (str): [optional] same as sizes on an img tag [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
* `classes` (str): [optional] any classes to be added to the image
* `alt` (str): [optional] alt text for the image [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-alt)
* `aspect_ratio` (arr or str): [optional] automatically crops to aspect ratio. first two items in the array are the ratio (ex. `[16,9]`), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. `[16,9,500]`).  if string is provided, brackets should be excluded (ex. `16,9,500`).  string will be converted to array
* `params` (obj): [optional] params passed directly to imgix

### Dependents:

* `hero`
* `logo-grid`
* `nav`
* `person-list`
* `resource-list`
* `text-and-image`
npm package: @hashicorp/hashi-linked-text-summary-list
Description: HashiCorp's linked text summary list component.
Author: Hashicorp - RJ Spiker
Latest version: 1.0.1

# Linked Text Summary List

A list of linkable items with descriptive text.

### Params

- `_data` (arr) - array of objects
  - `title` (str) - simple headline
  - `description` (str) _[optional]_ - descriptive text under the headline
  - `link` (str) - url to link to
  - `external` _[optional]_ (bool) - open link in externally
npm package: @hashicorp/hashi-mega-nav
Description: Top level nav used across HashiCorp sites
Author: Hashicorp - Mike Wickett
Latest version: 2.0.0

# Mega Nav

HashiCorp's global navigation (except on HashiCorp.com)

### Props

- `_data` (obj) - Required - ⚠️ MUST be exactly the "dato.mega_nav" object ⚠️
- `title` (str) - Optional - Text to display to the right of the HashiCorp logo - the name of the site
- `title_url` - (str) - Optional - URL for optional `title`. If not provided, the title defaults to `home_url`
- `home_url` - (str) - Optional - URL for main logo link. Defaults to https://www.hashicorp.com

### Depends On

- hashi-newsletter-signup-form
- hashi-button
npm package: @hashicorp/hashi-newsletter-signup-form
Description: a form used to sign up for the email newsletter
Author: Hashicorp - Jeff Escalante
Latest version: 2.0.0

# Newsletter Signup Form

A form used to sign up for the email newsletter

### Props

- `ga` (str) - google analytics identifier
- `placeholder` (str) - placeholder text for the input field
- `button_text` (str) - text for the button
- `finished` (function) - callback function that is called when form is finished submitting OR errors

### Dependents

- `email-subscribe`
- `footer`
- `mega-nav`

### Depends On

- `hashi-ga-form-fields`
npm package: @hashicorp/hashi-product-subnav
Description: sub-navigation that appears on Hashicorp product pages
Author: Hashicorp - RJ Spiker
Latest version: 1.0.1

# Product Subnav

Sub-navigation that appears on product pages.

### Props

- `dark` (bool) - whether or not to use the dark theme
- `product_site` (bool) - whether this is used in a project site or not
- `root_url` (str) - root url for all product dropdown links
- `_data` (obj) - object with all relevant data
  - `products` (arr) - products data passed in from datocms
  - `subnav` (obj) - subnav data passed in from datocms
npm package: @hashicorp/hashi-secondary-nav
Description: sub-navigation that appears on any page in a nested dropdown
Author: Hashicorp - Jeff Escalante
Latest version: 1.0.5

# Secondary Nav

Sub-navigation that appears on any page in a nested dropdown.

### Props

- `_data` (obj) - data from the CMS
- `page` (str) - path to the page its currently on
- `dark` (bool) [default=false] - whether or not to use the dark theme
npm package: @hashicorp/hashi-section-header
Description: very simple headline & subheading for a section of a page
Author: Hashicorp - Jeff Escalante
Latest version: 5.0.0

# Section Header

Very simple headline & subheading for a section of a page.

### Params

- `headline` (str) _[optional]_ - primary headline
- `description` (str) _[optional]_ - smaller text under the headline, markdown enabled
- `use_h1` (bool) _[optional]_ - whether or not to use a h1 for the headline

### Dependents

- sales-form
npm package: @hashicorp/hashi-split-cta
Description: Double CTA section
Author: Hashicorp - Jennifer Yip
Latest version: 1.0.0

# Hero

Double CTA section with image, text and buttons.

### Params

Array of 2 objects with the following properties:

- `_data` (obj): data passed in from datocms
- `background_color` (str): [optional] hex code for background color of section
- `background_image` (obj): [optional] url prop contains link to image
  - `url` (str)
  - `format` (str)
  - `alt` (str)
- `title` (str): [optional] title of section, max 80 characters
- `title_logo` (obj): [optional] url prop contains link to image. sits above headline.
  - `url` (str)
  - `foramt` (str)
  - `alt` (str)
- `description` (str): paragraph text, max 150 characters
- `buttons` (arr): [optional] array of link objects
  - `title` (str): primary button text
  - `url` (str): where the button links to
  - `external` (bool)
  - `theme` (str)

### Depends On

- hashi-button
- hashi-image
npm package: @hashicorp/hashi-text-and-content
Description: Text and ???, horizontally aligned pairs
Author: Hashicorp - Jeff Escalante
Latest version: 1.1.0

# Text and Content

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

### Props

- `_data` - (arr) - Array of objects from the CMS, object props below
  - `reverse_direction` [str] - reverses the item order on desktop, placing text on the right
  - `text` [markdown] the text to be displayed
  - `content` [obj] - either an image object, a code-block object or a logo-grid object from Dato
npm package: @hashicorp/hashi-two-column-text
Description: a component that handles a longer block of text by splitting it into two horizontal columns in the desktop/tablet views
Author: Hashicorp - Jeff Escalante
Latest version: 2.0.0

# Two Column Text

A component that handles a longer block of text by splitting it into two
horizontal columns in the desktop/tablet views.

### Props

- `_data` (obj) - data from the CMS
  - `data.headline` (str) - text headline
  - `data.content` (str) - longer text block
npm package: @hashicorp/hashi-use-cases
Description: A set of three horizontally-aligned callout boxes containing an icon, a short title, and descriptive text, and a link.
Author: Hashicorp - RJ Spiker
Latest version: 1.0.1

# Use Cases

A set of three horizontally-aligned images paired with a short title and descriptive text. They re-align vertically for mobile.

### Props

- `theme` (string) - declares the color theme
- `items` (arr) - array of callout items from the CMS
  - `image` (obj) [optional] - contains a url prop which links to the image
  - `title` (str) - short title
  - `description` (str) [optional] - markdown-enabled short description
  - `link` (obj) [optional] - contains a link dato objectkdown-enabled short description
npm package: @hashicorp/hashi-vertical-text-block-list
Description: Vertical block list of links
Author: Hashicorp - Mike Wickett
Latest version: 1.0.0

# Vertical Text Block List

Vertical list of blocks of text (with optional images) with links.

### Props

- `_data` - (arr) - Array of objects from the CMS, object props below
  - `logo` _[optional]_ - overrides header text if present
    - `url` - URL of logo to display
    - `alt` - alt text for image
  - `header` - [markdown] header text to display on the left of an item
  - `body` - [markdown ]body text that is displayed to the right
  - `link_url` - _[optional]_ - If provided, links the entire 'card' to this URL
- `center_text` (boolean) - sets text alignment to centered on mobile view if true (defaults to left-aligned)
npm package: @hashicorp/platform-remark-plugins
Description: A potpourri of remark plugins used to process .mdx files
Author: Jeff Escalante
Latest version: 0.2.1

# `@hashicorp/platform-remark-plugins`

A potpourri of [remark](https://github.com/remarkjs/remark) plugins used by [HashiCorp](https://www.hashicorp.com/) to process markdown files.

## Overview

[MDX](https://mdxjs.com) uses [remark](https://github.com/remarkjs/remark) internally to process and transform markdown via [plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins). We use MDX to process markdown content to build out our docs, learning guides, and write rich content from our CMS. This set of plugins ensures that written markdown is translated properly into markup.

### Anchor Links

The `anchorLinks` plugin adds anchor links to headings and when a list begins with an `inline code` element so that users are able to easily link to a specific place even if it is further down the page. See [its readme](plugins/anchor-links/README.md) for more details.

### Include Markdown

The `includeMarkdown` plugin gives authors the ability to use a directive like `@include "filename.md" to import markdown from a separate file, like a partial. See [its readme](plugins/include-markdown/README.md) for more details.

### Custom Alerts

The `paragraphCustomAlerts` plugin adds a custom syntax for creating alert boxes. See [its readme](plugins/inline-code-linkable/README.md) for more details. This plugin will be deprecated for a `<Alert />` component in the future in a step to move us toward full [commonmark](https://commonmark.org/) compliance.

### Typography

The `typography` plugin adds css classes to certain typographical elements so that they adhere to the typography standards from our design system. See [its readme](plugins/inline-code-linkable/README.md) for more details.

## Usage

Each of the plugins are individually exposed from the default export from this module and can be used as any other remark plugin would be normally. For example, with raw mdx:

```js
import { compileSync } from '@mdx-js/mdx'
import { typography, anchorLinks } from '@hashicorp/platform-remark-plugins'

console.log(compileSync('some markdown content', {
  remarkPlugins: [typography, anchorLinks]
})
```

If you'd like to use all of the plugins in one shot, which is typically the case with this module, an array of all the plugins is returned from the `allPlugins` export, as such:

```js
import { compileSync } from '@mdx-js/mdx'
import allPlugins from '@hashicorp/platform-remark-plugins/all'

console.log(compileSync('some markdown content', {
  remarkPlugins: allPlugins(/* options */)
})
```

Plugin options can be passed to `allPlugins` as an object, with the keys being plugin names. For example, to pass options to `headingLinkable`, you could call `allPlugins({ headingLinkable: { foo: 'bar' } })`.

If you are using `next-hashicorp`, all of these plugins will be included by default.
npm package: @hashicorp/react-boolean-input
Description: A checkbox input
Latest version: 1.0.5
Deprecated: [DEPRECATED] -  This package has been replaced by @hashicorp/react-checkbox-input. 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.

### BooleanInput

A checkbox input.

### Props

- `name` (str): name attribute
- `label` (str): label text (html allowed)
- `value` (bool): initial value
- `onValueChange` (func): function called with the value when it changes

### Dependents:

- `privacy-checkbox`
npm package: @hashicorp/react-case-study-slider
Description: displays up to three case studies
Author: HashiCorp
Latest version: 7.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Case Study Slider

A slider component that can display up to three case studies and allow a visitor to toggle between them, and click through to read.

### Props

See the [props file](props.js) for more details on the component's props!
npm package: @hashicorp/react-privacy-checkbox
Description: Hashicorp uses this privacy checkbox across a range of forms including sales, webinar and trial forms.
Latest version: 1.0.5
Deprecated: [DEPRECATED] - 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.

### PrivacyCheckbox

A checkbox input.

### Props

- `onValidityChange` (func): function called with true/false when all checkbox is valid (checked)
- `forceValidate` (bool): if set to true, will force all fields to run their validate functions

### Dependents:

- `newsletter-signup-form`
npm package: @hashicorp/tsconfig
Description: Shared TypeScript config
Author: Hashicorp - Michael Schonfeld
Latest version: 1.0.11
Deprecated: [DEPRECATED] - 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.

ERROR: No README data found!
npm package: @hashicorp/tslint
Description: Shared TypeScript lint config
Author: Hashicorp - Michael Schonfeld
Latest version: 1.0.10
Deprecated: [DEPRECATED] - 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.

ERROR: No README data found!