@digigov/ui 0.30.3 → 0.32.0

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>
 );
 

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

@@ -1,33 +1,33 @@
 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 { Side } from '@digigov/ui/layouts/Basic/Side';
+import { Aside } from '@digigov/ui/layouts/Basic/Aside';
 import { Heading, Paragraph } from '@digigov/ui/typography';
 export const MultipleRowsLayout = () => (
   <Layout>
-    <Content>
+    <Container>
       <Main>
         <Heading>Two-thirds column</Heading>
         <Paragraph>
           This is a paragraph inside a two-thirds wide column
         </Paragraph>
       </Main>
-    </Content>
-    <Content>
+    </Container>
+    <Container>
       <Main>
         <Heading>Two-thirds column</Heading>
         <Paragraph>
           This is a paragraph inside a two-thirds wide column
         </Paragraph>
       </Main>
-      <Side>
+      <Aside>
         <Heading size="m">One-third-column</Heading>
         <Paragraph>
           This is a paragraph inside a one-third wide column
         </Paragraph>
-      </Side>
-    </Content>
+      </Aside>
+    </Container>
   </Layout>
 );
 

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

@@ -1,25 +1,25 @@
 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 { Side } from '@digigov/ui/layouts/Basic/Side';
+import { Aside } from '@digigov/ui/layouts/Basic/Aside';
 import { Heading, Paragraph } from '@digigov/ui/typography';
 export const TwoThirdsOneThirdColumns = () => (
   <Layout>
-    <Content>
+    <Container>
       <Main>
         <Heading>Two-thirds column</Heading>
         <Paragraph>
           This is a paragraph inside a two-thirds wide column
         </Paragraph>
       </Main>
-      <Side>
+      <Aside>
         <Heading size="m">One-third-column</Heading>
         <Paragraph>
           This is a paragraph inside a one-third wide column
         </Paragraph>
-      </Side>
-    </Content>
+      </Aside>
+    </Container>
   </Layout>
 );
 

package/src/locales/el.ts

@@ -33,6 +33,10 @@ export default {
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
       },
+      otp: {
+        invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
+        less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.',
+      },
     },
   },
   button: {