# 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"
/>
```

**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'`, default: `'bodyContent'`): Controls the editor toolbar
  - Use `'bodyContent'` for full-featured editing (includes image, emoji, table, embed, video, and more)
  - Use `'heading'` for a reduced feature set suited to titles and captions (no rich media)

**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

By default, the Text component inherits styles from the HubSpot theme's section settings (e.g. `--hs-section-color`, `--hs-section-link-color`). The `--hscl-` variables below are overrides — use them when the component is placed in a context (like a Card) that requires different styling than the section defaults.

**Overrides:**
- `--hscl-text-color`: Text color (falls back to `--hs-section-color`, then `currentColor`)

## 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**: Override `--hscl-text-color` via the `style` prop rather than using CSS selectors that target the component's internals
- **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
