@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/Grid/stories/GridDecorator.tsx

@@ -1,7 +1,7 @@
 import { Decorator } from '@storybook/react';
-import styles from './GridDecorator.module.css';
+import styles from './GridDecorator.module.scss';
 
-export const withGridStyles: Decorator = (Story) => {
+export const withGridStyles: Decorator = Story => {
   return (
     <div className={styles.storyWrapper}>
       <Story />

package/components/componentLibrary/Heading/ContentFields.tsx

@@ -1,14 +1,14 @@
 import { ChoiceField, TextField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   headingTextLabel = 'Heading text',
   headingTextName = 'headingText',
   headingTextDefault = 'Heading Text',
   headingLevelLabel = 'Heading level',
   headingLevelName = 'headingLevel',
   headingLevelDefault = 'h1',
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     <>
       <TextField
@@ -32,4 +32,6 @@ export default function ContentFields({
       />
     </>
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Heading/StyleFields.tsx

@@ -1,21 +1,21 @@
 import { AlignmentField, ChoiceField } from '@hubspot/cms-components/fields';
 import type { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
-  alignmentLabel = 'Heading alignment',
-  alignmentName = 'headingAlignment',
-  alignmentDefault = 'LEFT',
+const StyleFields = ({
+  textAlignLabel = 'Heading alignment',
+  textAlignName = 'headingTextAlign',
+  textAlignDefault = 'LEFT',
   displayAsLabel = 'Display as',
   displayAsName = 'headingDisplayAs',
   displayAsDefault = 'h1',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <>
       <AlignmentField
-        label={alignmentLabel}
-        name={alignmentName}
+        label={textAlignLabel}
+        name={textAlignName}
         alignmentDirection="HORIZONTAL"
-        default={{ horizontal_align: alignmentDefault }}
+        default={{ horizontal_align: textAlignDefault }}
       />
       <ChoiceField
         label={displayAsLabel}
@@ -35,4 +35,6 @@ export default function StyleFields({
       />
     </>
   );
-}
+};
+
+export default StyleFields;

package/components/componentLibrary/Heading/index.tsx

@@ -8,7 +8,7 @@ import { HeadingProps } from './types.js';
 const HeadingComponent = ({
   headingLevel,
   displayAs,
-  alignment,
+  textAlign,
   className = '',
   style = {},
   children = 'A clear and bold heading',
@@ -22,8 +22,8 @@ const HeadingComponent = ({
     '--hscl-heading-fontSize': `var(--hscl-heading-${displayAsValue}-fontSize)`,
     '--hscl-heading-fontStyle': `var(--hscl-heading-${displayAsValue}-fontStyle)`,
     '--hscl-heading-fontWeight': `var(--hscl-heading-${displayAsValue}-fontWeight)`,
-    ...(alignment && {
-      '--hscl-heading-textAlign': alignment.toLowerCase(),
+    ...(textAlign && {
+      '--hscl-heading-textAlign': textAlign.toLowerCase(),
     }),
   };
 

package/components/componentLibrary/Heading/llm.txt

@@ -32,7 +32,7 @@ Heading/
 {
   headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';  // Semantic HTML level (required)
   displayAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'display_1' | 'display_2';  // Visual style (defaults to headingLevel)
-  alignment?: 'LEFT' | 'CENTER' | 'RIGHT';  // Text alignment
+  textAlign?: 'LEFT' | 'CENTER' | 'RIGHT';  // Text alignment
   className?: string;  // Additional CSS classes
   style?: React.CSSProperties;  // Inline styles (including CSS variables)
   children?: React.ReactNode;  // Heading text content
@@ -64,12 +64,12 @@ When you need a lower-level heading to look like a higher-level one:
 </Heading>
 ```
 
-### With Alignment
+### With Text Alignment
 
 ```tsx
 <Heading
   headingLevel="h2"
-  alignment="CENTER"
+  textAlign="CENTER"
 >
   Centered Heading
 </Heading>
@@ -101,9 +101,9 @@ When you need a lower-level heading to look like a higher-level one:
 
 ```tsx
 <Heading.StyleFields
-  alignmentLabel="Heading Alignment"
-  alignmentName="headingAlignment"
-  alignmentDefault="LEFT"
+  textAlignLabel="Heading text align"
+  textAlignName="headingTextAlign"
+  textAlignDefault="LEFT"
   displayAsLabel="Display as"
   displayAsName="headingDisplayAs"
   displayAsDefault="h1"
@@ -111,7 +111,7 @@ When you need a lower-level heading to look like a higher-level one:
 ```
 
 **Fields:**
-- `headingAlignment`: AlignmentField for text alignment
+- `headingTextAlign`: AlignmentField for text alignment
 - `headingDisplayAs`: ChoiceField for visual style (h1-h6, display_1, display_2)
 
 ### Module Usage Example
@@ -124,7 +124,7 @@ export default function HeroModule({ fieldValues }) {
     <Heading
       headingLevel={fieldValues.headingLevel}
       displayAs={fieldValues.headingDisplayAs}
-      alignment={fieldValues.headingAlignment?.horizontal_align}
+      textAlign={fieldValues.headingTextAlign?.horizontal_align}
     >
       {fieldValues.headingText}
     </Heading>

package/components/componentLibrary/Heading/stories/Heading.stories.tsx

@@ -52,17 +52,17 @@ export const TextAlignment: Story = {
   render: () => (
     <SBContainer flex direction="column" gap="large" minWidth="500px">
       <SBContainer addBackground>
-        <Heading headingLevel="h2" alignment="LEFT">
+        <Heading headingLevel="h2" textAlign="LEFT">
           Left Aligned
         </Heading>
       </SBContainer>
       <SBContainer addBackground>
-        <Heading headingLevel="h2" alignment="CENTER">
+        <Heading headingLevel="h2" textAlign="CENTER">
           Center Aligned
         </Heading>
       </SBContainer>
       <SBContainer addBackground>
-        <Heading headingLevel="h2" alignment="RIGHT">
+        <Heading headingLevel="h2" textAlign="RIGHT">
           Right Aligned
         </Heading>
       </SBContainer>

package/components/componentLibrary/Heading/stories/HeadingDecorator.tsx

@@ -1,5 +1,5 @@
 import type { Decorator } from '@storybook/react';
-import styles from './HeadingDecorator.module.css';
+import styles from './HeadingDecorator.module.scss';
 
 export const withHeadingStyles: Decorator = Story => (
   <div className={styles.decoratorContainer}>

package/components/componentLibrary/Heading/types.ts

@@ -10,7 +10,7 @@ export type DisplayAs = HeadingLevel | 'display_1' | 'display_2';
 export type HeadingProps = {
   headingLevel: HeadingLevel;
   displayAs?: DisplayAs;
-  alignment?: (typeof AlignmentFieldDefaults)['horizontal_align'];
+  textAlign?: (typeof AlignmentFieldDefaults)['horizontal_align'];
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -26,9 +26,9 @@ export type ContentFieldsProps = {
 };
 
 export type StyleFieldsProps = {
-  alignmentLabel?: string;
-  alignmentName?: string;
-  alignmentDefault?: (typeof AlignmentFieldDefaults)['horizontal_align'];
+  textAlignLabel?: string;
+  textAlignName?: string;
+  textAlignDefault?: (typeof AlignmentFieldDefaults)['horizontal_align'];
   displayAsLabel?: string;
   displayAsName?: string;
   displayAsDefault?: DisplayAs;

package/components/componentLibrary/Icon/ContentFields.tsx

@@ -5,13 +5,13 @@ import {
 } from '@hubspot/cms-components/fields';
 import { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   iconLabel = 'Icon',
   iconName = 'icon',
   iconDefault = { name: 'angle-right', unicode: 'f105', type: 'SOLID' },
   addIconToggle = false,
   ...rest
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   let showIconLabel = 'Show icon';
   let showIconName = 'showIcon';
   let showIconDefault = false;
@@ -48,4 +48,6 @@ export default function ContentFields({
       />
     </>
   );
-}
+};
+
+export default ContentFields;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Icon from '../index.js';
 import { IconProps } from '../types.js';
 import { withIconStyles } from './IconDecorator.js';
-import styles from './IconDecorator.module.css';
+import styles from './IconDecorator.module.scss';
 import { SBContainer } from '@sb-utils/SBContainer.js';
 
 const meta: Meta<IconProps> = {

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

@@ -1,5 +1,5 @@
 import type { Decorator } from '@storybook/react';
-import styles from './IconDecorator.module.css';
+import styles from './IconDecorator.module.scss';
 
 export const withIconStyles: Decorator = Story => (
   <div className={styles.iconContainer}>

package/components/componentLibrary/Image/ContentFields.tsx

@@ -1,7 +1,7 @@
 import { ImageField } from '@hubspot/cms-components/fields';
 import { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   imageLabel = 'Image',
   imageName = 'image',
   imageDefault = {
@@ -14,7 +14,7 @@ export default function ContentFields({
   showLoading = true,
   resizable = true,
   responsive = true,
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     <>
       <ImageField
@@ -27,4 +27,6 @@ export default function ContentFields({
       />
     </>
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Image/index.tsx

@@ -7,8 +7,8 @@ const ImageComponent = ({
   src,
   alt,
   title = '',
-  imgWidth,
-  imgHeight,
+  width,
+  height,
   loading = 'lazy',
   responsive = true,
   className = '',
@@ -27,8 +27,8 @@ const ImageComponent = ({
       src={src}
       alt={alt}
       title={title}
-      width={imgWidth}
-      height={imgHeight}
+      width={width}
+      height={height}
       loading={loading !== 'disabled' ? loading : 'eager'}
       className={combinedClasses}
       style={style}

package/components/componentLibrary/Image/llm.txt

@@ -32,9 +32,9 @@ Image/
   src: string;                                   // Image source URL (required)
   alt: string;                                   // Alternative text for accessibility (required)
   title?: string;                                // Tooltip text on hover
-  imgWidth?: number;                             // Image width in pixels
-  imgHeight?: number;                            // Image height in pixels
-  loading?: 'lazy' | 'eager' | 'disabled';      // Loading strategy (default: 'lazy')
+  width?: number;                                // Image width in pixels
+  height?: number;                               // Image height in pixels
+  loading?: 'lazy' | 'eager' | 'disabled';       // Loading strategy (default: 'lazy')
   responsive?: boolean;                          // Enable responsive scaling (default: true)
   className?: string;                            // Additional CSS classes
   style?: React.CSSProperties;                   // Inline styles (including CSS variables)
@@ -52,8 +52,8 @@ import Image from '@hubspot/cms-component-library/Image';
 <Image
   src="https://example.com/image.jpg"
   alt="Description of the image"
-  imgWidth={800}
-  imgHeight={600}
+  width={800}
+  height={600}
 />
 ```
 
@@ -63,8 +63,8 @@ import Image from '@hubspot/cms-component-library/Image';
 <Image
   src="https://example.com/hero-image.jpg"
   alt="Hero banner showcasing product features"
-  imgWidth={1200}
-  imgHeight={600}
+  width={1200}
+  height={600}
   responsive={true}
 />
 ```
@@ -76,8 +76,8 @@ import Image from '@hubspot/cms-component-library/Image';
   src="https://example.com/product.jpg"
   alt="Product showcase"
   title="Click to view product details"
-  imgWidth={600}
-  imgHeight={400}
+  width={600}
+  height={400}
 />
 ```
 
@@ -87,8 +87,8 @@ import Image from '@hubspot/cms-component-library/Image';
 <Image
   src="https://example.com/hero.jpg"
   alt="Hero image"
-  imgWidth={1920}
-  imgHeight={1080}
+  width={1920}
+  height={1080}
   loading="eager"
   responsive={true}
 />
@@ -100,8 +100,8 @@ import Image from '@hubspot/cms-component-library/Image';
 <Image
   src="https://example.com/profile.jpg"
   alt="User profile picture"
-  imgWidth={200}
-  imgHeight={200}
+  width={200}
+  height={200}
   style={{
     borderRadius: '50%',
     border: '4px solid #0066cc',
@@ -156,8 +156,8 @@ export default function HeroModule({ fieldValues }) {
     <Image
       src={fieldValues.heroImage?.src}
       alt={fieldValues.heroImage?.alt}
-      imgWidth={fieldValues.heroImage?.width}
-      imgHeight={fieldValues.heroImage?.height}
+      width={fieldValues.heroImage?.width}
+      height={fieldValues.heroImage?.height}
       loading={fieldValues.heroImage?.loading || 'lazy'}
       responsive={true}
     />
@@ -194,14 +194,14 @@ The Image component follows accessibility best practices:
   - For decorative images, use an empty string: `alt=""`
 - **Semantic HTML**: Renders native `<img>` elements with proper attributes
 - **Title Attribute**: Optional `title` prop provides additional context on hover
-- **Dimensions**: `imgWidth` and `imgHeight` props help browsers allocate space and prevent layout shift
+- **Dimensions**: `width` and `height` props help browsers allocate space and prevent layout shift
 
 ## Best Practices
 
 - **Always provide meaningful alt text**: Describe the content and purpose of the image for screen readers
 - **Use lazy loading for below-the-fold images**: Keep the default `loading="lazy"` for images not immediately visible
 - **Use eager loading for above-the-fold images**: Set `loading="eager"` for hero images and critical content
-- **Specify dimensions**: Always provide `imgWidth` and `imgHeight` to prevent cumulative layout shift (CLS)
+- **Specify dimensions**: Always provide `width` and `height` to prevent cumulative layout shift (CLS)
 - **Enable responsive behavior**: Keep `responsive={true}` (default) unless you need fixed dimensions
 - **CSS Variables for consistent styling**: Use CSS variables rather than inline styles for site-wide theming
 - **Style fields**: The image component doesn't include style fields. Do not try to import them.

package/components/componentLibrary/Image/stories/Image.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Image from '../index.js';
 import { withImageStyles } from './ImageDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
-import placeholderImage from './assets/catSmile.jpg';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
+import placeholderImage from './assets/cat-smile.jpg';
 
 const meta: Meta<typeof Image> = {
   title: 'Component Library/Image',
@@ -26,8 +26,8 @@ export const Default: Story = {
   args: {
     src: placeholderImage,
     alt: 'A placeholder image demonstrating default Image component behavior',
-    imgWidth: 600,
-    imgHeight: 400,
+    width: 600,
+    height: 400,
     loading: 'lazy',
     responsive: true,
   },
@@ -47,8 +47,8 @@ export const ResponsiveBehavior: Story = {
           <Image
             src={placeholderImage}
             alt="Responsive image"
-            imgWidth={800}
-            imgHeight={600}
+            width={800}
+            height={600}
             responsive={true}
           />
         </SBContainer>
@@ -67,8 +67,8 @@ export const ResponsiveBehavior: Story = {
           <Image
             src={placeholderImage}
             alt="Non-responsive image at full 800x600 size"
-            imgWidth={800}
-            imgHeight={600}
+            width={800}
+            height={600}
             responsive={false}
             style={{ width: '800px', height: '600px' }}
           />
@@ -92,8 +92,8 @@ export const AccessibilityAltText: Story = {
           src={placeholderImage}
           alt="Sample image with tooltip"
           title="Hover over me to see the title tooltip"
-          imgWidth={400}
-          imgHeight={300}
+          width={400}
+          height={300}
           responsive={true}
         />
         <p style={{ marginTop: '8px', fontSize: '14px', color: '#666' }}>
@@ -114,8 +114,8 @@ export const EdgeCases: Story = {
         <Image
           src="fake-doesn't-exist.jpg"
           alt="This image failed to load - alt text is displayed"
-          imgWidth={400}
-          imgHeight={300}
+          width={400}
+          height={300}
           responsive={true}
         />
       </SBContainer>
@@ -132,8 +132,8 @@ export const WithCustomStyling: Story = {
         <Image
           src={placeholderImage}
           alt="Image with rounded corners"
-          imgWidth={400}
-          imgHeight={300}
+          width={400}
+          height={300}
           responsive={true}
           style={{ borderRadius: '16px' }}
         />
@@ -144,8 +144,8 @@ export const WithCustomStyling: Story = {
         <Image
           src={placeholderImage}
           alt="Image with border"
-          imgWidth={400}
-          imgHeight={300}
+          width={400}
+          height={300}
           responsive={true}
           style={{ border: '4px solid #3498db', borderRadius: '8px' }}
         />
@@ -156,8 +156,8 @@ export const WithCustomStyling: Story = {
         <Image
           src={placeholderImage}
           alt="Image with drop shadow"
-          imgWidth={400}
-          imgHeight={300}
+          width={400}
+          height={300}
           responsive={true}
           style={{
             boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
@@ -168,3 +168,46 @@ export const WithCustomStyling: Story = {
     </SBContainer>
   ),
 };
+
+export const InteractionStates: Story = {
+  name: 'Interaction States (Wrapped in Link)',
+  render: () => (
+    <SBContainer flex direction="column" gap="large">
+      <SBContainer addBackground>
+        <h4>Clickable Image</h4>
+        <p>Image wrapped in a link becomes clickable and shows hover effects</p>
+        <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
+          <Image
+            src={placeholderImage}
+            alt="Clickable image"
+            width={400}
+            height={300}
+            responsive={true}
+            style={{ borderRadius: '8px' }}
+          />
+        </a>
+      </SBContainer>
+
+      <SBContainer addBackground>
+        <h4>Focus State</h4>
+        <p>
+          In production, this focus outline appears when navigating with the
+          keyboard (Tab key). This Storybook demo auto-applies the focus state
+          to show how it looks.
+        </p>
+        <SBFocusWrapper>
+          <a href="https://www.hubspot.com" style={{ textDecoration: 'none' }}>
+            <Image
+              src={placeholderImage}
+              alt="Focused image wrapped in link"
+              width={400}
+              height={300}
+              responsive={true}
+              style={{ borderRadius: '8px' }}
+            />
+          </a>
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Image/stories/ImageDecorator.tsx

@@ -1,5 +1,5 @@
 import type { Decorator } from '@storybook/react';
-import styles from './ImageDecorator.module.css';
+import styles from './ImageDecorator.module.scss';
 
 /**
  * Shared decorator for Image stories that applies default CSS variables

package/components/componentLibrary/Image/types.ts

@@ -4,8 +4,8 @@ export type ImageProps = {
   src: string;
   alt: string;
   title?: string;
-  imgWidth?: number;
-  imgHeight?: number;
+  width?: number;
+  height?: number;
   loading?: 'lazy' | 'eager' | 'disabled';
   responsive?: boolean;
   className?: string;

package/components/componentLibrary/LanguageSwitcher/ContentFields.tsx

@@ -0,0 +1,18 @@
+import { TextField } from '@hubspot/cms-components/fields';
+import type { ContentFieldsProps } from './types.js';
+
+const ContentFields = ({
+  languageSwitcherSelectTextLabel = 'Language selector text',
+  languageSwitcherSelectTextName = 'languageSwitcherSelectText',
+  languageSwitcherSelectTextDefault = 'Select a language',
+}: ContentFieldsProps) => {
+  return (
+    <TextField
+      label={languageSwitcherSelectTextLabel}
+      name={languageSwitcherSelectTextName}
+      default={languageSwitcherSelectTextDefault}
+    />
+  );
+};
+
+export default ContentFields;

package/components/componentLibrary/LanguageSwitcher/LanguageOptions.module.scss

@@ -0,0 +1,37 @@
+.languageList {
+  background-color: var(--hscl-languageSwitcher-backgroundColor, transparent);
+}
+
+.languageItem {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.languageItem--active {
+  background-color: var(--hscl-languageSwitcher-backgroundColor-hover, transparent);
+}
+
+.languageItem .languageLink {
+  display: flex;
+  padding: 12px 16px;
+  align-items: center;
+  color: var(--hscl-languageSwitcher-color, #000000);
+  font-size: var(--hscl-languageSwitcher-fontSize, 18px);
+  font-weight: 600;
+  gap: 12px;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+
+  &:focus,
+  &:active,
+  &:visited,
+  &:hover {
+    color: var(--hscl-languageSwitcher-color-hover, #000000);
+    text-decoration: none;
+  }
+
+  &:hover {
+    background-color: var(--hscl-languageSwitcher-backgroundColor-hover, #f1f5f9);
+  }
+}