@hubspot/cms-component-library 0.3.0 → 0.3.2

package/components/componentLibrary/Divider/types.ts

@@ -1,45 +1,56 @@
+import type {
+  AlignmentFieldDefaults,
+  ColorFieldDefaults,
+} from '@hubspot/cms-components/fields';
 import type { CSSVariables } from '../utils/types.js';
 
-export type DividerOrientation = 'horizontal' | 'vertical';
+type AlignmentValue = typeof AlignmentFieldDefaults;
+type ColorValue = typeof ColorFieldDefaults;
 
-export type DividerAlignment = 'stretch' | 'start' | 'center' | 'end';
+export type DividerOrientation = 'horizontal' | 'vertical';
 
 export type DividerBorderStyle = 'solid' | 'dotted' | 'dashed' | 'double';
 
+export type DividerAlignmentDirection = 'HORIZONTAL' | 'VERTICAL';
+
 type PixelValue = `${number}px`;
 
 export type DividerProps = {
   orientation?: DividerOrientation;
-  alignment?: DividerAlignment;
+  alignment?: AlignmentValue;
   spacing?: PixelValue;
   borderStyle?: DividerBorderStyle;
   length?: number;
   thickness?: number;
+  color?: ColorValue;
   variant?: 'primary' | 'secondary' | 'tertiary';
   className?: string;
   style?: CSSVariables;
 };
 
-export type ContentFieldsProps = {
-  orientationLabel?: string;
-  orientationName?: string;
-  orientationDefault?: string;
-  alignmentLabel?: string;
-  alignmentName?: string;
-  alignmentDefault?: string;
-  lengthLabel?: string;
-  lengthName?: string;
-  lengthDefault?: number;
-  thicknessLabel?: string;
-  thicknessName?: string;
-  thicknessDefault?: number;
-};
+export type StyleFieldName =
+  | 'borderStyle'
+  | 'color'
+  | 'thickness'
+  | 'length'
+  | 'alignment';
 
 export type StyleFieldsProps = {
-  spacingLabel?: string;
-  spacingName?: string;
-  spacingDefault?: string;
+  hideFields?: StyleFieldName[];
   borderStyleLabel?: string;
   borderStyleName?: string;
   borderStyleDefault?: string;
+  thicknessLabel?: string;
+  thicknessName?: string;
+  thicknessDefault?: number;
+  lengthLabel?: string;
+  lengthName?: string;
+  lengthDefault?: number;
+  alignmentLabel?: string;
+  alignmentName?: string;
+  alignmentDefault?: AlignmentValue;
+  alignmentDirection?: DividerAlignmentDirection;
+  colorLabel?: string;
+  colorName?: string;
+  colorDefault?: ColorValue;
 };

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

@@ -9,12 +9,10 @@
   align-items: var(--hscl-flex-alignItems, stretch);
   align-content: var(--hscl-flex-alignContent, stretch);
   gap: var(--hscl-flex-gap, 0);
-  padding: var(--hscl-flex-padding, 0);
-  padding-inline: var(--hscl-flex-paddingInline);
-  padding-block: var(--hscl-flex-paddingBlock);
-  margin: var(--hscl-flex-margin, 0);
-  margin-inline: var(--hscl-flex-marginInline);
-  margin-block: var(--hscl-flex-marginBlock);
+  padding-inline: var(--hscl-flex-paddingInline, 0);
+  padding-block: var(--hscl-flex-paddingBlock, 0);
+  margin-inline: var(--hscl-flex-marginInline, 0);
+  margin-block: var(--hscl-flex-marginBlock, 0);
   max-width: var(--hscl-flex-maxWidth, 100%);
   max-height: var(--hscl-flex-maxHeight, auto);
 }

package/components/componentLibrary/Flex/llm.txt

@@ -47,7 +47,7 @@ Flex/
   maxHeight?: string;  // Maximum height constraint
   inline?: boolean;  // Use inline-flex instead of flex (default: false)
   className?: string;  // Additional CSS classes
-  style?: React.CSSProperties;  // Inline styles
+  style?: CSSVariables;  // Inline styles and CSS variable overrides
   children?: React.ReactNode;  // Child elements
 }
 ```
@@ -169,12 +169,10 @@ The Flex component uses CSS variables for all styling properties:
 - `--hscl-flex-alignItems`: Cross axis alignment (default: 'stretch')
 - `--hscl-flex-alignContent`: Multi-line alignment (default: 'stretch')
 - `--hscl-flex-gap`: Gap between items
-- `--hscl-flex-padding`: Padding (default: 0)
-- `--hscl-flex-paddingInline`: Horizontal padding
-- `--hscl-flex-paddingBlock`: Vertical padding
-- `--hscl-flex-margin`: Margin (default: 0)
-- `--hscl-flex-marginInline`: Horizontal margin
-- `--hscl-flex-marginBlock`: Vertical margin
+- `--hscl-flex-paddingInline`: Horizontal padding (default: 0)
+- `--hscl-flex-paddingBlock`: Vertical padding (default: 0)
+- `--hscl-flex-marginInline`: Horizontal margin (default: 0)
+- `--hscl-flex-marginBlock`: Vertical margin (default: 0)
 - `--hscl-flex-maxWidth`: Maximum width (default: 100%)
 - `--hscl-flex-maxHeight`: Maximum height (default: auto)
 

package/components/componentLibrary/Flex/types.ts

@@ -48,12 +48,8 @@ export type FlexProps = {
   alignItems?: FlexAlignItems;
   alignContent?: FlexAlignContent;
   gap?: string;
-  rowGap?: string;
-  columnGap?: string;
-  padding?: string;
   paddingInline?: string;
   paddingBlock?: string;
-  margin?: string;
   marginInline?: string;
   marginBlock?: string;
   inline?: boolean;

package/components/componentLibrary/Icon/StyleFields.tsx

@@ -0,0 +1,69 @@
+import { ColorField, ChoiceField } from '@hubspot/cms-components/fields';
+import type { StyleFieldsProps } from './types.js';
+
+const StyleFields = ({
+  hideFields = [],
+  iconColorLabel = 'Icon color',
+  iconColorName = 'iconColor',
+  iconColorDefault = { color: '#A8A8A8', opacity: 100 },
+  iconBackgroundColorLabel = 'Background color',
+  iconBackgroundColorName = 'iconBackgroundColor',
+  iconBackgroundColorDefault = { color: '#2C2C2C', opacity: 100 },
+  iconShapeLabel = 'Icon shape',
+  iconShapeName = 'iconShape',
+  iconShapeDefault = '0px',
+  iconSizeLabel = 'Icon size',
+  iconSizeName = 'iconSize',
+  iconSizeDefault = '16',
+}: StyleFieldsProps) => {
+  return (
+    <>
+      {!hideFields.includes('iconColor') && (
+        <ColorField
+          label={iconColorLabel}
+          name={iconColorName}
+          default={iconColorDefault}
+          showOpacity={false}
+        />
+      )}
+      {!hideFields.includes('iconBackgroundColor') && (
+        <ColorField
+          label={iconBackgroundColorLabel}
+          name={iconBackgroundColorName}
+          default={iconBackgroundColorDefault}
+          showOpacity={false}
+        />
+      )}
+      {!hideFields.includes('iconShape') && (
+        <ChoiceField
+          label={iconShapeLabel}
+          name={iconShapeName}
+          display="buttons"
+          preset="icon_shape"
+          choices={[
+            ['0px', 'Square'],
+            ['8px', 'Rounded'],
+            ['100%', 'Circle'],
+          ]}
+          default={iconShapeDefault}
+          required={true}
+        />
+      )}
+      {!hideFields.includes('iconSize') && (
+        <ChoiceField
+          label={iconSizeLabel}
+          name={iconSizeName}
+          choices={[
+            ['16', 'Small (16x16 px)'],
+            ['24', 'Medium (24x24 px)'],
+            ['32', 'Large (32x32 px)'],
+          ]}
+          default={iconSizeDefault}
+          required={true}
+        />
+      )}
+    </>
+  );
+};
+
+export default StyleFields;

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

@@ -4,6 +4,6 @@
   justify-content: center;
   fill: var(--hscl-icon-fill);
   stroke: var(--hscl-icon-stroke);
-  width: var(--hscl-icon-width); // !todo: not sure if we want this or not
-  height: var(--hscl-icon-height); // !todo: not sure if we want this or not
+  width: var(--hscl-icon-size);
+  height: var(--hscl-icon-size);
 }

package/components/componentLibrary/Icon/index.tsx

@@ -1,6 +1,7 @@
 import styles from './index.module.scss';
 import { Icon as CMSIcon } from '@hubspot/cms-components';
 import ContentFields from './ContentFields.js';
+import StyleFields from './StyleFields.js';
 import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
 import { IconProps } from './types.js';
@@ -8,7 +9,7 @@ import { IconProps } from './types.js';
 const IconComponent = ({
   fieldPath,
   showIcon = true,
-  height = 12,
+  size = 12,
   className = '',
   style = {},
   purpose = 'DECORATIVE',
@@ -21,13 +22,14 @@ const IconComponent = ({
   const combinedClasses = cx(defaultClasses, className);
 
   const cssVariables: CSSVariables = {
+    '--hscl-icon-size': `${size}px`,
     ...(fill && { '--hscl-icon-fill': fill }),
   };
 
   return (
     <CMSIcon
       fieldPath={fieldPath}
-      height={height}
+      height={size}
       className={combinedClasses}
       style={{ ...cssVariables, ...style }}
       purpose={purpose}
@@ -38,9 +40,11 @@ const IconComponent = ({
 
 type IconComponentType = typeof IconComponent & {
   ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
 };
 
 const Icon = IconComponent as IconComponentType;
 Icon.ContentFields = ContentFields;
+Icon.StyleFields = StyleFields;
 
 export default Icon;

package/components/componentLibrary/Icon/llm.txt

@@ -35,7 +35,7 @@ Icon/
 ```tsx
 {
   fieldPath?: string;                              // Path to icon in HubSpot fields
-  height?: number;                                 // Icon height in pixels (default: 12)
+  size?: number;                                   // Icon size in pixels, sets both width and height (default: 12)
   fill?: string;                                   // Icon fill color (overrides CSS variable)
   className?: string;                              // Additional CSS classes
   style?: React.CSSProperties;                     // Inline styles (including CSS variables)
@@ -54,7 +54,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
 
 <Icon
   fieldPath="icon"
-  height={24}
+  size={24}
 />
 ```
 
@@ -63,7 +63,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
 ```tsx
 <Icon
   fieldPath="icon"
-  height={24}
+  size={24}
   purpose="SEMANTIC"
   title="Download file"
 />
@@ -74,7 +74,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
 ```tsx
 <Icon
   fieldPath="icon"
-  height={32}
+  size={32}
   fill="#FF7A59"
 />
 ```
@@ -84,7 +84,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
 ```tsx
 <Icon
   fieldPath="icon"
-  height={20}
+  size={20}
   showIcon={shouldShowIcon}
 />
 ```
@@ -128,7 +128,7 @@ export default function IconModule({ fieldValues }) {
   return (
     <Icon
       fieldPath="icon"
-      height={fieldValues.iconSize || 24}
+      size={fieldValues.iconSize || 24}
       showIcon={fieldValues.showIcon}
       purpose="DECORATIVE"
     />
@@ -159,6 +159,7 @@ The Icon component uses CSS variables for theming and customization:
 
 **Base Styles:**
 - `--hscl-icon-fill`: Icon fill color (default: currentColor)
+- `--hscl-icon-size`: Icon width and height (set automatically from the `size` prop)
 
 
 ## Accessibility

package/components/componentLibrary/Icon/stories/Icon.stories.tsx

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     fieldPath: 'icon',
-    height: 24,
+    size: 24,
     showIcon: true,
     purpose: 'DECORATIVE',
   },
@@ -37,27 +37,27 @@ export const IconSizes: Story = {
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
         <h4>12px (default)</h4>
-        <Icon fieldPath="icon" height={12} />
+        <Icon fieldPath="icon" size={12} />
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>16px</h4>
-        <Icon fieldPath="icon" height={16} />
+        <Icon fieldPath="icon" size={16} />
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>24px</h4>
-        <Icon fieldPath="icon" height={24} />
+        <Icon fieldPath="icon" size={24} />
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>32px</h4>
-        <Icon fieldPath="icon" height={32} />
+        <Icon fieldPath="icon" size={32} />
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>48px</h4>
-        <Icon fieldPath="icon" height={48} />
+        <Icon fieldPath="icon" size={48} />
       </SBContainer>
     </SBContainer>
   ),
@@ -69,34 +69,34 @@ export const Colors: Story = {
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
         <h4>Default (currentColor)</h4>
-        <Icon fieldPath="icon" height={32} />
+        <Icon fieldPath="icon" size={32} />
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>Blue Fill</h4>
         <div className={styles.blueFill}>
-          <Icon fieldPath="icon" height={32} />
+          <Icon fieldPath="icon" size={32} />
         </div>
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>Red Fill</h4>
         <div className={styles.redFill}>
-          <Icon fieldPath="icon" height={32} />
+          <Icon fieldPath="icon" size={32} />
         </div>
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>Green Fill</h4>
         <div className={styles.greenFill}>
-          <Icon fieldPath="icon" height={32} />
+          <Icon fieldPath="icon" size={32} />
         </div>
       </SBContainer>
 
       <SBContainer addBackground flex alignItems="center">
         <h4>Custom Stroke</h4>
         <div className={styles.customStroke}>
-          <Icon fieldPath="icon" height={32} />
+          <Icon fieldPath="icon" size={32} />
         </div>
       </SBContainer>
     </SBContainer>

package/components/componentLibrary/Icon/stories/IconDecorator.module.scss

@@ -2,8 +2,7 @@
   padding: 20px;
   --hscl-icon-fill: currentColor;
   --hscl-icon-stroke: none;
-  --hscl-icon-width: auto;
-  --hscl-icon-height: auto;
+  --hscl-icon-size: auto;
 }
 
 .blueFill {

package/components/componentLibrary/Icon/types.ts

@@ -1,13 +1,16 @@
 import {
   IconFieldDefaults,
   BooleanFieldDefaults,
+  ColorFieldDefaults,
 } from '@hubspot/cms-components/fields';
 
+type ColorFieldValue = typeof ColorFieldDefaults;
+
 export type IconPurpose = 'SEMANTIC' | 'DECORATIVE';
 
 export type IconProps = {
   fieldPath?: string;
-  height?: number;
+  size?: number;
   fill?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -36,3 +39,25 @@ export type IconContentFieldsWithToggleProps =
 export type ContentFieldsProps =
   | IconContentFieldsWithToggleProps
   | IconContentFieldsWithoutToggleProps;
+
+export type StyleFieldName =
+  | 'iconColor'
+  | 'iconBackgroundColor'
+  | 'iconShape'
+  | 'iconSize';
+
+export type StyleFieldsProps = {
+  hideFields?: StyleFieldName[];
+  iconColorLabel?: string;
+  iconColorName?: string;
+  iconColorDefault?: ColorFieldValue;
+  iconBackgroundColorLabel?: string;
+  iconBackgroundColorName?: string;
+  iconBackgroundColorDefault?: ColorFieldValue;
+  iconShapeLabel?: string;
+  iconShapeName?: string;
+  iconShapeDefault?: string;
+  iconSizeLabel?: string;
+  iconSizeName?: string;
+  iconSizeDefault?: string;
+};

package/components/componentLibrary/Text/ContentFields.tsx

@@ -0,0 +1,66 @@
+import {
+  RichTextField,
+  RichTextFieldType,
+} from '@hubspot/cms-components/fields';
+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'] = [
+  'block',
+  'alignment',
+  'indents',
+  'lists',
+  'standard_emphasis',
+  'advanced_emphasis',
+  'link',
+  'personalize',
+  'nonbreaking_space',
+  'source_code',
+  'visual_blocks',
+];
+
+const bodyContentEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
+  'block',
+  'alignment',
+  'indents',
+  'lists',
+  'standard_emphasis',
+  'advanced_emphasis',
+  'link',
+  'image',
+  'emoji',
+  'table',
+  'personalize',
+  'cta',
+  'embed',
+  'video',
+  'charmap',
+  'anchor',
+  'nonbreaking_space',
+  'source_code',
+  'visual_blocks',
+];
+
+const featureSetMap = {
+  bodyContent: bodyContentEnabledFeatures,
+  heading: headingEnabledFeatures,
+};
+
+const ContentFields = ({
+  textLabel = 'Text',
+  textName = 'text',
+  textDefault = '<p>Text goes here.</p>',
+  textFeatureSet = 'bodyContent',
+}: ContentFieldsProps) => {
+  return (
+    <RichTextField
+      label={textLabel}
+      name={textName}
+      default={textDefault}
+      enabledFeatures={featureSetMap[textFeatureSet]}
+    />
+  );
+};
+
+export default ContentFields;

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

@@ -0,0 +1,3 @@
+.text {
+  color: var(--hscl-text-color, currentColor);
+}

package/components/componentLibrary/Text/index.tsx

@@ -0,0 +1,27 @@
+import { RichText } from '@hubspot/cms-components';
+import styles from './index.module.scss';
+import ContentFields from './ContentFields.js';
+import cx from '../utils/classname.js';
+import { TextProps } from './types.js';
+
+const TextComponent = ({
+  fieldPath,
+  className = '',
+  style = {},
+}: TextProps) => {
+  const defaultClasses = styles.text;
+  const combinedClasses = cx(defaultClasses, className);
+
+  return (
+    <RichText fieldPath={fieldPath} className={combinedClasses} style={style} />
+  );
+};
+
+type TextComponentType = typeof TextComponent & {
+  ContentFields: typeof ContentFields;
+};
+
+const Text = TextComponent as TextComponentType;
+Text.ContentFields = ContentFields;
+
+export default Text;