@hubspot/cms-component-library 0.1.0-beta.1 → 0.2.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,11 @@
 import { ChoiceField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   buttonVariantLabel = 'Button variant',
   buttonVariantName = 'buttonVariant',
   buttonVariantDefault = 'primary',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -20,4 +20,6 @@ export default function StyleFields({
       />
     </>
   );
-}
+};
+
+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/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/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;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Card from '../index.js';
 import { CardProps } from '../types.js';
 import { withCardStyles } from './CardDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
 
 const CardDivider = () => (
   <hr
@@ -212,3 +212,48 @@ export const EdgeCases: Story = {
     </SBContainer>
   ),
 };
+
+export const InteractionStates: Story = {
+  name: 'Interaction States (Wrapped in Link)',
+  render: () => (
+    <SBContainer flex direction="column" gap="large">
+      <SBContainer addBackground>
+        <h4>Clickable Card</h4>
+        <p>
+          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}>
+            <CardHeading>Clickable Feature Card</CardHeading>
+            <CardDivider />
+            <CardContent>
+              This entire card is wrapped in a link. Click anywhere on the card
+              to navigate.
+            </CardContent>
+          </Card>
+        </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' }}>
+            <Card borderRadius={8}>
+              <CardHeading>Focused Card</CardHeading>
+              <CardDivider />
+              <CardContent>
+                This card shows the focus outline when navigating with the
+                keyboard.
+              </CardContent>
+            </Card>
+          </a>
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

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

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

package/components/componentLibrary/Divider/ContentFields.tsx

@@ -1,7 +1,7 @@
 import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
 import { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   orientationLabel = 'Orientation',
   orientationName = 'orientation',
   orientationDefault = 'horizontal',
@@ -14,7 +14,7 @@ export default function ContentFields({
   thicknessLabel = 'Thickness',
   thicknessName = 'thickness',
   thicknessDefault = 1,
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -58,4 +58,6 @@ export default function ContentFields({
       />
     </>
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Divider/StyleFields.tsx

@@ -1,11 +1,11 @@
 import { ChoiceField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   borderStyleLabel = 'Border style',
   borderStyleName = 'borderStyle',
   borderStyleDefault = 'solid',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -22,4 +22,6 @@ export default function StyleFields({
       />
     </>
   );
-}
+};
+
+export default StyleFields;