@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/LanguageSwitcher/LanguageOptions.tsx

@@ -0,0 +1,65 @@
+import styles from './LanguageOptions.module.scss';
+import cx from '../utils/classname.js';
+import type { CSSVariables } from '../utils/types.js';
+import type { LanguageOptionsProps } from './types.js';
+import List, { ListItem } from '../List/index.js';
+import Link from '../Link/index.js';
+
+const LanguageOptions = ({
+  translations,
+  menuBackgroundColor,
+  menuBackgroundColorHover,
+  color,
+  colorHover,
+}: LanguageOptionsProps) => {
+  if (!translations || translations.length <= 1) {
+    return null;
+  }
+
+  const cssVariables: CSSVariables = {
+    ...(color?.rgba && {
+      '--hscl-languageSwitcher-color': color.rgba,
+    }),
+    ...(menuBackgroundColor?.rgba && {
+      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColor.rgba,
+    }),
+    ...(menuBackgroundColorHover?.rgba && {
+      '--hscl-languageSwitcher-backgroundColor-hover':
+        menuBackgroundColorHover.rgba,
+    }),
+    ...(colorHover?.rgba && {
+      '--hscl-languageSwitcher-color-hover': colorHover.rgba,
+    }),
+  };
+
+  return (
+    <List
+      style={cssVariables}
+      role="menu"
+      className={styles.languageList}
+      gap="0px"
+      showMarker={false}
+    >
+      {translations.map(translation => (
+        <ListItem
+          key={translation.languageCode}
+          role="menuitem"
+          className={cx(styles.languageItem, {
+            [styles['languageItem--active']]: translation.isActive,
+          })}
+        >
+          <Link
+            href={translation.localizedUrl}
+            lang={translation.languageCode}
+            // hrefLang={translation.languageCode} // this was in the Elevate implementation, so leaving here for now
+            className={styles.languageLink}
+          >
+            {translation.languageDisplayName.LOCALIZED}
+          </Link>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default LanguageOptions;

package/components/componentLibrary/LanguageSwitcher/StyleFields.tsx

@@ -0,0 +1,48 @@
+import { ColorField } from '@hubspot/cms-components/fields';
+import type { StyleFieldsProps } from './types.js';
+
+const StyleFields = ({
+  colorLabel = 'Text color',
+  colorName = 'color',
+  colorDefault = { color: '#000000', opacity: 100 },
+  colorHoverLabel = 'Text color (hover)',
+  colorHoverName = 'colorHover',
+  colorHoverDefault = { color: '#000000', opacity: 100 },
+  menuBackgroundColorLabel = 'Menu background color',
+  menuBackgroundColorName = 'menuBackgroundColor',
+  menuBackgroundColorDefault = { color: '#FFFFFF', opacity: 100 },
+  menuBackgroundColorHoverLabel = 'Menu background color (hover)',
+  menuBackgroundColorHoverName = 'menuBackgroundColorHover',
+  menuBackgroundColorHoverDefault = { color: '#eaeaea', opacity: 100 },
+}: StyleFieldsProps) => {
+  return (
+    <>
+      <ColorField
+        label={colorLabel}
+        name={colorName}
+        default={colorDefault}
+        showOpacity={false}
+      />
+      <ColorField
+        label={colorHoverLabel}
+        name={colorHoverName}
+        default={colorHoverDefault}
+        showOpacity={false}
+      />
+      <ColorField
+        label={menuBackgroundColorLabel}
+        name={menuBackgroundColorName}
+        default={menuBackgroundColorDefault}
+        showOpacity={false}
+      />
+      <ColorField
+        label={menuBackgroundColorHoverLabel}
+        name={menuBackgroundColorHoverName}
+        default={menuBackgroundColorHoverDefault}
+        showOpacity={false}
+      />
+    </>
+  );
+};
+
+export default StyleFields;

package/components/componentLibrary/LanguageSwitcher/_dummyData.tsx

@@ -0,0 +1,247 @@
+import { LanguageVariant } from '@hubspot/cms-components';
+
+export const dummyTranslationsAsObject = {
+  fr: {
+    isActive: false,
+    languageCode: 'fr',
+    languageDisplayName: {
+      PAGELANG: 'Französisch',
+      LOCALIZED: 'Français',
+      HYBRID: 'Français (Französisch)',
+    },
+    localizedUrl: 'https://www.example.com/fr/asdfasd',
+  },
+  en: {
+    isActive: false,
+    languageCode: 'en',
+    languageDisplayName: {
+      PAGELANG: 'Englisch',
+      LOCALIZED: 'English',
+      HYBRID: 'English (Englisch)',
+    },
+    localizedUrl: 'https://www.example.com/asdfasd',
+  },
+  de: {
+    isActive: true,
+    languageCode: 'de',
+    languageDisplayName: {
+      PAGELANG: 'Deutsch',
+      LOCALIZED: 'Deutsch',
+      HYBRID: 'Deutsch',
+    },
+    localizedUrl: 'https://www.example.com/de/asdfasd',
+  },
+  es: {
+    isActive: false,
+    languageCode: 'es',
+    languageDisplayName: {
+      PAGELANG: 'Spanisch',
+      LOCALIZED: 'Español',
+      HYBRID: 'Español (Spanisch)',
+    },
+    localizedUrl: 'https://www.example.com/es/asdfasd',
+  },
+  it: {
+    isActive: false,
+    languageCode: 'it',
+    languageDisplayName: {
+      PAGELANG: 'Italienisch',
+      LOCALIZED: 'Italiano',
+      HYBRID: 'Italiano (Italienisch)',
+    },
+    localizedUrl: 'https://www.example.com/it/asdfasd',
+  },
+  zh: {
+    isActive: false,
+    languageCode: 'zh',
+    languageDisplayName: {
+      PAGELANG: 'Chinesisch',
+      LOCALIZED: '中文',
+      HYBRID: '中文 (Chinesisch)',
+    },
+    localizedUrl: 'https://www.example.com/zh/asdfasd',
+  },
+  ru: {
+    isActive: false,
+    languageCode: 'ru',
+    languageDisplayName: {
+      PAGELANG: 'Russisch',
+      LOCALIZED: 'Русский',
+      HYBRID: 'Русский (Russisch)',
+    },
+    localizedUrl: 'https://www.example.com/ru/asdfasd',
+  },
+  ko: {
+    isActive: false,
+    languageCode: 'ko',
+    languageDisplayName: {
+      PAGELANG: 'Koreanisch',
+      LOCALIZED: '한국어',
+      HYBRID: '한국어 (Koreanisch)',
+    },
+    localizedUrl: 'https://www.example.com/ko/asdfasd',
+  },
+  ar: {
+    isActive: false,
+    languageCode: 'ar',
+    languageDisplayName: {
+      PAGELANG: 'Arabisch',
+      LOCALIZED: 'العربية',
+      HYBRID: 'العربية (Arabisch)',
+    },
+    localizedUrl: 'https://www.example.com/ar/asdfasd',
+  },
+  fi: {
+    isActive: false,
+    languageCode: 'fi',
+    languageDisplayName: {
+      PAGELANG: 'Finnisch',
+      LOCALIZED: 'Suomi',
+      HYBRID: 'Suomi (Finnisch)',
+    },
+    localizedUrl: 'https://www.example.com/fi/asdfasd',
+  },
+  tr: {
+    isActive: false,
+    languageCode: 'tr',
+    languageDisplayName: {
+      PAGELANG: 'Türkisch',
+      LOCALIZED: 'Türkçe',
+      HYBRID: 'Türkçe (Türkisch)',
+    },
+    localizedUrl: 'https://www.example.com/tr/asdfasd',
+  },
+  he: {
+    isActive: false,
+    languageCode: 'he',
+    languageDisplayName: {
+      PAGELANG: 'Hebräisch',
+      LOCALIZED: 'עברית',
+      HYBRID: 'עברית (Hebräisch)',
+    },
+    localizedUrl: 'https://www.example.com/he/asdfasd',
+  },
+};
+
+export const dummyTranslations: LanguageVariant[] = [
+  {
+    isActive: false,
+    languageCode: 'fr',
+    languageDisplayName: {
+      PAGELANG: 'Französisch',
+      LOCALIZED: 'Français',
+      HYBRID: 'Français (Französisch)',
+    },
+    localizedUrl: 'https://www.example.com/fr/asdfasd',
+  },
+  {
+    isActive: true,
+    languageCode: 'de',
+    languageDisplayName: {
+      PAGELANG: 'Deutsch',
+      LOCALIZED: 'Deutsch',
+      HYBRID: 'Deutsch',
+    },
+    localizedUrl: 'https://www.example.com/de/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'en',
+    languageDisplayName: {
+      PAGELANG: 'Englisch',
+      LOCALIZED: 'English',
+      HYBRID: 'English (Englisch)',
+    },
+    localizedUrl: 'https://www.example.com/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'es',
+    languageDisplayName: {
+      PAGELANG: 'Spanisch',
+      LOCALIZED: 'Español',
+      HYBRID: 'Español (Spanisch)',
+    },
+    localizedUrl: 'https://www.example.com/es/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'it',
+    languageDisplayName: {
+      PAGELANG: 'Italienisch',
+      LOCALIZED: 'Italiano',
+      HYBRID: 'Italiano (Italienisch)',
+    },
+    localizedUrl: 'https://www.example.com/it/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'zh',
+    languageDisplayName: {
+      PAGELANG: 'Chinesisch',
+      LOCALIZED: '中文',
+      HYBRID: '中文 (Chinesisch)',
+    },
+    localizedUrl: 'https://www.example.com/zh/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'ru',
+    languageDisplayName: {
+      PAGELANG: 'Russisch',
+      LOCALIZED: 'Русский',
+      HYBRID: 'Русский (Russisch)',
+    },
+    localizedUrl: 'https://www.example.com/ru/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'ko',
+    languageDisplayName: {
+      PAGELANG: 'Koreanisch',
+      LOCALIZED: '한국어',
+      HYBRID: '한국어 (Koreanisch)',
+    },
+    localizedUrl: 'https://www.example.com/ko/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'ar',
+    languageDisplayName: {
+      PAGELANG: 'Arabisch',
+      LOCALIZED: 'العربية',
+      HYBRID: 'العربية (Arabisch)',
+    },
+    localizedUrl: 'https://www.example.com/ar/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'fi',
+    languageDisplayName: {
+      PAGELANG: 'Finnisch',
+      LOCALIZED: 'Suomi',
+      HYBRID: 'Suomi (Finnisch)',
+    },
+    localizedUrl: 'https://www.example.com/fi/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'tr',
+    languageDisplayName: {
+      PAGELANG: 'Türkisch',
+      LOCALIZED: 'Türkçe',
+      HYBRID: 'Türkçe (Türkisch)',
+    },
+    localizedUrl: 'https://www.example.com/tr/asdfasd',
+  },
+  {
+    isActive: false,
+    languageCode: 'he',
+    languageDisplayName: {
+      PAGELANG: 'Hebräisch',
+      LOCALIZED: 'עברית',
+      HYBRID: 'עברית (Hebräisch)',
+    },
+    localizedUrl: 'https://www.example.com/he/asdfasd',
+  },
+];

package/components/componentLibrary/LanguageSwitcher/assets/Globe.tsx

@@ -0,0 +1,16 @@
+export default function GlobeIcon() {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.70469 9.54688L3.14531 10.3156C3.53437 10.9953 4.17188 11.4969 4.92656 11.7125L7.64062 12.4859C8.44687 12.7156 9 13.4516 9 14.2906V16.1609C9 16.6766 9.29062 17.1453 9.75 17.375C10.2094 17.6047 10.5 18.0734 10.5 18.5891V20.4172C10.5 21.1484 11.1984 21.6781 11.9016 21.4766C12.6562 21.2609 13.2422 20.6562 13.4344 19.8922L13.5656 19.3672C13.7625 18.575 14.2781 17.8953 14.9859 17.4922L15.3656 17.2766C16.0687 16.8781 16.5 16.1281 16.5 15.3219V14.9328C16.5 14.3375 16.2609 13.7656 15.8391 13.3438L15.6562 13.1609C15.2344 12.7391 14.6625 12.5 14.0672 12.5H12.0469C11.5266 12.5 11.0109 12.3641 10.5562 12.1063L8.93906 11.1828C8.7375 11.0656 8.58281 10.8781 8.50781 10.6578C8.35781 10.2078 8.55937 9.72031 8.98594 9.50937L9.2625 9.36875C9.57188 9.21406 9.93281 9.18594 10.2609 9.29844L11.3484 9.65937C11.7328 9.78594 12.1547 9.64062 12.375 9.30781C12.5953 8.97969 12.5719 8.54375 12.3187 8.23906L11.6812 7.475C11.2125 6.9125 11.2172 6.09219 11.6953 5.53906L12.4313 4.68125C12.8438 4.19844 12.9094 3.50938 12.5953 2.96094L12.4828 2.76406C12.3187 2.75469 12.1594 2.75 11.9953 2.75C7.64531 2.75 3.95625 5.60469 2.70469 9.54688ZM21.75 12.5C21.75 10.775 21.3 9.15312 20.5125 7.74219L19.3125 8.225C18.5766 8.52031 18.1969 9.34063 18.4453 10.0906L19.2375 12.4672C19.4016 12.9547 19.8 13.325 20.2969 13.4469L21.6609 13.7891C21.7172 13.3672 21.7453 12.9359 21.7453 12.5H21.75ZM0 12.5C0 9.3174 1.26428 6.26516 3.51472 4.01472C5.76516 1.76428 8.8174 0.5 12 0.5C15.1826 0.5 18.2348 1.76428 20.4853 4.01472C22.7357 6.26516 24 9.3174 24 12.5C24 15.6826 22.7357 18.7348 20.4853 20.9853C18.2348 23.2357 15.1826 24.5 12 24.5C8.8174 24.5 5.76516 23.2357 3.51472 20.9853C1.26428 18.7348 0 15.6826 0 12.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,58 @@
+.languageSwitcher {
+  position: relative;
+  display: inline-block;
+}
+
+.button {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  background-color: transparent;
+  color: var(--hscl-languageSwitcher-color, currentColor);
+  cursor: pointer;
+  font-size: 18px;
+  gap: 8px;
+
+  svg {
+    height: 20px;
+
+    path {
+      fill: currentcolor;
+    }
+  }
+}
+
+.drawer {
+  overflow-y: auto;
+  width: 400px;
+
+  @media (width <= 400px) {
+    width: 100%;
+  }
+}
+
+.sidePanelHeader {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  padding: 24px;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--hscl-languageSwitcher-backgroundColor, #ffffff);
+}
+
+.sidePanelTitle {
+  margin: 0;
+  color: var(--hscl-languageSwitcher-color, currentColor);
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.sidePanelCloseButton {
+  color: var(--hscl-languageSwitcher-color, currentColor);
+}
+
+.sidePanelOptionsContainer {
+  padding: 24px;
+}

package/components/componentLibrary/LanguageSwitcher/index.tsx

@@ -0,0 +1,125 @@
+import styles from './index.module.scss';
+import cx from '../utils/classname.js';
+import { getLanguageDisplayName } from './utils.js';
+import LanguageOptions from './LanguageOptions.js';
+import GlobeIcon from './assets/Globe.js';
+import type { LanguageSwitcherProps } from './types.js';
+import ContentFields from './ContentFields.js';
+import StyleFields from './StyleFields.js';
+import Button from '../Button/index.js';
+import { useLanguageVariants } from '@hubspot/cms-components';
+import { createTranslationsArrayAsObject } from './utils.js';
+import Drawer, { useDrawer } from '../Drawer/index.js';
+import { dummyTranslationsAsObject, dummyTranslations } from './_dummyData.js';
+import Divider from '../Divider/index.js';
+import type { CSSVariables } from '../utils/types.js';
+
+const LanguageSwitcherComponent = ({
+  useDummyData = false, // !todo - remove this in PROD (NOTE: storybook still needs the _dummyData, so add the _dummyData file to storybook dir and refactor usage there)
+  menuBackgroundColor,
+  menuBackgroundColorHover,
+  color,
+  colorHover,
+  languageSwitcherSelectText = 'Select a language',
+  className = '',
+  style = {},
+}: LanguageSwitcherProps) => {
+  const translations = useDummyData ? dummyTranslations : useLanguageVariants(); // !todo remove this in PROD
+  const translationsArrayAsObject = useDummyData
+    ? dummyTranslationsAsObject
+    : createTranslationsArrayAsObject(translations); // !todo remove this in PROD
+  const activeTranslation = translations?.find(item => item.isActive);
+  const currentPageLanguage = activeTranslation?.languageCode ?? '';
+  const currentPageLanguageDisplayName = getLanguageDisplayName({
+    currentPageLanguage,
+    translationsArrayAsObject,
+  });
+
+  const { isOpen, toggle, close } = useDrawer();
+
+  const isInEditor = false; // !todo - update this to use useEditorVariableChecks() hook (is_in_editor property) once it's working
+
+  const colorCss = color?.rgba;
+  const menuBackgroundColorCss = menuBackgroundColor?.rgba;
+
+  const cssVariables = {
+    ...(colorCss && { '--hscl-languageSwitcher-color': colorCss }),
+    ...(menuBackgroundColorCss && {
+      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColorCss,
+    }),
+  };
+
+  const dividerCssVariables: CSSVariables = {
+    '--hscl-divider-borderColor': colorCss,
+  };
+
+  const combinedClasses = cx(styles.languageSwitcher, className);
+
+  return (
+    <div style={{ ...cssVariables, ...style }} className={combinedClasses}>
+      <Button
+        buttonType="button"
+        aria-expanded={isOpen}
+        onClick={toggle}
+        className={styles.button}
+        style={{ color: colorCss }}
+      >
+        <GlobeIcon />
+        {currentPageLanguageDisplayName}
+      </Button>
+      {!isInEditor && (
+        <Drawer
+          open={isOpen}
+          direction="right"
+          onOverlayClick={close}
+          aria-label="Language selector"
+          className={styles.drawer}
+          style={{
+            ...cssVariables,
+            backgroundColor: menuBackgroundColorCss,
+          }}
+        >
+          <div className={styles.sidePanelHeader}>
+            <span className={styles.sidePanelTitle}>
+              {languageSwitcherSelectText}
+            </span>
+            <Button
+              buttonType="button"
+              onClick={close}
+              aria-label="Close language selector"
+              className={styles.sidePanelCloseButton}
+            >
+              ✕
+            </Button>
+          </div>
+
+          <Divider spacing="0px" style={dividerCssVariables} />
+
+          <div className={styles.sidePanelOptionsContainer}>
+            <LanguageOptions
+              {...{
+                translations,
+                menuBackgroundColor,
+                menuBackgroundColorHover,
+                color,
+                colorHover,
+              }}
+            />
+          </div>
+        </Drawer>
+      )}
+    </div>
+  );
+};
+
+type LanguageSwitcherComponentType = typeof LanguageSwitcherComponent & {
+  ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
+};
+
+const LanguageSwitcher =
+  LanguageSwitcherComponent as LanguageSwitcherComponentType;
+LanguageSwitcher.ContentFields = ContentFields;
+LanguageSwitcher.StyleFields = StyleFields;
+
+export default LanguageSwitcher;