@digigov/ui 1.0.2 → 1.1.1

package/src/app/Footer/__stories__/FooterWithText.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
+  FooterContent,
+  FooterList,
+  FooterListItem,
+} from '@digigov/ui/app/Footer';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+
+export const FooterWithText = () => {
+  return (
+    <Footer>
+      <FooterContainer>
+        <FooterInfo>
+          <FooterInfoSection grow aria-label="footer info section">
+            <FooterContent>
+              <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
+              <FooterList>
+                <FooterListItem>
+                  <Link href="#">Ενημέρωση σχετικά με την επεξεργασία προσωπικών δεδομένων</Link>
+                </FooterListItem>
+              </FooterList>
+              <Copyright>
+                Η άντληση των απαραίτητων στοιχείων πραγματοποιείται μέσω του {' '}
+                <Link href="https://gsis.gr/dimosia-dioikisi/ked">
+                  Κέντρου Διαλειτουργικότητας 
+                </Link>
+                {' '}της {' '}
+                <Link href="https://www.gsis.gr/">
+                  Γενικής Γραμματείας Πληροφοριακών Συστημάτων Δημόσιας Διοίκησης
+                </Link>
+                .
+              </Copyright>
+              <Copyright>
+                {`Υλοποίηση από το `}
+                <Link href="https://grnet.gr/" target="_blank">
+                  ΕΔΥΤΕ
+                  <VisuallyHidden>
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
+                  </VisuallyHidden>
+                </Link>
+                {` για το `}
+                <Link href="https://mindigital.gr/" target="_blank">
+                  Υπουργείο Ψηφιακής Διακυβέρνησης
+                  <VisuallyHidden>
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
+                  </VisuallyHidden>
+                </Link>
+              </Copyright>
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
+      </FooterContainer>
+    </Footer>
+  );
+};
+
+export default FooterWithText;

package/src/app/Modal/index.tsx

@@ -39,13 +39,13 @@ export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
     }, []);
     useKeypress('Escape', onEscape);
     useEffect(() => {
+      const lastModalElementInstance = lastModalElement.current;
       handleFocus();
-      lastModalElement.current.addEventListener('focus', handleFocus);
+      lastModalElementInstance.addEventListener('focus', handleFocus);
       return () => {
-        lastModalElement.current.removeEventListener('focus', handleFocus);
+        lastModalElementInstance.removeEventListener('focus', handleFocus);
       };
     }, [open]);
-    console.log(ref);
     return (
       <ModalContainer
         open={open}

package/src/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck.ts

@@ -7,7 +7,7 @@ const DEFAULT_BROWSER_SUPPORT = {
   'Mobile Safari': 10,
   Firefox: 50,
   Opera: 50,
-  IE: false,
+  IE: 0,
 };
 
 const browserUpdateLinks = {
@@ -22,7 +22,7 @@ const browserUpdateLinks = {
 const browserNames = Object.keys(DEFAULT_BROWSER_SUPPORT);
 
 export function useOutdatedBrowserCheck(
-  browserSupport: Record<string, number | boolean> = DEFAULT_BROWSER_SUPPORT
+  browserSupport: Record<string, number> = DEFAULT_BROWSER_SUPPORT
 ): [boolean, string] {
   const currentBrowser = evaluateBrowserVersion();
   if (!currentBrowser.version || !currentBrowser.name) {
@@ -31,11 +31,12 @@ export function useOutdatedBrowserCheck(
   const currentBrowserVersion = parseInt(currentBrowser.version);
   const currentBrowserName = currentBrowser.name;
   if (browserNames.indexOf(currentBrowser.name) > -1) {
-    if (browserSupport[currentBrowserName] === false) {
+    // this checks if browser is IE
+    if (browserSupport[currentBrowserName] === 0) {
       return [true, browserUpdateLinks.Chrome];
     } else {
       if (currentBrowserVersion >= browserSupport[currentBrowserName]) {
-        //TODO: check if number
+        // TODO: check if number
         return [false, ''];
       } else {
         return [true, browserUpdateLinks[currentBrowserName]];

package/src/content/Table/TableFloatingScroll.tsx

@@ -8,6 +8,7 @@ export function TableFloatingScroll(props) {
   const [containerWidth, setContainerWidth] = useState(0);
   const [position, setPosition] = useState<'relative' | 'fixed'>('relative');
   useEffect(() => {
+    const scrollBlockRefInstance = scrollBlockRef.current;
     contentRef.current = ref.current?.firstChild as HTMLElement;
     // @ts-ignore
     setContainerWidth(ref.current.offsetWidth);
@@ -32,10 +33,10 @@ export function TableFloatingScroll(props) {
     }
     function onBlockScroll() {
       // @ts-ignore
-      ref.current.scrollLeft = scrollBlockRef.current.scrollLeft;
+      ref.current.scrollLeft = scrollBlockRefInstance.scrollLeft;
     }
     // @ts-ignore
-    scrollBlockRef.current.addEventListener('scroll', onBlockScroll);
+    scrollBlockRefInstance.addEventListener('scroll', onBlockScroll);
     document.addEventListener('scroll', onBodyScroll);
     window.addEventListener('resize', () => {
       // @ts-ignore
@@ -45,7 +46,7 @@ export function TableFloatingScroll(props) {
     });
     return () => {
       // @ts-ignore
-      scrollBlockRef.current.removeEventListener('scroll', onBlockScroll);
+      scrollBlockRefInstance.removeEventListener('scroll', onBlockScroll);
       document.removeEventListener('scroll', onBodyScroll);
     };
   }, []);

package/src/layouts/Screen/Screen.stories.js

@@ -0,0 +1,9 @@
+import Screen from '@digigov/ui/layouts/Screen';
+export default {
+  title: 'Digigov UI/layouts/Screen',
+  component: Screen,
+  displayName: 'Screen',
+};
+export * from '@digigov/ui/layouts/Screen/__stories__/Default';
+export * from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
+export * from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Screen } from '@digigov/ui/layouts/Screen';
+
+export const Default = () => {
+  return (
+    <>
+      <Screen size='mdUp'>
+        <div>This is a mdUp screen</div>
+      </Screen>
+      <Screen size='mdDown'>
+        <div>This is a mdDown screen</div>
+      </Screen>
+      <Screen size='xs'>
+        <div>This is a xs screen</div>
+      </Screen>
+      <Screen size='sm'>
+        <div>This is a sm screen</div>
+      </Screen>
+    </>
+  );
+};
+export default Default;

package/src/layouts/Screen/__stories__/ScreenDown.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Screen } from '@digigov/ui/layouts/Screen';
+
+export const ScreenDown = () => {
+  return (
+    <Screen size='mdDown'>
+      <div>This is a mdDown screen</div>
+    </Screen>
+  );
+};
+export default ScreenDown;

package/src/layouts/Screen/__stories__/SpecificScreenSize.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Screen } from '@digigov/ui/layouts/Screen';
+
+export const SpecificScreenSize = () => {
+  return (
+    <Screen size='md'>
+      <div>This is a md screen</div>
+    </Screen>
+  );
+};
+export default SpecificScreenSize;

package/src/layouts/Screen/index.tsx

@@ -0,0 +1,29 @@
+import { useScreenSize, breakpointKeys, Breakpoints } from "@digigov/ui/utils/hooks/useScreen"
+import React from "react";
+export interface ScreenProps {
+  size: "xs" | "sm" | "md" | "lg" | "xl" | 'xsUp' | 'smUp' | 'mdUp' | 'lgUp' | 'xlUp' | 'xsDown' | 'smDown' | 'mdDown' | 'lgDown' | 'xlDown';
+}
+export const Screen: React.FC<ScreenProps> = ({ size, children }) => {
+  const { screenSize } = useScreenSize();
+  if (size?.endsWith('Up')) { 
+    const breakpoint = size.replace('Up', '') as Breakpoints;
+    if (breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(screenSize)) {
+      return <>{children}</>
+    } else {
+      return null
+    }
+  } else if (size.endsWith('Down')) { 
+    const breakpoint = size.replace('Down', '') as Breakpoints;
+    if (breakpointKeys.indexOf(breakpoint) > breakpointKeys.indexOf(screenSize)) {
+      return <>{children}</>
+    }else{
+      return null
+    }
+  }else if (size && size !== screenSize) {
+      return null
+  }
+  return <>{children}</>
+
+}
+
+export default Screen;