@hubspot/cms-component-library 0.3.4 → 0.3.5

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

@@ -1,31 +1,13 @@
-import { TextField, ChoiceField } from '@hubspot/cms-components/fields';
+import { TextField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
 const ContentFields = ({
   titleLabel = 'Title',
   titleName = 'title',
   titleDefault = 'Accordion Title',
-  iconLabel = 'Icon',
-  iconName = 'icon',
-  iconDefault = 'chevron',
 }: ContentFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={iconLabel}
-        name={iconName}
-        display="buttons"
-        choices={[
-          ['chevron', 'Chevron'],
-          ['plus', 'Plus'],
-          ['caret', 'Caret'],
-        ]}
-        preset="expand_icon"
-        required={false}
-        default={iconDefault}
-      />
-      <TextField label={titleLabel} name={titleName} default={titleDefault} />
-    </>
+    <TextField label={titleLabel} name={titleName} default={titleDefault} />
   );
 };
 

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

@@ -0,0 +1,26 @@
+import { ChoiceField } from '@hubspot/cms-components/fields';
+import type { StyleFieldsProps } from './types.js';
+
+const StyleFields = ({
+  iconLabel = 'Icon',
+  iconName = 'icon',
+  iconDefault = 'chevron',
+}: StyleFieldsProps) => {
+  return (
+    <ChoiceField
+      label={iconLabel}
+      name={iconName}
+      display="buttons"
+      choices={[
+        ['caret', 'Caret'],
+        ['chevron', 'Chevron'],
+        ['plus', 'Plus'],
+      ]}
+      preset="expand_icon"
+      required={false}
+      default={iconDefault}
+    />
+  );
+};
+
+export default StyleFields;

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

@@ -1,5 +1,6 @@
 import styles from './index.module.scss';
 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';
@@ -39,9 +40,11 @@ const AccordionTitleComponent = ({
 
 type AccordionTitleComponentType = typeof AccordionTitleComponent & {
   ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
 };
 
 const AccordionTitle = AccordionTitleComponent as AccordionTitleComponentType;
 AccordionTitle.ContentFields = ContentFields;
+AccordionTitle.StyleFields = StyleFields;
 
 export default AccordionTitle;

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

@@ -11,6 +11,9 @@ export type ContentFieldsProps = {
   titleLabel?: string;
   titleName?: string;
   titleDefault?: string;
+};
+
+export type StyleFieldsProps = {
   iconLabel?: string;
   iconName?: string;
   iconDefault?: AccordionIconType;

package/components/componentLibrary/Accordion/llm.txt

@@ -52,7 +52,8 @@ Accordion/
 ├── AccordionTitle/
 │   ├── index.tsx                 # AccordionTitle component
 │   ├── types.ts                  # AccordionTitle TypeScript types
-│   ├── ContentFields.tsx         # HubSpot field definitions for title/icon
+│   ├── ContentFields.tsx         # HubSpot field definitions for title text
+│   ├── StyleFields.tsx           # HubSpot field definitions for icon
 │   ├── icons.tsx                 # SVG icon components (Chevron, Plus, Minus)
 │   └── index.module.scss         # CSS module for title styling
 ├── AccordionContent/
@@ -228,13 +229,25 @@ Configurable props for variant selection:
 
 #### AccordionTitle.ContentFields
 
-Configurable props for title text and icon:
+Configurable props for title text:
 
 ```tsx
 <AccordionTitle.ContentFields
   titleName="title"
   titleLabel="Title"
   titleDefault="Accordion Title"
+/>
+```
+
+**Fields:**
+- `title`: TextField for accordion title text
+
+#### AccordionTitle.StyleFields
+
+Configurable props for icon style:
+
+```tsx
+<AccordionTitle.StyleFields
   iconName="icon"
   iconLabel="Icon"
   iconDefault="chevron"
@@ -242,7 +255,6 @@ Configurable props for title text and icon:
 ```
 
 **Fields:**
-- `title`: TextField for accordion title text
 - `icon`: ChoiceField for selecting icon type (caret, chevron, plus)
 
 #### AccordionContent.ContentFields
@@ -275,11 +287,11 @@ import { AccordionIconType } from '@hubspot/cms-component-library/Accordion/Acco
 type FAQModuleProps = {
   style?: {
     variant?: AccordionVariant;
+    icon?: AccordionIconType;
   };
   accordionItems?: Array<{
     title?: string;
     content?: string;
-    icon?: AccordionIconType;
   }>;
 };
 
@@ -288,10 +300,11 @@ export const Component = ({
   accordionItems = [],
 }: FAQModuleProps) => {
   const variant = style?.variant;
+  const icon = style?.icon;
 
   return (
     <Accordion>
-      {accordionItems.map(({ title, content, icon }, index) => (
+      {accordionItems.map(({ title, content }, index) => (
         <AccordionItem key={index} variant={variant}>
           <AccordionTitle icon={icon}>{title}</AccordionTitle>
           <AccordionContent>{content}</AccordionContent>
@@ -326,7 +339,6 @@ import {
 const defaultItem = {
   title: 'Accordion Title',
   content: '<p>Accordion content goes here. You can add multiple lines of text.</p>',
-  icon: 'chevron',
 };
 
 export const fields = (
@@ -342,6 +354,7 @@ export const fields = (
     </RepeatedFieldGroup>
     <FieldGroup label="Style" name="style" tab="STYLE">
       <AccordionItem.StyleFields />
+      <AccordionTitle.StyleFields />
     </FieldGroup>
   </ModuleFields>
 );

package/components/componentLibrary/Form/ContentFields.tsx

@@ -0,0 +1,19 @@
+import { FormField } from '@hubspot/cms-components/fields';
+import { ContentFieldsProps } from './types.js';
+
+const ContentFields = ({
+  formIdLabel = 'Form',
+  formIdName = 'form',
+  formIdDefault = {},
+}: ContentFieldsProps) => {
+  return (
+    <FormField
+      label={formIdLabel}
+      name={formIdName}
+      embedVersions={['v4']}
+      default={formIdDefault}
+    />
+  );
+};
+
+export default ContentFields;

package/components/componentLibrary/Form/index.tsx

@@ -0,0 +1,18 @@
+// @ts-expect-error -- ?island not typed
+import FormIsland from './islands/FormIsland.js?island';
+import { FormProps } from './types.js';
+import { Island } from '@hubspot/cms-components';
+import ContentFields from './ContentFields.js';
+
+const FormComponent = (props: FormProps) => {
+  return <Island module={FormIsland} {...props} />;
+};
+
+type FormComponentType = typeof FormComponent & {
+  ContentFields: typeof ContentFields;
+};
+
+const Form = FormComponent as FormComponentType;
+Form.ContentFields = ContentFields;
+
+export default Form;

package/components/componentLibrary/Form/islands/FormIsland.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { FormProps, InternalFormProps } from '../types.js';
+import { getHubID } from '@hubspot/cms-components';
+
+const getScriptSrc = (portalId: number, env: string) => {
+  const host = env === 'qa' ? 'js.hsformsqa.net' : 'js.hsforms.net';
+  return `https://${host}/forms/embed/${portalId}.js`;
+};
+
+const FormIsland = ({ formId, env }: FormProps & InternalFormProps) => {
+  const portalId = getHubID();
+  const resolvedEnv = env === 'qa' ? env : 'prod';
+
+  useEffect(() => {
+    if (!formId || !portalId) {
+      return;
+    }
+
+    const scriptSrc = getScriptSrc(portalId, resolvedEnv);
+    const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
+
+    if (existingScript) {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = scriptSrc;
+    document.head.appendChild(script);
+
+    return () => {
+      script.remove();
+    };
+  }, [formId, portalId, resolvedEnv]);
+
+  if (!formId || !portalId) {
+    return null;
+  }
+
+  /*
+<script src="https://js.hsformsqa.net/forms/embed/102771136.js" defer></script>
+<div class="hs-form-frame" data-env="qa" data-region="na1" data-form-id="53e5b258-4526-4012-9274-8bbe23ab2d09" data-portal-id="102771136"></div>
+*/
+
+  return (
+    <div
+      className="hs-form-frame"
+      data-form-id={formId}
+      data-portal-id={portalId}
+      data-env={resolvedEnv}
+    />
+  );
+};
+
+export default FormIsland;

package/components/componentLibrary/Form/islands/index.module.scss

@@ -0,0 +1,3 @@
+.form {
+  width: var(--hscl-form-width, 100%);
+}

package/components/componentLibrary/Form/types.ts

@@ -0,0 +1,13 @@
+import { FormFieldDefaults } from '@hubspot/cms-components/fields';
+export type InternalFormProps = {
+  env?: 'qa' | 'prod';
+};
+export type FormProps = {
+  formId: string;
+};
+
+export type ContentFieldsProps = {
+  formIdLabel?: string;
+  formIdName?: string;
+  formIdDefault?: typeof FormFieldDefaults;
+};

package/package.json

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