@digigov/ui 0.30.2 → 0.31.0

package/src/admin/Pagination/__stories__/Default.tsx

@@ -9,7 +9,7 @@ import {
 
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const Default = () => (
@@ -50,7 +50,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
@@ -87,7 +87,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
@@ -124,7 +124,7 @@ export const Default = () => (
         </PaginationList>
       </Pagination>
 
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
 
       <Pagination>
         <PaginationLabel start={1} end={10} total={15}></PaginationLabel>

package/src/admin/Pagination/__stories__/PaginationSmall.tsx

@@ -9,7 +9,7 @@ import {
 
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const PaginationSmall = () => (
@@ -36,7 +36,7 @@ export const PaginationSmall = () => (
           </PaginationListItem>
         </PaginationList>
       </Pagination>
-      <Divider visible size="l" />
+      <SectionBreak size="l" />
     </I18NProvider>
   </div>
 );

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

@@ -58,7 +58,7 @@ export const FooterAllInclusive = () => {
           </FooterList>
         </FooterSection>
       </FooterNavigation>
-      <SectionBreak size="m" />
+      <SectionBreak visible={false} size="m" />
       <FooterMeta>
         <FooterMetaItem grow>
           <FooterContent>

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

@@ -52,7 +52,7 @@ export const FooterWithSecondaryNavigation = () => {
           </FooterList>
         </FooterSection>
       </FooterNavigation>
-      <SectionBreak size="m" />
+      <SectionBreak visible={false} size="m" />
       <FooterMeta>
         <FooterMetaItem grow>
           <FooterContent>

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

@@ -11,10 +11,10 @@ import { SectionBreak } from '@digigov/ui';
 import { useNavList } from '@digigov/ui/hooks/useNavList';
 
 export const WithNavigation = () => {
-  const { register } = useNavList();
+  const { registerButton } = useNavList();
 
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
   };
 
   return (
@@ -34,21 +34,21 @@ export const WithNavigation = () => {
               label: 'Home',
               subMenu: [],
             }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'form', label: 'Form registration', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'news', label: 'News', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
           <NavListItem
             link={{ name: 'contact', label: 'Contact', subMenu: [] }}
-            setRegister={setRegister}
+            setRegisterButton={setRegisterButton}
           />
-          <SectionBreak></SectionBreak>
+          <SectionBreak visible={false} />
         </NavList>
       </Nav>
     </Top>

package/src/app/QrCodeScanner/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense, useState } from 'react';
 import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
 
 export const Default = () => {
@@ -32,7 +32,7 @@ export const Default = () => {
       >
         {error.message && (
           <ErrorSummary>
-            <Title size="sm">{error.message}</Title>
+            <Heading size="s">{error.message}</Heading>
           </ErrorSummary>
         )}
       </QrCodeScanner>

package/src/app/QrCodeViewer/index.tsx

@@ -14,7 +14,7 @@ const DEFAULT_BGCOLOR = '#FFFFFF';
 const DEFAULT_FGCOLOR = '#000000';
 const DEFAULT_INCLUDEMARGIN = false;
 
-const SUPPORTS_PATH2D = (function () {
+const SUPPORTS_PATH2D = (function() {
   try {
     new Path2D().addPath(new Path2D());
   } catch (e) {
@@ -28,8 +28,10 @@ const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
   Q: qrcodegen.QrCode.Ecc.QUARTILE,
   H: qrcodegen.QrCode.Ecc.HIGH,
 };
-
-function QrCodeViewerCanvas(props: QRPropsCanvas) {
+const QrCodeViewerCanvas = React.forwardRef(function QrCodeViewerCanvas(
+  props: QRPropsCanvas,
+  ref: any
+) {
   const {
     value,
     size = DEFAULT_SIZE,
@@ -42,9 +44,8 @@ function QrCodeViewerCanvas(props: QRPropsCanvas) {
     ...otherProps
   } = props;
   const imgSrc = imageSettings?.src;
-  const _canvas = useRef<HTMLCanvasElement>(null);
+  const _canvas = ref || useRef<HTMLCanvasElement>(null);
   const _image = useRef<HTMLImageElement>(null);
-
   // We're just using this state to trigger rerenders when images load. We
   // Don't actually read the value anywhere. A smarter use of useEffect would
   // depend on this value.
@@ -108,8 +109,8 @@ function QrCodeViewerCanvas(props: QRPropsCanvas) {
         // $FlowFixMe: Path2D c'tor doesn't support args yet.
         ctx.fill(new Path2D(generatePath(cells, margin)));
       } else {
-        cells.forEach(function (row, rdx) {
-          row.forEach(function (cell, cdx) {
+        cells.forEach(function(row, rdx) {
+          row.forEach(function(cell, cdx) {
             if (cell) {
               ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
             }
@@ -164,12 +165,13 @@ function QrCodeViewerCanvas(props: QRPropsCanvas) {
       {img}
     </>
   );
-}
+});
 
-export interface QrCodeViewerProps extends QRPropsCanvas {}
-
-export const QrCodeViewer = (props: QrCodeViewerProps): React.ReactElement => {
-  return <QrCodeViewerCanvas {...props} />;
-};
+export interface QrCodeViewerProps extends QRPropsCanvas { }
 
-export default QrCodeViewer;
+export const QrCodeViewer = React.forwardRef(function QrCodeViewer(
+  props: QrCodeViewerProps,
+  ref
+) {
+  return <QrCodeViewerCanvas {...props} ref={ref} />;
+});

package/src/app/ThemeOptionsForm/index.tsx

@@ -0,0 +1,220 @@
+import React, { useState } from 'react';
+import Button from '@digigov/ui/core/Button';
+import FieldContainer, {
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/core/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import SectionBreak from '@digigov/ui/core/SectionBreak';
+
+import useTheme, { ThemeSelectOptions } from '@digigov/ui/hooks/useTheme';
+import useFontSize, { FontSizeOptions } from '@digigov/ui/hooks/useFontSize';
+import useLineHeight, {
+  LineHeightOptions,
+} from '@digigov/ui/hooks/useLineHeight';
+import useLetterSpacing, {
+  LetterSpacingOptions,
+} from '@digigov/ui/hooks/useLetterSpacing';
+import useHighlightLinks, {
+  HighlightLinksOptions,
+} from '@digigov/ui/hooks/useHighlightLinks';
+
+export const ThemeOptionsForm = () => {
+  const [theme, changeTheme] = useTheme();
+  const [selectedTheme, setSelectedTheme] = useState<ThemeSelectOptions>(
+    theme || 'auto'
+  );
+  const [fontSize, changeFontSize] = useFontSize();
+  const [selectedFontSize, setSelectedFontSize] = useState<FontSizeOptions>(
+    fontSize || 'default'
+  );
+  const [lineHeight, changeLineHeight] = useLineHeight();
+  const [
+    selectedLineHeight,
+    setSelectedLineHeight,
+  ] = useState<LineHeightOptions>(lineHeight || 'default');
+  const [letterSpacing, changeLetterSpacing] = useLetterSpacing();
+  const [
+    selectedLetterSpacing,
+    setSelectedLetterSpacing,
+  ] = useState<LetterSpacingOptions>(letterSpacing || 'default');
+
+  const [highlightLinks, changeHighlightLinks] = useHighlightLinks();
+  const [
+    selectedHighlightLinks,
+    setSelectedHighlightLinks,
+  ] = useState<HighlightLinksOptions>(highlightLinks || 'default');
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+
+  function optionsHasChanged() {
+    if (
+      theme != selectedTheme ||
+      fontSize != selectedFontSize ||
+      lineHeight != selectedLineHeight ||
+      letterSpacing != selectedLetterSpacing ||
+      highlightLinks != selectedHighlightLinks
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return (
+    <>
+      <FieldContainer marginBottom={4}>
+        <Fieldset>
+          <FieldsetLegend size="s">Επιλογή θέματος</FieldsetLegend>
+          <RadioContainer>
+            <RadioItem
+              name="theme_mode"
+              value="light"
+              onChange={() => setSelectedTheme('light')}
+              checked={selectedTheme === 'light'}
+            >
+              Φωτεινό θέμα
+            </RadioItem>
+            <RadioItem
+              name="theme_mode"
+              value="dark"
+              onChange={() => setSelectedTheme('dark')}
+              checked={selectedTheme === 'dark'}
+            >
+              Σκούρο θέμα
+            </RadioItem>
+            <RadioItem
+              name="theme_mode"
+              value="auto"
+              onChange={() => setSelectedTheme('auto')}
+              checked={selectedTheme === 'auto'}
+            >
+              Επιλογή συστήματος
+            </RadioItem>
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+      <FieldContainer marginBottom={4}>
+        <Fieldset>
+          <FieldsetLegend size="s">Mέγεθος γραμμάτων</FieldsetLegend>
+          <RadioContainer inline>
+            <RadioItem
+              name="font-size"
+              value="no"
+              onChange={() => setSelectedFontSize('default')}
+              checked={selectedFontSize === 'default'}
+            >
+              Κανονικό (προεπιλογή)
+            </RadioItem>
+            <RadioItem
+              name="font-size"
+              value="yes"
+              onChange={() => {
+                setSelectedFontSize('large');
+              }}
+              checked={selectedFontSize === 'large'}
+            >
+              Μεγαλύτερο
+            </RadioItem>
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+      <FieldContainer marginBottom={4}>
+        <Fieldset>
+          <FieldsetLegend size="s">Ύψος γραμμής κειμένων</FieldsetLegend>
+          <RadioContainer inline>
+            <RadioItem
+              name="line-height"
+              value="no"
+              onChange={() => setSelectedLineHeight('default')}
+              checked={selectedLineHeight === 'default'}
+            >
+              Κανονικό (προεπιλογή)
+            </RadioItem>
+            <RadioItem
+              name="line-height"
+              value="yes"
+              onChange={() => {
+                setSelectedLineHeight('large');
+              }}
+              checked={selectedLineHeight === 'large'}
+            >
+              Μεγαλύτερο
+            </RadioItem>
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+      <FieldContainer marginBottom={4}>
+        <Fieldset>
+          <FieldsetLegend size="s">Απόσταση γραμμάτων</FieldsetLegend>
+          <RadioContainer inline>
+            <RadioItem
+              name="letter-spacing"
+              value="no"
+              onChange={() => setSelectedLetterSpacing('default')}
+              checked={selectedLetterSpacing === 'default'}
+            >
+              Κανονική (προεπιλογή)
+            </RadioItem>
+            <RadioItem
+              name="letter-spacing"
+              value="yes"
+              onChange={() => {
+                setSelectedLetterSpacing('extra');
+              }}
+              checked={selectedLetterSpacing === 'extra'}
+            >
+              Μεγαλύτερη
+            </RadioItem>
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+      <FieldContainer marginBottom={4}>
+        <Fieldset>
+          <FieldsetLegend size="s">Έντονη εμφάνιση συνδέσμων</FieldsetLegend>
+          <RadioContainer inline>
+            <RadioItem
+              name="highlight-links"
+              value="no"
+              onChange={() => setSelectedHighlightLinks('default')}
+              checked={selectedHighlightLinks === 'default'}
+            >
+              Όχι (προεπιλογή)
+            </RadioItem>
+            <RadioItem
+              name="highlight-links"
+              value="yes"
+              onChange={() => {
+                setSelectedHighlightLinks('highlight');
+              }}
+              checked={selectedHighlightLinks === 'highlight'}
+            >
+              Ναι
+            </RadioItem>
+          </RadioContainer>
+          <Button onClick={resetOptions} variant="link">
+            Επαναφορά όλων των επιλογών
+          </Button>
+        </Fieldset>
+      </FieldContainer>
+      <SectionBreak visible={false} />
+      <Button onClick={handleOptions} disabled={!optionsHasChanged()}>
+        Εφαρμογή
+      </Button>
+    </>
+  );
+};
+export default ThemeOptionsForm;

package/src/app/{ThemeSelectorOptions → ThemePaletteForm}/index.tsx

@@ -7,8 +7,8 @@ import SectionBreak from '@digigov/ui/core/SectionBreak';
 
 import useTheme, { ThemeSelectOptions } from '@digigov/ui/hooks/useTheme';
 
-export const ThemeToggleOptions = () => {
-  const {theme, changeTheme} = useTheme();
+export const ThemePaletteForm = () => {
+  const [ theme, changeTheme ] = useTheme();
   const [selectedOption, setSelectedOption] = useState<ThemeSelectOptions>(
     theme || 'auto'
   );
@@ -51,4 +51,4 @@ export const ThemeToggleOptions = () => {
     </>
   );
 };
-export default ThemeToggleOptions;
+export default ThemePaletteForm;

package/src/app/index.ts

@@ -10,4 +10,5 @@ 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';
+export * from '@digigov/ui/app/ThemePaletteForm';
+export * from '@digigov/ui/app/ThemeOptionsForm';

package/src/core/Accordion/index.tsx

@@ -8,9 +8,9 @@ import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary
 import AccordionControls from '@digigov/react-core/AccordionControls';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
 import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
+  useTogglableTab,
+  UseTogglableTabReturn,
+} from '@digigov/ui/hooks/useTogglableTab';
 
 export const AccordionItemDetails = withDeprecation(AccordionSectionContent, {
   name: 'AccordionItemDetails',
@@ -44,15 +44,9 @@ export const AccordionItem = withDeprecation(
 export interface UseAccordionProps {
   singleOpen?: boolean;
 }
-export interface UseAccordionReturn extends UseTogglableSectionsReturn {}
+export interface UseAccordionReturn extends UseTogglableTabReturn {}
 const useAccordion = (props: UseAccordionProps): UseAccordionReturn => {
-  const {
-    register,
-    setOpened,
-    opened,
-    registered,
-    ...rest
-  } = useTogglableSections({
+  const { register, setOpened, opened, registered, ...rest } = useTogglableTab({
     toggleProperty: 'open',
     onToggleProperty: 'onToggle',
     singleOpen: props && !!props.singleOpen,

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
 export const Default = () => (
   <>
-    <Divider visible />
-    <Divider visible size="m" />
-    <Divider visible size="l" />
-    <Divider visible size="xl" />
+    <SectionBreak />
+    <SectionBreak size="m" />
+    <SectionBreak size="l" />
+    <SectionBreak size="xl" />
   </>
 );
 

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 
 export const Default = () => (
   <ErrorSummary>
-    <Title size="sm">Υπήρξε κάποιο πρόβλημα</Title>
+    <Heading size="s">Υπήρξε κάποιο πρόβλημα</Heading>
     <Link>Πρέπει να συμπληρώσετε το έτος</Link>
   </ErrorSummary>
 );

package/src/core/ErrorSummary/__stories__/LinkedToCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
@@ -17,7 +17,7 @@ import { Checkbox, CheckboxItem } from '@digigov/ui/core/Checkbox';
 export const LinkedToCheckbox = () => (
   <div className="example">
     <ErrorSummary>
-      <Title size="sm">Υπήρξε κάποιο πρόβλημα</Title>
+      <Heading size="s">Υπήρξε κάποιο πρόβλημα</Heading>
       <Link href="#england">Επιλέξτε μία ή παραπάνω χώρες.</Link>
     </ErrorSummary>
 

package/src/core/ErrorSummary/__stories__/LinkedToField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
@@ -20,7 +20,7 @@ import {
 export const LinkedToField = () => (
   <div className="example">
     <ErrorSummary>
-      <Title size="sm">Υπήρξε κάποιο πρόβλημα</Title>
+      <Heading size="s">Υπήρξε κάποιο πρόβλημα</Heading>
       <Link href="#passport-date">
         Η ημερομηνία έκδοσης του διαβατηρίου σας θα πρέπει να είναι στο
         παρελθόν.

package/src/core/ErrorSummary/__stories__/LinkedToInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { TextInput } from '@digigov/ui/core/TextInput';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
@@ -13,7 +13,7 @@ import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 export const LinkedToInput = () => (
   <div className="example">
     <ErrorSummary>
-      <Title size="sm">Υπήρξε κάποιο πρόβλημα</Title>
+      <Heading size="s">Υπήρξε κάποιο πρόβλημα</Heading>
       <Link href="#business-name">
         Πρέπει να συμπληρώσετε το όνομα επιχείρησης
       </Link>

package/src/core/Link/__stories__/DarkBackground.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
-
 export const DarkBackground = () => (
   <Masthead>
-    <SectionBreak />
+    <SectionBreak visible={false} />
     <Link
       aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr"
       role="link"
@@ -13,7 +12,7 @@ export const DarkBackground = () => (
     >
       govgr link
     </Link>
-    <SectionBreak />
+    <SectionBreak visible={false} />
   </Masthead>
 );
 

package/src/core/Link/__stories__/DarkBackgroundNoUnderline.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
-
 export const DarkBackgroundNoUnderline = () => (
   <Masthead>
-    <SectionBreak />
+    <SectionBreak visible={false} />
     <Link
       aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr"
       role="link"
@@ -14,7 +13,7 @@ export const DarkBackgroundNoUnderline = () => (
     >
       govgr link
     </Link>
-    <SectionBreak />
+    <SectionBreak visible={false} />
   </Masthead>
 );
 

package/src/core/NavList/NavList.stories.js

@@ -8,6 +8,8 @@ export default {
   displayName: 'NavList',
 };
 export * from '@digigov/ui/core/NavList/__stories__/Default';
-export * from '@digigov/ui/core/NavList/__stories__/NavListAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListHorizontalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListVerticalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListSecondaryAutoExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavListEpathlaExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/src/core/NavList/NavList.stories.playwright.json

@@ -6,26 +6,26 @@
         {
           "actions": [
             {
-              "name": "click",
+              "name": "hover",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
         },
         {
           "actions": [
             {
-              "name": "hover",
+              "name": "click",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "WMfgyO3E_9S_",
+          "title": "Open sub menu"
         }
       ]
     }