@hubspot/cms-component-library 0.3.7 → 0.3.8

package/components/componentLibrary/Accordion/AccordionContent/ContentFields.tsx

@@ -1,4 +1,4 @@
-import { RichTextField } from '@hubspot/cms-components/fields';
+import Text from '../../Text/index.js';
 import type { ContentFieldsProps } from './types.js';
 
 const ContentFields = ({
@@ -7,11 +7,11 @@ const ContentFields = ({
   contentDefault = '<p>Accordion content goes here. You can add multiple lines of text.</p>',
 }: ContentFieldsProps) => {
   return (
-    // Todo: consider migrating over field library
-    <RichTextField
-      label={contentLabel}
-      name={contentName}
-      default={contentDefault}
+    <Text.ContentFields
+      textLabel={contentLabel}
+      textName={contentName}
+      textDefault={contentDefault}
+      textFeatureSet="bodyContent"
     />
   );
 };

package/components/componentLibrary/Accordion/AccordionContent/index.tsx

@@ -1,9 +1,11 @@
+import Text from '../../Text/index.js';
 import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import cx from '../../utils/classname.js';
 import { AccordionContentProps } from './types.js';
 
 const AccordionContentComponent = ({
+  fieldPath,
   className = '',
   style = {},
   children,
@@ -12,7 +14,7 @@ const AccordionContentComponent = ({
 
   return (
     <div className={combinedClasses} style={style}>
-      {children}
+      {fieldPath ? <Text fieldPath={fieldPath} /> : children}
     </div>
   );
 };

package/components/componentLibrary/Accordion/AccordionContent/types.ts

@@ -1,6 +1,5 @@
-import { RichTextFieldDefaults } from '@hubspot/cms-components/fields';
-
 export type AccordionContentProps = {
+  fieldPath?: string;
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -9,5 +8,5 @@ export type AccordionContentProps = {
 export type ContentFieldsProps = {
   contentLabel?: string;
   contentName?: string;
-  contentDefault?: typeof RichTextFieldDefaults;
+  contentDefault?: string;
 };

package/components/componentLibrary/Accordion/AccordionTitle/ContentFields.tsx

@@ -1,13 +1,18 @@
-import { TextField } from '@hubspot/cms-components/fields';
+import Text from '../../Text/index.js';
 import type { ContentFieldsProps } from './types.js';
 
 const ContentFields = ({
   titleLabel = 'Title',
   titleName = 'title',
-  titleDefault = 'Accordion Title',
+  titleDefault = '<p>Accordion Title</p>',
 }: ContentFieldsProps) => {
   return (
-    <TextField label={titleLabel} name={titleName} default={titleDefault} />
+    <Text.ContentFields
+      textLabel={titleLabel}
+      textName={titleName}
+      textDefault={titleDefault}
+      textFeatureSet="heading"
+    />
   );
 };
 

package/components/componentLibrary/Accordion/AccordionTitle/index.tsx

@@ -1,3 +1,4 @@
+import Text from '../../Text/index.js';
 import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
@@ -7,6 +8,7 @@ import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
 
 const AccordionTitleComponent = ({
   icon = 'chevron',
+  fieldPath,
   className = '',
   style = {},
   children,
@@ -32,7 +34,11 @@ const AccordionTitleComponent = ({
 
   return (
     <summary className={combinedClasses} style={style}>
-      <span className={styles.accordionTitleText}>{children}</span>
+      {fieldPath ? (
+        <Text fieldPath={fieldPath} className={styles.accordionTitleText} />
+      ) : (
+        <span className={styles.accordionTitleText}>{children}</span>
+      )}
       {renderIcon()}
     </summary>
   );

package/components/componentLibrary/Accordion/AccordionTitle/types.ts

@@ -2,6 +2,7 @@ export type AccordionIconType = 'chevron' | 'plus' | 'caret';
 
 export type AccordionTitleProps = {
   icon?: AccordionIconType;
+  fieldPath?: string;
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;

package/components/componentLibrary/Accordion/llm.txt

@@ -100,28 +100,30 @@ Accordion/
 
 ### AccordionTitle (Trigger)
 
-**Purpose:** Clickable trigger component that renders a `<summary>` element with text and an expand/collapse icon.
+**Purpose:** Clickable trigger component that renders a `<summary>` element with rich text and an expand/collapse icon. Uses the `Text` component internally for CMS inline editing support.
 
 **Props:**
 ```tsx
 {
   icon?: 'chevron' | 'plus' | 'caret';  // Icon type (default: 'chevron')
+  fieldPath?: string;                   // Path to the RichText field in HubSpot CMS (preferred for CMS modules)
   className?: string;                   // Additional CSS classes
   style?: React.CSSProperties;          // Inline styles
-  children?: React.ReactNode;           // Title text content
+  children?: React.ReactNode;           // Fallback title content (used when fieldPath is not provided, e.g. in Storybook)
 }
 ```
 
 ### AccordionContent (Panel)
 
-**Purpose:** Content panel component that renders a `<div>` containing the expandable content.
+**Purpose:** Content panel component that renders a `<div>` containing the expandable content. Uses the `Text` component internally when `fieldPath` is provided for CMS inline editing support.
 
 **Props:**
 ```tsx
 {
+  fieldPath?: string;              // Path to the RichText field in HubSpot CMS (preferred for CMS modules)
   className?: string;              // Additional CSS classes
   style?: React.CSSProperties;     // Inline styles
-  children?: React.ReactNode;      // Any content (text, HTML, components)
+  children?: React.ReactNode;      // Fallback content (used when fieldPath is not provided, e.g. in Storybook)
 }
 ```
 
@@ -229,18 +231,18 @@ Configurable props for variant selection:
 
 #### AccordionTitle.ContentFields
 
-Configurable props for title text:
+Configurable props for title text. Uses `Text.ContentFields` internally with the `heading` feature set:
 
 ```tsx
 <AccordionTitle.ContentFields
   titleName="title"
   titleLabel="Title"
-  titleDefault="Accordion Title"
+  titleDefault="<p>Accordion Title</p>"
 />
 ```
 
 **Fields:**
-- `title`: TextField for accordion title text
+- `title`: RichTextField for accordion title text (heading feature set)
 
 #### AccordionTitle.StyleFields
 
@@ -259,7 +261,7 @@ Configurable props for icon style:
 
 #### AccordionContent.ContentFields
 
-Configurable props for content:
+Configurable props for content. Uses `Text.ContentFields` internally with the `bodyContent` feature set:
 
 ```tsx
 <AccordionContent.ContentFields
@@ -270,7 +272,7 @@ Configurable props for content:
 ```
 
 **Fields:**
-- `content`: RichTextField for accordion content
+- `content`: RichTextField for accordion content (bodyContent feature set)
 
 ### Module Usage Example
 
@@ -304,10 +306,15 @@ export const Component = ({
 
   return (
     <Accordion>
-      {accordionItems.map(({ title, content }, index) => (
+      {accordionItems.map((_item, index) => (
         <AccordionItem key={index} variant={variant}>
-          <AccordionTitle icon={icon}>{title}</AccordionTitle>
-          <AccordionContent>{content}</AccordionContent>
+          <AccordionTitle
+            icon={icon}
+            fieldPath={`accordionItems[${index}].title`}
+          />
+          <AccordionContent
+            fieldPath={`accordionItems[${index}].content`}
+          />
         </AccordionItem>
       ))}
     </Accordion>
@@ -337,7 +344,7 @@ import {
 } from '@hubspot/cms-component-library/Accordion';
 
 const defaultItem = {
-  title: 'Accordion Title',
+  title: '<p>Accordion Title</p>',
   content: '<p>Accordion content goes here. You can add multiple lines of text.</p>',
 };
 

package/components/componentLibrary/Link/ContentFields.tsx

@@ -11,8 +11,16 @@ const ContentFields = ({
       href: 'https://www.hubspot.com',
     },
   },
+  fieldVisibility,
 }: ContentFieldsProps) => {
-  return <LinkField label={linkLabel} name={linkName} default={linkDefault} />;
+  return (
+    <LinkField
+      label={linkLabel}
+      name={linkName}
+      visibility={fieldVisibility?.[linkName]}
+      default={linkDefault}
+    />
+  );
 };
 
 export default ContentFields;

package/components/componentLibrary/Link/llm.txt

@@ -198,6 +198,19 @@ The Link component provides field definitions for easy integration with HubSpot
 />
 ```
 
+**Props:**
+- `linkLabel?: string` — label for the LinkField (default: `'Link'`)
+- `linkName?: string` — field name (default: `'link'`)
+- `linkDefault?` — default value for the LinkField
+- `fieldVisibility?: Partial<Record<string, Visibility>>` — visibility options keyed by field name (keys must match the corresponding field name prop, e.g. `linkName`). Values match the cms-components Visibility schema (e.g. `hidden_subfields`, `controlling_field_path`, `operator`)
+
+**Example — hide the nofollow option:**
+```tsx
+<Link.ContentFields
+  fieldVisibility={{ link: { hidden_subfields: { no_follow: true } } }}
+/>
+```
+
 **Fields:**
 - `link`: LinkField for href destination
 

package/components/componentLibrary/Link/types.ts

@@ -1,4 +1,4 @@
-import { LinkFieldDefaults } from '@hubspot/cms-components/fields';
+import { LinkFieldDefaults, Visibility } from '@hubspot/cms-components/fields';
 import { LinkFieldValue } from '../utils/linkField.js';
 
 export type BaseLinkProps = {
@@ -37,6 +37,7 @@ export type ContentFieldsProps = {
   linkLabel?: string;
   linkName?: string;
   linkDefault?: typeof LinkFieldDefaults;
+  fieldVisibility?: Partial<Record<string, Visibility>>;
 };
 
 export type StyleFieldsProps = {

package/components/componentLibrary/Logo/ContentFields.tsx

@@ -0,0 +1,25 @@
+import { LogoField } from '@hubspot/cms-components/fields';
+import { ContentFieldsProps } from './types.js';
+
+const ContentFields = ({
+  logoLabel = 'Logo',
+  logoName = 'img',
+  logoDefault = {
+    override_inherited_src: false,
+    src: null,
+    alt: null,
+    loading: 'disabled',
+  },
+  showLoading = true,
+}: ContentFieldsProps) => {
+  return (
+    <LogoField
+      label={logoLabel}
+      name={logoName}
+      showLoading={showLoading}
+      default={logoDefault}
+    />
+  );
+};
+
+export default ContentFields;

package/components/componentLibrary/Logo/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useBrandSettings } from '@hubspot/cms-components';
 import { dummyLogoData } from './_dummyLogoData.js';
+import ContentFields from './ContentFields.js';
 import { LogoData, LogoProps } from './types.js';
 import styles from './index.module.scss';
 import cx from '../utils/classname.js';
@@ -18,9 +19,10 @@ export const Logo = ({
 }: LogoProps) => {
   const { primaryLogo } = useBrandSettings() ?? {};
 
-  const logo: LogoData | undefined = useMemo(() => {
-    return useDummyLogo ? dummyLogoData.logo : primaryLogo;
-  }, [useDummyLogo, primaryLogo]);
+  const logo: LogoData | undefined = useMemo(
+    () => (useDummyLogo ? dummyLogoData.logo : primaryLogo),
+    [useDummyLogo, primaryLogo]
+  );
 
   if (!logo?.src) {
     return null;
@@ -70,4 +72,11 @@ export const Logo = ({
   );
 };
 
-export default Logo;
+type LogoComponentType = typeof Logo & {
+  ContentFields: typeof ContentFields;
+};
+
+const LogoWithFields = Logo as LogoComponentType;
+LogoWithFields.ContentFields = ContentFields;
+
+export default LogoWithFields;

package/components/componentLibrary/Logo/types.tsx

@@ -6,6 +6,21 @@ export type LogoData = {
   link?: string;
 };
 
+export type ContentFieldsProps = {
+  logoLabel?: string;
+  logoName?: string;
+  logoDefault?: {
+    override_inherited_src?: boolean;
+    src?: string | null;
+    alt?: string | null;
+    width?: number;
+    height?: number;
+    loading?: string;
+    suppress_company_name?: boolean;
+  };
+  showLoading?: boolean;
+};
+
 export type LogoProps = {
   useDummyLogo?: boolean;
   className?: string;

package/components/componentLibrary/_patterns/field-patterns.md

@@ -203,6 +203,25 @@ const SHOW_ICON_VISIBILITY_RULES: Visibility = {
 />
 ```
 
+### Field Visibility Map Pattern
+
+For components with configurable field names, use a `fieldVisibility` prop keyed by field name. Values match the cms-components `Visibility` schema (e.g. `hidden_subfields`, `controlling_field_path`, `operator`). Keys must match the field's name prop (e.g. `linkName`).
+
+Link component example:
+
+```typescript
+<Link.ContentFields
+  fieldVisibility={{ link: { hidden_subfields: { no_follow: true } } }}
+/>
+
+<Link.ContentFields
+  linkName="footerLink"
+  fieldVisibility={{ footerLink: { hidden_subfields: { no_follow: true, open_in_new_tab: true } } }}
+/>
+```
+
+**Key Pattern:** Look up visibility by the configurable name prop: `visibility={fieldVisibility?.[linkName]}`
+
 ## Nested Component Fields Pattern
 
 **Pattern for nested component fields:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {