@hubspot/cms-component-library 0.3.7 → 0.3.9

package/components/componentLibrary/Card/stories/Card.stories.tsx

@@ -43,8 +43,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    variant: 'elevated',
-    borderRadius: 8,
+    variant: 'cardStyle1',
   },
   render: args => (
     <Card {...args}>
@@ -55,34 +54,43 @@ export const Default: Story = {
   ),
 };
 
-export const BorderRadius: Story = {
-  name: 'Border Radius Options',
+export const Variants: Story = {
+  name: 'Card Variants',
   render: () => (
     <SBContainer flex direction="column" gap="large">
       <SBContainer addBackground>
-        <h4>No Radius (0px)</h4>
-        <Card borderRadius={0}>
-          <CardHeading>Sharp Corners</CardHeading>
+        <h4>Card Style 1 (Light)</h4>
+        <Card variant="cardStyle1">
+          <CardHeading>Card Style 1</CardHeading>
           <CardDivider />
-          <CardContent>This card has no border radius.</CardContent>
+          <CardContent>Light background with dark text.</CardContent>
         </Card>
       </SBContainer>
 
       <SBContainer addBackground>
-        <h4>Default Radius (8px)</h4>
-        <Card borderRadius={8}>
-          <CardHeading>Default Corners</CardHeading>
+        <h4>Card Style 2 (Subtle)</h4>
+        <Card variant="cardStyle2">
+          <CardHeading>Card Style 2</CardHeading>
           <CardDivider />
-          <CardContent>This card has the default border radius.</CardContent>
+          <CardContent>Subtle background with dark text.</CardContent>
         </Card>
       </SBContainer>
 
       <SBContainer addBackground>
-        <h4>Large Radius (16px)</h4>
-        <Card borderRadius={16}>
-          <CardHeading>Large Corners</CardHeading>
+        <h4>Card Style 3 (Dark)</h4>
+        <Card variant="cardStyle3">
+          <CardHeading>Card Style 3</CardHeading>
           <CardDivider />
-          <CardContent>This card has large rounded corners.</CardContent>
+          <CardContent>Dark background with light text.</CardContent>
+        </Card>
+      </SBContainer>
+
+      <SBContainer addBackground>
+        <h4>Card Style 4 (Darker)</h4>
+        <Card variant="cardStyle4">
+          <CardHeading>Card Style 4</CardHeading>
+          <CardDivider />
+          <CardContent>Darker background with light text.</CardContent>
         </Card>
       </SBContainer>
     </SBContainer>
@@ -141,7 +149,7 @@ export const ComplexContent: Story = {
     <SBContainer flex direction="column" gap="large">
       <SBContainer addBackground>
         <h4>Card with Rich Content</h4>
-        <Card borderRadius={12}>
+        <Card>
           <CardHeading>Product Launch Announcement</CardHeading>
           <CardDivider />
           <div style={{ margin: 0 }}>
@@ -163,7 +171,7 @@ export const ComplexContent: Story = {
 
       <SBContainer addBackground>
         <h4>Card with Multiple Elements</h4>
-        <Card borderRadius={8}>
+        <Card>
           <CardHeading>Multi-Section Card</CardHeading>
           <CardDivider />
           <div style={{ margin: 0 }}>
@@ -223,7 +231,7 @@ export const InteractionStates: Story = {
           Card wrapped in a link becomes clickable and shows hover/focus states
         </p>
         <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
-          <Card borderRadius={8}>
+          <Card>
             <CardHeading>Clickable Feature Card</CardHeading>
             <CardDivider />
             <CardContent>
@@ -243,7 +251,7 @@ export const InteractionStates: Story = {
         </p>
         <SBFocusWrapper>
           <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
-            <Card borderRadius={8}>
+            <Card>
               <CardHeading>Focused Card</CardHeading>
               <CardDivider />
               <CardContent>

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

@@ -1,7 +1,30 @@
 .cardContainer {
-  /* Base container for stories */
-  /* Default elevated variant always applied */
-  --hscl-card-backgroundColor: #ffffff;
-  --hscl-card-boxShadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --hscl-card-boxShadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
+  /* card Variant Styles */
+  :global([data-card-variant='cardStyle1']) {
+    --hs-card-borderRadius: 10px;
+    --hs-card-backgroundColor: rgb(255, 255, 255);
+    --hs-card-color: rgb(28, 28, 31);
+    --hs-card-border: 1px solid #e0e0e0;
+  }
+
+  :global([data-card-variant='cardStyle2']) {
+    --hs-card-borderRadius: 10px;
+    --hs-card-backgroundColor: rgb(249, 249, 249);
+    --hs-card-color: rgb(28, 28, 31);
+    --hs-card-border: 1px solid #e0e0e0;
+  }
+
+  :global([data-card-variant='cardStyle3']) {
+    --hs-card-borderRadius: 10px;
+    --hs-card-backgroundColor: rgb(28, 28, 31);
+    --hs-card-color: rgb(255,255,255);
+    --hs-card-border: 1px solid #e0e0e0;
+  }
+
+  :global([data-card-variant='cardStyle4']) {
+    --hs-card-borderRadius: 10px;
+    --hs-card-backgroundColor: rgb(36, 36, 36);
+    --hs-card-color: rgb(255,255,255);
+    --hs-card-border: 1px solid #e0e0e0;
+  }
 }

package/components/componentLibrary/Card/types.ts

@@ -1,18 +1,21 @@
-export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardVariant =
+  | 'cardStyle1'
+  | 'cardStyle2'
+  | 'cardStyle3'
+  | 'cardStyle4';
 
 export type CardAs = 'div' | 'article' | 'section';
 
 export type CardProps = {
   variant?: CardVariant;
   as?: CardAs;
-  borderRadius?: number;
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
 };
 
 export type StyleFieldsProps = {
-  variantLabel?: string;
-  variantName?: string;
-  variantDefault?: CardVariant;
+  cardVariantLabel?: string;
+  cardVariantName?: string;
+  cardVariantDefault?: { variantName?: string, variant_name?: string };
 };

package/components/componentLibrary/Form/StyleFields.tsx

@@ -0,0 +1,19 @@
+import { VariantSelectionField } from '@hubspot/cms-components/fields';
+import { StyleFieldsProps } from './types.js';
+
+const StyleFields = ({
+  formVariantLabel = 'Form variant',
+  formVariantName = 'formVariant',
+  formVariantDefault = { variant_name: 'primaryForm' },
+}: StyleFieldsProps) => {
+  return (
+    <VariantSelectionField
+      label={formVariantLabel}
+      name={formVariantName}
+      variantDefinitionName="form"
+      default={formVariantDefault}
+    />
+  );
+};
+
+export default StyleFields;

package/components/componentLibrary/Form/index.tsx

@@ -5,6 +5,7 @@ import LegacyFormIsland from './islands/LegacyFormIsland.js?island';
 import { FormProps } from './types.js';
 import { Island } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
+import StyleFields from './StyleFields.js';
 
 const FormComponent = ({
   formField,
@@ -13,16 +14,21 @@ const FormComponent = ({
   ...rest
 }: FormProps) => {
   const resolvedFormId = formField != null ? formField.form_id : formId;
-  const FormModule = formVersion === 'v4' ? FormIsland : LegacyFormIsland;
+  const resolvedVersion =
+    formField != null ? formField.embed_version : formVersion;
+  const isV4 = resolvedVersion === 'v4';
+  const FormModule = isV4 ? FormIsland : LegacyFormIsland;
 
   return <Island module={FormModule} formId={resolvedFormId} {...rest} />;
 };
 
 type FormComponentType = typeof FormComponent & {
   ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
 };
 
 const Form = FormComponent as FormComponentType;
 Form.ContentFields = ContentFields;
+Form.StyleFields = StyleFields;
 
 export default Form;

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

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
 import { FormProps } from '../types.js';
 import { getHubID, getHSEnv } from '@hubspot/cms-components';
+import cx from '../../utils/classname.js';
+import styles from './v4Form.module.css';
 
 const getScriptSrc = (portalId: number, env: string) => {
   const host = env === 'qa' ? 'js.hsformsqa.net' : 'js.hsforms.net';
@@ -43,7 +45,7 @@ const FormIsland = ({ formId }: FormProps) => {
 
   return (
     <div
-      className="hs-form-frame"
+      className={cx('hs-form-html', styles.v4FormStyles)}
       data-form-id={formId}
       data-portal-id={portalId}
       data-env={resolvedEnv}

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

@@ -1,6 +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';
 
 declare global {
   interface Window {
@@ -71,7 +72,7 @@ const LegacyFormIsland = ({ formId }: FormProps) => {
     return null;
   }
 
-  return <div id={containerId} />;
+  return <div id={containerId} className={styles.legacyFormStyles} />;
 };
 
 export default LegacyFormIsland;

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

@@ -0,0 +1,251 @@
+.legacyFormStyles {
+  /* Form container */
+  :global(.hs-form) {
+    padding: 32px;
+    border-color: #ff00ff;
+    border-radius: 8px;
+    border-style: solid;
+    border-width: 4px;
+    background: #ffe0f0;
+
+    /* 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: #ff6600;
+    }
+
+    :global(::placeholder) {
+      color: #ff6600;
+    }
+
+    /* 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: #ff6600;
+      margin-block-end: 8px;
+    }
+
+    /* Rich text within form */
+    :global(.hs-richtext) {
+      color: #9900cc;
+
+      :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;
+    }
+  }
+
+  /* Labels - targets both form types */
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(label) {
+    display: block;
+    color: #cc0066;
+    font-family: sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    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: 6px;
+    border-top: 3px solid #00ccff;
+    border-right: 3px solid #00ccff;
+    border-bottom: 3px solid #00ccff;
+    border-left: 3px solid #00ccff;
+    background-color: #e0ffff;
+    color: #003300;
+    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: #00cc00;
+    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: #ff6600;
+    border-radius: 6px;
+    border-style: solid;
+    border-width: 3px;
+    background-color: #ff6600;
+    color: #ffffff;
+    cursor: pointer;
+    font-family: sans-serif;
+    font-size: 1rem;
+    font-weight: 600;
+    padding-block: 12px;
+    padding-inline: 24px;
+    text-align: center;
+    text-decoration: none;
+    transition: all 0.15s linear;
+    white-space: normal !important;
+
+    &:hover,
+    &:focus {
+      border-color: #cc5200;
+      background-color: #cc5200;
+      color: #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

@@ -0,0 +1,95 @@
+.v4FormStyles {
+  --hsf-global__font-size: 16px;
+  --hsf-global__color: #1a0033;
+  --hsf-global-error__color: #ff0000;
+
+  --hsf-background__background-color: #ffe0f0;
+  --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-heading__font-family: inherit;
+  --hsf-heading__color: #9900cc;
+  --hsf-heading__text-shadow: 1px 1px 2px #ff00ff;
+  --hsf-richtext__font-family: inherit;
+  --hsf-richtext__font-size: 14px;
+  --hsf-richtext__color: #9900cc;
+
+  --hsf-field-label__font-family: inherit;
+  --hsf-field-label__font-size: 0.875rem;
+  --hsf-field-label__color: #cc0066;
+  --hsf-field-label-requiredindicator__color: #ff0000;
+  --hsf-field-description__font-family: inherit;
+  --hsf-field-description__color: #6600cc;
+  --hsf-field-footer__font-family: inherit;
+  --hsf-field-footer__color: #6600cc;
+  --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__padding: 12px 16px;
+  --hsf-field-input__color: #003300;
+
+  --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__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-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-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__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__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-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__border-style: solid;
+  --hsf-progressbar__border-width: 2px;
+}