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

package/esm/app/Header/__stories__/WithHeaderNavigation.js

@@ -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';
@@ -15,9 +15,9 @@ import { BurgerIcon, MoreVertIcon } from '@digigov/ui';
 
 var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, {
   href: "#"
-}, "\u03A0\u03C1\u03CC\u03C4\u03C5\u03C0\u03BF - \u0391\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC\u03C2")), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(NavHorizontalList, {
+}, "\u03A0\u03C1\u03CC\u03C4\u03C5\u03C0\u03BF - \u0391\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC\u03C2")), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(NavList, {
   active: true
-}, /*#__PURE__*/React.createElement(NavHorizontalListItem, null, /*#__PURE__*/React.createElement(NavHorizontalListItemLink, null, "\u039C\u03B5\u03BD\u03BF\u03CD ", /*#__PURE__*/React.createElement(ArrowIcon, {
+}, /*#__PURE__*/React.createElement(NavListItem, null, /*#__PURE__*/React.createElement(NavListItemLink, null, "\u039C\u03B5\u03BD\u03BF\u03CD ", /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "down"
 })))), /*#__PURE__*/React.createElement(Dropdown, {
   align: "left"
@@ -26,7 +26,7 @@ var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.create
 }, "\u039C\u0391\u03A1\u0399\u039F\u03A3 \u039C\u0395\u039D\u0395\u039E\u0395\u03A3", /*#__PURE__*/React.createElement(MoreVertIcon, {
   size: "l"
 })), /*#__PURE__*/React.createElement(DropdownContent, null, "\u039A\u03AC\u03C4\u03B9"))), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(BurgerIcon, {
-  hidden: "s",
+  smUpHidden: true,
   size: "m"
 })))));
 

package/esm/app/Header/__stories__/WithNavigation.js

@@ -1,30 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
 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';
+import { SectionBreak } from '@digigov/ui';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
 
-var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, {
   href: "#"
-})))), /*#__PURE__*/React.createElement(NavHorizontal, {
-  open: true
-}, /*#__PURE__*/React.createElement(NavHorizontalList, null, /*#__PURE__*/React.createElement(NavHorizontalListItem, null, /*#__PURE__*/React.createElement(NavHorizontalListItemLink, null, "Home ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-}))), /*#__PURE__*/React.createElement(NavHorizontalListItem, null, /*#__PURE__*/React.createElement(NavHorizontalListItemLink, null, "Form registration ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-}))), /*#__PURE__*/React.createElement(NavHorizontalListItem, null, /*#__PURE__*/React.createElement(NavHorizontalListItemLink, null, "News ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-}))), /*#__PURE__*/React.createElement(NavHorizontalListItem, null, /*#__PURE__*/React.createElement(NavHorizontalListItemLink, null, "Contact ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-}))), /*#__PURE__*/React.createElement(SectionBreak, null))));
+}))));
+
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
 
 export var WithNavigation = function WithNavigation() {
-  return _ref;
+  var _useNavList = useNavList(),
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  };
+
+  return /*#__PURE__*/React.createElement(Top, null, _ref, /*#__PURE__*/React.createElement(Nav, {
+    open: true
+  }, /*#__PURE__*/React.createElement(NavList, null, /*#__PURE__*/React.createElement(NavListItem, {
+    link: {
+      name: 'home',
+      label: 'Home',
+      subMenu: []
+    },
+    setRegister: setRegister
+  }), /*#__PURE__*/React.createElement(NavListItem, {
+    link: {
+      name: 'form',
+      label: 'Form registration',
+      subMenu: []
+    },
+    setRegister: setRegister
+  }), /*#__PURE__*/React.createElement(NavListItem, {
+    link: {
+      name: 'news',
+      label: 'News',
+      subMenu: []
+    },
+    setRegister: setRegister
+  }), /*#__PURE__*/React.createElement(NavListItem, {
+    link: {
+      name: 'contact',
+      label: 'Contact',
+      subMenu: []
+    },
+    setRegister: setRegister
+  }), _ref2)));
 };
 export default WithNavigation;

package/esm/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/esm/app/QrCodeScanner/index.spec.js

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { mount } from 'enzyme';
 import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
 it('renders the qr code scanner', function () {
-  expect(mount( /*#__PURE__*/React.createElement(QrCodeScanner, {
+  expect(mount( /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: "<div>loading...</div>"
+  }, /*#__PURE__*/React.createElement(QrCodeScanner, {
     onScan: function onScan(args) {
       console.log(args);
     },
     onError: function onError(args) {
       console.log(args);
     }
-  }))).toMatchSnapshot();
+  })))).toMatchSnapshot();
 });

package/esm/app/ThemeSelectorOptions/index.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 from '@digigov/ui/hooks/useTheme';
+
+var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B8\u03AD\u03BC\u03B1\u03C4\u03BF\u03C2"));
+
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+
+export var ThemeToggleOptions = function ThemeToggleOptions() {
+  var _useTheme = useTheme(),
+      theme = _useTheme.theme,
+      changeTheme = _useTheme.changeTheme;
+
+  var _useState = useState(theme || 'auto'),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOption = _useState2[0],
+      setSelectedOption = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fieldset, {
+    style: {
+      textAlign: 'left'
+    }
+  }, _ref, /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "light",
+    onChange: function onChange() {
+      return setSelectedOption('light');
+    },
+    defaultChecked: selectedOption === 'light'
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "dark",
+    onChange: function onChange() {
+      return setSelectedOption('dark');
+    },
+    defaultChecked: selectedOption === 'dark'
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "auto",
+    onChange: function onChange() {
+      return setSelectedOption('auto');
+    },
+    defaultChecked: selectedOption === 'auto'
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2"))), _ref2, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return changeTheme(selectedOption);
+    }
+  }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
+};
+export default ThemeToggleOptions;

package/esm/app/index.js

@@ -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';
@@ -7,4 +9,5 @@ export * from '@digigov/ui/app/QrCodeViewer';
 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/PhaseBannerHeader';
+export * from '@digigov/ui/app/ThemeSelectorOptions';

package/esm/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/esm/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/esm/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/esm/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)>
 `;