# Text Component

A component for rendering HubSpot CMS rich text field content.

## Import path
```tsx
import Text from '@hubspot/cms-component-library/Text';
```

## Purpose

The Text component wraps HubSpot's native `RichText` component to provide a consistent interface for rendering editable rich text content in HubSpot CMS modules. It handles the connection between a CMS field and the rendered output, while exposing a single CSS variable for text color theming. Use this component whenever a module needs a rich text area managed through the HubSpot page editor.

## Component Structure

```
Text/
├── index.tsx                     # Main component wrapping HubSpot RichText
├── types.ts                      # TypeScript type definitions
├── ContentFields.tsx             # HubSpot field definitions for rich text content
└── index.module.scss             # CSS module with design tokens
```

## Components

### Text (Main Component)

**Purpose:** Renders a HubSpot CMS rich text field at the given `fieldPath`, applying CSS module class and CSS variable theming for text color.

**Props:**
```tsx
{
  fieldPath?: string;      // Path to the RichText field in HubSpot CMS (e.g., 'text', 'bodyContent')
  className?: string;      // Additional CSS classes (default: '')
  style?: CSSVariables;    // Inline styles, supports CSS custom properties (default: {})
}
```

## Usage Examples

### Basic Text

```tsx
import Text from '@hubspot/cms-component-library/Text';

<Text fieldPath="text" />
```

## HubSpot CMS Integration

### Field Definitions

The Text component provides `ContentFields` for defining a `RichTextField` inside a HubSpot CMS module.

#### ContentFields

Configurable props for customizing the text field label, name, default value, and editor features:

```tsx
<Text.ContentFields
  textLabel="Body text"
  textName="bodyText"
  textDefault="<p>Enter your content here.</p>"
  textFeatureSet="bodyContent"
  textPlaceholder="Enter body text"
/>
```

**Props:**
- `textLabel` (default: `'Text'`): Label shown in the HubSpot editor
- `textName` (default: `'text'`): Field name used as the `fieldPath` reference in the component
- `textDefault` (default: `'<p>Add text here</p>'`): Default HTML content for the field
- `textFeatureSet` (`'bodyContent' | 'heading' | 'simpleText'`, default: `'bodyContent'`): Controls the editor toolbar
  - Use `'bodyContent'` for body editing (block, alignment, indents, lists, standard/advanced emphasis, link)
  - Use `'heading'` for a reduced feature set suited to titles and captions (heading, alignment, standard emphasis, link)
  - Use `'simpleText'` for minimal editing (icon only)
- `textPlaceholder` (default: `'Add text'`): Placeholder text shown in the inline editor when the field is empty. Forwarded to `RichTextField`'s `placeholder` prop

**Fields:**
- `text` (name set by `textName`): RichTextField for the rich text content

#### Style Fields

**Note:** There are no style fields included with this component. Do not try to import them.

### Module Usage Example

```tsx
import Text from '@hubspot/cms-component-library/Text';

export default function ArticleModule() {
  return (
    <Text fieldPath="bodyText" />
  );
}
```

### Module Fields Example

```tsx
import { ModuleFields } from '@hubspot/cms-components/fields';
import Text from '@hubspot/cms-component-library/Text';

export const fields = (
  <ModuleFields>
    <Text.ContentFields
      textLabel="Body text"
      textName="bodyText"
      textDefault="<p>Enter your content here.</p>"
      textFeatureSet="bodyContent"
    />
  </ModuleFields>
);
```

### Multiple Text Fields in One Module

```tsx
import { ModuleFields } from '@hubspot/cms-components/fields';
import Text from '@hubspot/cms-component-library/Text';

export const fields = (
  <ModuleFields>
    <Text.ContentFields
      textLabel="Heading text"
      textName="headingText"
      textDefault="<p>Enter your heading.</p>"
      textFeatureSet="heading"
    />
    <Text.ContentFields
      textLabel="Body text"
      textName="bodyText"
      textDefault="<p>Enter your body content.</p>"
      textFeatureSet="bodyContent"
    />
  </ModuleFields>
);

export default function ArticleModule() {
  return (
    <div>
      <Text fieldPath="headingText" />
      <Text fieldPath="bodyText" />
    </div>
  );
}
```

## Styling

### CSS Variables

The Text component uses HubSpot theme section variables for all styling. There are no `--hscl-` override variables for this component.

**Used variables:**
- `--hs-section-color`: Text color (falls back to `currentColor`)
- `--hs-section-link-color`: Link color
- `--hs-section-link-color-hover`: Link hover and focus-visible color
- `--hs-section-blockquote-accentColor`: Blockquote left border color
- `--hs-section-blockquote-backgroundColor`: Blockquote background color
- `--hs-section-blockquote-color`: Blockquote text color

## Accessibility

- **Semantic HTML**: Content is rendered directly from the HubSpot CMS editor output, which produces standard HTML elements (`<p>`, `<h1>`–`<h6>`, `<ul>`, `<ol>`, etc.)
- **Structured content**: Encourage editors to use proper heading hierarchy and list elements within the rich text editor for screen reader compatibility
- **Link accessibility**: Links created in the rich text editor will render as native `<a>` elements

## Best Practices

- **Match `fieldPath` to `textName`**: The `fieldPath` prop on the component must match the `textName` prop on `ContentFields` — they reference the same CMS field
- **Choose the right feature set**: Use `'heading'` for simpler text areas (titles, captions) to keep the editor toolbar uncluttered; use `'bodyContent'` for full article or section content
- **Style fields**: There are no style fields for this component. Do not try to import them
- **CSS Variables for theming**: This component uses `--hs-section-*` variables from the theme. There are no `--hscl-` overrides; styling is controlled via the theme's section settings
- **Multiple fields per module**: You can render multiple `Text` components in one module by giving each a unique `textName` / `fieldPath` pair

## Related Components

- **Button**: Use for call-to-action elements within or adjacent to text content
- **Link**: Use for standalone clickable text or wrapped content that requires a link without rich text editing
