@hubspot/cms-component-library 0.1.0 → 0.3.0

package/components/componentLibrary/Accordion/AccordionContent/ContentFields.tsx

@@ -1,11 +1,11 @@
 import { RichTextField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   contentLabel = 'Content',
   contentName = 'content',
   contentDefault = '<p>Accordion content goes here. You can add multiple lines of text.</p>',
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     // Todo: consider migrating over field library
     <RichTextField
@@ -14,4 +14,6 @@ export default function ContentFields({
       default={contentDefault}
     />
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Accordion/AccordionItem/StyleFields.tsx

@@ -1,11 +1,11 @@
 import { ChoiceField } from '@hubspot/cms-components/fields';
 import type { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   variantLabel = 'Variant',
   variantName = 'variant',
   variantDefault = 'variant1',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <ChoiceField
       label={variantLabel}
@@ -22,4 +22,6 @@ export default function StyleFields({
       default={variantDefault}
     />
   );
-}
+};
+
+export default StyleFields;

package/components/componentLibrary/Accordion/AccordionItem/index.module.scss

@@ -1,9 +1,9 @@
 .accordionItem {
-  border: var(--hscl-accordion-borderThickness, 1px) solid
+  border: var(--hscl-accordion-borderWidth, 1px) solid
     var(--hscl-accordion-borderColor, #e0e0e0);
   border-radius: var(--hscl-accordion-borderRadius, 4px);
   background-color: var(--hscl-accordion-backgroundColor, transparent);
-  color: var(--hscl-accordion-textColor, inherit);
+  color: var(--hscl-accordion-color, inherit);
   overflow: hidden;
 }
 

package/components/componentLibrary/Accordion/AccordionItem/index.tsx

@@ -17,10 +17,10 @@ const AccordionItemComponent = ({
     ? mapVariantToCssVars('--hscl-accordion', variant, [
         'borderColor',
         'borderRadius',
-        'borderThickness',
+        'borderWidth',
         'backgroundColor',
-        'textColor',
-        'icon-fillColor',
+        'color',
+        'icon-fill',
       ])
     : {};
 

package/components/componentLibrary/Accordion/AccordionTitle/ContentFields.tsx

@@ -1,14 +1,14 @@
 import { TextField, ChoiceField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   titleLabel = 'Title',
   titleName = 'title',
   titleDefault = 'Accordion Title',
   iconLabel = 'Icon',
   iconName = 'icon',
   iconDefault = 'chevron',
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -26,4 +26,6 @@ export default function ContentFields({
       <TextField label={titleLabel} name={titleName} default={titleDefault} />
     </>
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Accordion/AccordionTitle/index.module.scss

@@ -15,14 +15,14 @@
 .accordionTitleText {
   font-size: var(--hscl-accordion-title-fontSize, 24px);
   font-weight: var(--hscl-accordion-title-fontWeight, 600);
-  margin-inline-end: var(--hscl-accordion-title-textMarginEnd, 16px);
+  margin-inline-end: var(--hscl-accordion-title-marginInlineEnd, 16px);
   flex: 1;
 }
 
 .accordionIcon {
   flex-shrink: 0;
   align-self: center;
-  fill: var(--hscl-accordion-icon-fillColor, currentColor);
+  fill: var(--hscl-accordion-icon-fill, currentColor);
   margin-inline-start: auto;
   transition: transform 0.3s ease;
   display: block;

package/components/componentLibrary/Accordion/stories/Accordion.stories.tsx

@@ -6,7 +6,7 @@ import Accordion, {
 } from '../index.js';
 import { AccordionProps } from '../types.js';
 import { withAccordionStyles } from './AccordionDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
 
 const meta: Meta<AccordionProps> = {
   title: 'Component Library/Accordion',
@@ -462,3 +462,82 @@ export const EdgeCases: Story = {
     </SBContainer>
   ),
 };
+
+export const InteractionStates: Story = {
+  name: 'Interaction States',
+  render: () => (
+    <SBContainer flex direction="column" gap="large" width="800px">
+      <SBContainer addBackground>
+        <h4>Keyboard Navigation</h4>
+        <p>
+          <strong>Try:</strong> Press Tab to focus on accordion titles, then
+          press Enter or Space to expand/collapse them
+        </p>
+        <Accordion>
+          <AccordionItem>
+            <AccordionTitle>First accordion item</AccordionTitle>
+            <AccordionContent>
+              <p>
+                Accordion titles (summary elements) are natively keyboard
+                accessible. Tab to focus, Enter/Space to toggle.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionTitle>Second accordion item</AccordionTitle>
+            <AccordionContent>
+              <p>
+                Focus rings appear automatically when navigating with the
+                keyboard, providing clear visual feedback.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionTitle>Third accordion item</AccordionTitle>
+            <AccordionContent>
+              <p>
+                This demonstrates how users can navigate through all accordion
+                items using only the keyboard.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </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>
+          <Accordion>
+            <AccordionItem>
+              <AccordionTitle>Focused accordion item</AccordionTitle>
+              <AccordionContent>
+                <p>
+                  This accordion title automatically receives focus to
+                  demonstrate the focus ring appearance.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </SBFocusWrapper>
+      </SBContainer>
+
+      <SBContainer addBackground>
+        <h4>Hover State</h4>
+        <p>Hover over accordion titles to see the hover effect</p>
+        <Accordion>
+          <AccordionItem>
+            <AccordionTitle>Hover over this title</AccordionTitle>
+            <AccordionContent>
+              <p>The title shows a subtle background change on hover.</p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Accordion/stories/AccordionDecorator.tsx

@@ -2,36 +2,36 @@ import type { Decorator } from '@storybook/react';
 import type { CSSVariables } from '../../utils/types.js';
 
 const defaultAccordionStyles: CSSVariables = {
-  '--hscl-listItem-textColor-primary': '#33475b',
-  '--hscl-listItem-textColor-secondary': '#516f90',
+  '--hscl-listItem-color-primary': '#33475b',
+  '--hscl-listItem-color-secondary': '#516f90',
 
   '--hscl-accordion-variant1-borderColor': '#e0e0e0',
   '--hscl-accordion-variant1-borderRadius': '4px',
-  '--hscl-accordion-variant1-borderThickness': '1px',
+  '--hscl-accordion-variant1-borderWidth': '1px',
   '--hscl-accordion-variant1-backgroundColor': 'transparent',
-  '--hscl-accordion-variant1-textColor': '#33475b',
-  '--hscl-accordion-variant1-icon-fillColor': '#33475b',
+  '--hscl-accordion-variant1-color': '#33475b',
+  '--hscl-accordion-variant1-icon-fill': '#33475b',
 
   '--hscl-accordion-variant2-borderColor': '#cbd6e2',
   '--hscl-accordion-variant2-borderRadius': '8px',
-  '--hscl-accordion-variant2-borderThickness': '1px',
+  '--hscl-accordion-variant2-borderWidth': '1px',
   '--hscl-accordion-variant2-backgroundColor': '#f5f8fa',
-  '--hscl-accordion-variant2-textColor': '#33475b',
-  '--hscl-accordion-variant2-icon-fillColor': '#516f90',
+  '--hscl-accordion-variant2-color': '#33475b',
+  '--hscl-accordion-variant2-icon-fill': '#516f90',
 
   '--hscl-accordion-variant3-borderColor': '#ff7a59',
   '--hscl-accordion-variant3-borderRadius': '0',
-  '--hscl-accordion-variant3-borderThickness': '2px',
+  '--hscl-accordion-variant3-borderWidth': '2px',
   '--hscl-accordion-variant3-backgroundColor': 'transparent',
-  '--hscl-accordion-variant3-textColor': '#33475b',
-  '--hscl-accordion-variant3-icon-fillColor': '#ff7a59',
+  '--hscl-accordion-variant3-color': '#33475b',
+  '--hscl-accordion-variant3-icon-fill': '#ff7a59',
 
   '--hscl-accordion-variant4-borderColor': '#33475b',
   '--hscl-accordion-variant4-borderRadius': '12px',
-  '--hscl-accordion-variant4-borderThickness': '1px',
+  '--hscl-accordion-variant4-borderWidth': '1px',
   '--hscl-accordion-variant4-backgroundColor': '#eaf0f6',
-  '--hscl-accordion-variant4-textColor': '#33475b',
-  '--hscl-accordion-variant4-icon-fillColor': '#33475b',
+  '--hscl-accordion-variant4-color': '#33475b',
+  '--hscl-accordion-variant4-icon-fill': '#33475b',
 };
 
 export const withAccordionStyles: Decorator = Story => (

package/components/componentLibrary/Button/ContentFields.tsx

@@ -2,7 +2,7 @@ import { TextField, LinkField } from '@hubspot/cms-components/fields';
 import Icon from '../Icon/index.js';
 import { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   buttonTextLabel = 'Button text',
   buttonTextName = 'buttonText',
   buttonTextDefault = 'Click me',
@@ -22,7 +22,7 @@ export default function ContentFields({
   showIconLabel = 'Show button icon',
   showIconName,
   showIconDefault,
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   const iconContentFieldsProps = {
     iconLabel,
     iconName,
@@ -49,4 +49,6 @@ export default function ContentFields({
       <Icon.ContentFields addIconToggle={true} {...iconContentFieldsProps} />
     </>
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Button/StyleFields.tsx

@@ -1,11 +1,21 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { ChoiceField, Visibility } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   buttonVariantLabel = 'Button variant',
   buttonVariantName = 'buttonVariant',
   buttonVariantDefault = 'primary',
-}: StyleFieldsProps) {
+  buttonIconPositionLabel = 'Icon position',
+  buttonIconPositionName = 'buttonIconPosition',
+  buttonIconPositionDefault = 'right',
+}: StyleFieldsProps) => {
+  // iconComponentShowIcon is the hardcoded id in @components/componentLibrary/Icon/ContentFields.tsx
+  const iconPositionVisibility: Visibility = {
+    operator: 'EQUAL',
+    controlling_field: 'iconComponentShowIcon',
+    controlling_value_regex: 'true',
+  };
+
   return (
     <>
       <ChoiceField
@@ -18,6 +28,18 @@ export default function StyleFields({
         ]}
         default={buttonVariantDefault}
       />
+      <ChoiceField
+        label={buttonIconPositionLabel}
+        name={buttonIconPositionName}
+        choices={[
+          ['left', 'Left'],
+          ['right', 'Right'],
+        ]}
+        default={buttonIconPositionDefault}
+        visibility={iconPositionVisibility}
+      />
     </>
   );
-}
+};
+
+export default StyleFields;

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

@@ -17,21 +17,32 @@
   transition: all 0.2s ease;
   text-decoration: none;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &:hover {
-    background-color: var(--hscl-button-backgroundColor-hover);
-    color: var(--hscl-button-color-hover);
-    border-width: var(--hscl-button-borderWidth-hover);
-    border-color: var(--hscl-button-borderColor-hover);
+    background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
+    color: var(--hscl-button-color-hover, var(--hscl-button-color));
+    border-width: var(--hscl-button-borderWidth-hover, var(--hscl-button-borderWidth));
+    border-color: var(--hscl-button-borderColor-hover, var(--hscl-button-borderColor));
     text-decoration: none;
   }
 
-  &:focus {
-    background-color: var(--hscl-button-backgroundColor-focus);
-    color: var(--hscl-button-color-focus);
-    border-width: var(--hscl-button-borderWidth-focus);
-    border-color: var(--hscl-button-borderColor-focus);
-    outline: var(--hscl-button-outlineWidth-focus) solid var(--hscl-button-outlineColor-focus);
-    outline-offset: var(--hscl-button-outlineOffset-focus);
+  &:focus-visible {
+    background-color: var(--hscl-button-backgroundColor-focus, var(--hscl-button-backgroundColor));
+    color: var(--hscl-button-color-focus, var(--hscl-button-color));
+    border-width: var(--hscl-button-borderWidth-focus, var(--hscl-button-borderWidth));
+    border-color: var(--hscl-button-borderColor-focus, var(--hscl-button-borderColor));
+    outline: var(--hscl-button-outlineWidth-focus, 2px) solid var(--hscl-button-outlineColor-focus, currentColor);
+    outline-offset: var(--hscl-button-outlineOffset-focus, 2px);
+  }
+
+  &:active {
+    background-color: var(--hscl-button-backgroundColor-active, var(--hscl-button-backgroundColor));
+    color: var(--hscl-button-color-active, var(--hscl-button-color));
+    border-width: var(--hscl-button-borderWidth-active, var(--hscl-button-borderWidth));
+    border-color: var(--hscl-button-borderColor-active, var(--hscl-button-borderColor));
   }
 
   &:disabled {
@@ -39,7 +50,6 @@
     cursor: not-allowed;
   }
 
-
   svg {
     display: inline-flex;
     align-items: center;
@@ -47,5 +57,3 @@
     fill: var(--hscl-button-icon-fill);
   }
 }
-
-

package/components/componentLibrary/Button/index.tsx

@@ -56,7 +56,7 @@ const ButtonComponent = ({
     );
   };
 
-  function renderButton({
+  const renderButton = ({
     onClick,
     disabled = false,
     children,
@@ -67,7 +67,7 @@ const ButtonComponent = ({
     iconPurpose,
     iconTitle,
     ...rest
-  }: Omit<ButtonAsButtonProps, 'buttonType'> & Partial<BaseButtonProps>) {
+  }: Omit<ButtonAsButtonProps, 'buttonType'> & Partial<BaseButtonProps>) => {
     const iconProps = {
       iconFieldPath,
       iconSize,
@@ -81,9 +81,9 @@ const ButtonComponent = ({
         <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
       </button>
     );
-  }
+  };
 
-  function renderLink({
+  const renderLink = ({
     href = '',
     target = '_self',
     rel = '',
@@ -95,7 +95,7 @@ const ButtonComponent = ({
     iconPurpose,
     iconTitle,
     ...rest
-  }: Omit<ButtonAsLinkProps, 'buttonType'> & Partial<BaseButtonProps>) {
+  }: Omit<ButtonAsLinkProps, 'buttonType'> & Partial<BaseButtonProps>) => {
     const iconProps = {
       iconFieldPath,
       iconSize,
@@ -109,7 +109,7 @@ const ButtonComponent = ({
         <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
       </a>
     );
-  }
+  };
 
   // TypeScript properly discriminates based on buttonType
   if (buttonType === 'button') return renderButton(rest);

package/components/componentLibrary/Button/llm.txt

@@ -234,18 +234,22 @@ Configurable props for customizing field labels, names, and defaults:
 
 #### StyleFields.tsx
 
-Configurable props for variant selection:
+Configurable props for variant and icon position:
 
 ```tsx
 <Button.StyleFields
   buttonVariantLabel="Button variant"
   buttonVariantName="buttonVariant"
   buttonVariantDefault="primary"
+  buttonIconPositionLabel="Icon position"
+  buttonIconPositionName="buttonIconPosition"
+  buttonIconPositionDefault="right"
 />
 ```
 
 **Fields:**
 - `buttonVariant`: ChoiceField for selecting visual style (primary, secondary, tertiary)
+- `buttonIconPosition`: ChoiceField for selecting icon placement (left, right). This field has a hardcoded visibility rule — it is only shown when the icon toggle is enabled (`iconComponentShowIcon === true`), which corresponds to the `BooleanField` id hardcoded in `Icon.ContentFields`.
 
 ### Module Usage Example
 

package/components/componentLibrary/Button/stories/Button.AsButton.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from '../index.js';
 import { ButtonAsButtonProps } from '../types.js';
 import { withButtonStyles } from './ButtonDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
 
 const meta: Meta<ButtonAsButtonProps> = {
   title: 'Component Library/Button/As Button',
@@ -64,3 +64,32 @@ export const DisabledStates: Story = {
     </SBContainer>
   ),
 };
+
+export const InteractionStates: Story = {
+  name: 'Interaction States',
+  render: () => (
+    <SBContainer flex direction="column" gap="large">
+      <SBContainer addBackground>
+        <h4>Hover State</h4>
+        <p>Hover over the button to see the hover effect</p>
+        <Button buttonType="button" variant="primary">
+          Hover me
+        </Button>
+      </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>
+          <Button buttonType="button" variant="primary">
+            Focused button
+          </Button>
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Button/stories/Button.AsLink.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from '../index.js';
 import { ButtonAsLinkProps } from '../types.js';
 import { withButtonStyles } from './ButtonDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
 
 const meta: Meta<ButtonAsLinkProps> = {
   title: 'Component Library/Button/As Link',
@@ -68,3 +68,40 @@ export const LinkTargets: Story = {
     </SBContainer>
   ),
 };
+
+export const InteractionStates: Story = {
+  name: 'Interaction States',
+  render: () => (
+    <SBContainer flex direction="column" gap="large">
+      <SBContainer addBackground>
+        <h4>Hover State</h4>
+        <p>Hover over the button to see the hover effect</p>
+        <Button
+          buttonType="link"
+          href="https://www.hubspot.com"
+          variant="primary"
+        >
+          Hover me
+        </Button>
+      </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>
+          <Button
+            buttonType="link"
+            href="https://www.hubspot.com"
+            variant="primary"
+          >
+            Focused button
+          </Button>
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Button/stories/ButtonDecorator.tsx

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

package/components/componentLibrary/Button/types.ts

@@ -4,6 +4,8 @@ import {
 } from '@hubspot/cms-components/fields';
 import { IconContentFieldsWithToggleProps } from '../Icon/types.js';
 
+export type IconPositionHorizontal = 'left' | 'right';
+
 // Base props shared by all variants
 export type BaseButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'; // !todo: not used atm but keeping for when we need to add variant system.
@@ -11,7 +13,7 @@ export type BaseButtonProps = {
   style?: React.CSSProperties;
   children?: React.ReactNode;
   iconFieldPath?: string;
-  iconPosition?: 'left' | 'right';
+  iconPosition?: IconPositionHorizontal;
   iconSize?: number;
   showIcon?: boolean;
   iconPurpose?: 'SEMANTIC' | 'DECORATIVE';
@@ -56,6 +58,9 @@ export type StyleFieldsProps = {
   buttonVariantLabel?: string;
   buttonVariantName?: string;
   buttonVariantDefault?: string;
+  buttonIconPositionLabel?: string;
+  buttonIconPositionName?: string;
+  buttonIconPositionDefault?: IconPositionHorizontal;
 };
 
 export type RenderWithIconProps = Pick<

package/components/componentLibrary/Card/StyleFields.tsx

@@ -1,14 +1,14 @@
 import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   variantLabel = 'Card Variant',
   variantName = 'variant',
   variantDefault = 'elevated',
   borderRadiusLabel = 'Border Radius',
   borderRadiusName = 'borderRadius',
   borderRadiusDefault = 8,
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -31,4 +31,6 @@ export default function StyleFields({
       />
     </>
   );
-}
+};
+
+export default StyleFields;