@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-b0737a96

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -23,52 +23,71 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
       </ForwardRef(Top)>
       <withDeprecationComponent>
         <ForwardRef(Container)>
-          <ForwardRef(Base)
-            as="div"
+          <ForwardRef(Grid)
             className="govgr-container"
+            container={true}
+            spacing={
+              Object {
+                "sm": 12,
+              }
+            }
           >
-            <div
-              className="govgr-container"
+            <ForwardRef(Base)
+              as="div"
+              className="govgr-container govgr-gap-sm-12 govgr-grid"
             >
-              <ForwardRef(Base)
-                as="div"
-                className="govgr-main-wrapper"
+              <div
+                className="govgr-container govgr-gap-sm-12 govgr-grid"
               >
-                <div
-                  className="govgr-main-wrapper"
-                >
-                  <ForwardRef(Main)>
+                <ForwardRef(Main)>
+                  <ForwardRef(Grid)
+                    as="main"
+                    className="govgr-main"
+                    id="main-content"
+                    item={true}
+                    md={8}
+                    xs={12}
+                  >
                     <ForwardRef(Base)
                       as="main"
-                      className="govgr-grid-column-two-thirds"
+                      className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
                       id="main-content"
                     >
                       <main
-                        className="govgr-grid-column-two-thirds"
+                        className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
                         id="main-content"
                       >
                         Main content
                       </main>
                     </ForwardRef(Base)>
-                  </ForwardRef(Main)>
-                  <withDeprecationComponent>
-                    <ForwardRef(Aside)>
+                  </ForwardRef(Grid)>
+                </ForwardRef(Main)>
+                <withDeprecationComponent>
+                  <ForwardRef(Aside)>
+                    <ForwardRef(Grid)
+                      as="aside"
+                      className="govgr-aside"
+                      item={true}
+                      md={4}
+                      spacing={4}
+                      xs={12}
+                    >
                       <ForwardRef(Base)
                         as="aside"
-                        className="govgr-grid-column-one-third"
+                        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
                       >
                         <aside
-                          className="govgr-grid-column-one-third"
+                          className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
                         >
                           Side content
                         </aside>
                       </ForwardRef(Base)>
-                    </ForwardRef(Aside)>
-                  </withDeprecationComponent>
-                </div>
-              </ForwardRef(Base)>
-            </div>
-          </ForwardRef(Base)>
+                    </ForwardRef(Grid)>
+                  </ForwardRef(Aside)>
+                </withDeprecationComponent>
+              </div>
+            </ForwardRef(Base)>
+          </ForwardRef(Grid)>
         </ForwardRef(Container)>
       </withDeprecationComponent>
       <ForwardRef(Bottom)>

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -0,0 +1,8 @@
+import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+export default {
+  title: 'Digigov UI/navigation/BackToTopLink',
+  component: BackToTopLink,
+  displayName: 'BackToTopLink',
+};
+export * from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
+export * from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/__stories__/Default.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BackToTopLink } from '@digigov/ui/navigation/BackToTopLink';
+
+export const Default = () => (
+  <BackToTopLink href="#" aria-label="Επιστροφή στην αρχή της σελίδας">
+    Επιστροφή στην αρχή της σελίδας
+  </BackToTopLink>
+);
+
+export default Default;

package/src/navigation/BackToTopLink/__stories__/InMain.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import BackToTopLink, { BackToTopContainer } from '@digigov/ui/navigation/BackToTopLink';
+import Content from '@digigov/ui/layouts/Basic/Content';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+
+export const InMain = () => (
+  <Content>
+    <Main>
+      <BackToTopContainer persistent>
+        <BackToTopLink>Επιστροφή στην αρχή της σελίδας</BackToTopLink>
+      </BackToTopContainer>
+    </Main>
+  </Content>
+);
+
+export default InMain;

package/src/navigation/BackToTopLink/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import BackToTopLink from '@digigov/react-core/BackToTopLink';
+import BackToTopContainer from '@digigov/react-core/BackToTopContainer';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface BackToTopProps extends BaseProps<'div'> {
+  topLimitId?: string;
+  onScrollToTop?: () => void;
+}
+
+const createObserver = (observeElement, callback) => {
+  const intersectionObserver = new IntersectionObserver(
+    ([e]) => {
+      return callback(e.intersectionRatio < 1)
+    },
+    { threshold: [1] }
+  );
+  if (observeElement) {
+    intersectionObserver.observe(observeElement);
+  }
+}
+
+const useObserver = (id, callback) => {
+  useEffect(() => {
+    const el = document.getElementById(id);
+    createObserver(el, callback);
+  }, []);
+}
+
+export const BackToTop: React.FC<BackToTopProps> = React.forwardRef(function BackToTop(
+  { children, topLimitId = 'back-to-top-limit', onScrollToTop, ...props }
+) {
+  const [persistent, setPersistent] = useState<boolean>(false);
+  const callSetPersistent = (value) => {
+    window.scrollY > 0 && setPersistent(value);
+  };
+  useObserver(topLimitId, callSetPersistent);
+  useObserver('back-to-top-element', callSetPersistent);
+
+  return (
+    <>
+      <BackToTopContainer persistent={persistent} {...props}>
+        <BackToTopLink id='back-to-top-link' onClick={onScrollToTop} href={`#${topLimitId}`}>{children}</BackToTopLink>
+      </BackToTopContainer>
+      <div id='back-to-top-element' />
+    </>
+  );
+});
+
+
+export * from '@digigov/react-core/BackToTopLink';
+export * from '@digigov/react-core/BackToTopLimit';
+export * from '@digigov/react-core/BackToTopContainer';
+export default BackToTopLink;

package/src/navigation/Drawer/Drawer.stories.js

@@ -9,3 +9,6 @@ export default {
   displayName: 'Drawer',
 };
 export * from '@digigov/ui/navigation/Drawer/__stories__/Default';
+export * from '@digigov/ui/navigation/Drawer/__stories__/WithHook';
+export * from '@digigov/ui/navigation/Drawer/__stories__/Auto';
+

package/src/navigation/Drawer/__stories__/Auto.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {
+  AdminAside,
+  AdminContainer,
+  AdminLayout,
+  AdminMain,
+  AdminTopSection,
+  AdminHeader,
+  AdminHeaderContent,
+} from '@digigov/ui/layouts/Admin';
+import {
+  NavListAuto,
+} from '@digigov/ui/navigation/NavList';
+import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { BurgerIcon } from '@digigov/ui/icons';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { DrawerProvider, DrawerAuto, DrawerHeadingAuto, DrawerButtonAuto } from '@digigov/ui/navigation/Drawer';
+
+const links = [
+  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
+  {
+    name: 'Nav2',
+    href: '#',
+    label: 'Nav list item 2',
+    menu: {
+      links: [
+        {
+          name: 'Nav2.1',
+          href: '#',
+          label: 'Nav list item 2.1',
+        },
+        {
+          name: 'Nav2.2',
+          href: '#',
+          label: 'Nav list item 2.2',
+        },
+        {
+          name: 'Nav2.3',
+          href: '#',
+          label: 'Nav list item 2.3',
+        },
+        {
+          name: 'Nav2.4',
+          href: '#',
+          label: 'Nav list item 2.4',
+        },
+      ],
+    }
+  },
+  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
+];
+
+export const Auto = () => {
+  const layout = 'vertical';
+  const border = false;
+  const fixed = false;
+
+  return (
+    <AdminLayout>
+      <DrawerProvider>
+        <AdminHeader>
+          <AdminHeaderContent>
+            <GovGRLogo></GovGRLogo>
+            <DrawerButtonAuto
+              drawer='drawer-1'
+              className="md:hidden"
+              open
+              color="secondary"
+              style={{
+                marginBottom: 0,
+              }}
+            >
+              <BurgerIcon />
+            </DrawerButtonAuto>
+          </AdminHeaderContent>
+        </AdminHeader>
+        <AdminContainer>
+          <AdminAside>
+            <AdminTopSection></AdminTopSection>
+            <DrawerAuto id='drawer-1' upRelative="md" direction="left">
+              <DrawerHeadingAuto drawer='drawer-1'>
+                <Heading size="md">Menu</Heading>
+              </DrawerHeadingAuto>
+              <NavListAuto
+                layout={layout}
+                border={border}
+                links={links}
+                fixed={fixed}
+                aria-label="Nav list"
+                role="menu"
+              >
+              </NavListAuto>
+            </DrawerAuto>
+          </AdminAside>
+          <AdminMain>
+          </AdminMain>
+        </AdminContainer>
+        <GovGRFooter />
+      </DrawerProvider>
+    </AdminLayout>
+  );
+};

package/src/navigation/Drawer/__stories__/WithHook.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  AdminAside,
+  AdminContainer,
+  AdminLayout,
+  AdminMain,
+  AdminTopSection,
+  AdminHeader,
+  AdminHeaderContent,
+} from '@digigov/ui/layouts/Admin';
+import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
+import { Button } from '@digigov/ui/form/Button';
+import {
+  NavListAuto,
+} from '@digigov/ui/navigation/NavList';
+import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { BurgerIcon } from '@digigov/ui/icons';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { useDrawer } from '@digigov/ui/navigation/Drawer/hooks';
+
+
+
+const links = [
+  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
+  {
+    name: 'Nav2',
+    href: '#',
+    label: 'Nav list item 2',
+    menu: {
+      links: [
+        {
+          name: 'Nav2.1',
+          href: '#',
+          label: 'Nav list item 2.1',
+        },
+        {
+          name: 'Nav2.2',
+          href: '#',
+          label: 'Nav list item 2.2',
+        },
+        {
+          name: 'Nav2.3',
+          href: '#',
+          label: 'Nav list item 2.3',
+        },
+        {
+          name: 'Nav2.4',
+          href: '#',
+          label: 'Nav list item 2.4',
+        },
+      ],
+    }
+  },
+  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
+];
+
+export const WithHook = () => {
+  const { registerDrawer, registerAction } = useDrawer();
+  const layout = 'vertical';
+  const border = false;
+  const fixed = false;
+
+  return (
+    <AdminLayout>
+      <AdminHeader>
+        <AdminHeaderContent>
+          <GovGRLogo></GovGRLogo>
+          <Button
+            {...registerAction('drawer-1', 'open')}
+            className="md:hidden"
+            color="secondary"
+            style={{
+              marginBottom: 0,
+            }}
+          >
+            <BurgerIcon />
+          </Button>
+        </AdminHeaderContent>
+      </AdminHeader>
+      <AdminContainer>
+        <AdminAside>
+          <AdminTopSection></AdminTopSection>
+          <Drawer {...registerDrawer('drawer-1', { upRelative: "md", direction: "left" })}>
+            <DrawerHeading {...registerAction('drawer-1', 'close')}>
+              <Heading size="md">Menu</Heading>
+            </DrawerHeading>
+            <NavListAuto
+              layout={layout}
+              border={border}
+              links={links}
+              fixed={fixed}
+              aria-label="Nav list"
+              role="menu"
+            >
+            </NavListAuto>
+          </Drawer>
+        </AdminAside>
+        <AdminMain>
+        </AdminMain>
+      </AdminContainer>
+      <GovGRFooter />
+    </AdminLayout>
+  );
+};

package/src/navigation/Drawer/auto.tsx

@@ -0,0 +1,84 @@
+import React, { useContext } from 'react';
+import { DrawerId, UseDrawerReturn, useDrawer } from './hooks';
+import { Button, ButtonProps } from '@digigov/react-core/Button';
+import { Drawer, DrawerProps } from '@digigov/ui/navigation/Drawer';
+import { DrawerHeading, DrawerHeadingProps } from '@digigov/ui/navigation/Drawer';
+
+export const DrawerContext = React.createContext<UseDrawerReturn | null>(null);
+export interface DrawerHeadingAutoProps extends DrawerHeadingProps {
+  drawer: DrawerId;
+  open?: boolean;
+  close?: boolean;
+};
+
+
+export interface DrawerOpenButtonProps extends ButtonProps {
+  drawer: DrawerId;
+  open?: boolean;
+  close?: boolean;
+}
+
+export interface DrawerAutoProps extends DrawerProps {
+  id: string;
+  clickOutside?: boolean;
+  closeOnEscape?: boolean;
+}
+
+export const DrawerProvider = ({
+  children
+}: {
+  children: React.ReactNode,
+}) => {
+  const modal = useDrawer();
+  return (
+    <DrawerContext.Provider value={modal}>
+      {children}
+    </DrawerContext.Provider>
+  );
+}
+
+
+export const useDrawerContext = (): UseDrawerReturn | null => {
+  const context = useContext(DrawerContext);
+  return context;
+};
+
+export const DrawerAuto = React.forwardRef<HTMLDivElement, DrawerAutoProps>(
+  function DrawerAuto({ id, direction = 'left', upRelative = 'never', ...props }) {
+    const context = useDrawerContext();
+    if (!context) {
+      throw new Error('DrawerAuto must be used within an DrawerProvider');
+    }
+    const { registerDrawer } = context;
+    return (
+      <Drawer
+        {...registerDrawer(id, { upRelative, direction })}
+        {...props}
+      >
+        {props.children}
+      </Drawer>
+    );
+  }
+);
+
+export const DrawerButtonAuto = React.forwardRef<HTMLButtonElement, DrawerOpenButtonProps>(
+  function DrawerButtonAuto({ drawer: forDrawer, open, close, ...props }, ref) {
+    const context = useDrawerContext();
+    if (!context) {
+      throw new Error('DrawerButtonAuto must be used within an DrawerProvider');
+    }
+    const { registerAction } = context;
+    return <Button ref={ref} {...registerAction(forDrawer, open ? 'open' : 'close')}  {...props} />;
+  }
+);
+
+export const DrawerHeadingAuto = React.forwardRef<HTMLDivElement, DrawerHeadingAutoProps>(
+  function DrawerHeadingAuto({ drawer: forDrawer, ...props }, ref) {
+    const context = useDrawerContext();
+    if (!context) {
+      throw new Error('DrawerHeadingAuto must be used within an DrawerProvider');
+    }
+    const { registerAction } = context;
+    return <DrawerHeading color='secondary' ref={ref} {...registerAction(forDrawer, 'close')} {...props} />;
+  }
+);

package/src/navigation/Drawer/hooks.ts

@@ -0,0 +1,66 @@
+import React, { useState, useRef, useCallback } from 'react';
+
+export type DrawerId = string | number;
+
+export interface UseDrawerReturn {
+  open: (id: DrawerId) => void;
+  close: () => void;
+  currentOpen: DrawerId | null;
+  registerDrawer: (id: DrawerId, options?: {
+    upRelative?: string;
+    direction?: string;
+  }) => {
+    open: boolean;
+    id: string;
+    ref?: React.RefObject<HTMLDivElement>;
+  };
+  registerAction: (id: DrawerId, type: 'open' | 'close') => {
+    onClick: () => void;
+    ref?: React.RefObject<any>;
+  };
+}
+
+export const useDrawer = (): UseDrawerReturn => {
+  const [currentOpen, setCurrentOpen] = useState<DrawerId | null>(null);
+  const drawersRef = useRef<Map<DrawerId, React.RefObject<HTMLDivElement>>>(new Map());
+  const buttonsRef = useRef<Map<DrawerId, React.RefObject<HTMLButtonElement>>>(new Map());
+
+  const open = useCallback((id: DrawerId) => {
+    setCurrentOpen(id);
+  }, []);
+
+  const close = useCallback(() => {
+    setCurrentOpen(null);
+  }, []);
+
+  const registerDrawer = useCallback((id, options) => {
+    const drawerId = `drawer-${id}`
+    if (!drawersRef.current.get(id)?.current) {
+      drawersRef.current.set(id, React.createRef());
+    }
+    return {
+      open: currentOpen === id,
+      id: drawerId,
+      ref: drawersRef.current.get(id as string),
+      ...options
+    };
+  }, [currentOpen]);
+
+  const registerAction = useCallback((id: DrawerId, type: 'open' | 'close') => {
+    if (!buttonsRef.current.has(id)) {
+      buttonsRef.current.set(id, React.createRef());
+    }
+    return {
+      onClick: () => type === 'open' ? open(id) : close(),
+      ref: buttonsRef.current.get(id),
+    };
+  }, [currentOpen]);
+
+  return {
+    open,
+    close,
+    currentOpen,
+    registerAction,
+    registerDrawer,
+  };
+};

package/src/navigation/Drawer/index.tsx

@@ -1,5 +1,5 @@
 export * from '@digigov/react-core/Drawer';
 export * from '@digigov/react-core/DrawerHeading';
-
+export * from '@digigov/ui/navigation/Drawer/auto';
 import Drawer from '@digigov/react-core/Drawer';
 export default Drawer;

package/src/navigation/Dropdown/Dropdown.stories.js

@@ -11,5 +11,12 @@ export default {
   displayName: 'Dropdown',
 };
 export * from './__stories__/Default';
+export * from './__stories__/Secondary';
+export * from './__stories__/Warning';
+export * from './__stories__/Disabled';
+export * from './__stories__/VariantLink';
 export * from './__stories__/AlignRight';
 export * from './__stories__/PlacementTop';
+export * from './__stories__/WithIcons';
+export * from './__stories__/ContentPosition';
+export * from './__stories__/Dense';

package/src/navigation/Dropdown/Dropdown.stories.playwright.json

@@ -48,6 +48,22 @@
           "title": "Placement top action"
         }
       ]
+    },
+    "digigov-ui-navigation-dropdown--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "kQJa7FO9b7Y3",
+          "title": "Open dropdown action"
+        }
+      ]
     }
   }
 }