@hubspot/cms-component-library 0.3.12 → 0.3.13

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

@@ -0,0 +1,270 @@
+.legacyFormStyles {
+  &#{&} {
+    /* Form container */
+    :global(.hs-form) {
+      padding: 32px;
+      border-color: var(--hs-form-borderColor, #e0e0e0);
+      border-radius: var(--hs-form-borderRadius, 8px);
+      border-style: var(--hs-form-borderStyle, solid);
+      border-width: var(--hs-form-borderWidth, 1px);
+      background: var(--hs-form-backgroundColor, transparent);
+
+      /* Form field spacing */
+      :global(.hs-form-field) {
+        margin-block-end: 24px;
+      }
+
+      /* Textarea */
+      :global(textarea) {
+        position: relative;
+        height: 160px;
+        border-radius: 3px;
+
+        &::-webkit-resizer {
+          display: none;
+        }
+      }
+
+      /* Textarea drag icon */
+      :global(.hs_multi_line_field .input) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          right: 8px;
+          bottom: 8px;
+          content: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A");
+          pointer-events: none;
+        }
+      }
+
+      /* Select dropdown - remove native appearance */
+      :global(select) {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+      }
+
+      /* Select dropdown icon */
+      :global(.hs-fieldtype-select .input) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+      }
+
+      /* Datepicker icon */
+      :global(.hs-dateinput) {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          top: 50%;
+          right: 16px;
+          content: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+      }
+
+      /* Placeholder text color */
+      :global(::-moz-placeholder) {
+        color: var(--hs-form-placeholder-color, #717171);
+      }
+
+      :global(::placeholder) {
+        color: var(--hs-form-placeholder-color, #717171);
+      }
+
+      /* Checkbox and radio list reset */
+      :global(.inputs-list) {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        :global(li) {
+          display: block;
+          margin-block-end: 16px;
+
+          &:last-of-type {
+            margin-block-end: 0;
+          }
+        }
+
+        :global(:is(input, span)) {
+          vertical-align: middle;
+        }
+      }
+
+      /* Help text / legend */
+      :global(legend) {
+        color: var(--hs-form-label-color, inherit);
+        margin-block-end: 8px;
+      }
+
+      /* Rich text within form */
+      :global(.hs-richtext) {
+        color: var(--hs-form-label-color, inherit);
+
+        :global(img) {
+          height: auto;
+          max-width: 100% !important;
+        }
+      }
+
+      /* Error state - input border */
+      :global(.hs-input.error) {
+        border-color: #ff0000;
+      }
+
+      /* Error messages */
+      :global(.hs-error-msg),
+      :global(.hs-error-msgs) {
+        color: #ff0000;
+        margin-block-start: 4px;
+      }
+
+      /* File upload and fieldset max width */
+      :global(.hs-form-field.hs-fieldtype-file .hs-input),
+      :global(fieldset) {
+        max-width: 100% !important;
+      }
+    }
+
+    :global(:is(.legal-consent-container )) {
+      font-size: 14px;
+      color: var(--hs-form-label-color, inherit);
+
+      :global(label){
+        font-size: 14px;
+        color: var(--hs-form-label-color, inherit);
+      }
+    }
+
+    /* Labels - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(label) {
+      display: block;
+      color: var(--hs-form-label-color, inherit);
+      font-family: var(--hs-form-label-fontFamily, inherit);
+      font-size: var(--hs-form-label-fontSize, 0.875rem);
+      font-style: var(--hs-form-label-fontStyle, normal);
+      font-weight: var(--hs-form-label-fontWeight, 600);
+      text-decoration: var(--hs-form-label-textDecoration, none);
+      margin-block-end: 8px;
+    }
+
+    /* Text inputs, selects, textareas - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='text']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='email']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='password']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='tel']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='number']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='search']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(select),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(textarea) {
+      width: 100% !important;
+      border-radius: var(--hs-form-field-borderRadius, 8px);
+      border: var(--hs-form-field-borderWidth, 1px) var(--hs-form-field-borderStyle, solid) var(--hs-form-field-borderColor, #e0e0e0);
+      background-color: var(--hs-form-field-backgroundColor, #fff);
+      color: var(--hs-form-input-color, inherit);
+      font-family: var(--hs-form-input-fontFamily, inherit);
+      font-size: var(--hs-form-input-fontSize, inherit);
+      font-style: var(--hs-form-input-fontStyle, normal);
+      font-weight: var(--hs-form-input-fontWeight, normal);
+      text-decoration: var(--hs-form-input-textDecoration, none);
+      padding-block: 12px;
+      padding-inline: 16px;
+    }
+
+    /* Checkbox and radio sizing + fill - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='checkbox']),
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='radio']) {
+      height: 24px;
+      width: 24px !important;
+      accent-color: var(--hs-form-input-color, inherit);
+      cursor: pointer;
+      margin-inline-end: 12px;
+    }
+
+    /* Submit button - targets both form types */
+    :global(:is(.hs-form, .hs-elevate-system-form)) :global(:is(.hs-button, input[type='submit'])) {
+      display: inline-block;
+      width: 100%;
+      border-color: var(--hs-button-borderColor, transparent);
+      border-radius: var(--hs-button-borderRadius, 8px);
+      border-style: var(--hs-button-borderStyle, solid);
+      border-width: var(--hs-button-borderWidth, 0);
+      background-color: var(--hs-button-backgroundColor, var(--hs-primary-color, #0f4490));
+      color: var(--hs-button-color, #ffffff);
+      cursor: pointer;
+      font-family: var(--hs-button-fontFamily, inherit);
+      font-size: var(--hs-button-fontSize, 1rem);
+      font-style: var(--hs-button-fontStyle, normal);
+      font-weight: var(--hs-button-fontWeight, 700);
+      text-decoration: var(--hs-button-textDecoration, none);
+      padding-block: 12px;
+      padding-inline: 24px;
+      text-align: center;
+      transition: all 0.15s linear;
+      white-space: normal !important;
+
+      &:hover,
+      &:focus {
+        border-color: var(--hs-button-borderColor-hover, transparent);
+        border-style: var(--hs-button-borderStyle-hover, solid);
+        border-width: var(--hs-button-borderWidth-hover, 0);
+        background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+        color: var(--hs-button-color-hover, #ffffff);
+        text-decoration: none;
+      }
+    }
+
+    /* International phone field layout */
+    :global(.hs-input.hs-fieldtype-intl-phone) {
+      display: flex;
+      width: 100% !important;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 8px;
+
+      > :global(input) {
+        flex: 1 0 calc(70% - 8px) !important;
+      }
+
+      > :global(select) {
+        flex: 1 0 30% !important;
+      }
+
+      @media (width <= 600px) {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        gap: 8px;
+
+        > :global(select),
+        > :global(input) {
+          min-width: 100%;
+          flex: 1 1 100%;
+        }
+
+        > :global(select) {
+          padding-inline: 16px;
+        }
+      }
+    }
+
+
+    :global(.grecaptcha-badge) {
+      margin-block: 0 !important;
+      margin-inline: auto !important;
+    }
+  }
+}

package/components/componentLibrary/Form/islands/v4Form.module.css

@@ -1,95 +1,97 @@
 .v4FormStyles {
-  --hsf-global__font-size: 16px;
-  --hsf-global__color: #1a0033;
+  --hsf-global__font-size: var(--hs-form-input-fontSize, 16px);
+  --hsf-global__color: var(--hs-form-input-color, inherit);
   --hsf-global-error__color: #ff0000;
 
-  --hsf-background__background-color: #ffe0f0;
+  --hsf-background__background-color: var(--hs-form-backgroundColor, transparent);
   --hsf-background__padding: 32px;
-  --hsf-background__border-style: solid;
-  --hsf-background__border-color: #ff00ff;
-  --hsf-background__border-radius: 8px;
-  --hsf-background__border-width: 4px;
+  --hsf-background__border-style: var(--hs-form-borderStyle, solid);
+  --hsf-background__border-color: var(--hs-form-borderColor, #e0e0e0);
+  --hsf-background__border-radius: var(--hs-form-borderRadius, 8px);
+  --hsf-background__border-width: var(--hs-form-borderWidth, 1px);
 
   --hsf-heading__font-family: inherit;
-  --hsf-heading__color: #9900cc;
-  --hsf-heading__text-shadow: 1px 1px 2px #ff00ff;
+  --hsf-heading__color: inherit;
+  --hsf-heading__text-shadow: none;
   --hsf-richtext__font-family: inherit;
   --hsf-richtext__font-size: 14px;
-  --hsf-richtext__color: #9900cc;
+  --hsf-richtext__color: inherit;
 
-  --hsf-field-label__font-family: inherit;
-  --hsf-field-label__font-size: 0.875rem;
-  --hsf-field-label__color: #cc0066;
+  --hsf-field-label__font-family: var(--hs-form-label-fontFamily, inherit);
+  --hsf-field-label__font-size: var(--hs-form-label-fontSize, 0.875rem);
+  --hsf-field-label__color: var(--hs-form-label-color, inherit);
   --hsf-field-label-requiredindicator__color: #ff0000;
   --hsf-field-description__font-family: inherit;
-  --hsf-field-description__color: #6600cc;
+  --hsf-field-description__color: inherit;
   --hsf-field-footer__font-family: inherit;
-  --hsf-field-footer__color: #6600cc;
+  --hsf-field-footer__color: inherit;
   --hsf-erroralert__font-family: inherit;
   --hsf-erroralert__color: #ff0000;
 
-  --hsf-field-input__font-family: inherit;
-  --hsf-field-input__background-color: #e0ffff;
-  --hsf-field-input__placeholder-color: #ff6600;
-  --hsf-field-input__border-color: #00ccff;
-  --hsf-field-input__border-width: 3px;
-  --hsf-field-input__border-style: solid;
-  --hsf-field-input__border-radius: 6px;
+  --hsf-field-input__font-family: var(--hs-form-input-fontFamily, inherit);
+  --hsf-field-input__background-color: var(--hs-form-field-backgroundColor, #fff);
+  --hsf-field-input__placeholder-color: var(--hs-form-placeholder-color, #717171);
+  --hsf-field-input__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-input__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-input__border-style: var(--hs-form-field-borderStyle, solid);
+  --hsf-field-input__border-radius: var(--hs-form-field-borderRadius, 8px);
   --hsf-field-input__padding: 12px 16px;
-  --hsf-field-input__color: #003300;
+  --hsf-field-input__color: var(--hs-form-input-color, inherit);
 
-  --hsf-field-textarea__font-family: inherit;
-  --hsf-field-textarea__color: #003300;
-  --hsf-field-textarea__background-color: #e0ffff;
-  --hsf-field-textarea__border-color: #00ccff;
-  --hsf-field-textarea__border-style: solid;
-  --hsf-field-textarea__border-radius: 6px;
+  --hsf-field-textarea__font-family: var(--hs-form-input-fontFamily, inherit);
+  --hsf-field-textarea__color: var(--hs-form-input-color, inherit);
+  --hsf-field-textarea__background-color: var(--hs-form-field-backgroundColor, #fff);
+  --hsf-field-textarea__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-textarea__border-style: var(--hs-form-field-borderStyle, solid);
+  --hsf-field-textarea__border-radius: var(--hs-form-field-borderRadius, 8px);
   --hsf-field-textarea__padding: 12px 16px;
 
   --hsf-field-checkbox__padding: 12px;
   --hsf-field-checkbox__background-color: #ffffff;
-  --hsf-field-checkbox__color: #00cc00;
-  --hsf-field-checkbox__border-color: #00ccff;
-  --hsf-field-checkbox__border-width: 2px;
-  --hsf-field-checkbox__border-style: solid;
+  --hsf-field-checkbox__color: var(--hs-form-input-color, inherit);
+  --hsf-field-checkbox__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-checkbox__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-checkbox__border-style: var(--hs-form-field-borderStyle, solid);
 
   --hsf-field-radio__padding: 12px;
   --hsf-field-radio__background-color: #ffffff;
-  --hsf-field-radio__color: #00cc00;
-  --hsf-field-radio__border-color: #00ccff;
-  --hsf-field-radio__border-width: 2px;
-  --hsf-field-radio__border-style: solid;
+  --hsf-field-radio__color: var(--hs-form-input-color, inherit);
+  --hsf-field-radio__border-color: var(--hs-form-field-borderColor, #e0e0e0);
+  --hsf-field-radio__border-width: var(--hs-form-field-borderWidth, 1px);
+  --hsf-field-radio__border-style: var(--hs-form-field-borderStyle, solid);
 
   --hsf-row__vertical-spacing: 24px;
   --hsf-row__horizontal-spacing: 16px;
   --hsf-module__vertical-spacing: 16px;
 
   --hsf-button__width: 100%;
-  --hsf-button__font-family: inherit;
-  --hsf-button__font-size: 1rem;
-  --hsf-button__font-weight: 700;
-  --hsf-button__color: #ffffff;
-  --hsf-button__background-color: #ff6600;
+  --hsf-button__font-family: var(--hs-button-fontFamily, inherit);
+  --hsf-button__font-size: var(--hs-button-fontSize, 1rem);
+  --hsf-button__font-weight: var(--hs-button-fontWeight, 700);
+  --hsf-button__font-style: var(--hs-button-fontStyle, normal);
+  --hsf-button__text-decoration: var(--hs-button-textDecoration, none);
+  --hsf-button__color: var(--hs-button-color, #ffffff);
+  --hsf-button__background-color: var(--hs-button-backgroundColor, var(--hs-primary-color, #0f4490));
   --hsf-button__background-image: none;
-  --hsf-button__border-radius: 6px;
-  --hsf-button__border-width: 3px;
-  --hsf-button__border-style: solid;
-  --hsf-button__border-color: #ff6600;
+  --hsf-button__border-radius: var(--hs-button-borderRadius, 8px);
+  --hsf-button__border-width: var(--hs-button-borderWidth, 0);
+  --hsf-button__border-style: var(--hs-button-borderStyle, solid);
+  --hsf-button__border-color: var(--hs-button-borderColor, transparent);
   --hsf-button__padding: 12px 24px;
-  --hsf-button__box-shadow: 0 4px 8px rgba(255, 102, 0, 0.4);
-  --hsf-button--hover__color: #ffffff;
-  --hsf-button--hover__background-color: #cc5200;
-  --hsf-button--hover__border-color: #cc5200;
-  --hsf-button--focus__color: #ffffff;
-  --hsf-button--focus__background-color: #cc5200;
-  --hsf-button--focus__border-color: #ff00ff;
+  --hsf-button__box-shadow: none;
+  --hsf-button--hover__color: var(--hs-button-color-hover, #ffffff);
+  --hsf-button--hover__background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+  --hsf-button--hover__border-color: var(--hs-button-borderColor-hover, transparent);
+  --hsf-button--focus__color: var(--hs-button-color-hover, #ffffff);
+  --hsf-button--focus__background-color: var(--hs-button-backgroundColor-hover, var(--hs-primary-color, #0f4490));
+  --hsf-button--focus__border-color: var(--hs-button-borderColor-hover, transparent);
 
   --hsf-progressbar__font-family: inherit;
   --hsf-progressbar__font-size: 14px;
   --hsf-progressbar__color: #ffffff;
-  --hsf-progressbar__background-color: #00cc00;
-  --hsf-progressbar__background: linear-gradient(90deg, #00cc00, #00ffcc);
-  --hsf-progressbar__border-color: #009900;
+  --hsf-progressbar__background-color: var(--hs-primary-color, #0f4490);
+  --hsf-progressbar__background: var(--hs-primary-color, #0f4490);
+  --hsf-progressbar__border-color: transparent;
   --hsf-progressbar__border-style: solid;
-  --hsf-progressbar__border-width: 2px;
+  --hsf-progressbar__border-width: 0;
 }

package/components/componentLibrary/Form/types.ts

@@ -1,6 +1,11 @@
 import { FormFieldDefaults } from '@hubspot/cms-components/fields';
 
-export type FormProps = FormPropsWithField | FormPropsWithoutField;
+
+export type FormBaseProps = {
+  variant?: string;
+};
+
+export type FormProps = (FormPropsWithField | FormPropsWithoutField) & FormBaseProps;
 
 export type FormPropsWithoutField = {
   formField?: never;
@@ -23,5 +28,5 @@ export type ContentFieldsProps = {
 export type StyleFieldsProps = {
   formVariantLabel?: string;
   formVariantName?: string;
-  formVariantDefault?: { variant_name: string };
+  formVariantDefault?: { variantName: string, variant_name: string};
 };

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

@@ -3,7 +3,9 @@
   max-inline-size: max-content;
   max-block-size: max-content;
   border-radius: var(--hscl-image-borderRadius, 0);
-  border: var(--hscl-image-border);
+  border-style: var(--hscl-image-borderStyle);
+  border-width: var(--hscl-image-borderWidth);
+  border-color: var(--hscl-image-borderColor);
   box-shadow: var(--hscl-image-boxShadow);
 }
 

package/components/componentLibrary/Image/llm.txt

@@ -174,7 +174,9 @@ The Image component uses CSS variables for theming and customization:
 **Base Styles:**
 - `--hscl-image-display`: Display property (default: inline-block)
 - `--hscl-image-borderRadius`: Border radius (default: 0)
-- `--hscl-image-border`: Border styling (no default)
+- `--hscl-image-borderStyle`: Border style (no default)
+- `--hscl-image-borderWidth`: Border width (no default)
+- `--hscl-image-borderColor`: Border color (no default)
 - `--hscl-image-boxShadow`: Box shadow (no default)
 
 ### Responsive Behavior

package/components/componentLibrary/Image/stories/ImageDecorator.module.scss

@@ -2,6 +2,8 @@
   padding: 20px;
   --hscl-image-display: inline-block;
   --hscl-image-borderRadius: 0;
-  --hscl-image-border: none;
+  --hscl-image-borderStyle: none;
+  --hscl-image-borderWidth: 0;
+  --hscl-image-borderColor: transparent;
   --hscl-image-boxShadow: none;
 }

package/components/componentLibrary/Text/ContentFields.tsx

@@ -7,6 +7,7 @@ import type { ContentFieldsProps } from './types.js';
 // To do: These are placeholders - we can refine and add more after some UX feedback and further discussion
 
 const headingEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
+  'heading',
   'alignment',
   'standard_emphasis',
   'link',