@digigov/ui 0.20.2 → 0.21.2

package/es/typography/Paragraph/Paragraph.stories.js

@@ -0,0 +1,10 @@
+import Paragraph from "@digigov/ui/typography/Paragraph";
+export default {
+  title: 'Digigov UI/typography/Paragraph',
+  component: Paragraph
+};
+export * from './__stories__/Default';
+export * from './__stories__/LeadVariant';
+export * from './__stories__/SmallVariant';
+export * from './__stories__/FontSizes';
+export * from './__stories__/FontWeight';

package/es/typography/Paragraph/__stories__/Default.js

@@ -0,0 +1,9 @@
+import React from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "govgr-body");
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/es/typography/Paragraph/__stories__/FontSizes.js

@@ -0,0 +1,35 @@
+import React from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "14"
+}, " govgr-!-font-size-14 ");
+
+var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "16"
+}, " govgr-!-font-size-16 ");
+
+var _ref3 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "19"
+}, " govgr-!-font-size-19 ");
+
+var _ref4 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "24"
+}, " govgr-!-font-size-24 ");
+
+var _ref5 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "30"
+}, " govgr-!-font-size-30 ");
+
+var _ref6 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "48"
+}, " govgr-!-font-size-48 ");
+
+var _ref7 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontSize: "72"
+}, " govgr-!-font-size-72 ");
+
+export var FontSizes = function FontSizes() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7);
+};
+export default FontSizes;

package/es/typography/Paragraph/__stories__/FontWeight.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, {
+  fontWeight: "regular"
+}, " govgr-!-font-weight-regular ");
+
+var _ref2 = /*#__PURE__*/React.createElement(Paragraph, {
+  fontWeight: "bold"
+}, " govgr-!-font-weight-bold ");
+
+export var fontWeight = function fontWeight() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default fontWeight;

package/es/typography/Paragraph/__stories__/LeadVariant.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, {
+  variant: "lead"
+}, "govgr-body");
+
+export var LeadVariant = function LeadVariant() {
+  return _ref;
+};
+export default LeadVariant;

package/es/typography/Paragraph/__stories__/SmallVariant.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, {
+  variant: "small"
+}, "govgr-body");
+
+export var SmallVariant = function SmallVariant() {
+  return _ref;
+};
+export default SmallVariant;

package/es/typography/Title/Title.stories.js

@@ -0,0 +1,6 @@
+import Title from "@digigov/ui/typography/Title";
+export default {
+  title: 'Digigov UI/typography/Title',
+  component: Title
+};
+export * from './__stories__/Default';

package/es/typography/Title/__stories__/Default.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Title from "@digigov/ui/typography/Title";
+
+var _ref = /*#__PURE__*/React.createElement(Title, null, " govgr-heading-xl ");
+
+var _ref2 = /*#__PURE__*/React.createElement(Title, {
+  size: "lg",
+  element: "h2"
+}, " govgr-heading-lg ");
+
+var _ref3 = /*#__PURE__*/React.createElement(Title, {
+  size: "md",
+  element: "h3"
+}, " govgr-heading-md ");
+
+var _ref4 = /*#__PURE__*/React.createElement(Title, {
+  size: "sm",
+  element: "h4"
+}, " govgr-heading-sm ");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4);
+};
+export default Default;

package/esm/admin/CircularProgress/CircularProgress.stories.js

@@ -0,0 +1,6 @@
+import CircularProgress from "@digigov/ui/admin";
+export default {
+  title: 'Digigov UI/admin/CircularProgress',
+  component: CircularProgress
+};
+export * from './__stories__/Default';

package/esm/admin/CircularProgress/__stories__/Default.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import FullPageBackground from '@digigov/ui/admin/FullPageBackground';
+import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
+import CircularProgress from '@digigov/ui/admin/CircularProgress';
+
+var _ref = /*#__PURE__*/React.createElement(FullPageBackground, null, /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null)));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/admin/CopyToClipboard/index.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import CopyToClipboardContainer from '@digigov/react-extensions/admin/CopyToClipboardContainer';
+import CopyToClipboardMessage from '@digigov/react-extensions/admin/CopyToClipboardMessage';
+import NormalText from '@digigov/ui/typography/NormalText';
+import { useTranslation } from '@digigov/ui/app';
+export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
+  var text = _ref.text,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      message = _ref.message,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      enabled = _useState2[0],
+      setEnabled = _useState2[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  useEffect(function () {
+    var timeout = setTimeout(function () {
+      if (enabled) setEnabled(false);
+    }, 3000);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [enabled]);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(text);
+    setEnabled(true);
+  }
+
+  return /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
+    onClick: copyToClipboard,
+    variant: variant,
+    ref: ref
+  }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
+    variant: variant,
+    enabled: enabled
+  }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));
+});
+export default CopyToClipboard;

package/esm/admin/Drawer/Drawer.stories.js

@@ -0,0 +1,6 @@
+import Drawer from '@digigov/ui/admin/Drawer';
+export default {
+  title: 'Digigov UI/admin/Drawer',
+  component: Drawer
+};
+export * from '@digigov/ui/admin/Drawer/__stories__/Default';

package/esm/admin/Drawer/__stories__/Default.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Drawer from '@digigov/ui/admin/Drawer';
+import { List, ListItem, BurgerIcon } from '@digigov/react-core';
+import { Button, Title } from '@digigov/ui';
+import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, DrawerHeading } from '@digigov/react-extensions/admin/';
+import { GovGRLogo } from '@digigov/react-core';
+import { Card, CardHeading, CardText } from '@digigov/react-core';
+import Grid from '@digigov/react-core/Grid';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+
+var _ref = /*#__PURE__*/React.createElement(GovGRLogo, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+var _ref3 = /*#__PURE__*/React.createElement(AdminTopSection, null);
+
+var _ref4 = /*#__PURE__*/React.createElement(Title, {
+  size: "md"
+}, "Menu");
+
+var _ref5 = /*#__PURE__*/React.createElement(List, {
+  spaced: true
+}, /*#__PURE__*/React.createElement(ListItem, null, "Menu option 1"), /*#__PURE__*/React.createElement(ListItem, null, "Menu option 2"));
+
+var _ref6 = /*#__PURE__*/React.createElement(AdminMain, null, /*#__PURE__*/React.createElement(Grid, {
+  container: true,
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12,
+  lg: 6
+}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12,
+  lg: 6
+}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12,
+  lg: 6
+}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))), /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12,
+  lg: 6
+}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(CardHeading, null, "This is a Card"), /*#__PURE__*/React.createElement(CardText, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")))));
+
+var _ref7 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+
+export var Default = function Default() {
+  function useDrawer() {
+    var _useState = useState(true),
+        _useState2 = _slicedToArray(_useState, 2),
+        open = _useState2[0],
+        setOpen = _useState2[1];
+
+    function toggleDrawer() {
+      setOpen(!open);
+    }
+
+    return [open, toggleDrawer];
+  }
+
+  var _useDrawer = useDrawer(),
+      _useDrawer2 = _slicedToArray(_useDrawer, 2),
+      open = _useDrawer2[0],
+      toggleDrawer = _useDrawer2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminLayout, null, /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderSection, null, _ref, /*#__PURE__*/React.createElement(Button, {
+    className: "govgr-drawer__burger-icon",
+    onClick: function onClick() {
+      return toggleDrawer();
+    },
+    color: "secondary"
+  }, _ref2))), /*#__PURE__*/React.createElement(AdminContainer, null, _ref3, /*#__PURE__*/React.createElement(AdminAside, null, /*#__PURE__*/React.createElement(Drawer, {
+    direction: "left",
+    open: open
+  }, /*#__PURE__*/React.createElement(DrawerHeading, {
+    onClick: function onClick() {
+      return toggleDrawer();
+    }
+  }, _ref4), _ref5)), _ref6), _ref7));
+};
+export default Default;

package/esm/admin/Pagination/Pagination.stories.js

@@ -0,0 +1,6 @@
+import Pagination from "@digigov/ui/admin/Pagination";
+export default {
+  title: 'Digigov UI/admin/Pagination',
+  component: Pagination
+};
+export * from './__stories__/Default';

package/esm/admin/Pagination/__stories__/Default.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import Pagination, { PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+import Link from '@digigov/ui/core/Link';
+import Divider from '@digigov/ui/core/Divider';
+
+var _ref = /*#__PURE__*/React.createElement("div", {
+  className: "example"
+}, /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 10,
+  end: 20,
+  total: 10000
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page1"
+}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "2"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page3"
+}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  variant: "dots"
+}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page5"
+}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page6"
+}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+}), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 10,
+  end: 20,
+  total: 10000
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page2"
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page3"
+}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  variant: "dots"
+}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page5"
+}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page6"
+}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+}), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 10,
+  end: 20,
+  total: 10000
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page1"
+}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page3"
+}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  variant: "dots"
+}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page5"
+}, "5")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page6"
+}, "6")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "7"), /*#__PURE__*/React.createElement(PaginationListItem, {
+  inactive: true
+}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+}), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
+  start: 10,
+  end: 20,
+  total: 10000
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "left"
+}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page1"
+}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  variant: "dots"
+}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page7"
+}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  currentPage: true
+}, "8"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page9"
+}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, {
+  variant: "dots"
+}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
+  href: "/page20"
+}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "right"
+}))))), /*#__PURE__*/React.createElement(Divider, {
+  visible: true,
+  size: "l"
+}));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/admin/Pagination/index.js

@@ -1,3 +1,20 @@
+import React from 'react';
+import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
+import { I18nText } from '@digigov/ui/app/I18nText';
+
+/**
+ * PaginationLabel component is used for placing the pagination results label.
+ */
+export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLabel(_ref, ref) {
+  var start = _ref.start,
+      end = _ref.end,
+      total = _ref.total;
+  return /*#__PURE__*/React.createElement(CorePaginationLabel, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(I18nText, {
+    i18nKey: "pagination.label"
+  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results."));
+});
 export * from '@digigov/react-extensions/admin/Pagination';
 export * from '@digigov/react-extensions/admin/PaginationList';
 export * from '@digigov/react-extensions/admin/PaginationListItem';

package/esm/app/Confirmation/Confirmation.stories.js

@@ -0,0 +1,6 @@
+import Confirmation from "@digigov/ui/app";
+export default {
+  title: 'Digigov UI/app/Confirmation',
+  component: Confirmation
+};
+export * from './__stories__/Default';

package/esm/app/Confirmation/__stories__/Default.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Confirmation, { ConfirmationTitle, ConfirmationBody } from '@digigov/ui/app/Confirmation';
+
+var _ref = /*#__PURE__*/React.createElement(Confirmation, null, /*#__PURE__*/React.createElement(ConfirmationTitle, null, "\u0397 \u03C6\u03CC\u03C1\u03BC\u03B1 \u03C5\u03C0\u03BF\u03B2\u03BB\u03AE\u03B8\u03B7\u03BA\u03B5 \u03B5\u03C0\u03B9\u03C4\u03C5\u03C7\u03CE\u03C2"), /*#__PURE__*/React.createElement(ConfirmationBody, null, "\u039F \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u03B5\u03B3\u03B3\u03C1\u03AC\u03C6\u03BF\u03C5 ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("strong", null, "HDJ2123F")));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/app/Confirmation/index.js

@@ -1,3 +1,5 @@
-export * from '@digigov/react-core/Confirmation';
-export * from '@digigov/react-core/ConfirmationBody';
-export * from '@digigov/react-core/ConfirmationTitle';
+import Confirmation from '@digigov/react-core/Confirmation';
+import ConfirmationBody from '@digigov/react-core/ConfirmationBody';
+import ConfirmationTitle from '@digigov/react-core/ConfirmationTitle';
+export default Confirmation;
+export { ConfirmationBody, ConfirmationTitle };

package/esm/app/CopyToClipboard/CopyToClipboard.stories.js

@@ -0,0 +1,6 @@
+import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+export default {
+  title: 'Digigov UI/app/CopyToClipboard',
+  component: CopyToClipboard
+};
+export * from '@digigov/ui/app/CopyToClipboard/__stories__/Default';

package/esm/app/CopyToClipboard/__stories__/Default.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, Dropdown, DropdownButton, DropdownContent } from '@digigov/react-extensions/admin/';
+import { MoreVertIcon, NavVertical, NavVerticalItem } from '@digigov/react-core';
+import { Accordion, AccordionItem, AccordionSectionSummary, AccordionSectionSummaryHeading } from '@digigov/ui/core/Accordion';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction, Button, BackButton, ButtonGroup } from '@digigov/ui';
+import { HeaderContent, HeaderTitle, HeaderSubtitle, SectionBreak } from '@digigov/ui';
+import Title from '@digigov/ui/typography/Title';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import Grid from '@digigov/ui/layouts/Grid';
+var fields = [{
+  name: 'Θέμα',
+  value: 'Αίτηση Ληξιαρχικής Πράξης Γάμου'
+}, {
+  name: 'Ημερομηνία',
+  value: '09/03/2002 14:54:36'
+}, {
+  name: 'Κωδικός επαλήθευσης',
+  value: 'NdH-EYREW1yd1LUhEOssx4A',
+  actions: ['Προβολή', 'Αντιγραφή συνδέσμου']
+}, {
+  name: 'Κατάσταση',
+  value: 'Εισερχόμενη',
+  actions: ['Αλλάγή']
+}, {
+  name: 'Χειριστής',
+  value: 'Δεν έχει οριστεί χειριστής',
+  actions: ['Ανάθεση']
+}];
+
+var _ref = /*#__PURE__*/React.createElement(AdminHeader, null, /*#__PURE__*/React.createElement(AdminHeaderSection, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u0398\u03C5\u03C1\u03AF\u03B4\u03B5\u03C2")), /*#__PURE__*/React.createElement(HeaderSubtitle, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF \u03C9\u03C2 \u039A\u03B1\u03BB\u03BB\u03B9\u03CC\u03C0\u03B7 \u03A0\u03B1\u03C0\u03B1\u03B4\u03BF\u03C0\u03BF\u03CD\u03BB\u03BF\u03C5", /*#__PURE__*/React.createElement(MoreVertIcon, null)), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))))));
+
+var _ref2 = /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  md: 3,
+  lg: 2
+}, /*#__PURE__*/React.createElement(AdminAside, null, /*#__PURE__*/React.createElement(AdminTopSection, null, /*#__PURE__*/React.createElement(BackButton, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE \u03B8\u03C5\u03C1\u03AF\u03B4\u03B1\u03C2"), /*#__PURE__*/React.createElement(Title, {
+  size: "sm"
+}, "\u039A\u0395\u03A0/\u0396\u0391\u039A\u03A5\u039D\u0398\u039F\u03A5 [\u0396\u0391\u039A\u03A5\u039D\u0398\u0399\u03A9\u039D]"), /*#__PURE__*/React.createElement(Paragraph, null, "\u039A\u0395\u03A0/\u0396\u0391\u039A\u03A5\u039D\u0398\u039F\u03A5 [\u0396\u0391\u039A\u03A5\u039D\u0398\u0399\u03A9\u039D]")), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: true,
+  size: "m"
+}), /*#__PURE__*/React.createElement(Button, null, "\u039D\u03AD\u03B1 \u03C5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7"), /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u03A5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"))), /*#__PURE__*/React.createElement(AccordionItem, null, /*#__PURE__*/React.createElement(AccordionSectionSummary, null, /*#__PURE__*/React.createElement(AccordionSectionSummaryHeading, null, "\u0394\u03B9\u03B1\u03C7\u03B5\u03AF\u03C1\u03B9\u03C3\u03B7")), /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, null, "\u03A7\u03C1\u03AE\u03C3\u03C4\u03B5\u03C2"), /*#__PURE__*/React.createElement(NavVerticalItem, null, "\u0391\u03B9\u03C4\u03AE\u03BC\u03B1\u03C4\u03B1"))))));
+
+var _ref3 = /*#__PURE__*/React.createElement(Title, {
+  size: "xl"
+}, "# \u03A5\u03C0\u03CC\u03B8\u03B5\u03C3\u03B7 4");
+
+var _ref4 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "AAABBBFFFLLL",
+  variant: "tooltip",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7")), /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "\u0391\u03C0\u03BF\u03C3\u03C4\u03BF\u03BB\u03AE"), /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"));
+
+var _ref5 = /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12
+}, /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "AAABBBFFFLLL",
+  variant: "banner",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "Banner example")));
+
+var _ref6 = /*#__PURE__*/React.createElement(Grid, {
+  item: true,
+  xs: 12
+}, /*#__PURE__*/React.createElement(CopyToClipboard, {
+  text: "AAABBBFFFLLL",
+  variant: "tooltip",
+  message: "text successfuly copied!"
+}, /*#__PURE__*/React.createElement(Button, {
+  color: "secondary"
+}, "Tooltip example")));
+
+var _ref7 = /*#__PURE__*/React.createElement(GovGRFooter, null);
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminLayout, null, _ref, /*#__PURE__*/React.createElement(AdminContainer, null, _ref2, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    md: 9,
+    lg: 10
+  }, /*#__PURE__*/React.createElement(AdminMain, null, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 4
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, _ref3, _ref4, /*#__PURE__*/React.createElement(SummaryList, null, fields && fields.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), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
+      return /*#__PURE__*/React.createElement(CopyToClipboard, {
+        text: "MMMNNNKKKO",
+        variant: "tooltip",
+        key: subIndex
+      }, /*#__PURE__*/React.createElement(Button, {
+        key: subIndex,
+        variant: "link"
+      }, action));
+    }))));
+  }))), _ref5, _ref6)))), _ref7));
+};
+export default Default;

package/esm/app/CopyToClipboard/index.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import CopyToClipboardContainer from '@digigov/react-extensions/admin/CopyToClipboardContainer';
+import CopyToClipboardMessage from '@digigov/react-extensions/admin/CopyToClipboardMessage';
+import NormalText from '@digigov/ui/typography/NormalText';
+import { useTranslation } from '@digigov/ui/app';
+export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
+  var text = _ref.text,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      message = _ref.message,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      enabled = _useState2[0],
+      setEnabled = _useState2[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  useEffect(function () {
+    var timeout = setTimeout(function () {
+      if (enabled) setEnabled(false);
+    }, 3000);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [enabled]);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(text);
+    setEnabled(true);
+  }
+
+  return /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
+    onClick: copyToClipboard,
+    variant: variant,
+    ref: ref
+  }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
+    variant: variant,
+    enabled: enabled
+  }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));
+});
+export default CopyToClipboard;