@digigov/ui 0.35.3 → 0.35.5

package/registry.js

@@ -405,6 +405,8 @@ var _digigov_ui_utils_withDeprecation = _interopRequireWildcard(require("@digigo
 
 var _digigov_ui_admin_AutoComplete_AutoComplete_stories = _interopRequireWildcard(require("@digigov/ui/admin/AutoComplete/AutoComplete.stories"));
 
+var _digigov_ui_admin_Chip_Chip_stories = _interopRequireWildcard(require("@digigov/ui/admin/Chip/Chip.stories"));
+
 var _digigov_ui_admin_CircularProgress_CircularProgress_stories = _interopRequireWildcard(require("@digigov/ui/admin/CircularProgress/CircularProgress.stories"));
 
 var _digigov_ui_admin_CopyToClipboard_CopyToClipboard_stories = _interopRequireWildcard(require("@digigov/ui/admin/CopyToClipboard/CopyToClipboard.stories"));
@@ -514,6 +516,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function lazyImport(pkgImport) {
+  // eslint-disable-next-line no-undef
   return new Proxy({}, {
     get: function get(_target, name) {
       if (name === '__esModule' || name === 'default') {
@@ -730,6 +733,7 @@ var _default = {
 exports["default"] = _default;
 var stories = {
   '@digigov/ui/admin/AutoComplete/AutoComplete.stories': _digigov_ui_admin_AutoComplete_AutoComplete_stories,
+  '@digigov/ui/admin/Chip/Chip.stories': _digigov_ui_admin_Chip_Chip_stories,
   '@digigov/ui/admin/CircularProgress/CircularProgress.stories': _digigov_ui_admin_CircularProgress_CircularProgress_stories,
   '@digigov/ui/admin/CopyToClipboard/CopyToClipboard.stories': _digigov_ui_admin_CopyToClipboard_CopyToClipboard_stories,
   '@digigov/ui/admin/Drawer/Drawer.stories': _digigov_ui_admin_Drawer_Drawer_stories,

package/src/admin/AccessibilityMenu/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
+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 AccessibilityMenuOptionButtonBase, {
-  AccessibilityMenuOptionButtonProps as AccessibilityMenuOptionButtonBaseProps,
-} from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+import React, { useState } from 'react';
 
 export const AccessibilityMenuOptionButton = React.forwardRef<
   HTMLButtonElement,
@@ -62,5 +62,5 @@ export * from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
 export * from '@digigov/react-core/AccessibilityIcon';
 export * from '@digigov/react-core/AccessibilityTextIcon';
 
-import AccessibilityMenuSteps from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
 export default AccessibilityMenu;

package/src/admin/AutoComplete/Status/index.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import AutoCompleteStatus from '@digigov/react-extensions/admin/AutoCompleteStatus';
 import AutoCompleteStatusWrapper from '@digigov/react-extensions/admin/AutoCompleteStatusWrapper';
+import AutoCompleteStatus from '@digigov/react-extensions/admin/AutoCompleteStatus';
 
 const debounce = function (
   func: () => void,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const Default = () => (
   <>

package/src/admin/AutoComplete/__stories__/WithAutoSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithAutoSelect = () => (
   <div>

package/src/admin/AutoComplete/__stories__/WithDefaultValue.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithDefaultValue = () => (
   <div>

package/src/admin/AutoComplete/__stories__/WithInLine.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithInLine = () => (
   <div>

package/src/admin/AutoComplete/__stories__/WithMinLength.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithMinLength = () => (
   <div>

package/src/admin/AutoComplete/__stories__/WithPlaceHolder.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithPlaceHolder = () => (
   <div>

package/src/admin/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AutoComplete } from '@digigov/ui/admin/AutoComplete';
-import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { suggest } from '@digigov/ui/admin/AutoComplete/utils';
 
 export const WithShowAllValues = () => (
   <div>

package/src/admin/AutoComplete/index.tsx

@@ -1,14 +1,14 @@
-import React, { Component } from "react";
-import AutoCompleteAssistiveHint from '@digigov/react-extensions/admin/AutoCompleteAssistiveHint';
+import React from 'react';
 import AutoCompleteInput from '@digigov/react-extensions/admin/AutoCompleteInput';
 import AutoCompleteInputTypeahead from '@digigov/react-extensions/admin/AutoCompleteInputTypeahead';
-import AutoCompleteNoResult from '@digigov/react-extensions/admin/AutoCompleteNoResult';
 import AutoCompleteResultList from '@digigov/react-extensions/admin/AutoCompleteResultList';
 import AutoCompleteResultListItem from '@digigov/react-extensions/admin/AutoCompleteResultListItem';
 import AutoCompleteWrapper from '@digigov/react-extensions/admin/AutoCompleteWrapper';
+import AutoCompleteAssistiveHint from '@digigov/react-extensions/admin/AutoCompleteAssistiveHint';
 
-import DropdownArrowDown from '@digigov/react-extensions/admin/DropdownArrowDown';
+import { Component } from 'react';
 import Status from '@digigov/ui/admin/AutoComplete/Status';
+import DropdownArrowDown from '@digigov/react-extensions/admin/DropdownArrowDown';
 import {
   isIosDevice,
   keyCodes,
@@ -631,7 +631,9 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
             );
           })}
           {showNoOptionsFound && (
-            <AutoCompleteNoResult>{tNoResults?.()}</AutoCompleteNoResult>
+            <AutoCompleteResultListItem empty>
+              {tNoResults?.()}
+            </AutoCompleteResultListItem>
           )}
         </AutoCompleteResultList>
 
@@ -647,7 +649,6 @@ export {
   AutoComplete,
   AutoCompleteInput,
   AutoCompleteInputTypeahead,
-  AutoCompleteNoResult,
   AutoCompleteResultList,
   AutoCompleteResultListItem,
   AutoCompleteWrapper,

package/src/admin/Chip/Chip.stories.js

@@ -0,0 +1,12 @@
+import Chip from '@digigov/ui/admin/Chip';
+export default {
+  title: 'Digigov UI/admin/Chip',
+  component: Chip,
+  displayName: 'Chip',
+};
+// eslint-disable-next-line digigov/no-relative-import
+export * from '@digigov/ui/admin/Chip/__stories__/Default';
+export * from '@digigov/ui/admin/Chip/__stories__/ClickableChip';
+export * from '@digigov/ui/admin/Chip/__stories__/DeletableChip';
+export * from '@digigov/ui/admin/Chip/__stories__/ClickableDeletableChip';
+export * from '@digigov/ui/admin/Chip/__stories__/GroupOfChips';

package/src/admin/Chip/__stories__/ClickableChip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Chip from '@digigov/ui/admin/Chip';
+
+export const ClickableChip = () => (
+  <>
+    <Chip
+      onClick={() => {
+        console.log('clicked');
+      }}
+    >
+      Αθήνα
+    </Chip>
+  </>
+);
+
+export default ClickableChip;

package/src/admin/Chip/__stories__/ClickableDeletableChip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Chip from '@digigov/ui/admin/Chip';
+
+export const ClickableDeletableChip = () => (
+  <>
+    <Chip
+      onClick={() => {
+        console.log('clicked');
+      }}
+      onDelete={() => {
+        console.log('remove chip');
+      }}
+    >
+      Αθήνα
+    </Chip>
+  </>
+);
+
+export default ClickableDeletableChip;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import Chip from '@digigov/ui/admin/Chip';
+
+export const Default = () => (
+  <>
+    <Chip>Αθήνα</Chip>
+  </>
+);
+
+export default Default;

package/src/admin/Chip/__stories__/DeletableChip.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Chip from '@digigov/ui/admin/Chip';
+
+export const DeletableChip = () => (
+  <>
+    <Chip
+      onDelete={() => {
+        console.log('remove chip');
+      }}
+    >
+      Αθήνα
+    </Chip>
+  </>
+);
+
+export default DeletableChip;

package/src/admin/Chip/__stories__/GroupOfChips.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Chip, { ChipSection } from '@digigov/ui/admin/Chip';
+
+export const GroupOfChips = () => (
+  <>
+    <ChipSection>
+      <Chip>Αθήνα</Chip>
+      <Chip>Θεσσαλονίκη</Chip>
+      <Chip>Κρήτη</Chip>
+      <Chip>Πάτρα</Chip>
+    </ChipSection>
+  </>
+);
+
+export default GroupOfChips;

package/src/admin/Chip/index.tsx

@@ -1,7 +1,6 @@
 export * from '@digigov/react-extensions/admin/Chip';
 export * from '@digigov/react-extensions/admin/ChipHeading';
 export * from '@digigov/react-extensions/admin/ChipSection';
-export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
 export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
 export * from '@digigov/react-extensions/admin/ChipKeyValue';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { CircularProgress } from '@digigov/ui/admin/CircularProgress';
 import { LoaderContainer } from '@digigov/ui/admin/LoaderContainer';
+import { CircularProgress } from '@digigov/ui/admin/CircularProgress';
 
 export const Default = () => {
   return (

package/src/admin/CopyToClipboard/index.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import CopyToClipboardContainer from '@digigov/react-extensions/admin/CopyToClipboardContainer';
 import CopyToClipboardMessage from '@digigov/react-extensions/admin/CopyToClipboardMessage';
-import { useTranslation } from '@digigov/ui/app';
 import NormalText from '@digigov/ui/typography/NormalText';
+import { useTranslation } from '@digigov/ui/app';
 
 type DivElementAttributes = JSX.IntrinsicElements['div'];
 export interface CopyToClipboardProps extends DivElementAttributes {

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Drawer, DrawerHeading } from "@digigov/ui/admin/Drawer";
-import { Link } from '@digigov/ui/core';
+import { Drawer } from '@digigov/ui/admin/Drawer';
 import {
   isNavListItemLinkInterface,
   NavListAuto,
@@ -14,6 +13,8 @@ import {
 } from '@digigov/ui/core/NavList';
 import { useNavList } from '@digigov/ui/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
+import { DrawerHeading } from '@digigov/ui/admin/Drawer';
+import { Link } from '@digigov/ui/core';
 
 function useDrawer() {
   const [open, setOpen] = useState(true);

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

@@ -6,13 +6,14 @@ import {
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
 
-import { Button } from '@digigov/ui/core/Button';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
-import { LabelContainer, LabelTitle } from "@digigov/ui/core/LabelContainer";
-import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
 import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const AlignRight = () => (
   <div

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

@@ -6,13 +6,14 @@ import {
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
 
-import { Button } from '@digigov/ui/core/Button';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
-import { LabelContainer, LabelTitle } from "@digigov/ui/core/LabelContainer";
-import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
 import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const Default = () => (
   <Dropdown>

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

@@ -6,13 +6,14 @@ import {
   DropdownContent,
 } from '@digigov/ui/admin/Dropdown';
 
-import { Button } from '@digigov/ui/core/Button';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
-import { LabelContainer, LabelTitle } from "@digigov/ui/core/LabelContainer";
-import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
 import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
 
 export const PlacementTop = () => (
   <div

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

@@ -8,9 +8,9 @@ import {
 } from '@digigov/ui/admin/Modal';
 
 import { Button } from '@digigov/ui/core/Button';
+import { TextInput } from '@digigov/ui/core/TextInput';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
 import { LabelContainer } from '@digigov/ui/core/LabelContainer';
-import { TextInput } from '@digigov/ui/core/TextInput';
 
 export const Default = () => {
   const [open, setOpen] = useState(false);

package/src/admin/Pagination/Pagination.stories.js

@@ -12,3 +12,4 @@ export * from '@digigov/ui/admin/Pagination/__stories__/Default';
 export * from '@digigov/ui/admin/Pagination/__stories__/WithInactiveValues';
 export * from '@digigov/ui/admin/Pagination/__stories__/WithResultsPerPage';
 export * from '@digigov/ui/admin/Pagination/__stories__/PaginationSmall';
+export * from '@digigov/ui/admin/Pagination/__stories__/PaginationWithSmallFont';

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

@@ -6,11 +6,10 @@ import {
   PaginationListItem,
   PaginationLabel,
 } from '@digigov/ui/admin/Pagination';
-
-import { I18NProvider } from '@digigov/ui/app/i18n';
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
-import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const Default = () => (
   <div className="example">

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

@@ -7,10 +7,10 @@ import {
   PaginationLabel,
 } from '@digigov/ui/admin/Pagination';
 
-import { I18NProvider } from '@digigov/ui/app/i18n';
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
-import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { I18NProvider } from '@digigov/ui/app/i18n';
 
 export const PaginationSmall = () => (
   <div className="example">

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationLabel,
+} from '@digigov/ui/admin/Pagination';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/core/SelectContainer';
+
+import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
+import { Link } from '@digigov/ui/core/Link';
+import { I18NProvider } from '@digigov/ui/app/i18n';
+import { LabelContainer } from '@digigov/react-core';
+
+export const PaginationWithSmallFont = () => (
+  <div className="example">
+    <I18NProvider t={(str: string) => str}>
+      <Pagination fontSize="sm">
+        <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
+        <LabelContainer>
+          Αποτελέσματα ανά σελίδα
+          <SelectContainer>
+            <SelectOption>5</SelectOption>
+            <SelectOption>10</SelectOption>
+            <SelectOption>15</SelectOption>
+          </SelectContainer>
+        </LabelContainer>
+        <PaginationList>
+          <PaginationListItem>
+            <Link>
+              <ArrowIcon direction="left" />
+              Προηγούμενο
+            </Link>
+          </PaginationListItem>
+          <PaginationListItem>
+            <Link href="#page1">1</Link>
+          </PaginationListItem>
+          <PaginationListItem variant="dots"></PaginationListItem>
+          <PaginationListItem>
+            <Link href="#page2">2</Link>
+          </PaginationListItem>
+          <PaginationListItem currentPage>8</PaginationListItem>
+          <PaginationListItem>
+            <Link href="#page9">9</Link>
+          </PaginationListItem>
+          <PaginationListItem variant="dots"></PaginationListItem>
+          <PaginationListItem>
+            <Link href="#page20">20</Link>
+          </PaginationListItem>
+          <PaginationListItem>
+            <Link>
+              Επόμενο
+              <ArrowIcon direction="right" />
+            </Link>
+          </PaginationListItem>
+        </PaginationList>
+      </Pagination>
+    </I18NProvider>
+  </div>
+);
+
+export default PaginationWithSmallFont;

package/src/admin/Pagination/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Pagination from '@digigov/react-extensions/admin/Pagination';
 import PaginationLabelContainer, {
   PaginationLabelContainerProps,
 } from '@digigov/react-extensions/admin/PaginationLabelContainer';
+import { I18nText } from '@digigov/ui/app/I18nText';
 export interface PaginationLabelProps extends PaginationLabelContainerProps {
   /**
    * Use start to set the value of the start point of the results shown.
@@ -41,5 +41,5 @@ export * from '@digigov/react-extensions/admin/PaginationList';
 export * from '@digigov/react-extensions/admin/PaginationListItem';
 export { PaginationLabelContainer };
 
-import { I18nText } from '@digigov/ui/app/I18nText';
+import Pagination from '@digigov/react-extensions/admin/Pagination';
 export default Pagination;

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

@@ -2,12 +2,10 @@ import React, { useState, useEffect } from 'react';
 
 import {
   StepNav,
-  StepNavCircleΝumber,
+  StepNavCircleNumber,
   StepNavControls,
   StepNavList,
   StepNavListItem,
-  StepNavAccordionOpened,
-  StepNavAccordionClosed,
   StepNavAccordion,
   StepNavAccordionContent,
   StepNavAccordionSummary,
@@ -16,12 +14,12 @@ import {
   StepNavAccordionHeadingText,
 } from '@digigov/ui/admin/StepNav';
 
-import { Button } from '@digigov/ui/core/Button';
-import { Link } from '@digigov/ui/core/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 import { List } from '@digigov/ui/core/List/List';
 import { ListItem } from '@digigov/ui/core/List/ListItem';
+import { Link } from '@digigov/ui/core/Link';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
-import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { Button } from '@digigov/ui/core/Button';
 
 const data = [
   {
@@ -48,12 +46,9 @@ const data = [
 
 export const Default = () => {
   const [open, SetOpen] = useState<boolean>(false);
-  const [openItem, setOpenItem] = useState<boolean[]>([
-    false,
-    false,
-    false,
-    false,
-  ]);
+  const [openItem, setOpenItem] = useState(
+    Array<boolean>(data.length).fill(false)
+  );
   useEffect(() => {
     const stateArray: boolean[] = [];
     if (open === false) {
@@ -103,29 +98,20 @@ export const Default = () => {
                   >
                     <StepNavAccordionSummaryHeading aria-controls="content1">
                       {index === 2 ? (
-                        <StepNavCircleΝumber border={false}>
+                        <StepNavCircleNumber border={false}>
                           <VisuallyHidden>Step</VisuallyHidden>
                           and
-                        </StepNavCircleΝumber>
+                        </StepNavCircleNumber>
                       ) : (
-                        <StepNavCircleΝumber>
+                        <StepNavCircleNumber>
                           <VisuallyHidden>Step</VisuallyHidden>
                           {index + 1}
-                        </StepNavCircleΝumber>
+                        </StepNavCircleNumber>
                       )}
                       <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText>
+                        <StepNavAccordionHeadingText open={openItem[index]}>
                           {dt.title}
                         </StepNavAccordionHeadingText>
-                        {openItem[index] === true ? (
-                          <StepNavAccordionOpened>
-                            Απόκρυψη
-                          </StepNavAccordionOpened>
-                        ) : (
-                          <StepNavAccordionClosed>
-                            Εμφάνιση
-                          </StepNavAccordionClosed>
-                        )}
                       </StepNavAccordionHeadingTitle>
                     </StepNavAccordionSummaryHeading>
                   </StepNavAccordionSummary>

package/src/admin/StepNav/index.tsx

@@ -1,16 +1,14 @@
 import StepNav from '@digigov/react-extensions/admin/StepNav';
+import StepNavCircleNumber from '@digigov/react-extensions/admin/StepNavCircleNumber';
+import StepNavControls from '@digigov/react-extensions/admin/StepNavControls';
+import StepNavList from '@digigov/react-extensions/admin/StepNavList';
+import StepNavListItem from '@digigov/react-extensions/admin/StepNavListItem';
 import StepNavAccordion from '@digigov/react-extensions/admin/StepNavAccordion';
-import StepNavAccordionClosed from '@digigov/react-extensions/admin/StepNavAccordionClosed';
 import StepNavAccordionContent from '@digigov/react-extensions/admin/StepNavAccordionContent';
-import StepNavAccordionHeadingText from '@digigov/react-extensions/admin/StepNavAccordionHeadingText';
-import StepNavAccordionHeadingTitle from '@digigov/react-extensions/admin/StepNavAccordionHeadingTitle';
-import StepNavAccordionOpened from '@digigov/react-extensions/admin/StepNavAccordionOpened';
 import StepNavAccordionSummary from '@digigov/react-extensions/admin/StepNavAccordionSummary';
 import StepNavAccordionSummaryHeading from '@digigov/react-extensions/admin/StepNavAccordionSummaryHeading';
-import StepNavCircleΝumber from '@digigov/react-extensions/admin/StepNavCircleΝumber';
-import StepNavControls from '@digigov/react-extensions/admin/StepNavControls';
-import StepNavList from '@digigov/react-extensions/admin/StepNavList';
-import StepNavListItem from '@digigov/react-extensions/admin/StepNavListItem';
+import StepNavAccordionHeadingTitle from '@digigov/react-extensions/admin/StepNavAccordionHeadingTitle';
+import StepNavAccordionHeadingText from '@digigov/react-extensions/admin/StepNavAccordionHeadingText';
 export {
   StepNavAccordion,
   StepNavAccordionContent,
@@ -18,9 +16,7 @@ export {
   StepNavAccordionSummaryHeading,
   StepNavAccordionHeadingTitle,
   StepNavAccordionHeadingText,
-  StepNavCircleΝumber,
-  StepNavAccordionOpened,
-  StepNavAccordionClosed,
+  StepNavCircleNumber,
   StepNav,
   StepNavControls,
   StepNavList,