@digigov/ui 1.0.0-8ae63a77 → 1.0.0-eb2842b4

package/navigation/NavList/__stories__/{WithBurgerIcon.js → Vertical.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithBurgerIcon = void 0;
+exports["default"] = exports.Vertical = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,68 +15,41 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _NavList = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavList"));
+var _NavList = require("@digigov/ui/navigation/NavList");
 
-var _icons = require("@digigov/ui/icons");
-
-var _NavList2 = require("@digigov/ui/navigation/NavList");
-
-var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
+var _NavLinksOneLevel = _interopRequireDefault(require("./NavLinksOneLevel.json"));
 
 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 links = [{
-  name: 'home',
-  href: '#home',
-  label: 'Αρχική',
-  active: true
-}, {
-  name: 'new_form',
-  href: '#new_form',
-  label: 'Καταχώριση φόρμας'
-}, {
-  name: 'news',
-  href: '#news',
-  label: 'Νέα'
-}, {
-  name: 'contact',
-  href: '#contact',
-  label: 'Επικοινωνία'
-}];
+var Vertical = function Vertical() {
+  var layout = 'vertical';
 
-var WithBurgerIcon = function WithBurgerIcon() {
-  var _useNavList = (0, _useNavList2.useNavList)(),
+  var _useNavList = (0, _NavList.useNavList)(),
       registerNavItem = _useNavList.registerNavItem;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(""),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icons.BurgerIcon, {
-    mdUpHidden: true,
-    size: "lg",
-    onClick: function onClick() {
-      setOpen(!open);
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_NavList2.Nav, {
-    role: "menubar",
-    "aria-orientation": "horizontal",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false,
-    open: open
-  }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], null, links.map(function (item, key) {
-    return /*#__PURE__*/_react["default"].createElement(_NavList2.NavListItemAction, (0, _extends2["default"])({
-      key: key
-    }, registerNavItem(item), {
-      active: item === null || item === void 0 ? void 0 : item.active
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, _NavLinksOneLevel["default"].map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
     }), item.label);
-  }))));
+  })));
 };
 
-exports.WithBurgerIcon = WithBurgerIcon;
-var _default = WithBurgerIcon;
+exports.Vertical = Vertical;
+var _default = Vertical;
 exports["default"] = _default;

package/navigation/NavList/__stories__/VerticalWithoutDrawer.d.ts

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

package/navigation/NavList/__stories__/{NavVerticalLayout.js → VerticalWithoutDrawer.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NavVerticalLayout = void 0;
+exports["default"] = exports.VerticalWithoutDrawer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,42 +17,9 @@ var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
 
-var links = [{
-  name: 'home',
-  href: '#home',
-  label: 'Αρχική'
-}, {
-  name: 'educational',
-  // href: '#',
-  label: 'Εκπαιδευτικό υλικό',
-  subMenu: [{
-    name: 'elearning',
-    href: '#elearning',
-    label: 'Εκπαιδευτική πλατφόρμα'
-  }, {
-    name: 'videos',
-    href: '#videos',
-    label: 'Βίντεο'
-  }, {
-    name: 'presentations',
-    href: '#presentations',
-    label: 'Παρουσιάσεις'
-  }, {
-    name: 'promoting',
-    href: '#promoting',
-    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
-  }, {
-    name: 'other-texts',
-    href: '#other-texts',
-    label: 'Άλλα κείμενα'
-  }]
-}, {
-  name: 'news',
-  href: '#news',
-  label: 'Νέα'
-}];
+var _NavLinksWithSubmenu = _interopRequireDefault(require("./NavLinksWithSubmenu.json"));
 
-var NavVerticalLayout = function NavVerticalLayout() {
+var VerticalWithoutDrawer = function VerticalWithoutDrawer() {
   var layout = 'vertical';
   var border = false;
 
@@ -61,11 +28,12 @@ var NavVerticalLayout = function NavVerticalLayout() {
       registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
-    open: true,
-    border: border
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
   }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
     layout: layout
-  }, links.map(function (item, key) {
+  }, _NavLinksWithSubmenu["default"].map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
@@ -89,6 +57,6 @@ var NavVerticalLayout = function NavVerticalLayout() {
   })));
 };
 
-exports.NavVerticalLayout = NavVerticalLayout;
-var _default = NavVerticalLayout;
+exports.VerticalWithoutDrawer = VerticalWithoutDrawer;
+var _default = VerticalWithoutDrawer;
 exports["default"] = _default;

package/navigation/NavList/index.d.ts

@@ -10,10 +10,8 @@ export * from '@digigov/react-core/NavMenuContent';
 export * from '@digigov/react-core/NavMenuContentListBase';
 export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
-export * from '@digigov/react-core/NavListItemAction';
-export * from '@digigov/react-core/NavListItemAction';
 export * from '@digigov/react-core/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemAction';
 export * from '@digigov/react-core/NavListItemLink';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/react-core/NavListItemAction';
 export default NavList;

package/navigation/NavList/index.js

@@ -162,30 +162,30 @@ Object.keys(_NavMenuTitle).forEach(function (key) {
   });
 });
 
-var _NavListItemAction = require("@digigov/react-core/NavListItemAction");
+var _NavListItemActionContainer = require("@digigov/react-core/NavListItemActionContainer");
 
-Object.keys(_NavListItemAction).forEach(function (key) {
+Object.keys(_NavListItemActionContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItemAction[key]) return;
+  if (key in exports && exports[key] === _NavListItemActionContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemAction[key];
+      return _NavListItemActionContainer[key];
     }
   });
 });
 
-var _NavListItemActionContainer = require("@digigov/react-core/NavListItemActionContainer");
+var _NavListItemAction = require("@digigov/react-core/NavListItemAction");
 
-Object.keys(_NavListItemActionContainer).forEach(function (key) {
+Object.keys(_NavListItemAction).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItemActionContainer[key]) return;
+  if (key in exports && exports[key] === _NavListItemAction[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemActionContainer[key];
+      return _NavListItemAction[key];
     }
   });
 });

package/navigation/NavList/index.mdx

@@ -9,13 +9,19 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ## How to use
 
-### Vertical NavList
+### Horizontal NavList
 
 <Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
 
-### Horizontal NavList
+### Vertical NavList
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Vertical.tsx" />
+
+
+### NavListAuto
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="UsingNavListAuto.tsx" />
 
-<Story packageName="@digigov/ui" component="navigation/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility
 

package/navigation/NavList/types.d.ts

@@ -10,6 +10,7 @@ export interface NavLinkInterface {
     label?: string;
     name: string;
     href?: string;
+    subMenuHeading?: string;
     subMenu?: NavLinkInterface[];
     menu?: NavListItemMenuInterface;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "1.0.0-8ae63a77",
+  "version": "1.0.0-eb2842b4",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "google-libphonenumber": "3.2.8",
-    "@uides/react-qr-reader": "2.3.1-rc",
+    "@uides/react-qr-reader": "2.3.1-rc-rc.2-rc.3",
     "react-query": "2.26.4",
     "yup": "0.32.11",
     "publint": "0.1.8",
-    "@digigov/react-icons": "1.0.0-8ae63a77"
+    "@digigov/react-icons": "1.0.0-eb2842b4"
   },
   "peerDependencies": {
     "@material-ui/core": "4.11.3",
@@ -21,7 +21,7 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "1.0.0-8ae63a77"
+    "@digigov/react-core": "1.0.0-eb2842b4"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -177,6 +177,7 @@ declare var _default: {
     '@digigov/ui/utils/Kitchensink/KitchensinkComponent': {};
     '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': {};
     '@digigov/ui/utils/SvgIcon': {};
+    '@digigov/ui/utils/Typography': {};
     '@digigov/ui/utils/VisuallyHidden': {};
     '@digigov/ui/utils/withDeprecation': {};
 };

package/registry.js

@@ -363,6 +363,8 @@ var _digigov_ui_utils_Kitchensink_KitchensinkDashboard = _interopRequireWildcard
 
 var _digigov_ui_utils_SvgIcon = _interopRequireWildcard(require("@digigov/ui/utils/SvgIcon"));
 
+var _digigov_ui_utils_Typography = _interopRequireWildcard(require("@digigov/ui/utils/Typography"));
+
 var _digigov_ui_utils_VisuallyHidden = _interopRequireWildcard(require("@digigov/ui/utils/VisuallyHidden"));
 
 var _digigov_ui_utils_withDeprecation = _interopRequireWildcard(require("@digigov/ui/utils/withDeprecation"));
@@ -679,6 +681,7 @@ var _default = {
   '@digigov/ui/utils/Kitchensink/KitchensinkComponent': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkComponent),
   '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkDashboard),
   '@digigov/ui/utils/SvgIcon': lazyImport(_digigov_ui_utils_SvgIcon),
+  '@digigov/ui/utils/Typography': lazyImport(_digigov_ui_utils_Typography),
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
   '@digigov/ui/utils/withDeprecation': lazyImport(_digigov_ui_utils_withDeprecation)
 };

package/src/app/Header/Header.stories.playwright.json

@@ -36,7 +36,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>ul>li>button"
+                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>button"
               }
             }
           ],

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import Header from '@digigov/ui/app/Header';
 import HeaderContent from '@digigov/ui/app/Header/HeaderContent';
-import HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import { BurgerIcon, MoreVertIcon } from '@digigov/ui/icons';
+import { ArrowIcon, MoreVertIcon } from '@digigov/ui/icons';
 import { Top } from '@digigov/ui/layouts/Basic';
 import {
   Dropdown,
@@ -14,40 +13,38 @@ import {
 } from '@digigov/ui/navigation/Dropdown';
 import NavList from '@digigov/ui/navigation/NavList/NavList';
 import { NavListItemAction } from '@digigov/ui/navigation/NavList';
+import Button from '@digigov/ui/form/Button';
 
-export const WithHeaderNavigation = () => (
-  <Top>
-    <Header>
-      <HeaderContent>
-        <HeaderSection>
-          <GovGRLogo />
-          <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
-        </HeaderSection>
-        <HeaderNavMenuContent>
-          <NavList active={true}>
-            <NavListItemAction arrow>Μενού</NavListItemAction>
-          </NavList>
-          <Dropdown align="right">
-            <DropdownButton variant="link">
-              ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
-              <MoreVertIcon size="md" />
-            </DropdownButton>
-            <DropdownContent>
-              <NavList layout='vertical'>
-                <NavListItemAction href="#">
-                  Ρυθμίσεις
-                </NavListItemAction>
-                <NavListItemAction href="#">
-                  Έξοδος
-                </NavListItemAction>
-              </NavList>
-            </DropdownContent>
-          </Dropdown>
-        </HeaderNavMenuContent>
-        <BurgerIcon smUpHidden size="sm"></BurgerIcon>
-      </HeaderContent>
-    </Header>
-  </Top>
-);
+export const WithHeaderNavigation = () => {
+  return (
+    <Top>
+      <Header>
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+            <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
+          </HeaderSection>
+          <HeaderSection>
+            <Button variant="link">
+              Μενού <ArrowIcon direction="down" />
+            </Button>
+            <Dropdown align="right">
+              <DropdownButton variant="link">
+                ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
+                <MoreVertIcon size="md" />
+              </DropdownButton>
+              <DropdownContent>
+                <NavList layout="vertical">
+                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
+                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
+                </NavList>
+              </DropdownContent>
+            </Dropdown>
+          </HeaderSection>
+        </HeaderContent>
+      </Header>
+    </Top>
+  );
+};
 
 export default WithHeaderNavigation;

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

@@ -1,13 +1,15 @@
-import React from 'react';
-import { NavListAuto } from '@digigov/ui';
+import React, { useState } from 'react';
+import { NavListAuto } from '@digigov/ui/navigation/NavList';
+import { BurgerIcon } from '@digigov/ui/icons';
 import { Header } from '@digigov/ui/app/Header';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
 import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic';
+import { Button } from '@digigov/ui/form';
 
 export const WithNavigation = () => {
-  
+  const [open, setOpen] = useState(false);
 
   return (
     <Top>
@@ -16,20 +18,24 @@ export const WithNavigation = () => {
           <HeaderSection>
             <GovGRLogo href="#" />
           </HeaderSection>
+          <HeaderSection>
+            <Button variant="link" smUpHidden onClick={() => setOpen(!open)}>
+              <BurgerIcon size='md' />
+            </Button>
+          </HeaderSection>
         </HeaderContent>
       </Header>
-        <NavListAuto 
-          links={[{
-            name: 'home',
-            label: 'Αρχική',
-            href: '#home',
-            }, 
-            { name: 'news', label: 'Νέα', href: '#news' },
-            { name: 'links', label: 'Σύνδεσμοι', href: '#links' },
-            { name: 'contact', label: 'Επικοινωνία', href: '#contact' }
-          ]}
-          border
-          />
+      <NavListAuto
+        links={[
+          { name: 'home', label: 'Αρχική', href: '#home' },
+          { name: 'news', label: 'Νέα', href: '#news' },
+          { name: 'links', label: 'Σύνδεσμοι', href: '#links' },
+          { name: 'contact', label: 'Επικοινωνία', href: '#contact' },
+        ]}
+        open={open}
+        drawer="smDown"
+        onClose={() => setOpen(false)}
+      />
     </Top>
   );
 };

package/src/app/Modal/Modal.stories.js

@@ -10,3 +10,4 @@ export default {
 };
 export * from '@digigov/ui/app/Modal/__stories__/Default';
 export * from '@digigov/ui/app/Modal/__stories__/AlertDialog';
+export * from '@digigov/ui/app/Modal/__stories__/Dense';

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

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-app-modal--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "kiFgErhdQ2jf",
+          "title": "Open modal"
+        }
+      ]
+    }
+  }
+}

package/src/app/Modal/__stories__/Dense.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+} from '@digigov/ui/app/Modal';
+
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Dense = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Προσθήκη τηλεφώνου
+      </Button>
+      <Modal open={open} aria-labelledby="modal-label" dense>
+        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <FieldContainer margin={0}>
+            <LabelContainer>
+              Συμπληρώστε το τηλέφωνο επικοινωνίας
+              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+            </LabelContainer>
+          </FieldContainer>
+        </ModalContent>
+        <ModalAction>
+          <Button>Υποβολή</Button>
+          <Button
+            variant="link"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            Ακύρωση
+          </Button>
+        </ModalAction>
+      </Modal>
+    </div>
+  );
+};
+
+export default Dense;

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.js

@@ -6,3 +6,4 @@ export default {
 };
 export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
 export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+export * from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -32,6 +32,22 @@
           "title": "Click button"
         }
       ]
+    },
+    "digigov-ui-feedback-copytoclipboard--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>button"
+              }
+            }
+          ],
+          "id": "ghUU4iC32gX-",
+          "title": "Click button"
+        }
+      ]
     }
   }
 }

package/src/feedback/CopyToClipboard/__stories__/Dense.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => {
+  return (
+    <CopyToClipboard
+      text="copied-text"
+      variant="tooltip"
+      tooltipAlign="left"
+      message="Αντιγράφηκε στο πρόχειρο"
+      id="copy-to-clipboard"
+      dense
+    >
+      <Button color="secondary" aria-describedby="copy-to-clipboard">
+        Αντιγραφή
+      </Button>
+    </CopyToClipboard>
+  );
+};
+export default Dense;

package/src/feedback/CopyToClipboard/index.tsx

@@ -14,7 +14,7 @@ export const CopyToClipboard = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardProps
 >(function CopyToClipboard(
-  { text, variant = 'tooltip', tooltipAlign = 'right', message, timeout = 3000, children },
+  { text, variant = 'tooltip', tooltipAlign = 'right', message, dense, timeout = 3000, children },
   ref
 ) {
   const [enabled, setEnabled] = useState(false);
@@ -39,6 +39,7 @@ export const CopyToClipboard = React.forwardRef<
       variant={variant}
       tooltipAlign={tooltipAlign}
       ref={ref}
+      dense={dense}
     >
       {children}
       {enabled && (

package/src/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -8,6 +8,7 @@ export default {
   displayName: 'ErrorSummary',
 };
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export * from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
 export * from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';