@digigov/ui 0.30.2 → 0.31.0

package/src/hooks/useFontSize.ts

@@ -0,0 +1,32 @@
+import useVariantVars, { UseVariantVarsResult } from "@digigov/ui/hooks/useVariantVars";
+
+export type FontSizeOptions = 'default' | 'large';
+export type StoredFontSizeOptions = FontSizeOptions | null;
+
+export type UseFontSizeResult = UseVariantVarsResult<FontSizeOptions>
+
+export const useFontSize = (): UseFontSizeResult => {
+
+  const config = {
+    'name': 'font-size',
+    'variables': [
+      'text-sm',
+      'text-base',
+      'text-lg',
+      'text-xl',
+      'text-2xl',
+      'text-3xl',
+      'text-4xl',
+      'text-5xl',
+    ],
+    'variants': [
+      'default',
+      'large'
+    ]
+  }
+  return useVariantVars(config);
+};
+
+
+
+export default useFontSize;

package/src/hooks/useHighlightLinks.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+
+export type HighlightLinksOptions = 'default' | 'highlight';
+export type StoredHighlightLinksOptions = HighlightLinksOptions | null;
+
+export type UseHighlightLinksResult = [
+  highlightLinks: HighlightLinksOptions,
+  changeHighlightLinks: (selectedHighlightLinks: HighlightLinksOptions) => void,
+]
+
+export const useHighlightLinks = (): UseHighlightLinksResult => {
+  const storedHighlightLinks = localStorage.getItem('--theme-highlight-links') as StoredHighlightLinksOptions;
+
+  const [highlightLinks, changeHighlightLinks] = useState<HighlightLinksOptions>(
+    storedHighlightLinks || 'default'
+  );
+
+  useEffect(() => {    
+    if (highlightLinks === 'highlight') {
+      document.documentElement.classList.add(`govgr-highlight-links`);
+    } else {
+      document.documentElement.classList.remove(`govgr-highlight-links`);
+    }
+    localStorage.setItem('--theme-highlight-links', highlightLinks);
+  }, [highlightLinks]);
+  
+  useEffect(() => {
+    const beforePrintListener = () => {
+      document.documentElement.classList.remove(`govgr-highlight-links`);
+    };
+    const afterPrintListener = () => {
+      document.documentElement.classList.add(localStorage.getItem('--theme-highlight-links')=== 'highlight' ? `govgr-highlight-links`: ''); 
+    };
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return () => {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+
+  return [highlightLinks, changeHighlightLinks ];
+};
+
+export default useHighlightLinks;

package/src/hooks/useLetterSpacing.ts

@@ -0,0 +1,27 @@
+import useVariantVars, { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+
+export type LetterSpacingOptions = 'default' | 'extra';
+export type StoredLetterSpacingOptions = LetterSpacingOptions | null;
+
+export type UseLetterSpacingResult = UseVariantVarsResult<LetterSpacingOptions>
+
+export const useLetterSpacing = (): UseLetterSpacingResult => {
+
+  const config = {
+    name: 'letter-spacing',
+    variables: [
+      "letter-spacing-normal",
+      "letter-spacing-wide",
+      "letter-spacing-wider",
+      "letter-spacing-widest"
+    ],
+    variants: [
+      'default',
+      'extra'
+    ]
+  }
+
+  return useVariantVars(config);
+};
+
+export default useLetterSpacing;

package/src/hooks/useLineHeight.ts

@@ -0,0 +1,31 @@
+import useVariantVars, { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+
+export type LineHeightOptions = 'default' | 'large';
+export type StoredLineHeightOptions = LineHeightOptions | null;
+
+export type UseLineHeightResult = UseVariantVarsResult<LineHeightOptions>
+
+export const useLineHeight = (): UseLineHeightResult => {
+
+    const config = {
+    name: 'line-height',
+    variables: [
+      "line-h-sm",
+      "line-h-base",
+      "line-h-lg",
+      "line-h-xl",
+      "line-h-2xl",
+      "line-h-3xl",
+      "line-h-4xl",
+      "line-h-5xl"
+    ],
+    variants: [
+      'default',
+      'large'
+    ]
+  }
+    return useVariantVars(config);
+
+};
+
+export default useLineHeight;

package/src/hooks/useNavList.ts

@@ -1,18 +1,16 @@
+import { useTogglableNav, UseTogglableNavReturn } from '@digigov/ui/hooks/useTogglableNav';
 import { useCallback, useRef } from 'react';
-import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
 
-export interface UseNavListReturn extends UseTogglableSectionsReturn {
+export interface UseNavListReturn extends UseTogglableNavReturn {
   container: (key: string) => { active: boolean; id: string };
 }
 export const useNavList = (): UseNavListReturn => {
   const registeredContainers = useRef({});
 
-  const { register, opened, ...rest } = useTogglableSections({
+  const { registerButton, registerLink, opened, ...rest } = useTogglableNav({
     singleOpen: true,
     toggleOpenClose: true,
+    toggleParentOpen: true,
     toggleProperty: 'active',
     onToggleProperty: 'onClick',
     ariaNavigation: true,
@@ -31,6 +29,6 @@ export const useNavList = (): UseNavListReturn => {
     },
     [opened]
   );
-  return { register, opened, container, ...rest };
+  return { registerButton, registerLink, opened, container, ...rest };
 };
 

package/src/hooks/useTheme.ts

@@ -3,37 +3,45 @@ import { useState, useEffect } from 'react';
 export type ThemeSelectOptions = 'light' | 'dark' | 'auto';
 export type StoredThemeOptions = ThemeSelectOptions | null;
 
-export interface UseThemeResult { 
-  theme: ThemeSelectOptions;
-  changeTheme: (
-    selectedTheme:ThemeSelectOptions,
-    ) => void;
-};
+export type UseThemeResult = [
+  theme: ThemeSelectOptions,
+  changeTheme: (selectedTheme: ThemeSelectOptions) => void,
+]
 
-export const useTheme = () : UseThemeResult  => {
+export const useTheme = (): UseThemeResult => {
   const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
     .matches;
-  const storedTheme = localStorage.getItem('theme') as StoredThemeOptions;
-
-  const [theme, changeTheme] = useState<ThemeSelectOptions>(storedTheme || 'auto');
+  const storedTheme = localStorage.getItem('--theme-palette') as StoredThemeOptions;
 
+  const [theme, changeTheme] = useState<ThemeSelectOptions>(
+    storedTheme || 'auto'
+  );
 
-useEffect(() => {
+  useEffect(() => {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
     if (theme === 'auto') {
-      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
     } else {
-      document.documentElement.className = theme;
+      document.documentElement.classList.add(theme);
     }
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('--theme-palette', theme);
   }, [theme]);
 
   useEffect(() => {
     const beforePrintListener = () => {
-      document.documentElement.className = 'light';
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
+      
     };
     const afterPrintListener = () => {
-      document.documentElement.className =
-        localStorage.getItem('theme') || theme;
+      document.documentElement.classList.remove('light');
+      let localtheme;
+      if (localStorage.getItem('--theme-palette') === 'auto') {
+        localtheme = prefersDarkScheme ? 'dark' : 'light';
+      } else {
+        localtheme = localStorage.getItem('--theme-palette');
+      }
+      document.documentElement.classList.add(localtheme || theme);
     };
     window.addEventListener('beforeprint', beforePrintListener);
     window.addEventListener('afterprint', afterPrintListener);
@@ -43,7 +51,7 @@ useEffect(() => {
     };
   }, []);
 
-  return {theme, changeTheme};
-}
+  return [ theme, changeTheme ];
+};
 
-export default useTheme;
+export default useTheme;

package/src/hooks/useTogglableNav.tsx

@@ -0,0 +1,294 @@
+import { useRef, useState, useCallback, useMemo } from 'react';
+
+export interface UseTogglableNavInterface {
+  toggleProperty: string;
+  singleOpen?: boolean;
+  toggleOpenClose?: boolean;
+  toggleParentOpen?: boolean;
+  onToggleProperty: string;
+  initial?: Record<string, boolean>;
+  firstOpen?: boolean;
+  ariaNavigation?: boolean;
+  toggleHook?: (id: string) => void;
+}
+
+export interface UseTogglableNavReturn {
+  registerButton: (el: string) => any;
+  registerLink: (el: string) => any;
+  registered: { current: Record<string, { el: HTMLElement; type: string }> };
+  opened: Record<string, boolean>;
+  toggle: (id: string) => void;
+  setOpened: (
+    opened:
+      | ((curOpened: Record<string, boolean>) => Record<string, boolean>)
+      | Record<string, boolean>
+  ) => void;
+}
+
+export function useTogglableNav({
+  toggleProperty,
+  toggleOpenClose,
+  toggleParentOpen,
+  onToggleProperty,
+  initial,
+  ariaNavigation,
+  toggleHook,
+}: UseTogglableNavInterface): UseTogglableNavReturn {
+  const [opened, setOpened] = useState(initial || {});
+  const registered = useRef<Record<string, { el: HTMLElement; type: string }>>(
+    {}
+  );
+  const openedKeys = useRef<string[]>([]);
+
+  const registerButtonRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'button',
+    };
+  }, []);
+
+  const registerLinkRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'link',
+    };
+  }, []);
+
+  const toggle = useCallback((e) => {
+    const key = e.currentTarget.getAttribute('aria-controls') as string;
+    const selected = ((e.currentTarget.getAttribute(
+      'aria-selected'
+    ) as string) === 'true') as boolean;
+    if (toggleHook) {
+      toggleHook(key);
+    }
+    e.preventDefault();
+    if (toggleOpenClose) {
+      if (toggleParentOpen) {
+        const items = key.split('__');
+        const currentKey = items.slice(0, items.length).join('__');
+        const totalKeys = items.map((_, index) => {
+          return items.slice(0, index + 1).join('__');
+        });
+
+        if (!selected && !openedKeys.current.includes(currentKey)) {
+          openedKeys.current.push(currentKey);
+        }
+        if (selected && openedKeys.current.includes(currentKey)) {
+          openedKeys.current = openedKeys.current.filter(
+            (k) => k !== currentKey
+          );
+        }
+
+        setOpened((_) => ({
+          ...totalKeys.reduce((acc, cur) => {
+            acc[cur] = cur === currentKey ? !selected : true;
+            return acc;
+          }, {}),
+        }));
+      } else {
+        setOpened({ [key]: !selected });
+      }
+    } else {
+      setOpened({ [key]: true });
+    }
+  }, []);
+
+  const getMenuItems = (element) => {
+    if (element) {
+      if (element?.role === 'menuitem') {
+        return element;
+      } else {
+        const childrenArray = Array.from(element?.children);
+        let menuItemsArray: any[] = [];
+        childrenArray.forEach((child) => {
+          const menuItem = getMenuItems(child);
+          if (menuItem && !menuItemsArray.includes(menuItem)) {
+            menuItemsArray.push(menuItem);
+          }
+        });
+        return menuItemsArray.flatMap((x) => x);
+      }
+    }
+    return null;
+  };
+
+  const findChildren = (parent, items) => {
+    return items
+      ? items.filter(
+          (child) => child.slice(0, child.lastIndexOf('__')) === parent
+        )
+      : items;
+  };
+
+  const findParent = (child, items) => {
+    const parent = child.slice(0, child.lastIndexOf('__'));
+    return items.find((item) => item === parent) ? parent : null;
+  };
+
+  const findSiblings = (key, items) => {
+    const parent = key.slice(0, key.lastIndexOf('__'));
+    if (key.lastIndexOf('__') > 0) {
+      return items.filter(
+        (child) => child.slice(0, child.lastIndexOf('__')) === parent
+      );
+    }
+    return items.filter((child) => !child.includes('__'));
+  };
+
+  const findLeftSibling = (key, items) => {
+    const siblings = findSiblings(key, items);
+    if (siblings.length > 0) {
+      const keyIndex = siblings.findIndex((item) => item === key);
+      return keyIndex > 0 ? siblings[keyIndex - 1] : null;
+    }
+    return null;
+  };
+
+  const findRightSibling = (key, items) => {
+    const siblings = findSiblings(key, items);
+    if (siblings.length > 0) {
+      const keyIndex = siblings.findIndex((item) => item === key);
+      return keyIndex < siblings.length - 1 ? siblings[keyIndex + 1] : null;
+    }
+    return null;
+  };
+
+  const getOpenItemChildren = (currentItem, items) => {
+    const itemChildrenArray: any[] = [];
+    const itemChildren = findChildren(currentItem, items);
+    itemChildren.forEach((item) => {
+      if (openedKeys.current.includes(item)) {
+        itemChildrenArray.push(item);
+        const internChildren = getOpenItemChildren(item, items);
+        if (internChildren.length > 0) {
+          itemChildrenArray.push(internChildren);
+        }
+      } else {
+        itemChildrenArray.push(item);
+      }
+    });
+    return itemChildrenArray.flatMap((x) => x);
+  };
+
+  const onKeyDown = useCallback((e) => {
+    const orientation = document
+      .querySelector(`[aria-orientation]`)
+      ?.getAttribute('aria-orientation');
+    const key = e.target.getAttribute('aria-controls');
+    const keys = Object.entries(registered.current).map(
+      ([entryKey, _]) => entryKey
+    );
+
+    const handleArrowRight = () => {
+      const arrowRightItem = findRightSibling(key, keys);
+      if (arrowRightItem) {
+        registered.current[arrowRightItem].el.focus();
+      }
+    };
+
+    const handleArrowLeft = () => {
+      const arrowLeftItem = findLeftSibling(key, keys);
+      if (arrowLeftItem) {
+        registered.current[arrowLeftItem].el.focus();
+      }
+    };
+
+    switch (e.key) {
+      case 'ArrowRight':
+        handleArrowRight();
+        break;
+      case 'ArrowDown':
+        const openItem = getOpenItemChildren(key, keys);
+        const arrowDownItems = findChildren(key, openItem);
+        const menuItems = getMenuItems(document.getElementById(key));
+
+        if (arrowDownItems.length > 0) {
+          registered.current[arrowDownItems[0]].el.focus();
+        } else {
+          if (orientation === 'vertical') {
+            if (
+              document.activeElement?.getAttribute('aria-selected') ===
+                'true' &&
+              menuItems &&
+              menuItems.length > 0
+            ) {
+              menuItems[0].focus();
+            } else {
+              handleArrowRight();
+            }
+          } else {
+            if (menuItems && menuItems.length > 0) {
+              menuItems[0].focus();
+            }
+          }
+        }
+
+        break;
+      case 'ArrowLeft':
+        handleArrowLeft();
+        break;
+      case 'ArrowUp':
+        if (orientation === 'vertical') {
+          handleArrowLeft();
+        } else {
+          const arrowUpItem = findParent(key, keys);
+          if (arrowUpItem) {
+            registered.current[arrowUpItem].el.focus();
+          }
+        }
+        break;
+      case ' ':
+      case 'Enter':
+        if (registered.current[key].type === 'link') {
+          registered.current[key].el.click();
+        } else {
+          toggle(e);
+        }
+        break;
+    }
+  }, []);
+
+  const registerButton = useCallback(
+    (key) => {
+      const isOpen = !!opened[key];
+      return {
+        ref: registerButtonRef,
+        [toggleProperty]: isOpen,
+        [onToggleProperty]: toggle,
+        'aria-controls': `${key}`,
+        ...(ariaNavigation && { onKeyDown }),
+      };
+    },
+    [opened]
+  );
+
+  const registerLink = useCallback(
+    (key) => {
+      return {
+        ref: registerLinkRef,
+        'aria-controls': `${key}`,
+        ...(ariaNavigation && { onKeyDown }),
+      };
+    },
+    [opened]
+  );
+
+  return useMemo(
+    () => ({
+      registerButton,
+      registerLink,
+      registered,
+      opened,
+      toggle,
+      setOpened,
+    }),
+    [opened]
+  );
+}

package/src/hooks/{useTogglableSections.tsx → useTogglableTab.tsx}

@@ -1,17 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useRef, useState, useCallback, useMemo } from 'react';
 
-export interface UseTogglableSectionsInterface {
+export interface UseTogglableTabInterface {
   toggleProperty: string;
   singleOpen?: boolean;
   toggleOpenClose?: boolean;
+  toggleParentOpen?: boolean;
   onToggleProperty: string;
   initial?: Record<string, boolean>;
   firstOpen?: boolean;
   ariaNavigation?: boolean;
   toggleHook?: (id: string) => void;
 }
-export interface UseTogglableSectionsReturn {
+export interface UseTogglableTabReturn {
   register: (el: string) => any;
   registered: { current: Record<string, HTMLElement> };
   opened: Record<string, boolean>;
@@ -22,19 +23,20 @@ export interface UseTogglableSectionsReturn {
       | Record<string, boolean>
   ) => void;
 }
-export function useTogglableSections({
+
+export function useTogglableTab({
   toggleProperty,
   singleOpen,
-  toggleOpenClose,
   onToggleProperty,
   initial,
   firstOpen,
   ariaNavigation,
   toggleHook,
-}: UseTogglableSectionsInterface): UseTogglableSectionsReturn {
+}: UseTogglableTabInterface): UseTogglableTabReturn {
   const [opened, setOpened] = useState(initial || {});
   const registered = useRef<Record<string, HTMLElement>>({});
   const sectionsOrder = useRef<string[]>([]);
+
   const registerRef = useCallback((el) => {
     if (!el) return;
     const key = el.getAttribute('aria-controls') as string;
@@ -47,25 +49,20 @@ export function useTogglableSections({
       });
     }
   }, []);
+
   const toggle = useCallback((e) => {
     const key = e.currentTarget.getAttribute('aria-controls') as string;
-    const selected = ((e.currentTarget.getAttribute(
-      'aria-selected'
-    ) as string) === 'true') as boolean;
     if (toggleHook) {
       toggleHook(key);
     }
     e.preventDefault();
     if (singleOpen) {
-      if (toggleOpenClose) {
-        setOpened({ [key]: !selected });
-      } else {
-        setOpened({ [key]: true });
-      }
+      setOpened({ [key]: true });
     } else {
       setOpened((prev) => ({ ...prev, [key]: !prev[key] }));
     }
   }, []);
+
   const onKeyDown = useCallback((e) => {
     const key = e.target.getAttribute('aria-controls');
     const currentIndex = sectionsOrder.current.findIndex((k) => k === key);
@@ -90,6 +87,7 @@ export function useTogglableSections({
         break;
     }
   }, []);
+
   const register = useCallback(
     (key) => {
       const isOpen = !!opened[key];
@@ -103,6 +101,7 @@ export function useTogglableSections({
     },
     [opened]
   );
+
   return useMemo(
     () => ({
       register,

package/src/hooks/useVariantVars.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+export interface VariantVarsOptions {
+  name: string;
+  variables: string[];
+  variants: string[];
+}
+
+export type UseVariantVarsResult<T> = [
+  value: T,
+  changeValue: (value: T) => void
+];
+
+function useVariantVars({
+  name,
+  variables,
+  variants,
+}: VariantVarsOptions): UseVariantVarsResult<any> {
+  const root = document.documentElement;
+  const storedValue = localStorage.getItem(`--theme-${name}`);
+  const [value, setValue] = useState(storedValue || variants[0]);
+
+  useEffect(() => {
+    localStorage.setItem(`--theme-${name}`, value);
+    variables.forEach((varName) => {
+      root.style.setProperty(`--${varName}`, `var(--${varName}-${value})`);
+    });
+  }, [value]);
+  function changeValue(v: string) {
+    setValue(v);
+  }
+  return [value, changeValue];
+}
+
+export default useVariantVars;

package/src/layouts/Basic/__stories__/Default.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { Layout } from '@digigov/ui/layouts/Basic';
-import { Content } from '@digigov/ui/layouts/Basic/Content';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
 import { Heading, Paragraph } from '@digigov/ui/typography';
 export const Default = () => (
   <Layout>
-    <Content>
+    <Container>
       <Main>
         <Heading>Two-thirds column</Heading>
         <Paragraph>
           This is a paragraph inside a two-thirds wide column
         </Paragraph>
       </Main>
-    </Content>
+    </Container>
   </Layout>
 );