@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.0

package/src/app/Header/__stories__/WithHeaderNavigation.tsx

@@ -3,9 +3,9 @@ import Header from '@digigov/ui/app/Header';
 import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
-import NavHorizontalList from '@digigov/ui/core/NavList/NavHorizontalList';
-import NavHorizontalListItem from '@digigov/ui/core/NavList/NavHorizontalListItem';
-import NavHorizontalListItemLink from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
+import NavList from '@digigov/ui/core/NavList/NavList';
+import NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import NavListItemLink from '@digigov/ui/core/NavList/NavListItemLink';
 import HeaderContent from '@digigov/ui/app/Header/HeaderContent';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic';
@@ -22,13 +22,13 @@ export const WithHeaderNavigation = () => (
           <HeaderTitle href="#">Πρότυπο - Αναφοράς</HeaderTitle>
         </HeaderContent>
         <HeaderNavMenuContent>
-          <NavHorizontalList active={true}>
-            <NavHorizontalListItem>
-              <NavHorizontalListItemLink>
+          <NavList active={true}>
+            <NavListItem>
+              <NavListItemLink>
                 Μενού <ArrowIcon direction="down" />
-              </NavHorizontalListItemLink>
-            </NavHorizontalListItem>
-          </NavHorizontalList>
+              </NavListItemLink>
+            </NavListItem>
+          </NavList>
           <Dropdown align="left">
             <DropdownButton variant="link">
               ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
@@ -38,7 +38,7 @@ export const WithHeaderNavigation = () => (
           </Dropdown>
         </HeaderNavMenuContent>
         <HeaderNavMenuContent>
-          <BurgerIcon hidden="s" size="m"></BurgerIcon>
+          <BurgerIcon smUpHidden size="m"></BurgerIcon>
         </HeaderNavMenuContent>
       </HeaderSection>
     </Header>

package/src/app/Header/__stories__/WithNavigation.tsx

@@ -2,48 +2,57 @@ import React from 'react';
 import { Header } from '@digigov/ui/app/Header';
 import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
-import { NavHorizontal } from '@digigov/ui/core/NavList/NavHorizontal';
-import { NavHorizontalList } from '@digigov/ui/core/NavList/NavHorizontalList';
-import { NavHorizontalListItem } from '@digigov/ui/core/NavList/NavHorizontalListItem';
-import { NavHorizontalListItemLink } from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
+import { Nav } from '@digigov/ui/core/NavList/Nav';
+import { NavList } from '@digigov/ui/core/NavList/NavList';
+import { NavListItem } from '@digigov/ui/core/NavList/NavListItem';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic';
-import { ArrowIcon, SectionBreak } from '@digigov/ui';
-export const WithNavigation = () => (
-  <Top>
-    <Header>
-      <HeaderSection>
-        <HeaderContent>
-          <GovGRLogo href="#" />
-        </HeaderContent>
-      </HeaderSection>
-    </Header>
-    <NavHorizontal open={true}>
-      <NavHorizontalList>
-        <NavHorizontalListItem>
-          <NavHorizontalListItemLink>
-            Home <ArrowIcon direction="down" />
-          </NavHorizontalListItemLink>
-        </NavHorizontalListItem>
-        <NavHorizontalListItem>
-          <NavHorizontalListItemLink>
-            Form registration <ArrowIcon direction="down" />
-          </NavHorizontalListItemLink>
-        </NavHorizontalListItem>
-        <NavHorizontalListItem>
-          <NavHorizontalListItemLink>
-            News <ArrowIcon direction="down" />
-          </NavHorizontalListItemLink>
-        </NavHorizontalListItem>
-        <NavHorizontalListItem>
-          <NavHorizontalListItemLink>
-            Contact <ArrowIcon direction="down" />
-          </NavHorizontalListItemLink>
-        </NavHorizontalListItem>
-        <SectionBreak></SectionBreak>
-      </NavHorizontalList>
-    </NavHorizontal>
-  </Top>
-);
+import { SectionBreak } from '@digigov/ui';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+
+export const WithNavigation = () => {
+  const { register } = useNavList();
+
+  const setRegister = (name: string) => {
+    return { ...register(name) };
+  };
+
+  return (
+    <Top>
+      <Header>
+        <HeaderSection>
+          <HeaderContent>
+            <GovGRLogo href="#" />
+          </HeaderContent>
+        </HeaderSection>
+      </Header>
+      <Nav open={true}>
+        <NavList>
+          <NavListItem
+            link={{
+              name: 'home',
+              label: 'Home',
+              subMenu: [],
+            }}
+            setRegister={setRegister}
+          />
+          <NavListItem
+            link={{ name: 'form', label: 'Form registration', subMenu: [] }}
+            setRegister={setRegister}
+          />
+          <NavListItem
+            link={{ name: 'news', label: 'News', subMenu: [] }}
+            setRegister={setRegister}
+          />
+          <NavListItem
+            link={{ name: 'contact', label: 'Contact', subMenu: [] }}
+            setRegister={setRegister}
+          />
+          <SectionBreak></SectionBreak>
+        </NavList>
+      </Nav>
+    </Top>
+  );
+};
 
 export default WithNavigation;

package/src/app/QrCodeScanner/__snapshots__/index.spec.tsx.snap

@@ -1,22 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the qr code scanner 1`] = `
-<QrCodeScanner
-  onError={[Function]}
-  onScan={[Function]}
+<Suspense
+  fallback="<div>loading...</div>"
 >
-  <ForwardRef(LoadableComponent)
-    delay={100}
+  <QrCodeScanner
     onError={[Function]}
     onScan={[Function]}
-  >
-    <loading
-      error={null}
-      isLoading={true}
-      pastDelay={false}
-      retry={[Function]}
-      timedOut={false}
-    />
-  </ForwardRef(LoadableComponent)>
-</QrCodeScanner>
+  />
+  &lt;div&gt;loading...&lt;/div&gt;
+</Suspense>
 `;

package/src/app/QrCodeScanner/index.spec.tsx

@@ -6,14 +6,16 @@ import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
 it('renders the qr code scanner', () => {
   expect(
     mount(
-      <QrCodeScanner
-        onScan={(args) => {
-          console.log(args);
-        }}
-        onError={(args) => {
-          console.log(args);
-        }}
-      />
+      <React.Suspense fallback="<div>loading...</div>">
+        <QrCodeScanner
+          onScan={(args) => {
+            console.log(args);
+          }}
+          onError={(args) => {
+            console.log(args);
+          }}
+        />
+      </React.Suspense>
     )
   ).toMatchSnapshot();
 });

package/src/app/ThemeSelectorOptions/index.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import Button from '@digigov/react-core/Button';
+import { Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import SectionBreak from '@digigov/ui/core/SectionBreak';
+
+import useTheme, { ThemeSelectOptions } from '@digigov/ui/hooks/useTheme';
+
+export const ThemeToggleOptions = () => {
+  const {theme, changeTheme} = useTheme();
+  const [selectedOption, setSelectedOption] = useState<ThemeSelectOptions>(
+    theme || 'auto'
+  );
+
+  return (
+    <>
+      <Fieldset style={{ textAlign: 'left' }}>
+        <FieldsetLegend>
+          <VisuallyHidden>Επιλογή θέματος</VisuallyHidden>
+        </FieldsetLegend>
+        <RadioContainer>
+          <RadioItem
+            name="theme_mode"
+            value="light"
+            onChange={() => setSelectedOption('light')}
+            defaultChecked={selectedOption === 'light'}
+          >
+            Φωτεινό θέμα
+          </RadioItem>
+          <RadioItem
+            name="theme_mode"
+            value="dark"
+            onChange={() => setSelectedOption('dark')}
+            defaultChecked={selectedOption === 'dark'}
+          >
+            Σκούρο θέμα
+          </RadioItem>
+          <RadioItem
+            name="theme_mode"
+            value="auto"
+            onChange={() => setSelectedOption('auto')}
+            defaultChecked={selectedOption === 'auto'}
+          >
+            Επιλογή συστήματος
+          </RadioItem>
+        </RadioContainer>
+      </Fieldset>
+      <SectionBreak />
+      <Button onClick={() => changeTheme(selectedOption)}>Εφαρμογή</Button>
+    </>
+  );
+};
+export default ThemeToggleOptions;

package/src/app/index.ts

@@ -1,5 +1,7 @@
 export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/Confirmation';
+export * from '@digigov/ui/app/BottomInfoContainer';
+export * from '@digigov/ui/app/BottomInfoContent';
 export * from '@digigov/ui/app/Footer';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
@@ -8,3 +10,4 @@ export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
 export * from '@digigov/ui/app/I18nText';
 export * from '@digigov/ui/app/PhaseBannerHeader';
+export * from '@digigov/ui/app/ThemeSelectorOptions';

package/src/core/Accordion/__snapshots__/index.spec.tsx.snap

@@ -2,77 +2,150 @@
 
 exports[`renders the Accordion 1`] = `
 <ForwardRef(Accordion)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-accordion"
   >
-    <withDeprecationComponent>
-      <ForwardRef(AccordionSection)>
-        <details
-          className="govgr-accordion__section"
-        >
-          <withDeprecationComponent>
-            <ForwardRef(AccordionSectionHeader)>
-              <summary
-                className="govgr-accordion__section-summary"
-              >
-                <h2
-                  className="govgr-accordion__section-heading"
-                >
-                  <span
-                    className="govgr-accordion__section-button"
+    <div
+      className="govgr-accordion"
+    >
+      <withDeprecationComponent>
+        <ForwardRef(AccordionSection)>
+          <ForwardRef(Base)
+            as="details"
+            className="govgr-accordion__section"
+          >
+            <details
+              className="govgr-accordion__section"
+            >
+              <withDeprecationComponent>
+                <Component>
+                  <ForwardRef(AccordionSectionSummary)>
+                    <ForwardRef(Base)
+                      aria-level={2}
+                      as="summary"
+                      className="govgr-accordion__section-summary"
+                      role="heading"
+                    >
+                      <summary
+                        aria-level={2}
+                        className="govgr-accordion__section-summary"
+                        role="heading"
+                      >
+                        <ForwardRef(AccordionSectionSummaryHeading)>
+                          <ForwardRef(Base)
+                            aria-expanded={false}
+                            as="h2"
+                            className="govgr-accordion__section-heading"
+                            onClick={[Function]}
+                            role="button"
+                          >
+                            <h2
+                              aria-expanded={false}
+                              className="govgr-accordion__section-heading"
+                              onClick={[Function]}
+                              role="button"
+                            >
+                              <span
+                                className="govgr-accordion__section-button"
+                              >
+                                Βασικες Ρυθμισεις
+                              </span>
+                            </h2>
+                          </ForwardRef(Base)>
+                        </ForwardRef(AccordionSectionSummaryHeading)>
+                      </summary>
+                    </ForwardRef(Base)>
+                  </ForwardRef(AccordionSectionSummary)>
+                </Component>
+              </withDeprecationComponent>
+              <withDeprecationComponent>
+                <ForwardRef(AccordionSectionContent)>
+                  <ForwardRef(Base)
+                    as="div"
+                    className="govgr-accordion__section-content"
                   >
-                    Βασικες Ρυθμισεις
-                  </span>
-                </h2>
-              </summary>
-            </ForwardRef(AccordionSectionHeader)>
-          </withDeprecationComponent>
-          <withDeprecationComponent>
-            <ForwardRef(AccordionSectionContent)>
-              <div
-                className="govgr-accordion__section-content"
-              >
-                Περιεχομενο Βασικων Ρυθμισεων
-              </div>
-            </ForwardRef(AccordionSectionContent)>
-          </withDeprecationComponent>
-        </details>
-      </ForwardRef(AccordionSection)>
-    </withDeprecationComponent>
-    <withDeprecationComponent>
-      <ForwardRef(AccordionSection)>
-        <details
-          className="govgr-accordion__section"
-        >
-          <withDeprecationComponent>
-            <ForwardRef(AccordionSectionHeader)>
-              <summary
-                className="govgr-accordion__section-summary"
-              >
-                <h2
-                  className="govgr-accordion__section-heading"
-                >
-                  <span
-                    className="govgr-accordion__section-button"
+                    <div
+                      className="govgr-accordion__section-content"
+                    >
+                      Περιεχομενο Βασικων Ρυθμισεων
+                    </div>
+                  </ForwardRef(Base)>
+                </ForwardRef(AccordionSectionContent)>
+              </withDeprecationComponent>
+            </details>
+          </ForwardRef(Base)>
+        </ForwardRef(AccordionSection)>
+      </withDeprecationComponent>
+      <withDeprecationComponent>
+        <ForwardRef(AccordionSection)>
+          <ForwardRef(Base)
+            as="details"
+            className="govgr-accordion__section"
+          >
+            <details
+              className="govgr-accordion__section"
+            >
+              <withDeprecationComponent>
+                <Component>
+                  <ForwardRef(AccordionSectionSummary)>
+                    <ForwardRef(Base)
+                      aria-level={2}
+                      as="summary"
+                      className="govgr-accordion__section-summary"
+                      role="heading"
+                    >
+                      <summary
+                        aria-level={2}
+                        className="govgr-accordion__section-summary"
+                        role="heading"
+                      >
+                        <ForwardRef(AccordionSectionSummaryHeading)>
+                          <ForwardRef(Base)
+                            aria-expanded={false}
+                            as="h2"
+                            className="govgr-accordion__section-heading"
+                            onClick={[Function]}
+                            role="button"
+                          >
+                            <h2
+                              aria-expanded={false}
+                              className="govgr-accordion__section-heading"
+                              onClick={[Function]}
+                              role="button"
+                            >
+                              <span
+                                className="govgr-accordion__section-button"
+                              >
+                                Υπολοιπες Ρυθμισεις
+                              </span>
+                            </h2>
+                          </ForwardRef(Base)>
+                        </ForwardRef(AccordionSectionSummaryHeading)>
+                      </summary>
+                    </ForwardRef(Base)>
+                  </ForwardRef(AccordionSectionSummary)>
+                </Component>
+              </withDeprecationComponent>
+              <withDeprecationComponent>
+                <ForwardRef(AccordionSectionContent)>
+                  <ForwardRef(Base)
+                    as="div"
+                    className="govgr-accordion__section-content"
                   >
-                    Υπολοιπες Ρυθμισεις
-                  </span>
-                </h2>
-              </summary>
-            </ForwardRef(AccordionSectionHeader)>
-          </withDeprecationComponent>
-          <withDeprecationComponent>
-            <ForwardRef(AccordionSectionContent)>
-              <div
-                className="govgr-accordion__section-content"
-              >
-                Περιεχομενο Υπολοιπων Ρυθμισεων
-              </div>
-            </ForwardRef(AccordionSectionContent)>
-          </withDeprecationComponent>
-        </details>
-      </ForwardRef(AccordionSection)>
-    </withDeprecationComponent>
-  </div>
+                    <div
+                      className="govgr-accordion__section-content"
+                    >
+                      Περιεχομενο Υπολοιπων Ρυθμισεων
+                    </div>
+                  </ForwardRef(Base)>
+                </ForwardRef(AccordionSectionContent)>
+              </withDeprecationComponent>
+            </details>
+          </ForwardRef(Base)>
+        </ForwardRef(AccordionSection)>
+      </withDeprecationComponent>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Accordion)>
 `;

package/src/core/Blockquote/__snapshots__/index.spec.tsx.snap

@@ -1,13 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the Blockquote with sample data 1`] = `
-<withDeprecationComponent>
-  <ForwardRef(Blockquote)>
+<ForwardRef(Blockquote)>
+  <ForwardRef(Base)
+    as="blockquote"
+    className="govgr-blockquote"
+  >
     <blockquote
       className="govgr-blockquote"
     >
       this is some random data
     </blockquote>
-  </ForwardRef(Blockquote)>
-</withDeprecationComponent>
+  </ForwardRef(Base)>
+</ForwardRef(Blockquote)>
 `;

package/src/core/Button/__snapshots__/index.spec.tsx.snap

@@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the button 1`] = `
-<withDeprecationComponent>
-  <ForwardRef(Button)>
+<ForwardRef(Button)>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn"
+    printHidden={true}
+  >
     <button
-      className="govgr-btn-primary govgr-btn"
+      className="govgr-btn-primary govgr-btn govgr-print-hidden"
     >
       hello
     </button>
-  </ForwardRef(Button)>
-</withDeprecationComponent>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
 `;

package/src/core/Details/__snapshots__/index.spec.tsx.snap

@@ -2,24 +2,39 @@
 
 exports[`renders the closed Details component 1`] = `
 <ForwardRef(Details)>
-  <details
+  <ForwardRef(Base)
+    as="details"
     className="govgr-details"
   >
-    <ForwardRef(DetailsSummary)>
-      <summary
-        className="govgr-details__summary"
-      >
-        Help with nationality
-      </summary>
-    </ForwardRef(DetailsSummary)>
-    <ForwardRef(DetailsContent)>
-      <div
-        className="govgr-details__summary-text"
-      >
-        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
-      </div>
-    </ForwardRef(DetailsContent)>
-  </details>
+    <details
+      className="govgr-details"
+    >
+      <ForwardRef(DetailsSummary)>
+        <ForwardRef(Base)
+          as="summary"
+          className="govgr-details__summary"
+        >
+          <summary
+            className="govgr-details__summary"
+          >
+            Help with nationality
+          </summary>
+        </ForwardRef(Base)>
+      </ForwardRef(DetailsSummary)>
+      <ForwardRef(DetailsContent)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-details__summary-text"
+        >
+          <div
+            className="govgr-details__summary-text"
+          >
+            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(DetailsContent)>
+    </details>
+  </ForwardRef(Base)>
 </ForwardRef(Details)>
 `;
 
@@ -27,24 +42,40 @@ exports[`renders the open Details component 1`] = `
 <ForwardRef(Details)
   open={true}
 >
-  <details
+  <ForwardRef(Base)
+    as="details"
     className="govgr-details"
     open={true}
   >
-    <ForwardRef(DetailsSummary)>
-      <summary
-        className="govgr-details__summary"
-      >
-        Help with nationality
-      </summary>
-    </ForwardRef(DetailsSummary)>
-    <ForwardRef(DetailsContent)>
-      <div
-        className="govgr-details__summary-text"
-      >
-        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
-      </div>
-    </ForwardRef(DetailsContent)>
-  </details>
+    <details
+      className="govgr-details"
+      open={true}
+    >
+      <ForwardRef(DetailsSummary)>
+        <ForwardRef(Base)
+          as="summary"
+          className="govgr-details__summary"
+        >
+          <summary
+            className="govgr-details__summary"
+          >
+            Help with nationality
+          </summary>
+        </ForwardRef(Base)>
+      </ForwardRef(DetailsSummary)>
+      <ForwardRef(DetailsContent)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-details__summary-text"
+        >
+          <div
+            className="govgr-details__summary-text"
+          >
+            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(DetailsContent)>
+    </details>
+  </ForwardRef(Base)>
 </ForwardRef(Details)>
 `;