@hubspot/cms-component-library 0.3.12 → 0.3.13

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

@@ -10,7 +10,7 @@ const StyleFields = ({
     <ChoiceField
       label={iconLabel}
       name={iconName}
-      display="buttons"
+      display="select"
       choices={[
         ['caret', 'Caret'],
         ['chevron', 'Chevron'],

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

@@ -9,7 +9,9 @@
   color: var(--hs-button-color);
   padding: 12px 24px;
   border-radius: var(--hs-button-borderRadius);
-  border: var(--hs-button-border);
+  border-style: var(--hs-button-borderStyle);
+  border-width: var(--hs-button-borderWidth);
+  border-color: var(--hs-button-borderColor);
   font-size: var(--hs-button-fontSize);
   font-family: var(--hs-button-fontFamily);
   font-style: var(--hs-button-fontStyle);
@@ -25,13 +27,17 @@
   &:hover {
     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));
+    border-style: var(--hs-button-borderStyle-hover, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-hover, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-hover, var(--hs-button-borderColor));
   }
 
   &:focus-visible {
     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));
+    border-style: var(--hs-button-borderStyle-hover, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-hover, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-hover, var(--hs-button-borderColor));
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
@@ -39,7 +45,9 @@
   &:active {
     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));
+    border-style: var(--hs-button-borderStyle-active, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-active, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-active, var(--hs-button-borderColor));
   }
 
   &:disabled {

package/components/componentLibrary/Button/llm.txt

@@ -284,7 +284,9 @@ The Button component is themed via `--hs-button-*` CSS variables, which are prov
 - `--hs-button-backgroundColor`: Background color
 - `--hs-button-color`: Text color
 - `--hs-button-borderRadius`: Border radius
-- `--hs-button-border`: Border shorthand
+- `--hs-button-borderStyle`: Border style
+- `--hs-button-borderWidth`: Border width
+- `--hs-button-borderColor`: Border color
 - `--hs-button-fontSize`: Font size
 - `--hs-button-fontFamily`: Font family
 - `--hs-button-fontStyle`: Font style
@@ -294,17 +296,23 @@ The Button component is themed via `--hs-button-*` CSS variables, which are prov
 **Hover States (from theme):**
 - `--hs-button-backgroundColor-hover`: Hover background (falls back to base)
 - `--hs-button-color-hover`: Hover text color (falls back to base)
-- `--hs-button-border-hover`: Hover border (falls back to base)
+- `--hs-button-borderStyle-hover`: Hover border style (falls back to base)
+- `--hs-button-borderWidth-hover`: Hover border width (falls back to base)
+- `--hs-button-borderColor-hover`: Hover border color (falls back to base)
 
 **Focus States (from theme):**
 - `--hs-button-backgroundColor-focus`: Focus background (falls back to base)
 - `--hs-button-color-focus`: Focus text color (falls back to base)
-- `--hs-button-border-focus`: Focus border (falls back to base)
+- `--hs-button-borderStyle-focus`: Focus border style (falls back to base)
+- `--hs-button-borderWidth-focus`: Focus border width (falls back to base)
+- `--hs-button-borderColor-focus`: Focus border color (falls back to base)
 
 **Active States (from theme):**
 - `--hs-button-backgroundColor-active`: Active background (falls back to base)
 - `--hs-button-color-active`: Active text color (falls back to base)
-- `--hs-button-border-active`: Active border (falls back to base)
+- `--hs-button-borderStyle-active`: Active border style (falls back to base)
+- `--hs-button-borderWidth-active`: Active border width (falls back to base)
+- `--hs-button-borderColor-active`: Active border color (falls back to base)
 
 ### Hardcoded Layout Values
 

package/components/componentLibrary/Button/stories/ButtonDecorator.module.scss

@@ -3,7 +3,9 @@
   --hs-button-backgroundColor: #0066cc;
   --hs-button-color: #ffffff;
   --hs-button-borderRadius: 4px;
-  --hs-button-border: 1px solid transparent;
+  --hs-button-borderStyle: solid;
+  --hs-button-borderWidth: 1px;
+  --hs-button-borderColor: transparent;
   --hs-button-fontSize: 14px;
   --hs-button-fontFamily: inherit;
   --hs-button-fontStyle: normal;
@@ -11,11 +13,17 @@
   --hs-button-textDecoration: none;
   --hs-button-backgroundColor-hover: #0052a3;
   --hs-button-color-hover: #ffffff;
-  --hs-button-border-hover: 1px solid transparent;
+  --hs-button-borderStyle-hover: solid;
+  --hs-button-borderWidth-hover: 1px;
+  --hs-button-borderColor-hover: transparent;
   --hs-button-backgroundColor-focus: #0066cc;
   --hs-button-color-focus: #ffffff;
-  --hs-button-border-focus: 1px solid transparent;
+  --hs-button-borderStyle-focus: solid;
+  --hs-button-borderWidth-focus: 1px;
+  --hs-button-borderColor-focus: transparent;
   --hs-button-backgroundColor-active: #004080;
   --hs-button-color-active: #ffffff;
-  --hs-button-border-active: 1px solid transparent;
+  --hs-button-borderStyle-active: solid;
+  --hs-button-borderWidth-active: 1px;
+  --hs-button-borderColor-active: transparent;
 }

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

@@ -1,6 +1,6 @@
 .card {
   --hs-section-color: var(--hs-card-color); // overrides card-based typography settings
-  
+
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -8,5 +8,7 @@
   border-radius: var(--hs-card-borderRadius, 8px);
   background-color: var(--hs-card-backgroundColor, #ffffff);
   color: var(--hs-card-color, inherit);
-  border: var(--hs-card-border, none);
+  border-style: var(--hs-card-borderStyle, none);
+  border-width: var(--hs-card-borderWidth, 0);
+  border-color: var(--hs-card-borderColor, transparent);
 }

package/components/componentLibrary/Card/llm.txt

@@ -137,7 +137,9 @@ FeatureCardModule.fields = (
 - `--hs-card-borderRadius`: Border radius
 - `--hs-card-backgroundColor`: Background color
 - `--hs-card-color`: Text color
-- `--hs-card-border`: Border style
+- `--hs-card-borderStyle`: Border style (e.g. `solid`, `none`)
+- `--hs-card-borderWidth`: Border width (e.g. `1px`)
+- `--hs-card-borderColor`: Border color
 
 
 ## Accessibility

package/components/componentLibrary/Card/stories/CardDecorator.module.scss

@@ -4,27 +4,35 @@
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(255, 255, 255);
     --hs-card-color: rgb(28, 28, 31);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card2']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(249, 249, 249);
     --hs-card-color: rgb(28, 28, 31);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card3']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(28, 28, 31);
     --hs-card-color: rgb(255,255,255);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card4']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(36, 36, 36);
     --hs-card-color: rgb(255,255,255);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 }

package/components/componentLibrary/Form/PlaceholderForm.module.css

@@ -0,0 +1,74 @@
+.placeholderForm {
+  padding: 32px;
+  border-radius: var(--hs-form-borderRadius, 8px);
+  background-color: var(--hs-form-backgroundColor, rgba(255, 255, 255, 1));
+  border-style: var(--hs-form-borderStyle, solid);
+  border-width: var(--hs-form-borderWidth, 1px);
+  border-color: var(--hs-form-borderColor, #E0E0E0);
+}
+
+.field {
+  margin-block-end: 24px;
+}
+
+.field:last-of-type {
+  margin-block-end: 0;
+}
+
+.label {
+  display: block;
+  margin-block-end: 8px;
+  color: var(--hs-form-label-color, #141414);
+  font-size: var(--hs-form-label-fontSize, 16px);
+  font-family: var(--hs-form-label-fontFamily, inherit);
+  font-style: var(--hs-form-label-fontStyle, normal);
+  font-weight: var(--hs-form-label-fontWeight, 600);
+  text-decoration: var(--hs-form-label-textDecoration, none);
+}
+
+.input {
+  width: 100%;
+  padding-block: 12px;
+  padding-inline: 16px;
+  border-radius: var(--hs-form-field-borderRadius, 8px);
+  background-color: var(--hs-form-field-backgroundColor, rgba(249, 249, 249, 1));
+  border-style: var(--hs-form-field-borderStyle, solid);
+  border-width: var(--hs-form-field-borderWidth, 1px);
+  border-color: var(--hs-form-field-borderColor, #E0E0E0);
+  color: var(--hs-form-input-color, #141414);
+  font-size: var(--hs-form-input-fontSize, 16px);
+  font-family: var(--hs-form-input-fontFamily, inherit);
+  font-style: var(--hs-form-input-fontStyle, normal);
+  font-weight: var(--hs-form-input-fontWeight, 400);
+  text-decoration: var(--hs-form-input-textDecoration, none);
+  box-sizing: border-box;
+}
+
+.input::placeholder {
+  color: var(--hs-form-placeholder-color, rgba(113, 113, 113, 1));
+}
+
+.input:focus {
+  background-color: var(--hs-form-field-backgroundColor-focus, var(--hs-form-field-backgroundColor, rgba(249, 249, 249, 1)));
+  border-style: var(--hs-form-field-borderStyle-focus, var(--hs-form-field-borderStyle, solid));
+  border-width: var(--hs-form-field-borderWidth-focus, var(--hs-form-field-borderWidth, 1px));
+  border-color: var(--hs-form-field-borderColor-focus, var(--hs-form-field-borderColor, #E0E0E0));
+  outline: none;
+}
+
+.submitButton {
+  display: inline-block;
+  width: 100%;
+  margin-block-start: 24px;
+  padding-block: 12px;
+  padding-inline: 24px;
+  border-radius: var(--hs-form-borderRadius, 8px);
+  border: none;
+  background-color: var(--hs-form-input-color, #141414);
+  color: var(--hs-form-backgroundColor, #ffffff);
+  font-size: var(--hs-form-label-fontSize, 16px);
+  font-family: var(--hs-form-label-fontFamily, inherit);
+  font-weight: 600;
+  cursor: default;
+  text-align: center;
+}

package/components/componentLibrary/Form/PlaceholderForm.tsx

@@ -0,0 +1,31 @@
+import styles from './PlaceholderForm.module.css';
+
+const PlaceholderForm = () => {
+  return (
+    <div className={styles.placeholderForm}>
+      <form>
+        <div className={styles.field}>
+          <label className={styles.label}>First name</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label}>Last name</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label}>Email</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <button type="button" disabled className={styles.submitButton}>Get free widget</button>
+      </form>
+    </div>
+  );
+};
+
+export default PlaceholderForm;

package/components/componentLibrary/Form/StyleFields.tsx

@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
 const StyleFields = ({
   formVariantLabel = 'Form variant',
   formVariantName = 'formVariant',
-  formVariantDefault = { variant_name: 'form1' },
+  formVariantDefault = { variantName: 'form1' },
 }: StyleFieldsProps) => {
   return (
     <VariantSelectionField
@@ -12,6 +12,7 @@ const StyleFields = ({
       name={formVariantName}
       variantDefinitionName="form"
       default={formVariantDefault}
+      required={true}
     />
   );
 };

package/components/componentLibrary/Form/index.tsx

@@ -3,14 +3,16 @@ import FormIsland from './islands/FormIsland.js?island';
 // @ts-expect-error -- ?island not typed
 import LegacyFormIsland from './islands/LegacyFormIsland.js?island';
 import { FormProps } from './types.js';
-import { Island } from '@hubspot/cms-components';
+import { Island, useEditorVariableChecks } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
+import PlaceholderForm from './PlaceholderForm.js';
 
 const FormComponent = ({
   formField,
   formId,
   formVersion,
+  variant = 'form1',
   ...rest
 }: FormProps) => {
   const resolvedFormId = formField != null ? formField.form_id : formId;
@@ -18,8 +20,28 @@ const FormComponent = ({
     formField != null ? formField.embed_version : formVersion;
   const isV4 = resolvedVersion === 'v4';
   const FormModule = isV4 ? FormIsland : LegacyFormIsland;
+  const editorChecks = useEditorVariableChecks();
+  const hasFormData = !!resolvedFormId;
 
-  return <Island module={FormModule} formId={resolvedFormId} {...rest} />;
+  if (!hasFormData && !editorChecks.is_in_editor) return null;
+
+  if (!hasFormData) {
+    return (
+      <div data-form-variant={variant} data-button-variant="primaryButton">
+        <PlaceholderForm />
+      </div>
+    );
+  }
+
+  return (
+    <Island
+      module={FormModule}
+      data-form-variant={variant}
+      formId={resolvedFormId}
+      variant={variant}
+      {...rest}
+    />
+  );
 };
 
 type FormComponentType = typeof FormComponent & {

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

@@ -9,7 +9,7 @@ const getScriptSrc = (portalId: number, env: string) => {
   return `https://${host}/forms/embed/developer/${portalId}.js`;
 };
 
-const FormIsland = ({ formId }: FormProps) => {
+const FormIsland = ({ formId, variant }: FormProps) => {
   const portalId = getHubID();
   const resolvedEnv = getHSEnv();
 
@@ -49,6 +49,8 @@ const FormIsland = ({ formId }: FormProps) => {
       data-form-id={formId}
       data-portal-id={portalId}
       data-env={resolvedEnv}
+      data-form-variant={variant}
+      data-button-variant="primaryButton"
     />
   );
 };

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

@@ -1,7 +1,7 @@
 import { useEffect, useId } from 'react';
 import { FormProps } from '../types.js';
 import { getHubID, getHSEnv } from '@hubspot/cms-components';
-import styles from './legacyForm.module.css';
+import styles from './legacyForm.module.scss';
 
 declare global {
   interface Window {
@@ -23,7 +23,7 @@ const getScriptSrc = (env: string) => {
   return `//${host}/forms/embed/v2.js`;
 };
 
-const LegacyFormIsland = ({ formId }: FormProps) => {
+const LegacyFormIsland = ({ formId, variant }: FormProps) => {
   const portalId = getHubID();
   const resolvedEnv = getHSEnv();
   const rawId = useId();
@@ -72,7 +72,14 @@ const LegacyFormIsland = ({ formId }: FormProps) => {
     return null;
   }
 
-  return <div id={containerId} className={styles.legacyFormStyles} />;
+  return (
+    <div
+      id={containerId}
+      className={styles.legacyFormStyles}
+      data-form-variant={variant}
+      data-button-variant="primaryButton"
+    />
+  );
 };
 
 export default LegacyFormIsland;