@hubspot/cms-component-library 0.3.7 → 0.3.9

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/AccordionTitleBase.tsx

@@ -0,0 +1,45 @@
+import Text from '../../Text/index.js';
+import styles from './index.module.scss';
+import cx from '../../utils/classname.js';
+import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
+import type { AccordionTitleProps } from './types.js';
+
+const AccordionTitleBase = ({
+  icon = 'chevron',
+  fieldPath,
+  className = '',
+  style = {},
+  children,
+}: AccordionTitleProps) => {
+  const combinedClasses = cx(styles.accordionTitle, className);
+
+  const renderIcon = () => {
+    if (icon === 'chevron') return <ChevronIcon />;
+
+    if (icon === 'plus') {
+      return (
+        <>
+          <PlusIcon />
+          <MinusIcon />
+        </>
+      );
+    }
+
+    if (icon === 'caret') return <CaretIcon />;
+
+    return null;
+  };
+
+  return (
+    <summary className={combinedClasses} style={style}>
+      {fieldPath ? (
+        <Text fieldPath={fieldPath} className={styles.accordionTitleText} />
+      ) : (
+        <span className={styles.accordionTitleText}>{children}</span>
+      )}
+      {renderIcon()}
+    </summary>
+  );
+};
+
+export default AccordionTitleBase;

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,40 +1,33 @@
-import styles from './index.module.scss';
+import { useEditorVariableChecks, Island } from '@hubspot/cms-components';
+// @ts-expect-error -- ?island not typed
+import AccordionTitleIslandModule from './islands/AccordionTitleIsland.js?island';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
-import cx from '../../utils/classname.js';
 import { AccordionTitleProps } from './types.js';
-import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
+import AccordionTitleBase from './AccordionTitleBase.js';
 
 const AccordionTitleComponent = ({
   icon = 'chevron',
+  fieldPath,
   className = '',
   style = {},
   children,
 }: AccordionTitleProps) => {
-  const combinedClasses = cx(styles.accordionTitle, className);
-
-  const renderIcon = () => {
-    if (icon === 'chevron') return <ChevronIcon />;
-
-    if (icon === 'plus') {
-      return (
-        <>
-          <PlusIcon />
-          <MinusIcon />
-        </>
-      );
-    }
-
-    if (icon === 'caret') return <CaretIcon />;
-
-    return null;
-  };
+  const editorChecks = useEditorVariableChecks();
+  const isInEditor = editorChecks.is_in_editor && !!fieldPath;
 
   return (
-    <summary className={combinedClasses} style={style}>
-      <span className={styles.accordionTitleText}>{children}</span>
-      {renderIcon()}
-    </summary>
+    <>
+      <AccordionTitleBase
+        icon={icon}
+        fieldPath={fieldPath}
+        className={className}
+        style={style}
+      >
+        {children}
+      </AccordionTitleBase>
+      {isInEditor && <Island module={AccordionTitleIslandModule} />}
+    </>
   );
 };
 

package/components/componentLibrary/Accordion/AccordionTitle/islands/AccordionTitleIsland.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+const AccordionTitleIsland = () => {
+  const markerRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) return;
+
+    const details = marker.closest('details');
+    const summary = details?.querySelector('summary');
+    if (!summary) return;
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const isIconClick = target.closest('svg');
+      if (!isIconClick) {
+        e.preventDefault();
+      }
+    };
+
+    summary.addEventListener('click', handleClick);
+    return () => summary.removeEventListener('click', handleClick);
+  }, []);
+
+  return <span ref={markerRef} style={{ display: 'none' }} />;
+};
+
+export default AccordionTitleIsland;

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/Button/StyleFields.tsx

@@ -1,10 +1,14 @@
-import { ChoiceField, Visibility } from '@hubspot/cms-components/fields';
+import {
+  ChoiceField,
+  VariantSelectionField,
+  Visibility,
+} from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
   buttonVariantLabel = 'Button variant',
   buttonVariantName = 'buttonVariant',
-  buttonVariantDefault = 'primary',
+  buttonVariantDefault = { variant_name: 'primaryButton' },
   buttonIconPositionLabel = 'Icon position',
   buttonIconPositionName = 'buttonIconPosition',
   buttonIconPositionDefault = 'right',
@@ -18,14 +22,10 @@ const StyleFields = ({
 
   return (
     <>
-      <ChoiceField
+      <VariantSelectionField
         label={buttonVariantLabel}
         name={buttonVariantName}
-        choices={[
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-        ]}
+        variantDefinitionName="button"
         default={buttonVariantDefault}
       />
       <ChoiceField

package/components/componentLibrary/Button/index.module.scss

@@ -1,48 +1,45 @@
-// CSS variables that can be mapped to theme settings
+// CSS variables provided via theme settings variant system (scoped via data-buttons-variant)
 .button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
-  gap: var(--hscl-button-gap, 8px);
-  background-color: var(--hscl-button-backgroundColor);
-  color: var(--hscl-button-color);
-  padding: var(--hscl-button-paddingBlock) var(--hscl-button-paddingInline);
-  border-radius: var(--hscl-button-borderRadius);
-  border: var(--hscl-button-borderWidth) solid var(--hscl-button-borderColor);
-  font-size: var(--hscl-button-fontSize);
-  font-weight: var(--hscl-button-fontWeight);
+  gap: 8px;
+  background-color: var(--hs-button-backgroundColor);
+  color: var(--hs-button-color);
+  padding: 12px 24px;
+  border-radius: var(--hs-button-borderRadius);
+  border: var(--hs-button-border);
+  font-size: var(--hs-button-fontSize);
+  font-family: var(--hs-button-fontFamily);
+  font-style: var(--hs-button-fontStyle);
+  font-weight: var(--hs-button-fontWeight);
+  text-decoration: var(--hs-button-textDecoration);
   cursor: pointer;
   transition: all 0.2s ease;
-  text-decoration: none;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
   &:hover {
-    background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-hover, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-hover, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-hover, var(--hscl-button-borderColor));
-    text-decoration: none;
+    background-color: var(--hs-button-backgroundColor-hover, var(--hs-button-backgroundColor));
+    color: var(--hs-button-color-hover, var(--hs-button-color));
+    border: var(--hs-button-border-hover, var(--hs-button-border));
   }
 
   &:focus-visible {
-    background-color: var(--hscl-button-backgroundColor-focus, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-focus, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-focus, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-focus, var(--hscl-button-borderColor));
-    outline: var(--hscl-button-outlineWidth-focus, 2px) solid var(--hscl-button-outlineColor-focus, currentColor);
-    outline-offset: var(--hscl-button-outlineOffset-focus, 2px);
+    background-color: var(--hs-button-backgroundColor-focus, var(--hs-button-backgroundColor));
+    color: var(--hs-button-color-focus, var(--hs-button-color));
+    border: var(--hs-button-border-focus, var(--hs-button-border));
+    outline: 2px solid;
+    outline-offset: 2px;
   }
 
   &:active {
-    background-color: var(--hscl-button-backgroundColor-active, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-active, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-active, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-active, var(--hscl-button-borderColor));
+    background-color: var(--hs-button-backgroundColor-active, var(--hs-button-backgroundColor));
+    color: var(--hs-button-color-active, var(--hs-button-color));
+    border: var(--hs-button-border-active, var(--hs-button-border));
   }
 
   &:disabled {
@@ -54,6 +51,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    fill: var(--hscl-button-icon-fill);
+    fill: currentColor;
   }
 }

package/components/componentLibrary/Button/index.tsx

@@ -13,16 +13,16 @@ import {
 
 const ButtonComponent = ({
   buttonType = 'link',
-  variant = 'primary',
+  variant = 'primaryButton',
   className = '',
   style = {},
   ...rest
 }: ButtonProps) => {
-  const variantClass = styles[`hscl-button-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.
-  const defaultClasses = cx(styles.button, variantClass);
+  const defaultClasses = cx(styles.button, className);
   const sharedProps = {
-    className: cx(defaultClasses, className),
+    className: defaultClasses,
     style: style,
+    'data-buttons-variant': variant,
   };
 
   const RenderWithIcon = ({