@digigov/ui 0.30.3 → 0.32.0

package/src/core/NavList/types.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
+import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { NavProps } from '@digigov/ui/core/NavList';
 
 export type NavListLayout = 'horizontal' | 'vertical';
 
-export interface NavListAutoProps {
+export interface NavListAutoProps extends NavProps {
   children?: React.ReactNode;
   className?: string;
   layout?: NavListLayout;
+  border?: boolean;
+  fixed?: boolean;
   role?: string;
   openSubMenus?: boolean;
   floating?: boolean;
@@ -16,6 +19,14 @@ export interface NavListAutoProps {
   style?: BaseCSSProperties;
 }
 
+export interface NavListHeaderItemType {
+  name: string;
+  label?: string;
+  title?: string;
+  children?: React.ReactNode;
+  subMenu: NavListItemLinkInterface[];
+}
+
 interface NavListItemInterface {
   name: string;
   label?: string;
@@ -27,18 +38,20 @@ interface NavListItemLinkInterface extends NavListItemInterface {
   href: string;
 }
 
-export interface NavListHeaderItemType {
-  name: string;
-  label?: string;
-  title?: string;
-  children?: React.ReactNode;
-  subMenu: NavListItemLinkInterface[];
+interface NavListItemMenuInterface extends NavListItemInterface {
+  links: NavListItemLinkInterface[];
 }
 
 export type NavListItemType =
   | NavListItemLinkInterface
+  | NavListItemMenuContainerInterface
   | NavListItemSubMenuInterface;
 
+export interface NavListItemMenuContainerInterface
+  extends NavListItemInterface {
+  menu: NavListItemMenuInterface[];
+}
+
 export interface NavListItemSubMenuInterface extends NavListItemInterface {
   subMenu: NavListItemType[];
 }
@@ -59,7 +72,7 @@ export interface NavListItemProps {
   children?: React.ReactNode;
   role?: string;
   link?: NavListItemType;
-  layout?: NavListLayout;
   active?: boolean;
-  setRegister?: (name: string) => any;
+  setRegisterButton?: (name: string) => any;
+  setRegisterLink?: (name: string) => any;
 }

package/src/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories.js

@@ -0,0 +1,13 @@
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+export default {
+  title: 'Digigov UI/core/SingleCharacterInputContainer',
+  description:
+    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
+  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
+  component: SingleCharacterInputContainer,
+  displayName: 'SingleCharacterInputContainer',
+};
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/Default';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithDefaultError';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit';

package/src/core/SingleCharacterInputContainer/__stories__/Default.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  SingleCharacterInputContainer,
+  SingleCharacterInputItem,
+} from '@digigov/ui/core/SingleCharacterInputContainer';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Default = () => (
+  <FieldContainer>
+    <Fieldset>
+      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
+      <Paragraph>
+        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο
+      </Paragraph>
+      <SingleCharacterInputContainer>
+        <SingleCharacterInputItem name="first-digit" value={4} />
+        <SingleCharacterInputItem name="second-digit" value={4} />
+        <SingleCharacterInputItem name="third-digit" value={5} />
+        <SingleCharacterInputItem name="forth-digit" value={1} />
+        <SingleCharacterInputItem name="fifth-digit" value={2} />
+        <SingleCharacterInputItem name="sixth-digit" value={3} />
+      </SingleCharacterInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Default;

package/src/core/SingleCharacterInputContainer/__stories__/WithDefaultError.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  SingleCharacterInputContainer,
+  SingleCharacterInputItem,
+} from '@digigov/ui/core/SingleCharacterInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+export const WithDefaultError = () => (
+  <FieldContainer error>
+    <Fieldset>
+      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
+      <Paragraph>
+        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο
+      </Paragraph>
+      <ErrorMessage>
+        <VisuallyHidden>Λάθος:</VisuallyHidden>
+        Το πεδίο είναι υποχρεωτικό.
+      </ErrorMessage>
+      <SingleCharacterInputContainer>
+        <SingleCharacterInputItem name="first-digit" error />
+        <SingleCharacterInputItem name="second-digit" error />
+        <SingleCharacterInputItem name="third-digit" error />
+        <SingleCharacterInputItem name="forth-digit" error />
+        <SingleCharacterInputItem name="fifth-digit" error />
+        <SingleCharacterInputItem name="sixth-digit" error />
+      </SingleCharacterInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithDefaultError;

package/src/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  SingleCharacterInputContainer,
+  SingleCharacterInputItem,
+} from '@digigov/ui/core/SingleCharacterInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+export const WithErrorMessageInvalidCode = () => (
+  <FieldContainer error>
+    <Fieldset>
+      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
+      <Paragraph>
+        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο
+      </Paragraph>
+      <ErrorMessage>
+        <VisuallyHidden>Λάθος:</VisuallyHidden>
+        Έχετε εισάγει λάθος κωδικό.
+      </ErrorMessage>
+      <SingleCharacterInputContainer>
+        <SingleCharacterInputItem name="first-digit" value={4} error />
+        <SingleCharacterInputItem name="second-digit" value={4} error />
+        <SingleCharacterInputItem name="third-digit" value={5} error />
+        <SingleCharacterInputItem name="forth-digit" value={1} error />
+        <SingleCharacterInputItem name="fifth-digit" value={2} error />
+        <SingleCharacterInputItem name="sixth-digit" value={3} error />
+      </SingleCharacterInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithErrorMessageInvalidCode;

package/src/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  SingleCharacterInputContainer,
+  SingleCharacterInputItem,
+} from '@digigov/ui/core/SingleCharacterInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+export const WithErrorMessageLessDigit = () => (
+  <FieldContainer error>
+    <Fieldset>
+      <FieldsetLegend heading>Κωδικός Επιβεβαίωσης</FieldsetLegend>
+      <Paragraph>
+        Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο
+      </Paragraph>
+      <ErrorMessage>
+        <VisuallyHidden>Λάθος:</VisuallyHidden>
+        Έχετε συμπληρώσει λιγότερα από 6 ψηφία..
+      </ErrorMessage>
+      <SingleCharacterInputContainer>
+        <SingleCharacterInputItem name="first-digit" value="6" />
+        <SingleCharacterInputItem name="second-digit" value="4" />
+        <SingleCharacterInputItem name="third-digit" value="5" />
+        <SingleCharacterInputItem name="forth-digit" error />
+        <SingleCharacterInputItem name="fifth-digit" error />
+        <SingleCharacterInputItem name="sixth-digit" error />
+      </SingleCharacterInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default WithErrorMessageLessDigit;

package/src/core/SingleCharacterInputContainer/index.mdx

@@ -0,0 +1,29 @@
+---
+id: otp-input
+title: SingleCharacterInputContainer
+---
+
+# SingleCharacterInputItem
+
+```bash
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="Default.tsx"
+/>
+
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="WithDefaultError.tsx"
+/>

package/src/core/SingleCharacterInputContainer/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputContainer';
+export * from '@digigov/react-core/SingleCharacterInputItem';
+import SingleCharacterInputContainer from '@digigov/react-core/SingleCharacterInputContainer';
+export default SingleCharacterInputContainer;

package/src/core/Tabs/__stories__/Default.tsx

@@ -8,7 +8,7 @@ import {
   useTabs,
 } from '@digigov/ui/core/Tabs';
 
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 import {
@@ -30,9 +30,9 @@ export function Default() {
         <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
       </TabsList>
       <TabsPanel {...panel('a')}>
-        <Title size="md" element="h3">
+        <Heading size="m" element="h3">
           Στοιχεία πολίτη
-        </Title>
+        </Heading>
         <SummaryList>
           <SummaryListItem>
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
@@ -62,9 +62,9 @@ export function Default() {
         </SummaryList>
       </TabsPanel>
       <TabsPanel {...panel('b')}>
-        <Title size="md" element="h3">
+        <Heading size="m" element="h3">
           Yποθέσεις
-        </Title>
+        </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
     </Tabs>

package/src/core/Tabs/index.tsx

@@ -1,20 +1,16 @@
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
 import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
+  useTogglableTab,
+  UseTogglableTabReturn,
+} from '@digigov/ui/hooks/useTogglableTab';
 
-export interface UseTabsReturn extends UseTogglableSectionsReturn {
+export interface UseTabsReturn extends UseTogglableTabReturn {
   panel: (key: string) => { active: boolean; tabIndex: number; id: string };
 }
 export const useTabs = (): UseTabsReturn => {
   const registeredPanels = useRef({});
   const goTo = useCallback((key: string) => {
-    console.log(
-      registeredPanels.current[key].offsetTop -
-        rest.registered.current[key].offsetTop
-    );
     if (
       registeredPanels.current[key].offsetTop -
         rest.registered.current[key].offsetTop >=
@@ -26,7 +22,7 @@ export const useTabs = (): UseTabsReturn => {
       });
     }
   }, []);
-  const { register, opened, ...rest } = useTogglableSections({
+  const { register, opened, ...rest } = useTogglableTab({
     singleOpen: true,
     toggleProperty: 'selected',
     onToggleProperty: 'onClick',

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;