@digigov/ui 0.32.0 → 0.32.2

package/esm/typography/NormalText/index.mdx

@@ -9,29 +9,17 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Default.tsx" />
 
 ### Variants
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="Variants.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontSizes.tsx" />
 
 ### Font weight
 

package/esm/typography/Paragraph/index.mdx

@@ -17,29 +17,17 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -20,8 +20,8 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "0.23.0",
-    "@digigov/react-extensions": "0.21.2"
+    "@digigov/react-core": "0.23.1",
+    "@digigov/react-extensions": "0.21.3"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/src/admin/AccessibilityMenu/index.tsx

@@ -1,3 +1,55 @@
+import AccessibilityMenuOptionButtonBase, {
+  AccessibilityMenuOptionButtonProps as AccessibilityMenuOptionButtonBaseProps,
+} from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+import AccessibilityMenuSteps from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+export interface AccessibilityMenuOptionButtonProps
+  extends AccessibilityMenuOptionButtonBaseProps {
+  steps?: 0 | 1 | 2 | 3 | 4;
+}
+
+import React, { useState } from 'react';
+
+export const AccessibilityMenuOptionButton = React.forwardRef<
+  HTMLButtonElement,
+  AccessibilityMenuOptionButtonProps
+>(function AccessibilityMenuOptionButton(
+  { steps = 0, children },
+  ref: React.Ref<HTMLButtonElement>
+) {
+  const [selected, setSelected] = useState(false);
+  const [activeStep, setActiveStep] = useState<number>(0);
+
+  const handleClick = () => {
+    if (!selected) {
+      setSelected(true);
+      if (steps > 0) {
+        setActiveStep(activeStep + 1);
+      }
+    } else {
+      if (steps > 0) {
+        if (steps > activeStep) {
+          setActiveStep(activeStep + 1);
+        } else {
+          setActiveStep(0);
+          setSelected(false);
+        }
+      } else {
+        setSelected(false);
+      }
+    }
+  };
+  return (
+    <AccessibilityMenuOptionButtonBase
+      onClick={handleClick}
+      ref={ref}
+      selected={selected}
+    >
+      {children}
+      <AccessibilityMenuSteps steps={steps} activeStep={activeStep} />
+    </AccessibilityMenuOptionButtonBase>
+  );
+});
+
 export * from '@digigov/react-extensions/admin/AccessibilityMenu';
 export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
 export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';

package/src/admin/AutoComplete/index.mdx

@@ -16,51 +16,29 @@ import AutoComplete from '@digigov/ui/admin/AutoComplete';
 
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" 
+component="admin/AutoComplete" 
+story="Default.tsx" />
 
 ### AutoComplete with auto select
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithAutoSelect.tsx" />
 
 ### AutoComplete with inline style
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithInLine.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithInLine.tsx" />
 
 ### AutoComplete with default value
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithDefaultValue.tsx" />
 
 ### AutoComplete with placeholder
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithPlaceHolder.tsx" />
 
 ### AutoComplete with all option's values
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/AutoComplete" story="WithShowAllValues.tsx" />
 
 ### AutoComplete with min length
 

package/src/admin/CopyToClipboard/index.mdx

@@ -11,11 +11,7 @@ import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/CopyToClipboard"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Default.tsx" />
 
 ### Banner
 

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

@@ -0,0 +1,53 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-dropdown--align-right": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>details>summary"
+              }
+            }
+          ],
+          "id": "lWuaZaRFFDje",
+          "title": "Align right action"
+        }
+      ]
+    },
+    "digigov-ui-admin-dropdown--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>details>summary"
+              }
+            }
+          ],
+          "id": "jCwDDNP3O4e8",
+          "title": "Open dropdown action"
+        }
+      ]
+    },
+    "digigov-ui-admin-dropdown--placement-top": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>details>summary"
+              }
+            }
+          ],
+          "id": "w6MaGKfzgKOG",
+          "title": "Placement top action"
+        }
+      ]
+    }
+  }
+}

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -23,7 +23,7 @@ export const AlignRight = () => (
       alignItems: 'center',
     }}
   >
-    <Dropdown align="right" open>
+    <Dropdown align="right">
       <DropdownButton
         role="button"
         aria-haspopup="true"

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

@@ -16,7 +16,7 @@ import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
 import { Button } from '@digigov/ui/core/Button';
 
 export const Default = () => (
-  <Dropdown open>
+  <Dropdown>
     <DropdownButton
       role="button"
       aria-haspopup="true"

package/src/admin/Dropdown/__stories__/PlacementTop.tsx

@@ -23,7 +23,7 @@ export const PlacementTop = () => (
       alignItems: 'center',
     }}
   >
-    <Dropdown placement="top" open>
+    <Dropdown placement="top">
       <DropdownButton
         role="button"
         aria-haspopup="true"

package/src/admin/Dropdown/index.mdx

@@ -11,31 +11,19 @@ import Dropdown from '@digigov/ui/admin/Dropdown';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="AlignRight.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Dropdown" story="PlacementTop.tsx" />
 
 You can read more about the accessibility patterns used in our Dropdown
 implementation in the ARIA Authoring Practices Guide (APG) at 

package/src/admin/Modal/Modal.stories.playwright.json

@@ -0,0 +1,37 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-modal--alert-dialog": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "Dk4oIFwRzm6e",
+          "title": "Alert dialog action"
+        }
+      ]
+    },
+    "digigov-ui-admin-modal--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "YyIZkcmdBlRP",
+          "title": "Open modal action"
+        }
+      ]
+    }
+  }
+}

package/src/admin/Modal/__stories__/AlertDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   Modal,
@@ -11,10 +11,18 @@ import { Button } from '@digigov/ui/core/Button';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const AlertDialog = () => {
+  const [open, setOpen] = useState(false);
   return (
     <div>
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Άνοιξε Modal
+      </Button>
       <Modal
-        open
+        open={open}
         role="alertdialog"
         aria-labelledby="modal-label"
         aria-describedby="modal-content"
@@ -27,7 +35,14 @@ export const AlertDialog = () => {
         </ModalContent>
         <ModalAction>
           <Button>Διαγραφή</Button>
-          <Button variant="link">Ακύρωση</Button>
+          <Button
+            variant="link"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            Ακύρωση
+          </Button>
         </ModalAction>
       </Modal>
     </div>

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import {
   Modal,
@@ -13,9 +13,17 @@ import { FieldContainer } from '@digigov/ui/core/FieldContainer';
 import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 
 export const Default = () => {
+  const [open, setOpen] = useState(false);
   return (
     <div>
-      <Modal open aria-labelledby="modal-label">
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Άνοιξε Modal
+      </Button>
+      <Modal open={open} aria-labelledby="modal-label">
         <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
         <ModalContent>
           <FieldContainer>
@@ -27,7 +35,14 @@ export const Default = () => {
         </ModalContent>
         <ModalAction>
           <Button>Υποβολή</Button>
-          <Button variant="link">Ακύρωση</Button>
+          <Button
+            variant="link"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            Ακύρωση
+          </Button>
         </ModalAction>
       </Modal>
     </div>

package/src/admin/Modal/index.mdx

@@ -15,11 +15,7 @@ import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/admin/
 
 ### As an Alert Dialog
 
-<Story
-  packageName="@digigov/ui"
-  component="admin/Modal"
-  story="AlertDialog.tsx"
-/>
+<Story packageName="@digigov/ui" component="admin/Modal" story="AlertDialog.tsx" />
 
 ## Accessibility
 

package/src/app/Footer/Footer.mdx

@@ -15,26 +15,15 @@ import Footer from '@digigov/ui/app/Footer';
 
 ### Footer with logos
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
 
 ### Footer with secondary navigation
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithSecondaryNavigation.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithSecondaryNavigation.tsx" />
 
 ### Footer with links to meta information
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLink.tsx"
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLink.tsx"
 />
 
 ### All inclusive footer

package/src/app/Header/index.mdx

@@ -11,28 +11,15 @@ import Header from '@digigov/ui/app/Header';
 
 ### Default header
 
-<Story
-  title="### Default"
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="Default.tsx"
-/>
+<Story title="### Default" packageName="@digigov/ui" component="app/Header" story="Default.tsx" />
 
 ### Header with service name
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceName.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithServiceName.tsx" />
 
 ### Header with service logo and service name
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceNameAndLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithServiceNameAndLogo.tsx" />
 
 ### Default header with navigation
 

package/src/app/QrCodeViewer/index.mdx

@@ -11,11 +11,7 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ### Default QrCodeViewer
 
-<Story
-  packageName="@digigov/ui"
-  component="app/QrCodeViewer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Default.tsx" />
 
 ### Custom QrCodeViewer
 

package/src/core/Accordion/index.mdx

@@ -15,21 +15,13 @@ import Accordion from '@digigov/ui/core/Accordion';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Accordion"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Accordion" story="Default.tsx" />
 
 ### Accordion with Hints
 
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<Story
-  packageName="@digigov/ui"
-  component="core/Accordion"
-  story="WithHints.tsx"
-/>
+<Story packageName="@digigov/ui" component="core/Accordion" story="WithHints.tsx" />
 
 ## Accessibility
 

package/src/core/Accordion/index.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React from 'react';
+import React, { useState } from 'react';
 import Accordion from '@digigov/react-core/Accordion';
 import AccordionSection from '@digigov/react-core/AccordionSection';
 import AccordionSectionContent from '@digigov/react-core/AccordionSectionContent';
-import AccordionSectionSummaryHeading from '@digigov/react-core/AccordionSectionSummaryHeading';
+import AccordionSectionSummaryHeadingBase, {
+  AccordionSectionSummaryHeadingProps as AccordionSectionSummaryHeadingBaseProps,
+} from '@digigov/react-core/AccordionSectionSummaryHeading';
 import AccordionSectionSummary from '@digigov/react-core/AccordionSectionSummary';
 import AccordionControls from '@digigov/react-core/AccordionControls';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
@@ -17,13 +19,45 @@ export const AccordionItemDetails = withDeprecation(AccordionSectionContent, {
   rename: 'AccordionSectionContent',
 });
 
+export interface AccordionSectionSummaryHeadingProps
+  extends AccordionSectionSummaryHeadingBaseProps {
+  children: React.ReactNode;
+}
+
+const AccordionSectionSummaryHeading = React.forwardRef<
+  HTMLHeadingElement,
+  AccordionSectionSummaryHeadingProps
+>(function AccordionSectionSummaryHeading({ children, ...props }, ref) {
+  const toggleExpanded = () => {
+    setExpanded(!isExpanded);
+  };
+  const [isExpanded, setExpanded] = useState(false);
+  return (
+    <AccordionSectionSummaryHeadingBase
+      ref={ref}
+      {...props}
+      onClick={toggleExpanded}
+      aria-expanded={isExpanded}
+    >
+      {children}
+    </AccordionSectionSummaryHeadingBase>
+  );
+});
+
 export const AccordionItemSummary = withDeprecation(
   ({ children, ...props }) => {
+    const toggleExpanded = () => {
+      setExpanded(!isExpanded);
+    };
+    const [isExpanded, setExpanded] = useState(false);
     return (
       <AccordionSectionSummary {...props}>
-        <AccordionSectionSummaryHeading>
+        <AccordionSectionSummaryHeadingBase
+          onClick={toggleExpanded}
+          aria-expanded={isExpanded}
+        >
           {children}
-        </AccordionSectionSummaryHeading>
+        </AccordionSectionSummaryHeadingBase>
       </AccordionSectionSummary>
     );
   },

package/src/core/Button/__stories__/GroupingButtons.tsx

@@ -11,3 +11,4 @@ export const GroupingButtons = () => (
     <Button color="secondary">Αποθήκευση</Button>
   </ButtonGroup>
 );
+export default GroupingButtons;

package/src/core/Button/__stories__/GroupingButtonsAndLinks.tsx

@@ -13,3 +13,4 @@ export const GroupingButtonsAndLinks = () => (
     <Link>Ακύρωση</Link>
   </ButtonGroup>
 );
+export default GroupingButtonsAndLinks;

package/src/core/Button/__stories__/Warning.tsx

@@ -8,3 +8,4 @@ export const Warning = () => {
     </Button>
   );
 };
+export default Warning;