@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/LanguageSwitcher/stories/LanguageSwitcher.stories.tsx

@@ -0,0 +1,349 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LanguageSwitcher from '../index.js';
+import { LanguageSwitcherProps } from '../types.js';
+import { withLanguageSwitcherStyles } from './LanguageSwitcherDecorator.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
+
+const meta: Meta<LanguageSwitcherProps> = {
+  title: 'Component Library/LanguageSwitcher',
+  component: LanguageSwitcher,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `The LanguageSwitcher component provides a button and drawer interface for selecting different language variants of a page. It displays the current page language and opens a slide-out panel with all available language options. The component uses the Drawer component internally for the language selection panel.`,
+      },
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
+  decorators: [withLanguageSwitcherStyles],
+  argTypes: {
+    useDummyData: {
+      control: 'boolean',
+      description: 'Use dummy translation data for testing',
+      table: {
+        category: 'Development',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    languageSwitcherSelectText: {
+      control: 'text',
+      description: 'Text displayed in the drawer header',
+      table: {
+        category: 'Content',
+        defaultValue: { summary: 'Select a language' },
+      },
+    },
+    textColor: {
+      control: 'object',
+      description: 'Text color for button and menu items',
+      table: {
+        category: 'Visual',
+      },
+    },
+    textColorHover: {
+      control: 'object',
+      description: 'Text color for menu items on hover',
+      table: {
+        category: 'Visual',
+      },
+    },
+    menuBackgroundColor: {
+      control: 'object',
+      description: 'Background color for the drawer',
+      table: {
+        category: 'Visual',
+      },
+    },
+    menuBackgroundColorHover: {
+      control: 'object',
+      description: 'Background color for menu items on hover',
+      table: {
+        category: 'Visual',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes',
+      table: {
+        category: 'Basic',
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles',
+      table: {
+        category: 'Basic',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <SBContainer>
+        <LanguageSwitcher
+          useDummyData={true}
+          languageSwitcherSelectText="Select a language"
+        />
+      </SBContainer>
+    );
+  },
+};
+
+export const ColorThemes: Story = {
+  name: 'Color Themes',
+  render: () => {
+    const purpleTextColor = {
+      rgba: 'rgba(139, 0, 139, 1)',
+    };
+
+    const purpleTextColorHover = {
+      rgba: 'rgba(186, 85, 211, 1)',
+    };
+
+    const purpleMenuBgColor = {
+      rgba: 'rgba(243, 229, 245, 1)',
+    };
+
+    const purpleMenuBgColorHover = {
+      rgba: 'rgba(225, 190, 231, 1)',
+    };
+
+    const darkTextColor = {
+      rgba: 'rgba(255, 255, 255, 0.9)',
+    };
+
+    const darkTextColorHover = {
+      rgba: 'rgba(100, 181, 246, 1)',
+    };
+
+    const darkMenuBgColor = {
+      rgba: 'rgba(33, 33, 33, 1)',
+    };
+
+    const darkMenuBgColorHover = {
+      rgba: 'rgba(66, 66, 66, 1)',
+    };
+
+    return (
+      <SBContainer flex direction="column" gap="large">
+        <SBContainer addBackground>
+          <h4>Purple Theme</h4>
+          <p>Custom color theming with purple tones.</p>
+          <SBContainer>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Wählen Sie eine Sprache"
+              textColor={purpleTextColor}
+              textColorHover={purpleTextColorHover}
+              menuBackgroundColor={purpleMenuBgColor}
+              menuBackgroundColorHover={purpleMenuBgColorHover}
+            />
+          </SBContainer>
+        </SBContainer>
+
+        <SBContainer style={{ backgroundColor: '#121212' }}>
+          <SBContainer style={{ marginBottom: '16px' }}>
+            <h4 style={{ color: 'white', margin: '0 0 8px 0' }}>
+              Dark Mode Theme
+            </h4>
+            <p style={{ color: 'white', margin: 0 }}>
+              Language switcher optimized for dark backgrounds with high
+              contrast colors.
+            </p>
+          </SBContainer>
+          <SBContainer>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Select a language"
+              textColor={darkTextColor}
+              textColorHover={darkTextColorHover}
+              menuBackgroundColor={darkMenuBgColor}
+              menuBackgroundColorHover={darkMenuBgColorHover}
+            />
+          </SBContainer>
+        </SBContainer>
+      </SBContainer>
+    );
+  },
+};
+
+export const CustomText: Story = {
+  name: 'Custom Header Text',
+  render: () => {
+    return (
+      <SBContainer flex direction="column" gap="large">
+        <SBContainer addBackground>
+          <h4>Different Languages for Header Text</h4>
+          <p>
+            The languageSwitcherSelectText prop can be customized to match your
+            site's language or messaging.
+          </p>
+        </SBContainer>
+
+        <SBContainer flex direction="row" gap="medium">
+          <SBContainer>
+            <p style={{ marginBottom: '12px' }}>
+              <strong>🇬🇧 English:</strong>
+            </p>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Select a language"
+            />
+          </SBContainer>
+
+          <SBContainer>
+            <p style={{ marginBottom: '12px' }}>
+              <strong>🇩🇪 German:</strong>
+            </p>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Sprache wählen"
+            />
+          </SBContainer>
+
+          <SBContainer>
+            <p style={{ marginBottom: '12px' }}>
+              <strong>🇪🇸 Spanish:</strong>
+            </p>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Seleccionar idioma"
+            />
+          </SBContainer>
+
+          <SBContainer>
+            <p style={{ marginBottom: '12px' }}>
+              <strong>🇫🇷 French:</strong>
+            </p>
+            <LanguageSwitcher
+              useDummyData={true}
+              languageSwitcherSelectText="Choisir une langue"
+            />
+          </SBContainer>
+        </SBContainer>
+      </SBContainer>
+    );
+  },
+};
+
+export const InContext: Story = {
+  name: 'In Page Context',
+  render: () => {
+    return (
+      <SBContainer style={{ minHeight: '100vh' }}>
+        <header
+          style={{
+            backgroundColor: '#0066cc',
+            color: 'white',
+            padding: '16px 24px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <SBContainer>
+            <h1 style={{ margin: 0, fontSize: '24px', color: 'white' }}>
+              My Website
+            </h1>
+            <p
+              style={{
+                margin: '4px 0 0 0',
+                fontSize: '14px',
+                opacity: 0.75,
+                color: 'white',
+              }}
+            >
+              Global multilingual site
+            </p>
+          </SBContainer>
+
+          <nav
+            style={{
+              display: 'flex',
+              gap: '24px',
+              alignItems: 'center',
+            }}
+          >
+            <a href="#home" style={{ color: 'white', textDecoration: 'none' }}>
+              Home
+            </a>
+            <a href="#about" style={{ color: 'white', textDecoration: 'none' }}>
+              About
+            </a>
+            <a
+              href="#contact"
+              style={{ color: 'white', textDecoration: 'none' }}
+            >
+              Contact
+            </a>
+
+            <div style={{ paddingTop: '6px' }}>
+              <LanguageSwitcher
+                useDummyData={true}
+                textColor={{ rgba: 'rgb(55, 245, 255)' }}
+                textColorHover={{ rgba: 'rgb(255, 255, 255)' }}
+                menuBackgroundColor={{ rgba: 'rgba(100, 181, 246, 1)' }}
+                menuBackgroundColorHover={{ rgba: 'rgba(0, 160, 240, 1)' }}
+              />
+            </div>
+          </nav>
+        </header>
+
+        <main style={{ padding: '48px 24px' }}>
+          <SBContainer addBackground>
+            <h2>Welcome to our multilingual website</h2>
+            <p>
+              This example shows how the LanguageSwitcher component can be
+              integrated into a typical website header with navigation elements.
+            </p>
+            <p style={{ marginTop: '16px' }}>
+              The language switcher is positioned in the top right corner,
+              making it easily accessible to users who want to change the site
+              language.
+            </p>
+          </SBContainer>
+        </main>
+      </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 language switcher button to see the hover effect</p>
+        <LanguageSwitcher
+          useDummyData={true}
+          languageSwitcherSelectText="Select a language"
+        />
+      </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>
+          <LanguageSwitcher
+            useDummyData={true}
+            languageSwitcherSelectText="Select a language"
+          />
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/LanguageSwitcher/stories/LanguageSwitcherDecorator.module.scss

@@ -0,0 +1,5 @@
+.decoratorContainer {
+  min-height: 100vh;
+  width: 100%;
+  position: relative;
+}

package/components/componentLibrary/LanguageSwitcher/stories/LanguageSwitcherDecorator.tsx

@@ -0,0 +1,8 @@
+import type { Decorator } from '@storybook/react';
+import styles from './LanguageSwitcherDecorator.module.scss';
+
+export const withLanguageSwitcherStyles: Decorator = Story => (
+  <div className={styles.decoratorContainer}>
+    <Story />
+  </div>
+);

package/components/componentLibrary/LanguageSwitcher/types.ts

@@ -0,0 +1,48 @@
+import { LanguageVariant } from '@hubspot/cms-components';
+import {
+  ColorFieldDefaults,
+  TextFieldDefaults,
+} from '@hubspot/cms-components/fields';
+import type { CSSVariables } from '../utils/types.js';
+
+type ColorFieldValue = typeof ColorFieldDefaults;
+
+export type LanguageSwitcherProps = {
+  useDummyData?: boolean; // !todo - remove this in PROD
+  className?: string;
+  style?: CSSVariables;
+  color?: ColorFieldValue;
+  colorHover?: ColorFieldValue;
+  menuBackgroundColorHover?: ColorFieldValue;
+  menuBackgroundColor?: ColorFieldValue;
+  languageSwitcherSelectText?: string;
+};
+
+export type LanguageOptionsProps = {
+  translations: LanguageVariant[];
+  menuBackgroundColor?: ColorFieldValue;
+  menuBackgroundColorHover?: ColorFieldValue;
+  color?: ColorFieldValue;
+  colorHover?: ColorFieldValue;
+};
+
+export type ContentFieldsProps = {
+  languageSwitcherSelectTextLabel?: string;
+  languageSwitcherSelectTextName?: string;
+  languageSwitcherSelectTextDefault?: typeof TextFieldDefaults;
+};
+
+export type StyleFieldsProps = {
+  colorLabel?: string;
+  colorName?: string;
+  colorDefault?: ColorFieldValue;
+  colorHoverLabel?: string;
+  colorHoverName?: string;
+  colorHoverDefault?: ColorFieldValue;
+  menuBackgroundColorLabel?: string;
+  menuBackgroundColorName?: string;
+  menuBackgroundColorDefault?: ColorFieldValue;
+  menuBackgroundColorHoverLabel?: string;
+  menuBackgroundColorHoverName?: string;
+  menuBackgroundColorHoverDefault?: ColorFieldValue;
+};

package/components/componentLibrary/LanguageSwitcher/utils.tsx

@@ -0,0 +1,38 @@
+import { LanguageVariant } from '@hubspot/cms-components';
+
+// Define interfaces for styled components props
+
+type TranslationsArrayAsObject = Record<string, LanguageVariant>;
+
+type GetLanguageDisplayNameArgs = {
+  currentPageLanguage: string;
+  translationsArrayAsObject: TranslationsArrayAsObject | null;
+};
+
+// Shared utility functions
+export const getLanguageDisplayName = (args: GetLanguageDisplayNameArgs) => {
+  const { currentPageLanguage, translationsArrayAsObject } = args;
+
+  if (!translationsArrayAsObject || !currentPageLanguage) {
+    return '';
+  }
+
+  return (
+    translationsArrayAsObject[currentPageLanguage]?.languageDisplayName
+      .LOCALIZED ?? ''
+  );
+};
+
+export const createTranslationsArrayAsObject = (
+  translations: LanguageVariant[]
+): TranslationsArrayAsObject | null => {
+  // Early return if no translations
+  if (!translations || translations.length <= 1) {
+    return null;
+  }
+
+  return translations.reduce<TranslationsArrayAsObject>((acc, translation) => {
+    acc[translation.languageCode] = translation;
+    return acc;
+  }, {});
+};

package/components/componentLibrary/Link/ContentFields.tsx

@@ -1,7 +1,7 @@
 import { LinkField } from '@hubspot/cms-components/fields';
 import { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   linkLabel = 'Link',
   linkName = 'link',
   linkDefault = {
@@ -11,6 +11,8 @@ export default function ContentFields({
       href: 'https://www.hubspot.com',
     },
   },
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return <LinkField label={linkLabel} name={linkName} default={linkDefault} />;
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/Link/StyleFields.tsx

@@ -2,11 +2,11 @@ import { ChoiceField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 // !todo: may not need later, but keeping for now in case we have variant system for links
-export default function StyleFields({
+const StyleFields = ({
   linkVariantLabel = 'Link variant',
   linkVariantName = 'linkVariant',
   linkVariantDefault = 'primary',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
     <>
       <ChoiceField
@@ -21,4 +21,6 @@ export default function StyleFields({
       />
     </>
   );
-}
+};
+
+export default StyleFields;

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

@@ -8,4 +8,14 @@
     color: var(--hscl-link-color-hover);
     text-decoration: var(--hscl-link-textDecoration-hover, underline);
   }
+
+  &:focus-visible {
+    outline: var(--hscl-link-outlineWidth-focus, 2px) solid var(--hscl-link-outlineColor-focus, currentColor);
+    outline-offset: var(--hscl-link-outlineOffset-focus, 2px);
+  }
+
+  &:active {
+    color: var(--hscl-link-color-active, var(--hscl-link-color));
+    text-decoration: var(--hscl-link-textDecoration-active, var(--hscl-link-textDecoration, underline));
+  }
 }

package/components/componentLibrary/Link/index.tsx

@@ -3,34 +3,43 @@ import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
 import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
-import { LinkProps } from './types.js';
+import { LinkProps, BaseLinkProps, LinkHTMLProps } from './types.js';
 import {
   getLinkRel,
   getLinkFieldTarget,
   getLinkFieldRel,
 } from '../utils/linkField.js';
 
-const LinkComponent = ({
-  variant = 'primary',
-  className = '',
-  style = {},
-  children,
-  ...props
-}: LinkProps) => {
+const getLinkValues = (props: Omit<LinkProps, keyof BaseLinkProps>) => {
   let href: string;
   let target: '_self' | '_blank' | '_parent' | '_top';
   let relValues: string | undefined;
+  let anchorProps: LinkHTMLProps;
 
+  // if linkField was passed in, use it for attrs; otherwise, build up link attrs from props
   if ('linkField' in props && props.linkField) {
-    href = props.linkField.url?.href || '';
-    target = getLinkFieldTarget(props.linkField);
-    relValues = getLinkFieldRel(props.linkField);
+    const { linkField, ...otherProps } = props;
+    href = linkField.url?.href || '';
+    target = getLinkFieldTarget(linkField);
+    relValues = getLinkFieldRel(linkField);
+    anchorProps = otherProps;
   } else {
-    href = props.href || '';
-    target = props.target || '_self';
+    ({ href = '', target = '_self', ...anchorProps } = props);
     relValues = getLinkRel(target, props.rel);
   }
 
+  return { href, target, rel: relValues, anchorProps };
+};
+
+const LinkComponent = ({
+  variant = 'primary',
+  className = '',
+  style = {},
+  children,
+  ...rest
+}: LinkProps) => {
+  const { href, target, rel, anchorProps } = getLinkValues(rest);
+
   const defaultClasses = styles.link;
   const combinedClasses = cx(defaultClasses, className);
 
@@ -45,7 +54,8 @@ const LinkComponent = ({
       style={{ ...cssVariables, ...style }}
       href={href}
       target={target}
-      rel={relValues}
+      rel={rel}
+      {...anchorProps}
     >
       {children}
     </a>

package/components/componentLibrary/Link/stories/Link.stories.tsx

@@ -2,13 +2,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Link from '../index.js';
 import { LinkProps } from '../types.js';
 import { withLinkStyles } from './LinkDecorator.js';
-import { SBContainer } from '@sb-utils/SBContainer.js';
+import { SBContainer, SBFocusWrapper } from '@sb-utils';
 import { SBCard } from '@sb-utils/SBCard.js';
+import type { CSSVariables } from '../../utils/types.js';
 
-const removeUnderlineStyle = {
-  ['--hscl-link-textDecoration' as string]: 'none',
-  ['--hscl-link-textDecoration-hover' as string]: 'none',
-} as React.CSSProperties;
+const removeUnderlineStyle: CSSVariables = {
+  '--hscl-link-textDecoration': 'none',
+  '--hscl-link-textDecoration-hover': 'none',
+};
 
 const meta: Meta<LinkProps> = {
   title: 'Component Library/Link',
@@ -170,3 +171,32 @@ export const InContext: 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 link to see the hover effect</p>
+        <Link href="https://www.hubspot.com" variant="primary">
+          Hover me
+        </Link>
+      </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>
+          <Link href="https://www.hubspot.com" variant="primary">
+            Focused link
+          </Link>
+        </SBFocusWrapper>
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Link/stories/LinkDecorator.tsx

@@ -1,7 +1,17 @@
 import type { Decorator } from '@storybook/react';
+import type { CSSVariables } from '../../utils/types.js';
+
+const defaultLinkStyles: CSSVariables = {
+  '--hscl-link-color-primary': '#0066cc',
+  '--hscl-link-color-secondary': '#516f90',
+  '--hscl-link-color-tertiary': '#7c98b6',
+  '--hscl-link-color-hover-primary': '#0052a3',
+  '--hscl-link-color-hover-secondary': '#33475b',
+  '--hscl-link-color-hover-tertiary': '#516f90',
+};
 
 export const withLinkStyles: Decorator = Story => (
-  <div>
+  <div style={defaultLinkStyles}>
     <Story />
   </div>
 );