@hubspot/cms-component-library 0.3.0 → 0.3.2

package/components/componentLibrary/Button/index.tsx

@@ -39,7 +39,7 @@ const ButtonComponent = ({
     const icon = (
       <Icon
         fieldPath={iconFieldPath}
-        height={iconSize}
+        size={iconSize}
         className={styles.icon}
         showIcon={showIcon}
         purpose={iconPurpose}

package/components/componentLibrary/Divider/StyleFields.tsx

@@ -1,25 +1,83 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import {
+  AlignmentField,
+  ChoiceField,
+  ColorField,
+  NumberField,
+} from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
-  borderStyleLabel = 'Border style',
+  hideFields = [],
+  borderStyleLabel = 'Line type',
   borderStyleName = 'borderStyle',
   borderStyleDefault = 'solid',
+  thicknessLabel = 'Line thickness',
+  thicknessName = 'thickness',
+  thicknessDefault = 1,
+  lengthLabel = 'Line length',
+  lengthName = 'length',
+  lengthDefault = 100,
+  alignmentLabel = 'Line alignment',
+  alignmentName = 'alignment',
+  alignmentDefault = { horizontal_align: 'CENTER', vertical_align: 'MIDDLE' },
+  alignmentDirection = 'HORIZONTAL',
+  colorLabel = 'Line color',
+  colorName = 'color',
+  colorDefault = { color: '#000000', opacity: 100 },
 }: StyleFieldsProps) => {
   return (
     <>
-      <ChoiceField
-        label={borderStyleLabel}
-        name={borderStyleName}
-        required={true}
-        choices={[
-          ['solid', 'Solid'],
-          ['dotted', 'Dotted'],
-          ['dashed', 'Dashed'],
-          ['double', 'Double'],
-        ]}
-        default={borderStyleDefault}
-      />
+      {!hideFields.includes('borderStyle') && (
+        <ChoiceField
+          label={borderStyleLabel}
+          name={borderStyleName}
+          required={true}
+          choices={[
+            ['solid', 'Solid'],
+            ['dotted', 'Dotted'],
+            ['dashed', 'Dashed'],
+            ['double', 'Double'],
+          ]}
+          default={borderStyleDefault}
+        />
+      )}
+      {!hideFields.includes('color') && (
+        <ColorField
+          label={colorLabel}
+          name={colorName}
+          default={colorDefault}
+          showOpacity={false}
+        />
+      )}
+      {!hideFields.includes('thickness') && (
+        <NumberField
+          label={thicknessLabel}
+          name={thicknessName}
+          required={true}
+          suffix="px"
+          min={1}
+          default={thicknessDefault}
+        />
+      )}
+      {!hideFields.includes('length') && (
+        <NumberField
+          label={lengthLabel}
+          name={lengthName}
+          required={true}
+          suffix="%"
+          min={1}
+          max={100}
+          default={lengthDefault}
+        />
+      )}
+      {!hideFields.includes('alignment') && (
+        <AlignmentField
+          label={alignmentLabel}
+          name={alignmentName}
+          alignmentDirection={alignmentDirection}
+          default={alignmentDefault}
+        />
+      )}
     </>
   );
 };

package/components/componentLibrary/Divider/index.tsx

@@ -1,30 +1,46 @@
 import styles from './index.module.scss';
 import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
-import { DividerAlignment, DividerProps } from './types.js';
-import ContentFields from './ContentFields.js';
+import { DividerOrientation, DividerProps } from './types.js';
 import StyleFields from './StyleFields.js';
 
-const getAlignmentCSSVar = (alignment: DividerAlignment) => {
-  switch (alignment) {
-    case 'start':
-      return `flex-${alignment}`;
-    case 'end':
-      return `flex-${alignment}`;
-    case 'center':
-      return alignment;
-    default:
-      return 'stretch';
+const getAlignmentCSSVar = (
+  alignment: DividerProps['alignment'],
+  orientation: DividerOrientation
+): string => {
+  if (!alignment) return 'stretch';
+
+  if (orientation === 'horizontal') {
+    switch (alignment.horizontal_align) {
+      case 'LEFT':
+        return 'flex-start';
+      case 'CENTER':
+        return 'center';
+      case 'RIGHT':
+        return 'flex-end';
+    }
+  } else {
+    switch (alignment.vertical_align) {
+      case 'TOP':
+        return 'flex-start';
+      case 'MIDDLE':
+        return 'center';
+      case 'BOTTOM':
+        return 'flex-end';
+    }
   }
+
+  return 'stretch';
 };
 
 const DividerComponent = ({
   orientation = 'horizontal',
-  alignment = 'stretch',
+  alignment,
   spacing,
   borderStyle = 'solid',
   length = 100,
   thickness = 1,
+  color,
   variant = 'primary', // !todo: not used atm but keeping for when we need to add variant system.
   className = '',
   style = {},
@@ -37,8 +53,9 @@ const DividerComponent = ({
   const combinedClasses = cx(defaultClasses, className);
 
   const cssVariables: CSSVariables = {
-    '--hscl-divider-alignment': getAlignmentCSSVar(alignment),
+    '--hscl-divider-alignment': getAlignmentCSSVar(alignment, orientation),
     '--hscl-divider-borderStyle': borderStyle,
+    '--hscl-divider-borderColor': color?.rgba ?? color?.color,
     [`--hscl-divider-margin${
       orientation === 'horizontal' ? 'Block' : 'Inline'
     }`]: spacing,
@@ -63,12 +80,10 @@ const DividerComponent = ({
 
 // Create compound component with proper typing
 type DividerComponentType = typeof DividerComponent & {
-  ContentFields: typeof ContentFields;
   StyleFields: typeof StyleFields;
 };
 
 const Divider = DividerComponent as DividerComponentType;
-Divider.ContentFields = ContentFields;
 Divider.StyleFields = StyleFields;
 
 export default Divider;

package/components/componentLibrary/Divider/llm.txt

@@ -9,7 +9,7 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 ## Purpose
 
-The Divider component provides a consistent way to create visual separators in HubSpot CMS projects. It renders semantic HTML elements (`<hr>` for horizontal, `<div role="separator">` for vertical) with flexible styling options. Developers should use this component when they need to visually separate content sections, whether between stacked content (horizontal) or side-by-side content (vertical). The component supports customizable border styles, thickness, length, alignment, and spacing through props and CSS variables.
+The Divider component provides a consistent way to create visual separators in HubSpot CMS projects. It renders semantic HTML elements (`<hr>` for horizontal, `<div role="separator">` for vertical) with flexible styling options. Developers should use this component when they need to visually separate content sections, whether between stacked content (horizontal) or side-by-side content (vertical). The component supports customizable line type, thickness, length, alignment, color, and spacing through props and CSS variables.
 
 ## Component Structure
 
@@ -17,7 +17,6 @@ The Divider component provides a consistent way to create visual separators in H
 Divider/
 ├── index.tsx                     # Main component with render logic
 ├── types.ts                      # TypeScript type definitions
-├── ContentFields.tsx             # HubSpot field definitions for content
 ├── StyleFields.tsx               # HubSpot field definitions for styling
 ├── index.module.scss             # CSS module with design tokens
 └── stories/
@@ -35,15 +34,19 @@ Divider/
 **Props:**
 ```tsx
 {
-  orientation?: 'horizontal' | 'vertical';               // Divider orientation (default: 'horizontal')
-  alignment?: 'stretch' | 'start' | 'center' | 'end';    // Alignment within parent container (default: 'stretch')
-  spacing?: string;                                      // Margin spacing in pixel format (e.g., '16px', '24px')
-  borderStyle?: 'solid' | 'dotted' | 'dashed' | 'double'; // Border line style (default: 'solid')
-  length?: number;                                       // Length as percentage (1-100) of available space (default: 100)
-  thickness?: number;                                    // Border thickness in pixels (default: 1)
-  variant?: 'primary' | 'secondary' | 'tertiary';        // Visual style variant (default: 'primary')
-  className?: string;                                    // Additional CSS classes
-  style?: React.CSSProperties;                           // Inline styles (including CSS variables)
+  orientation?: 'horizontal' | 'vertical';                     // Divider orientation (default: 'horizontal')
+  alignment?: {                                                 // Alignment within parent container
+    horizontal_align?: 'LEFT' | 'CENTER' | 'RIGHT';
+    vertical_align?: 'TOP' | 'MIDDLE' | 'BOTTOM';
+  };
+  spacing?: string;                                            // Margin spacing in pixel format (e.g., '16px', '24px')
+  borderStyle?: 'solid' | 'dotted' | 'dashed' | 'double';     // Border line style (default: 'solid')
+  length?: number;                                             // Length as percentage (1-100) of available space (default: 100)
+  thickness?: number;                                          // Border thickness in pixels (default: 1)
+  color?: { rgba?: string; color?: string; opacity?: number }; // Line color (from ColorField or rgba value)
+  variant?: 'primary' | 'secondary' | 'tertiary';             // Visual style variant (default: 'primary')
+  className?: string;                                          // Additional CSS classes
+  style?: React.CSSProperties;                                 // Inline styles (including CSS variables)
 }
 ```
 
@@ -52,10 +55,18 @@ Divider/
 - `orientation="vertical"`: Renders as `<div role="separator">` with left border
 
 **Alignment Behavior:**
-- `stretch` (default): Divider uses full available space
-- `start`: Aligns to the start of the container (left for horizontal, top for vertical)
-- `center`: Centers within the container
-- `end`: Aligns to the end of the container (right for horizontal, bottom for vertical)
+
+When no `alignment` is passed, the divider stretches to fill the available space (default).
+
+For horizontal dividers, use `horizontal_align`:
+- `'LEFT'`: Aligns to the left (`flex-start`)
+- `'CENTER'`: Centers within the container
+- `'RIGHT'`: Aligns to the right (`flex-end`)
+
+For vertical dividers, use `vertical_align`:
+- `'TOP'`: Aligns to the top (`flex-start`)
+- `'MIDDLE'`: Centers vertically
+- `'BOTTOM'`: Aligns to the bottom (`flex-end`)
 
 ## Usage Examples
 
@@ -64,7 +75,7 @@ Divider/
 ```tsx
 import Divider from '@hubspot/cms-component-library/Divider';
 
-// Default horizontal divider
+// Default horizontal divider (full width, stretch)
 <Divider />
 ```
 
@@ -78,66 +89,41 @@ import Divider from '@hubspot/cms-component-library/Divider';
 ### Horizontal Divider with Custom Spacing
 
 ```tsx
-// Divider with more spacing above and below
-<Divider
-  orientation="horizontal"
-  spacing="32px"
-/>
+<Divider spacing="32px" />
 ```
 
-### Vertical Divider with Custom Height
+### Short Centered Divider
 
 ```tsx
-// Vertical divider at 80% height
-<Divider
-  orientation="vertical"
-  length={80}
-  alignment="center"
-/>
+<Divider length={50} alignment={{ horizontal_align: 'CENTER' }} spacing="16px" />
 ```
 
-### Customized Divider with Dashed Style
+### Customized Divider
 
 ```tsx
 <Divider
-  orientation="horizontal"
   borderStyle="dashed"
   thickness={2}
   length={75}
-  alignment="center"
+  alignment={{ horizontal_align: 'CENTER' }}
   spacing="24px"
 />
 ```
 
-### Thick Divider for Emphasis
-
-```tsx
-<Divider
-  orientation="horizontal"
-  thickness={4}
-  borderStyle="solid"
-/>
-```
-
-### Dotted Divider
+### Colored Divider
 
 ```tsx
-<Divider
-  orientation="horizontal"
-  borderStyle="dotted"
-  thickness={2}
-/>
+// color.rgba is populated by the ColorField in a module context
+<Divider color={{ rgba: 'rgba(59, 130, 246, 1)' }} thickness={2} />
 ```
 
-### Short Centered Divider
+### Vertical Divider with Alignment
 
 ```tsx
-// Decorative short divider, centered
 <Divider
-  orientation="horizontal"
+  orientation="vertical"
   length={50}
-  alignment="center"
-  spacing="16px"
+  alignment={{ vertical_align: 'MIDDLE' }}
 />
 ```
 
@@ -158,51 +144,53 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 ### Field Definitions
 
-The Divider component provides field definitions for easy integration with HubSpot CMS modules.
+All Divider fields are style fields. The Divider component exposes only `StyleFields` — there are no content fields.
 
-#### ContentFields
+#### StyleFields
 
-Configurable props for divider appearance:
+All configurable style props for the divider:
 
 ```tsx
-<Divider.ContentFields
-  orientationLabel="Divider Orientation"
-  orientationName="orientation"
-  orientationDefault="horizontal"
-  alignmentLabel="Divider Alignment"
-  alignmentName="alignment"
-  alignmentDefault="stretch"
-  lengthLabel="Divider Length"
-  lengthName="length"
-  lengthDefault={100}
-  thicknessLabel="Divider Thickness"
+<Divider.StyleFields
+  borderStyleLabel="Line type"
+  borderStyleName="borderStyle"
+  borderStyleDefault="solid"
+  thicknessLabel="Line thickness"
   thicknessName="thickness"
   thicknessDefault={1}
+  lengthLabel="Line length"
+  lengthName="length"
+  lengthDefault={100}
+  alignmentLabel="Line alignment"
+  alignmentName="alignment"
+  alignmentDefault={{ horizontal_align: 'CENTER', vertical_align: 'MIDDLE' }}
+  alignmentDirection="HORIZONTAL"
+  colorLabel="Line color"
+  colorName="color"
+  colorDefault={{ color: '#000000', opacity: 100 }}
 />
 ```
 
 **Fields:**
-- `orientation`: ChoiceField for selecting horizontal or vertical orientation
-- `alignment`: ChoiceField for alignment (stretch, start, center, end)
-- `length`: NumberField for length percentage (1-100)
-- `thickness`: NumberField for thickness in pixels (minimum: 1)
+- `borderStyle`: ChoiceField for line type (solid, dotted, dashed, double)
+- `thickness`: NumberField for thickness in pixels (minimum: 1, suffix: px)
+- `length`: NumberField for length as a percentage (1–100, suffix: %)
+- `alignment`: AlignmentField for alignment within the container
+- `color`: ColorField for line color (opacity hidden — color only)
 
-#### StyleFields
+**Developer-only props (not user-facing):**
+- `alignmentDirection`: Controls whether the AlignmentField shows horizontal or vertical options. Accepts `'HORIZONTAL'` (default) or `'VERTICAL'`. Set this based on how the divider will be used — developers consuming the component set this, not end users.
+- `hideFields`: An array of field names to opt out of rendering. All fields are shown by default (opt-out). Accepts an array of `StyleFieldName` values: `'borderStyle' | 'color' | 'thickness' | 'length' | 'alignment'`.
 
-Configurable props for divider border style:
+**Hiding fields example:**
 
 ```tsx
-<Divider.StyleFields
-  borderStyleLabel="Border Style"
-  borderStyleName="borderStyle"
-  borderStyleDefault="solid"
-/>
+<FieldGroup label="Style" name="style" tab="STYLE">
+  <Divider.StyleFields hideFields={['alignment', 'length']} />
+</FieldGroup>
 ```
 
-**Fields:**
-- `borderStyle`: ChoiceField for selecting border style (solid, dotted, dashed, double)
-
-**Note:** The `spacing` prop must be set directly on the Divider component, as there is no field definition for it in StyleFields or ContentFields.
+**Note:** The `orientation` and `spacing` props must be set directly on the Divider component — there are no field definitions for them.
 
 ### Module Usage Example
 
@@ -210,13 +198,15 @@ Configurable props for divider border style:
 import Divider from '@hubspot/cms-component-library/Divider';
 
 export default function SectionDividerModule({ fieldValues }) {
+  const { borderStyle, thickness, length, alignment, color } = fieldValues.style;
+
   return (
     <Divider
-      orientation={fieldValues.orientation}
-      alignment={fieldValues.alignment}
-      borderStyle={fieldValues.borderStyle}
-      length={fieldValues.length}
-      thickness={fieldValues.thickness}
+      borderStyle={borderStyle}
+      thickness={thickness}
+      length={length}
+      alignment={alignment}
+      color={color}
       spacing="24px"
     />
   );
@@ -231,7 +221,6 @@ import Divider from '@hubspot/cms-component-library/Divider';
 
 export const fields = (
   <ModuleFields>
-    <Divider.ContentFields />
     <FieldGroup label="Style" name="style" tab="STYLE">
       <Divider.StyleFields />
     </FieldGroup>
@@ -239,24 +228,28 @@ export const fields = (
 );
 ```
 
+For a vertical divider module, pass `alignmentDirection` to expose vertical alignment options:
+
+```tsx
+<FieldGroup label="Style" name="style" tab="STYLE">
+  <Divider.StyleFields alignmentDirection="VERTICAL" />
+</FieldGroup>
+```
+
 ## Styling
 
 ### CSS Variables
 
 The Divider component uses CSS variables for theming and customization:
 
-**Base Styles:**
 - `--hscl-divider-borderColor`: Border color (default: currentColor)
 - `--hscl-divider-borderStyle`: Border style (default: solid)
-- `--hscl-divider-length`: Length as percentage (default: 100%)
-- `--hscl-divider-thickness`: Border thickness as pixel value (default: 1px)
+- `--hscl-divider-borderWidth`: Border thickness as pixel value (default: 1px)
 - `--hscl-divider-alignment`: Flex alignment value (default: stretch)
-
-**Spacing:**
-- `--hscl-divider-spacing`: Spacing around the divider
-  - Horizontal: Applied as `margin-block` (top and bottom)
-  - Vertical: Applied as `margin-inline` (left and right)
-
+- `--hscl-divider-width`: Width for horizontal dividers (default: 100%)
+- `--hscl-divider-height`: Height for vertical dividers (default: 100%)
+- `--hscl-divider-marginBlock`: Top/bottom margin for horizontal dividers (default: 16px)
+- `--hscl-divider-marginInline`: Left/right margin for vertical dividers (default: 16px)
 
 ## Accessibility
 
@@ -266,7 +259,6 @@ The Divider component follows accessibility best practices:
   - Horizontal: Uses native `<hr>` element, recognized by screen readers as thematic break
   - Vertical: Uses `<div role="separator">` for proper ARIA semantics
 - **Keyboard Navigation**: Does not interfere with keyboard navigation as it's non-interactive
-- **Visual Separation**: Provides clear visual boundaries between content sections
 - **Screen Reader Support**: Properly announced by assistive technologies as content separators
 
 ## Best Practices
@@ -275,16 +267,18 @@ The Divider component follows accessibility best practices:
   - Use `horizontal` for separating stacked content sections (most common)
   - Use `vertical` for separating side-by-side content within a Flex or Grid layout
 - **Alignment considerations**:
-  - Use `stretch` (default) for full-width/height separators
-  - Use `center` for decorative short dividers
-  - Use `start` or `end` for aligned content sections
+  - Omit `alignment` for full-width/height stretch behavior (default)
+  - Use `{ horizontal_align: 'CENTER' }` for decorative short horizontal dividers
+  - Use `{ vertical_align: 'MIDDLE' }` for centered vertical dividers
+  - Set `alignmentDirection` on `StyleFields` to match the intended orientation so users see the right alignment options
 - **Spacing guidelines**:
   - Use `spacing` prop to control margin around the divider
   - For horizontal dividers, spacing controls top/bottom margin
   - For vertical dividers, spacing controls left/right margin
-- **Length as percentage**: The `length` prop accepts 1-100 as a percentage, not pixel values
-- **Thickness control**: Use the `thickness` prop for border thickness (in pixels)
-- **Border styles**: Choose appropriate border style for visual hierarchy:
+- **Length as percentage**: The `length` prop accepts 1–100 as a percentage, not pixel values
+- **Thickness control**: Use the `thickness` prop for border thickness (in pixels). Double border style requires at least 3px
+- **Color**: The `color` prop is populated from the `ColorField` in a module context. In non-module usage, pass `{ rgba: 'rgba(...)' }` directly
+- **Line type**: Choose appropriate border style for visual hierarchy:
   - `solid`: Default, clear separation
   - `dashed`: Less prominent, informal
   - `dotted`: Subtle, minimal separation

package/components/componentLibrary/Divider/stories/Divider.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<DividerProps> = {
     layout: 'centered',
     docs: {
       description: {
-        component: `The Divider component provides a visual separator between content sections. It supports both horizontal and vertical orientations with customizable styling options including border style, thickness, length, and spacing.`,
+        component: `The Divider component provides a visual separator between content sections. It supports both horizontal and vertical orientations with customizable styling options including line type, thickness, length, alignment, color, and spacing.`,
       },
     },
   },
@@ -26,7 +26,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     orientation: 'horizontal',
-    alignment: 'stretch',
     borderStyle: 'solid',
     length: 100,
     thickness: 1,
@@ -196,25 +195,37 @@ export const Alignment: Story = {
       <SBContainer addBackground flex>
         <h4>Stretch (Default)</h4>
         <p>Divider stretches to fill available space</p>
-        <Divider length={100} thickness={1} alignment="stretch" />
+        <Divider length={100} thickness={1} />
       </SBContainer>
 
       <SBContainer addBackground flex>
-        <h4>Start</h4>
-        <p>Divider aligns to the start (left for horizontal)</p>
-        <Divider length={50} thickness={1} alignment="start" />
+        <h4>Left</h4>
+        <p>Divider aligns to the left</p>
+        <Divider
+          length={50}
+          thickness={1}
+          alignment={{ horizontal_align: 'LEFT' }}
+        />
       </SBContainer>
 
       <SBContainer addBackground flex>
         <h4>Center</h4>
         <p>Divider aligns to the center</p>
-        <Divider length={50} thickness={1} alignment="center" />
+        <Divider
+          length={50}
+          thickness={1}
+          alignment={{ horizontal_align: 'CENTER' }}
+        />
       </SBContainer>
 
       <SBContainer addBackground flex>
-        <h4>End</h4>
-        <p>Divider aligns to the end (right for horizontal)</p>
-        <Divider length={50} thickness={1} alignment="end" />
+        <h4>Right</h4>
+        <p>Divider aligns to the right</p>
+        <Divider
+          length={50}
+          thickness={1}
+          alignment={{ horizontal_align: 'RIGHT' }}
+        />
       </SBContainer>
     </SBContainer>
   ),
@@ -323,8 +334,8 @@ export const VerticalAlignment: Story = {
   render: () => (
     <SBContainer flex direction="column" gap="large">
       <SBContainer addBackground>
-        <h4>Start</h4>
-        <p>Divider aligns to the start (top for vertical)</p>
+        <h4>Top</h4>
+        <p>Divider aligns to the top</p>
         <div
           style={{
             display: 'flex',
@@ -337,7 +348,7 @@ export const VerticalAlignment: Story = {
             orientation="vertical"
             length={50}
             thickness={1}
-            alignment="start"
+            alignment={{ vertical_align: 'TOP' }}
             spacing="16px"
           />
           <span>Right</span>
@@ -345,8 +356,8 @@ export const VerticalAlignment: Story = {
       </SBContainer>
 
       <SBContainer addBackground>
-        <h4>Center</h4>
-        <p>Divider aligns to the center</p>
+        <h4>Middle</h4>
+        <p>Divider aligns to the middle</p>
         <div
           style={{
             display: 'flex',
@@ -359,7 +370,7 @@ export const VerticalAlignment: Story = {
             orientation="vertical"
             length={50}
             thickness={1}
-            alignment="center"
+            alignment={{ vertical_align: 'MIDDLE' }}
             spacing="16px"
           />
           <span>Right</span>
@@ -367,8 +378,8 @@ export const VerticalAlignment: Story = {
       </SBContainer>
 
       <SBContainer addBackground>
-        <h4>End</h4>
-        <p>Divider aligns to the end (bottom for vertical)</p>
+        <h4>Bottom</h4>
+        <p>Divider aligns to the bottom</p>
         <div
           style={{
             display: 'flex',
@@ -381,7 +392,7 @@ export const VerticalAlignment: Story = {
             orientation="vertical"
             length={50}
             thickness={1}
-            alignment="end"
+            alignment={{ vertical_align: 'BOTTOM' }}
             spacing="16px"
           />
           <span>Right</span>