@hubspot/cms-component-library 0.3.1 → 0.3.3

package/components/componentLibrary/Text/llm.txt

@@ -0,0 +1,170 @@
+# 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>Text goes 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
+
+**Base Styles:**
+- `--hscl-text-color`: Text color applied to the rendered rich text content (default: `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

package/components/componentLibrary/Text/types.ts

@@ -0,0 +1,16 @@
+import type { CSSVariables } from '../utils/types.js';
+
+export type TextProps = {
+  fieldPath?: string;
+  className?: string;
+  style?: CSSVariables;
+};
+
+export type TextFeatureSet = 'bodyContent' | 'heading';
+
+export type ContentFieldsProps = {
+  textLabel?: string;
+  textName?: string;
+  textDefault?: string;
+  textFeatureSet?: TextFeatureSet;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {
@@ -21,9 +21,8 @@
   },
   "type": "module",
   "dependencies": {
-    "@hubspot/cms-components": "^1.2.13",
-    "sass-embedded": "^1.90.0",
-    "tsx": "^4.20.5"
+    "@hubspot/cms-components": "1.2.17",
+    "sass-embedded": "^1.97.3"
   },
   "peerDependencies": {
     "react": "^18.3.1"
@@ -31,6 +30,7 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@vitejs/plugin-react": "4.6.0",
+    "@hubspot/cms-dev-server": "^1.0.0",
     "typescript": "^5.0.0"
   },
   "author": "content-assets",

package/components/componentLibrary/Divider/ContentFields.tsx

@@ -1,63 +0,0 @@
-import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
-import { ContentFieldsProps } from './types.js';
-
-const ContentFields = ({
-  orientationLabel = 'Orientation',
-  orientationName = 'orientation',
-  orientationDefault = 'horizontal',
-  alignmentLabel = 'Alignment',
-  alignmentName = 'alignment',
-  alignmentDefault = 'stretch',
-  lengthLabel = 'Length',
-  lengthName = 'length',
-  lengthDefault = 100,
-  thicknessLabel = 'Thickness',
-  thicknessName = 'thickness',
-  thicknessDefault = 1,
-}: ContentFieldsProps) => {
-  return (
-    <>
-      <ChoiceField
-        label={orientationLabel}
-        name={orientationName}
-        required={true}
-        choices={[
-          ['horizontal', 'Horizontal'],
-          ['vertical', 'Vertical'],
-        ]}
-        default={orientationDefault}
-      />
-      <ChoiceField
-        label={alignmentLabel}
-        name={alignmentName}
-        required={true}
-        choices={[
-          ['stretch', 'Stretch'],
-          ['start', 'Start'],
-          ['center', 'Center'],
-          ['end', 'End'],
-        ]}
-        default={alignmentDefault}
-      />
-      <NumberField
-        label={lengthLabel}
-        name={lengthName}
-        required={true}
-        suffix="%"
-        min={1}
-        max={100}
-        default={lengthDefault}
-      />
-      <NumberField
-        label={thicknessLabel}
-        name={thicknessName}
-        required={true}
-        suffix="px"
-        min={1}
-        default={thicknessDefault}
-      />
-    </>
-  );
-};
-
-export default ContentFields;