@hubspot/cms-component-library 0.3.6 → 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/LanguageSwitcher/index.tsx

@@ -1,114 +1,23 @@
-import styles from './index.module.scss';
-import cx from '../utils/classname.js';
-import { getLanguageDisplayName } from './utils.js';
-import LanguageOptions from './LanguageOptions.js';
-import GlobeIcon from './assets/Globe.js';
+// @ts-expect-error -- ?island not typed
+import LanguageSwitcherIsland from './islands/LanguageSwitcherIsland.js?island';
 import type { LanguageSwitcherProps } from './types.js';
+import { Island, useLanguageVariants } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
-import Button from '../Button/index.js';
-import { useLanguageVariants } from '@hubspot/cms-components';
-import { createTranslationsArrayAsObject } from './utils.js';
-import Drawer, { useDrawer } from '../Drawer/index.js';
-import { dummyTranslationsAsObject, dummyTranslations } from './_dummyData.js';
-import Divider from '../Divider/index.js';
-import type { CSSVariables } from '../utils/types.js';
 
 const LanguageSwitcherComponent = ({
-  useDummyData = false, // !todo - remove this in PROD (NOTE: storybook still needs the _dummyData, so add the _dummyData file to storybook dir and refactor usage there)
-  menuBackgroundColor,
-  menuBackgroundColorHover,
-  color,
-  colorHover,
-  languageSwitcherSelectText = 'Select a language',
-  className = '',
-  style = {},
+  translations: translationsProp,
+  ...rest
 }: LanguageSwitcherProps) => {
-  const translations = useDummyData ? dummyTranslations : useLanguageVariants(); // !todo remove this in PROD
-  const translationsArrayAsObject = useDummyData
-    ? dummyTranslationsAsObject
-    : createTranslationsArrayAsObject(translations); // !todo remove this in PROD
-  const activeTranslation = translations?.find(item => item.isActive);
-  const currentPageLanguage = activeTranslation?.languageCode ?? '';
-  const currentPageLanguageDisplayName = getLanguageDisplayName({
-    currentPageLanguage,
-    translationsArrayAsObject,
-  });
-
-  const { isOpen, toggle, close } = useDrawer();
-
-  const isInEditor = false; // !todo - update this to use useEditorVariableChecks() hook (is_in_editor property) once it's working
-
-  const colorCss = color?.rgba;
-  const menuBackgroundColorCss = menuBackgroundColor?.rgba;
-
-  const cssVariables = {
-    ...(colorCss && { '--hscl-languageSwitcher-color': colorCss }),
-    ...(menuBackgroundColorCss && {
-      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColorCss,
-    }),
-  };
-
-  const dividerCssVariables: CSSVariables = {
-    '--hscl-divider-borderColor': colorCss,
-  };
-
-  const combinedClasses = cx(styles.languageSwitcher, className);
+  const languageVariants = useLanguageVariants();
+  const translations = translationsProp ?? languageVariants;
 
   return (
-    <div style={{ ...cssVariables, ...style }} className={combinedClasses}>
-      <Button
-        buttonType="button"
-        aria-expanded={isOpen}
-        onClick={toggle}
-        className={styles.button}
-        style={{ color: colorCss }}
-      >
-        <GlobeIcon />
-        {currentPageLanguageDisplayName}
-      </Button>
-      {!isInEditor && (
-        <Drawer
-          open={isOpen}
-          direction="right"
-          onOverlayClick={close}
-          aria-label="Language selector"
-          className={styles.drawer}
-          style={{
-            ...cssVariables,
-            backgroundColor: menuBackgroundColorCss,
-          }}
-        >
-          <div className={styles.sidePanelHeader}>
-            <span className={styles.sidePanelTitle}>
-              {languageSwitcherSelectText}
-            </span>
-            <Button
-              buttonType="button"
-              onClick={close}
-              aria-label="Close language selector"
-              className={styles.sidePanelCloseButton}
-            >
-              ✕
-            </Button>
-          </div>
-
-          <Divider spacing="0px" style={dividerCssVariables} />
-
-          <div className={styles.sidePanelOptionsContainer}>
-            <LanguageOptions
-              {...{
-                translations,
-                menuBackgroundColor,
-                menuBackgroundColorHover,
-                color,
-                colorHover,
-              }}
-            />
-          </div>
-        </Drawer>
-      )}
-    </div>
+    <Island
+      module={LanguageSwitcherIsland}
+      translations={translations}
+      {...rest}
+    />
   );
 };
 

package/components/componentLibrary/LanguageSwitcher/islands/LanguageSwitcherIsland.tsx

@@ -0,0 +1,110 @@
+import styles from '../index.module.scss';
+import cx from '../../utils/classname.js';
+import { getLanguageDisplayName } from '../utils.js';
+import LanguageOptions from '../LanguageOptions.js';
+import GlobeIcon from '../assets/Globe.js';
+import type { LanguageSwitcherIslandProps } from '../types.js';
+import Button from '../../Button/index.js';
+import { createTranslationsArrayAsObject } from '../utils.js';
+import Drawer, { useDrawer } from '../../Drawer/index.js';
+import Divider from '../../Divider/index.js';
+import type { CSSVariables } from '../../utils/types.js';
+
+const LanguageSwitcherIsland = ({
+  translations,
+  menuBackgroundColor,
+  menuBackgroundColorHover,
+  color,
+  colorHover,
+  languageSwitcherSelectText = 'Select a language',
+  className = '',
+  style = {},
+}: LanguageSwitcherIslandProps) => {
+  const translationsArrayAsObject = createTranslationsArrayAsObject(
+    translations
+  );
+  const activeTranslation = translations?.find(item => item.isActive);
+  const currentPageLanguage = activeTranslation?.languageCode ?? '';
+  const currentPageLanguageDisplayName = getLanguageDisplayName({
+    currentPageLanguage,
+    translationsArrayAsObject,
+  });
+
+  const { isOpen, toggle, close } = useDrawer();
+
+  const isInEditor = false;
+
+  const colorCss = color?.rgba;
+  const menuBackgroundColorCss = menuBackgroundColor?.rgba;
+
+  const cssVariables = {
+    ...(colorCss && { '--hscl-languageSwitcher-color': colorCss }),
+    ...(menuBackgroundColorCss && {
+      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColorCss,
+    }),
+  };
+
+  const dividerCssVariables: CSSVariables = {
+    '--hscl-divider-borderColor': colorCss,
+  };
+
+  const combinedClasses = cx(styles.languageSwitcher, className);
+
+  return (
+    <div style={{ ...cssVariables, ...style }} className={combinedClasses}>
+      <Button
+        buttonType="button"
+        aria-expanded={isOpen}
+        onClick={toggle}
+        className={styles.button}
+        style={{ color: colorCss }}
+      >
+        <GlobeIcon />
+        {currentPageLanguageDisplayName}
+      </Button>
+      {!isInEditor && (
+        <Drawer
+          open={isOpen}
+          direction="right"
+          onOverlayClick={close}
+          aria-label="Language selector"
+          className={styles.drawer}
+          style={{
+            ...cssVariables,
+            backgroundColor: menuBackgroundColorCss,
+          }}
+        >
+          <div className={styles.sidePanelHeader}>
+            <span className={styles.sidePanelTitle}>
+              {languageSwitcherSelectText}
+            </span>
+            <Button
+              buttonType="button"
+              onClick={close}
+              aria-label="Close language selector"
+              className={styles.sidePanelCloseButton}
+            >
+              ✕
+            </Button>
+          </div>
+
+          <Divider spacing="0px" style={dividerCssVariables} />
+
+          <div className={styles.sidePanelOptionsContainer}>
+            <LanguageOptions
+              {...{
+                translations,
+                menuBackgroundColor,
+                menuBackgroundColorHover,
+                color,
+                colorHover,
+              }}
+            />
+          </div>
+        </Drawer>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcherIsland;

package/components/componentLibrary/LanguageSwitcher/llm.txt

@@ -15,7 +15,7 @@ The LanguageSwitcher component provides an accessible interface for users to vie
 
 ```
 LanguageSwitcher/
-├── index.tsx                                 # Main component with render logic
+├── index.tsx                                 # Main component (wrapper that delegates to Island)
 ├── types.ts                                  # TypeScript type definitions
 ├── ContentFields.tsx                         # HubSpot field definitions for content
 ├── StyleFields.tsx                           # HubSpot field definitions for styling
@@ -26,6 +26,8 @@ LanguageSwitcher/
 ├── index.module.scss                         # CSS module with design tokens
 ├── assets/
 │   └── Globe.tsx                             # Globe SVG icon component
+├── islands/
+│   └── LanguageSwitcherIsland.tsx            # Client-side island with interactive UI
 └── stories/
     ├── LanguageSwitcher.stories.tsx          # Component usage examples
     ├── LanguageSwitcherDecorator.tsx         # Storybook decorator
@@ -41,82 +43,43 @@ LanguageSwitcher/
 **Props:**
 ```tsx
 {
+  translations?: LanguageVariant[];             // Language variants (if not provided, uses useLanguageVariants hook)
   className?: string;                           // Additional CSS classes
   style?: React.CSSProperties;                  // Inline styles
-  textColor?: ColorFieldValue;                  // Text color for button and menu items
-  textColorHover?: ColorFieldValue;             // Text color for menu items on hover
+  color?: ColorFieldValue;                      // Text color for button and menu items
+  colorHover?: ColorFieldValue;                 // Text color for menu items on hover
   menuBackgroundColor?: ColorFieldValue;        // Background color for the drawer
   menuBackgroundColorHover?: ColorFieldValue;   // Background color for menu items on hover
   languageSwitcherSelectText?: string;          // Header text in drawer (default: 'Select a language')
-  useDummyData?: boolean;                       // Use dummy data for testing (development only)
 }
 ```
 
 ## Usage Examples
 
-### Island Usage
+### Basic Usage
 
-The LanguageSwitcher component requires JavaScript for interactive state management and must be used within an Island component.
-
-#### Island Component
+The LanguageSwitcher component automatically handles Island-ification internally. Simply import and use it with optional props:
 
 ```tsx
-// islands/LanguageSwitcherIsland.tsx
 import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
 
-export default function LanguageSwitcherIsland({
-  textColor,
-  textColorHover,
-  menuBackgroundColor,
-  menuBackgroundColorHover,
-  languageSwitcherSelectText,
-}) {
-  return (
-    <LanguageSwitcher
-      textColor={textColor}
-      textColorHover={textColorHover}
-      menuBackgroundColor={menuBackgroundColor}
-      menuBackgroundColorHover={menuBackgroundColorHover}
-      languageSwitcherSelectText={languageSwitcherSelectText}
-    />
-  );
+export default function MyComponent() {
+  return <LanguageSwitcher />;
 }
 ```
 
-#### Module File
-
-```tsx
-import { Island } from '@hubspot/cms-components';
-import LanguageSwitcherIsland from './islands/LanguageSwitcherIsland?island';
-
-export const Component = ({ fieldValues }) => {
-  return (
-    <Island
-      module={LanguageSwitcherIsland}
-      textColor={fieldValues.textColor}
-      textColorHover={fieldValues.textColorHover}
-      menuBackgroundColor={fieldValues.menuBackgroundColor}
-      menuBackgroundColorHover={fieldValues.menuBackgroundColorHover}
-      languageSwitcherSelectText={fieldValues.languageSwitcherSelectText}
-    />
-  );
-};
-```
+When used without a `translations` prop, it automatically calls `useLanguageVariants()` to fetch language data.
 
-### Basic Language Switcher
+### With Custom Header Text
 
 ```tsx
-import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
-
-export default function LanguageSwitcherIsland() {
-  return <LanguageSwitcher />;
-}
+<LanguageSwitcher languageSwitcherSelectText="Choose your language" />
 ```
 
-### With Custom Header Text
+### With Custom Translations
 
 ```tsx
-<LanguageSwitcher languageSwitcherSelectText="Choose your language" />
+<LanguageSwitcher translations={customLanguageVariants} />
 ```
 
 ### With Custom Colors
@@ -125,8 +88,8 @@ If passing in colors directly (without using a ColorField), like the below examp
 
 ```tsx
 <LanguageSwitcher
-  textColor={{ rgba: 'rgba(51, 71, 91, 1)' }}
-  textColorHover={{ rgba: 'rgba(0, 102, 204, 1)' }}
+  color={{ rgba: 'rgba(51, 71, 91, 1)' }}
+  colorHover={{ rgba: 'rgba(0, 102, 204, 1)' }}
   menuBackgroundColor={{ rgba: 'rgba(255, 255, 255, 1)' }}
   menuBackgroundColorHover={{ rgba: 'rgba(245, 245, 245, 1)' }}
 />
@@ -197,21 +160,19 @@ Configurable props for color customization:
 
 ### Module Usage Example
 
-If passing in colors using a ColorField, like the below example, pass in the entire field value. HubSpot will transform the field value from a default of { color: hex, opacity: number } to { rbga, rgb, opacity, color, hex, css }. The LanguageSwitcher component will pull the rgba value from this final output.
+If passing in colors using a ColorField, like the below example, pass in the entire field value. HubSpot will transform the field value from a default of { color: hex, opacity: number } to { rgba, rgb, opacity, color, hex, css }. The LanguageSwitcher component will pull the rgba value from this final output.
 
 ```tsx
-import { Island } from '@hubspot/cms-components';
-import LanguageSwitcherIsland from './islands/LanguageSwitcherIsland?island';
+import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
 
 export default function HeaderModule({ fieldValues }) {
   return (
     <header>
       <nav>
         {/* Other navigation items */}
-        <Island
-          module={LanguageSwitcherIsland}
-          textColor={fieldValues.textColor}
-          textColorHover={fieldValues.textColorHover}
+        <LanguageSwitcher
+          color={fieldValues.color}
+          colorHover={fieldValues.colorHover}
           menuBackgroundColor={fieldValues.menuBackgroundColor}
           menuBackgroundColorHover={fieldValues.menuBackgroundColorHover}
           languageSwitcherSelectText={fieldValues.languageSwitcherSelectText}
@@ -280,14 +241,14 @@ The LanguageSwitcher component follows accessibility best practices:
 
 ## Best Practices
 
-- **Use Islands for interactivity**: The LanguageSwitcher component is interactive and requires JavaScript, so it must be used within an Island component in modules
+- **Island-ification is handled internally**: The LanguageSwitcher component automatically handles Island-ification for interactive state, so you don't need to manually wrap it
 - **Position prominently**: Place in global navigation (header or footer) where users expect language controls
 - **Use native language names**: The component automatically displays language names in their native script (e.g., "Español" for Spanish, "Français" for French)
 - **Customize header text**: Set `languageSwitcherSelectText` to match your site's primary language for consistency
 - **Color coordination**: Match `textColor` and `menuBackgroundColor` to your site's theme
 - **Color setting**: If using ColorFields, pass in the entire field value, as HubSpot transforms the user's color choice into an object with an rgba key. Otherwise, ensure the color object has an rgba key and value. The component expects an object with an rgba key.
 - **Responsive design**: The drawer automatically adjusts to full width on mobile devices (≤400px)
-- **Test with real translations**: While `useDummyData` prop exists for development, always test with actual HubSpot language variants in production
+- **Test with real translations**: Pass real HubSpot language variants via the `translations` prop, or rely on the default `useLanguageVariants()` hook for production
 - **Provide clear visual feedback**: Use hover colors that provide sufficient contrast for user interaction
 - **Consider placement**: Position near other utility navigation items (search, account, etc.)
 - **Dark mode support**: Provide appropriate color values for dark backgrounds when needed
@@ -297,8 +258,7 @@ The LanguageSwitcher component follows accessibility best practices:
 ### Header Navigation Integration
 
 ```tsx
-import { Island } from '@hubspot/cms-components';
-import LanguageSwitcherIsland from './islands/LanguageSwitcherIsland?island';
+import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
 
 export default function SiteHeader({ fieldValues }) {
   return (
@@ -315,9 +275,8 @@ export default function SiteHeader({ fieldValues }) {
         <a href="/about">About</a>
         <a href="/services">Services</a>
         <a href="/contact">Contact</a>
-        <Island
-          module={LanguageSwitcherIsland}
-          textColor={fieldValues.textColor}
+        <LanguageSwitcher
+          color={fieldValues.color}
           menuBackgroundColor={fieldValues.menuBackgroundColor}
           languageSwitcherSelectText={fieldValues.languageSwitcherSelectText}
         />
@@ -330,13 +289,14 @@ export default function SiteHeader({ fieldValues }) {
 ### Footer Placement
 
 ```tsx
+import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
+
 export default function SiteFooter({ fieldValues }) {
   return (
     <footer style={{ padding: '48px 24px', textAlign: 'center' }}>
       <div style={{ marginBottom: '24px' }}>
-        <Island
-          module={LanguageSwitcherIsland}
-          textColor={fieldValues.footerTextColor}
+        <LanguageSwitcher
+          color={fieldValues.footerTextColor}
           menuBackgroundColor={fieldValues.menuBackgroundColor}
           languageSwitcherSelectText={fieldValues.languageSwitcherSelectText}
         />
@@ -350,6 +310,8 @@ export default function SiteFooter({ fieldValues }) {
 ### Mobile-First Navigation
 
 ```tsx
+import LanguageSwitcher from '@hubspot/cms-component-library/LanguageSwitcher';
+
 export default function MobileNav({ fieldValues }) {
   return (
     <nav style={{
@@ -362,9 +324,8 @@ export default function MobileNav({ fieldValues }) {
       <a href="/about">About</a>
       <a href="/contact">Contact</a>
       <div style={{ borderTop: '1px solid #eee', paddingTop: '16px' }}>
-        <Island
-          module={LanguageSwitcherIsland}
-          textColor={fieldValues.textColor}
+        <LanguageSwitcher
+          color={fieldValues.color}
           menuBackgroundColor={fieldValues.menuBackgroundColor}
         />
       </div>

package/components/componentLibrary/LanguageSwitcher/stories/LanguageSwitcher.stories.tsx

@@ -3,6 +3,7 @@ import LanguageSwitcher from '../index.js';
 import { LanguageSwitcherProps } from '../types.js';
 import { withLanguageSwitcherStyles } from './LanguageSwitcherDecorator.js';
 import { SBContainer, SBFocusWrapper } from '@sb-utils';
+import { dummyTranslations } from '../_dummyData.js';
 
 const meta: Meta<LanguageSwitcherProps> = {
   title: 'Component Library/LanguageSwitcher',
@@ -21,14 +22,6 @@ const meta: Meta<LanguageSwitcherProps> = {
   },
   decorators: [withLanguageSwitcherStyles],
   argTypes: {
-    useDummyData: {
-      control: 'boolean',
-      description: 'Use dummy translation data for testing',
-      table: {
-        category: 'Development',
-        defaultValue: { summary: 'false' },
-      },
-    },
     languageSwitcherSelectText: {
       control: 'text',
       description: 'Text displayed in the drawer header',
@@ -37,14 +30,14 @@ const meta: Meta<LanguageSwitcherProps> = {
         defaultValue: { summary: 'Select a language' },
       },
     },
-    textColor: {
+    color: {
       control: 'object',
       description: 'Text color for button and menu items',
       table: {
         category: 'Visual',
       },
     },
-    textColorHover: {
+    colorHover: {
       control: 'object',
       description: 'Text color for menu items on hover',
       table: {
@@ -90,7 +83,7 @@ export const Default: Story = {
     return (
       <SBContainer>
         <LanguageSwitcher
-          useDummyData={true}
+          translations={dummyTranslations}
           languageSwitcherSelectText="Select a language"
         />
       </SBContainer>
@@ -140,10 +133,10 @@ export const ColorThemes: Story = {
           <p>Custom color theming with purple tones.</p>
           <SBContainer>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Wählen Sie eine Sprache"
-              textColor={purpleTextColor}
-              textColorHover={purpleTextColorHover}
+              color={purpleTextColor}
+              colorHover={purpleTextColorHover}
               menuBackgroundColor={purpleMenuBgColor}
               menuBackgroundColorHover={purpleMenuBgColorHover}
             />
@@ -162,10 +155,10 @@ export const ColorThemes: Story = {
           </SBContainer>
           <SBContainer>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Select a language"
-              textColor={darkTextColor}
-              textColorHover={darkTextColorHover}
+              color={darkTextColor}
+              colorHover={darkTextColorHover}
               menuBackgroundColor={darkMenuBgColor}
               menuBackgroundColorHover={darkMenuBgColorHover}
             />
@@ -195,7 +188,7 @@ export const CustomText: Story = {
               <strong>🇬🇧 English:</strong>
             </p>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Select a language"
             />
           </SBContainer>
@@ -205,7 +198,7 @@ export const CustomText: Story = {
               <strong>🇩🇪 German:</strong>
             </p>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Sprache wählen"
             />
           </SBContainer>
@@ -215,7 +208,7 @@ export const CustomText: Story = {
               <strong>🇪🇸 Spanish:</strong>
             </p>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Seleccionar idioma"
             />
           </SBContainer>
@@ -225,7 +218,7 @@ export const CustomText: Story = {
               <strong>🇫🇷 French:</strong>
             </p>
             <LanguageSwitcher
-              useDummyData={true}
+              translations={dummyTranslations}
               languageSwitcherSelectText="Choisir une langue"
             />
           </SBContainer>
@@ -288,9 +281,9 @@ export const InContext: Story = {
 
             <div style={{ paddingTop: '6px' }}>
               <LanguageSwitcher
-                useDummyData={true}
-                textColor={{ rgba: 'rgb(55, 245, 255)' }}
-                textColorHover={{ rgba: 'rgb(255, 255, 255)' }}
+                translations={dummyTranslations}
+                color={{ rgba: 'rgb(55, 245, 255)' }}
+                colorHover={{ rgba: 'rgb(255, 255, 255)' }}
                 menuBackgroundColor={{ rgba: 'rgba(100, 181, 246, 1)' }}
                 menuBackgroundColorHover={{ rgba: 'rgba(0, 160, 240, 1)' }}
               />
@@ -325,7 +318,7 @@ export const InteractionStates: Story = {
         <h4>Hover State</h4>
         <p>Hover over the language switcher button to see the hover effect</p>
         <LanguageSwitcher
-          useDummyData={true}
+          translations={dummyTranslations}
           languageSwitcherSelectText="Select a language"
         />
       </SBContainer>
@@ -339,7 +332,7 @@ export const InteractionStates: Story = {
         </p>
         <SBFocusWrapper>
           <LanguageSwitcher
-            useDummyData={true}
+            translations={dummyTranslations}
             languageSwitcherSelectText="Select a language"
           />
         </SBFocusWrapper>

package/components/componentLibrary/LanguageSwitcher/types.ts

@@ -7,8 +7,19 @@ import type { CSSVariables } from '../utils/types.js';
 
 type ColorFieldValue = typeof ColorFieldDefaults;
 
+export type LanguageSwitcherIslandProps = {
+  translations: LanguageVariant[];
+  className?: string;
+  style?: CSSVariables;
+  color?: ColorFieldValue;
+  colorHover?: ColorFieldValue;
+  menuBackgroundColorHover?: ColorFieldValue;
+  menuBackgroundColor?: ColorFieldValue;
+  languageSwitcherSelectText?: string;
+};
+
 export type LanguageSwitcherProps = {
-  useDummyData?: boolean; // !todo - remove this in PROD
+  translations?: LanguageVariant[];
   className?: string;
   style?: CSSVariables;
   color?: ColorFieldValue;

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.6",
+  "version": "0.3.8",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {