@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/content/List/index.mjs

@@ -0,0 +1,7 @@
+export { List as default } from "./List";
+export * from "./List";
+export * from "./ListItem";
+export * from "./ListItemContent";
+export * from "./ListItemTitle";
+export * from "./ListItemText";
+export * from "./ListItemIcon";

package/content/List/index.spec.js

@@ -6,13 +6,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 
 var React = _interopRequireWildcard(require("react"));
 
-var _List = _interopRequireDefault(require("@digigov/ui/content/List"));
+var _ = _interopRequireDefault(require("./"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-var _ref = /*#__PURE__*/React.createElement(_List["default"], null, "this is some random warning text");
+var _ref = /*#__PURE__*/React.createElement(_["default"], null, "this is some random warning text");
 
 it('renders the ErrorSummary with sample data', function () {
   expect(_ref).toMatchSnapshot();

package/content/List/index.spec.mjs

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import Component from "./";
+
+var _ref = /*#__PURE__*/React.createElement(Component, null, "this is some random warning text");
+
+it('renders the ErrorSummary with sample data', function () {
+  expect(_ref).toMatchSnapshot();
+});

package/content/StepNav/StepNav.stories.d.ts

@@ -7,5 +7,7 @@ declare namespace _default {
 export default _default;
 export * from "./__stories__/Default";
 export * from "./__stories__/WithHints";
+export * from "./__stories__/WithHook";
 export * from "./__stories__/Dense";
+export * from "./__stories__/Auto";
 import StepNav from "@digigov/ui/content/StepNav";

package/content/StepNav/StepNav.stories.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _StepNav = _interopRequireDefault(require("@digigov/ui/content/StepNav"));
+var _ = _interopRequireDefault(require("./"));
 
 var _Default = require("./__stories__/Default");
 
@@ -38,6 +38,20 @@ Object.keys(_WithHints).forEach(function (key) {
   });
 });
 
+var _WithHook = require("./__stories__/WithHook");
+
+Object.keys(_WithHook).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithHook[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithHook[key];
+    }
+  });
+});
+
 var _Dense = require("./__stories__/Dense");
 
 Object.keys(_Dense).forEach(function (key) {
@@ -52,11 +66,25 @@ Object.keys(_Dense).forEach(function (key) {
   });
 });
 
+var _Auto = require("./__stories__/Auto");
+
+Object.keys(_Auto).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Auto[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Auto[key];
+    }
+  });
+});
+
 /* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/content/StepNav',
   description: 'The step by step navigation pattern presents an end to end journey in logical steps, with links to content that helps users complete each step.',
-  component: _StepNav["default"],
+  component: _["default"],
   displayName: 'StepNav'
 };
 exports["default"] = _default;

package/content/StepNav/StepNav.stories.mjs

@@ -0,0 +1,13 @@
+/* eslint-disable digigov/no-relative-imports */
+import StepNav from "./";
+export default {
+  title: 'Digigov UI/content/StepNav',
+  description: 'The step by step navigation pattern presents an end to end journey in logical steps, with links to content that helps users complete each step.',
+  component: StepNav,
+  displayName: 'StepNav'
+};
+export * from "./__stories__/Default";
+export * from "./__stories__/WithHints";
+export * from "./__stories__/WithHook";
+export * from "./__stories__/Dense";
+export * from "./__stories__/Auto";

package/content/StepNav/__stories__/Auto.d.ts

@@ -0,0 +1,2 @@
+export declare const Auto: () => JSX.Element;
+export default Auto;

package/content/StepNav/__stories__/Auto.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Auto = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("./..");
+
+var _Button = require("../../../form/Button");
+
+var _VisuallyHidden = require("../../../utils/VisuallyHidden");
+
+var _SummaryList = require("../../SummaryList");
+
+var data = [{
+  title: 'Απάντηση',
+  codename: '(KEP-APA)',
+  date: '7 Απριλίου 2023, 12:32μ.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Καλλιόπη Παπαδοπούλου',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Συμπληρωματικά έγγραφα ',
+  codename: '(MORE-DOCS)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση για συμπληρωματικά έγγραφα',
+  codename: '(MORE-DOCS-REQUEST)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '5 Απριλίου 2023, 8:32π.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '974256'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+  codename: '(PERMRES-FOREIS)',
+  date: '3 Απριλίου 2023, 5:42μ.μ.',
+  actions: [{
+    label: 'Απάντηση'
+  }, {
+    label: 'Αίτημα για συμπληρωματικά έγγραφα'
+  }],
+  details: [{
+    name: 'Ημερομηνία',
+    value: '3 Απριλίου 2023, 5:42μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '475747'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_.StepNavControls, null, /*#__PURE__*/_react["default"].createElement(_.StepNavOpenAllButtonAuto, null, "\u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_.StepNavCloseAllButtonAuto, null, "\u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7 \u03CC\u03BB\u03C9\u03BD"));
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, {
+  border: false
+});
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, {
+  border: false
+}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1"), "\u03BA\u03B1\u03B9");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1");
+
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  color: "secondary"
+}, "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5");
+
+var Auto = function Auto() {
+  return /*#__PURE__*/_react["default"].createElement(_.StepNavAuto, {
+    defaultOpen: '1',
+    singleOpen: true
+  }, _ref, /*#__PURE__*/_react["default"].createElement(_.StepNavList, null, data && data.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.StepNavListItem, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionAuto, {
+      id: "".concat(index)
+    }, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionSummary, null, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionSummaryHeading, {
+      "aria-controls": "content1"
+    }, _ref2, index === 1 ? _ref3 : /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, null, _ref4, index > 1 ? index : index + 1), /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionHeadingTitle, null, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionContent, {
+      id: "content1"
+    }, /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
+      return /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+        color: "primary",
+        key: subIndex
+      }, action.label);
+    }), _ref5), field.details && /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryList, null, field.details.map(function (field, index) {
+      return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
+        key: index
+      }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, field.name), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, field.value), field.actions && /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
+        return /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+          key: subIndex,
+          variant: "link"
+        }, action);
+      }))));
+    })))));
+  })));
+};
+
+exports.Auto = Auto;
+var _default = Auto;
+exports["default"] = _default;

package/content/StepNav/__stories__/Auto.mjs

@@ -0,0 +1,135 @@
+import React from 'react';
+import { StepNavCircleNumber, StepNavControls, StepNavList, StepNavListItem, StepNavAccordionContent, StepNavAccordionSummary, StepNavAccordionSummaryHeading, StepNavAccordionHeadingTitle, StepNavAccordionHeadingText, StepNavAuto, StepNavAccordionAuto, StepNavCloseAllButtonAuto, StepNavOpenAllButtonAuto } from "./..";
+import { Button, ButtonGroup } from "../../../form/Button";
+import { VisuallyHidden } from "../../../utils/VisuallyHidden";
+import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from "../../SummaryList";
+var data = [{
+  title: 'Απάντηση',
+  codename: '(KEP-APA)',
+  date: '7 Απριλίου 2023, 12:32μ.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Καλλιόπη Παπαδοπούλου',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Συμπληρωματικά έγγραφα ',
+  codename: '(MORE-DOCS)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση για συμπληρωματικά έγγραφα',
+  codename: '(MORE-DOCS-REQUEST)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '5 Απριλίου 2023, 8:32π.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '974256'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+  codename: '(PERMRES-FOREIS)',
+  date: '3 Απριλίου 2023, 5:42μ.μ.',
+  actions: [{
+    label: 'Απάντηση'
+  }, {
+    label: 'Αίτημα για συμπληρωματικά έγγραφα'
+  }],
+  details: [{
+    name: 'Ημερομηνία',
+    value: '3 Απριλίου 2023, 5:42μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '475747'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}];
+
+var _ref = /*#__PURE__*/React.createElement(StepNavControls, null, /*#__PURE__*/React.createElement(StepNavOpenAllButtonAuto, null, "\u0395\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD"), /*#__PURE__*/React.createElement(StepNavCloseAllButtonAuto, null, "\u0391\u03C0\u03CC\u03BA\u03C1\u03C5\u03C8\u03B7 \u03CC\u03BB\u03C9\u03BD"));
+
+var _ref2 = /*#__PURE__*/React.createElement(StepNavCircleNumber, {
+  border: false
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(StepNavCircleNumber, {
+  border: false
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1"), "\u03BA\u03B1\u03B9");
+
+var _ref4 = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1");
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5");
+
+export var Auto = function Auto() {
+  return /*#__PURE__*/React.createElement(StepNavAuto, {
+    defaultOpen: '1',
+    singleOpen: true
+  }, _ref, /*#__PURE__*/React.createElement(StepNavList, null, data && data.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(StepNavListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(StepNavAccordionAuto, {
+      id: "".concat(index)
+    }, /*#__PURE__*/React.createElement(StepNavAccordionSummary, null, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
+      "aria-controls": "content1"
+    }, _ref2, index === 1 ? _ref3 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref4, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
+      id: "content1"
+    }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        key: subIndex
+      }, action.label);
+    }), _ref5), field.details && /*#__PURE__*/React.createElement(SummaryList, null, field.details.map(function (field, index) {
+      return /*#__PURE__*/React.createElement(SummaryListItem, {
+        key: index
+      }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value), field.actions && /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
+        return /*#__PURE__*/React.createElement(Button, {
+          key: subIndex,
+          variant: "link"
+        }, action);
+      }))));
+    })))));
+  })));
+};
+export default Auto;

package/content/StepNav/__stories__/Default.js

@@ -15,13 +15,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _StepNav = require("@digigov/ui/content/StepNav");
+var _ = require("./..");
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("../../../form/Button");
 
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
+var _VisuallyHidden = require("../../../utils/VisuallyHidden");
 
-var _SummaryList = require("@digigov/ui/content/SummaryList");
+var _SummaryList = require("../../SummaryList");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -110,11 +110,11 @@ var data = [{
   }]
 }];
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavCircleNumber, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, {
   border: false
 });
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavCircleNumber, {
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, {
   border: false
 }, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1"), "\u03BA\u03B1\u03B9");
 
@@ -161,23 +161,23 @@ var Default = function Default() {
     setOpen(!open);
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_StepNav.StepNav, null, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavControls, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  return /*#__PURE__*/_react["default"].createElement(_.StepNav, null, /*#__PURE__*/_react["default"].createElement(_.StepNavControls, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     variant: "link",
     onClick: function onClick() {
       openCloseAll();
     }
-  }, open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων')), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavList, null, data && data.map(function (field, index) {
-    return /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavListItem, {
+  }, open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων')), /*#__PURE__*/_react["default"].createElement(_.StepNavList, null, data && data.map(function (field, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.StepNavListItem, {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordion, {
+    }, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordion, {
       open: open
-    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionSummary, {
+    }, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionSummary, {
       onClick: function onClick() {
         openCloseItem(index);
       }
-    }, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionSummaryHeading, {
+    }, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionSummaryHeading, {
       "aria-controls": "content1"
-    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionHeadingTitle, null, /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/_react["default"].createElement(_StepNav.StepNavAccordionContent, {
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/_react["default"].createElement(_.StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionHeadingTitle, null, /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/_react["default"].createElement(_.StepNavAccordionContent, {
       id: "content1"
     }, /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
       return /*#__PURE__*/_react["default"].createElement(_Button.Button, {

package/content/StepNav/__stories__/Default.mjs

@@ -0,0 +1,178 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { StepNav, StepNavCircleNumber, StepNavControls, StepNavList, StepNavListItem, StepNavAccordion, StepNavAccordionContent, StepNavAccordionSummary, StepNavAccordionSummaryHeading, StepNavAccordionHeadingTitle, StepNavAccordionHeadingText } from "./..";
+import { Button, ButtonGroup } from "../../../form/Button";
+import { VisuallyHidden } from "../../../utils/VisuallyHidden";
+import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from "../../SummaryList";
+var data = [{
+  title: 'Απάντηση',
+  codename: '(KEP-APA)',
+  date: '7 Απριλίου 2023, 12:32μ.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Καλλιόπη Παπαδοπούλου',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Συμπληρωματικά έγγραφα ',
+  codename: '(MORE-DOCS)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '7 Απριλίου 2023, 12:32μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '637283494'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση για συμπληρωματικά έγγραφα',
+  codename: '(MORE-DOCS-REQUEST)',
+  date: '5 Απριλίου 2023, 8:32π.μ.',
+  details: [{
+    name: 'Ημερομηνία',
+    value: '5 Απριλίου 2023, 8:32π.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '974256'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}, {
+  title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+  codename: '(PERMRES-FOREIS)',
+  date: '3 Απριλίου 2023, 5:42μ.μ.',
+  actions: [{
+    label: 'Απάντηση'
+  }, {
+    label: 'Αίτημα για συμπληρωματικά έγγραφα'
+  }],
+  details: [{
+    name: 'Ημερομηνία',
+    value: '3 Απριλίου 2023, 5:42μ.μ.'
+  }, {
+    name: 'Χειριστής',
+    value: 'Μαρία Φλούπη',
+    actions: ['Ανάθεση']
+  }, {
+    name: 'Κωδικός επαλήθευσης',
+    value: '475747'
+  }, {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλαγή']
+  }]
+}];
+
+var _ref = /*#__PURE__*/React.createElement(StepNavCircleNumber, {
+  border: false
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(StepNavCircleNumber, {
+  border: false
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1"), "\u03BA\u03B1\u03B9");
+
+var _ref3 = /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u0392\u03AE\u03BC\u03B1");
+
+var _ref4 = /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5");
+
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(Array(data.length).fill(false)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openItem = _useState4[0],
+      setOpenItem = _useState4[1];
+
+  useEffect(function () {
+    var stateArray = [];
+
+    if (open === false) {
+      openItem.map(function () {
+        stateArray.push(false);
+      });
+      setOpenItem(stateArray);
+    } else {
+      openItem.map(function () {
+        stateArray.push(true);
+      });
+      setOpenItem(stateArray);
+    }
+  }, [open]);
+
+  function openCloseItem(index) {
+    var statusOpenItem = _toConsumableArray(openItem);
+
+    statusOpenItem[index] = !statusOpenItem[index];
+    setOpenItem(statusOpenItem);
+  }
+
+  function openCloseAll() {
+    setOpen(!open);
+  }
+
+  return /*#__PURE__*/React.createElement(StepNav, null, /*#__PURE__*/React.createElement(StepNavControls, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      openCloseAll();
+    }
+  }, open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων')), /*#__PURE__*/React.createElement(StepNavList, null, data && data.map(function (field, index) {
+    return /*#__PURE__*/React.createElement(StepNavListItem, {
+      key: index
+    }, /*#__PURE__*/React.createElement(StepNavAccordion, {
+      open: open
+    }, /*#__PURE__*/React.createElement(StepNavAccordionSummary, {
+      onClick: function onClick() {
+        openCloseItem(index);
+      }
+    }, /*#__PURE__*/React.createElement(StepNavAccordionSummaryHeading, {
+      "aria-controls": "content1"
+    }, _ref, index === 1 ? _ref2 : /*#__PURE__*/React.createElement(StepNavCircleNumber, null, _ref3, index > 1 ? index : index + 1), /*#__PURE__*/React.createElement(StepNavAccordionHeadingTitle, null, /*#__PURE__*/React.createElement(StepNavAccordionHeadingText, null, field.title, field.codename && /*#__PURE__*/React.createElement(React.Fragment, null, ' - ', " ", field.codename))))), /*#__PURE__*/React.createElement(StepNavAccordionContent, {
+      id: "content1"
+    }, /*#__PURE__*/React.createElement(ButtonGroup, null, (field.actions || []).map(function (action, subIndex) {
+      return /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        key: subIndex
+      }, action.label);
+    }), _ref4), field.details && /*#__PURE__*/React.createElement(SummaryList, null, field.details.map(function (field, index) {
+      return /*#__PURE__*/React.createElement(SummaryListItem, {
+        key: index
+      }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value), field.actions && /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
+        return /*#__PURE__*/React.createElement(Button, {
+          key: subIndex,
+          variant: "link"
+        }, action);
+      }))));
+    })))));
+  })));
+};
+export default Default;