@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/registry/index.js

@@ -43,6 +43,7 @@ import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
 import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
+import * as _digigov_ui_app_Skeleton from '@digigov/ui/app/Skeleton';
 import * as _digigov_ui_app_ThemeOptions from '@digigov/ui/app/ThemeOptions';
 import * as _digigov_ui_content_Accordion_auto from '@digigov/ui/content/Accordion/auto';
 import * as _digigov_ui_content_Accordion_hooks from '@digigov/ui/content/Accordion/hooks';
@@ -135,7 +136,6 @@ import * as _digigov_ui_layouts_Screen from '@digigov/ui/layouts/Screen';
 import * as _digigov_ui_layouts_Section from '@digigov/ui/layouts/Section';
 import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBreak';
 import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
-import * as _digigov_ui_misc_KitchenSink from '@digigov/ui/misc/KitchenSink';
 import * as _digigov_ui_navigation_BackLink from '@digigov/ui/navigation/BackLink';
 import * as _digigov_ui_navigation_BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
 import * as _digigov_ui_navigation_Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
@@ -168,6 +168,7 @@ import * as _digigov_ui_typography_Hint from '@digigov/ui/typography/Hint';
 import * as _digigov_ui_typography from '@digigov/ui/typography';
 import * as _digigov_ui_typography_NormalText from '@digigov/ui/typography/NormalText';
 import * as _digigov_ui_typography_Paragraph from '@digigov/ui/typography/Paragraph';
+import * as _digigov_ui_typography_Typography from '@digigov/ui/typography/Typography';
 import * as _digigov_ui_utils_Base from '@digigov/ui/utils/Base';
 import * as _digigov_ui_utils_hooks_useDebounce from '@digigov/ui/utils/hooks/useDebounce';
 import * as _digigov_ui_utils_hooks_useKeypress from '@digigov/ui/utils/hooks/useKeypress';
@@ -176,11 +177,6 @@ import * as _digigov_ui_utils_hooks_useScreen from '@digigov/ui/utils/hooks/useS
 import * as _digigov_ui_utils_hooks_useSearch from '@digigov/ui/utils/hooks/useSearch';
 import * as _digigov_ui_utils_hooks_useTogglableTab from '@digigov/ui/utils/hooks/useTogglableTab';
 import * as _digigov_ui_utils from '@digigov/ui/utils';
-import * as _digigov_ui_utils_Kitchensink_AllComponents from '@digigov/ui/utils/Kitchensink/AllComponents';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByCategory from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByLetter from '@digigov/ui/utils/Kitchensink/KitchensinkByLetter';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkComponent from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkDashboard from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 import * as _digigov_ui_utils_SvgIcon from '@digigov/ui/utils/SvgIcon';
 import * as _digigov_ui_utils_Typography from '@digigov/ui/utils/Typography';
 import * as _digigov_ui_utils_VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
@@ -245,6 +241,7 @@ export default {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
+  '@digigov/ui/app/Skeleton': lazyImport(_digigov_ui_app_Skeleton),
   '@digigov/ui/app/ThemeOptions': lazyImport(_digigov_ui_app_ThemeOptions),
   '@digigov/ui/content/Accordion/auto': lazyImport(_digigov_ui_content_Accordion_auto),
   '@digigov/ui/content/Accordion/hooks': lazyImport(_digigov_ui_content_Accordion_hooks),
@@ -337,7 +334,6 @@ export default {
   '@digigov/ui/layouts/Section': lazyImport(_digigov_ui_layouts_Section),
   '@digigov/ui/layouts/SectionBreak': lazyImport(_digigov_ui_layouts_SectionBreak),
   '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
-  '@digigov/ui/misc/KitchenSink': lazyImport(_digigov_ui_misc_KitchenSink),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/BackToTopLink': lazyImport(_digigov_ui_navigation_BackToTopLink),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
@@ -370,6 +366,7 @@ export default {
   '@digigov/ui/typography': lazyImport(_digigov_ui_typography),
   '@digigov/ui/typography/NormalText': lazyImport(_digigov_ui_typography_NormalText),
   '@digigov/ui/typography/Paragraph': lazyImport(_digigov_ui_typography_Paragraph),
+  '@digigov/ui/typography/Typography': lazyImport(_digigov_ui_typography_Typography),
   '@digigov/ui/utils/Base': lazyImport(_digigov_ui_utils_Base),
   '@digigov/ui/utils/hooks/useDebounce': lazyImport(_digigov_ui_utils_hooks_useDebounce),
   '@digigov/ui/utils/hooks/useKeypress': lazyImport(_digigov_ui_utils_hooks_useKeypress),
@@ -378,11 +375,6 @@ export default {
   '@digigov/ui/utils/hooks/useSearch': lazyImport(_digigov_ui_utils_hooks_useSearch),
   '@digigov/ui/utils/hooks/useTogglableTab': lazyImport(_digigov_ui_utils_hooks_useTogglableTab),
   '@digigov/ui/utils': lazyImport(_digigov_ui_utils),
-  '@digigov/ui/utils/Kitchensink/AllComponents': lazyImport(_digigov_ui_utils_Kitchensink_AllComponents),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByCategory': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByCategory),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByLetter': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByLetter),
-  '@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),
@@ -399,6 +391,7 @@ import * as _digigov_ui_app_Panel_Panel_stories from '@digigov/ui/app/Panel/Pane
 import * as _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories from '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories';
 import * as _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories from '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories';
 import * as _digigov_ui_app_QrCodeViewer_QRCode_stories from '@digigov/ui/app/QrCodeViewer/QRCode.stories';
+import * as _digigov_ui_app_Skeleton_Skeleton_stories from '@digigov/ui/app/Skeleton/Skeleton.stories';
 import * as _digigov_ui_content_Accordion_Accordion_stories from '@digigov/ui/content/Accordion/Accordion.stories';
 import * as _digigov_ui_content_Blockquote_Blockquote_stories from '@digigov/ui/content/Blockquote/Blockquote.stories';
 import * as _digigov_ui_content_Card_Card_stories from '@digigov/ui/content/Card/Card.stories';
@@ -458,6 +451,7 @@ export var stories = {
   '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories': _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories,
   '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories': _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories,
   '@digigov/ui/app/QrCodeViewer/QRCode.stories': _digigov_ui_app_QrCodeViewer_QRCode_stories,
+  '@digigov/ui/app/Skeleton/Skeleton.stories': _digigov_ui_app_Skeleton_Skeleton_stories,
   '@digigov/ui/content/Accordion/Accordion.stories': _digigov_ui_content_Accordion_Accordion_stories,
   '@digigov/ui/content/Blockquote/Blockquote.stories': _digigov_ui_content_Blockquote_Blockquote_stories,
   '@digigov/ui/content/Card/Card.stories': _digigov_ui_content_Card_Card_stories,

package/registry.d.ts

@@ -44,6 +44,7 @@ declare const _default: {
     '@digigov/ui/app/QrCodeViewer/qrcodegen': {};
     '@digigov/ui/app/QrCodeViewer/types': {};
     '@digigov/ui/app/QrCodeViewer/utils': {};
+    '@digigov/ui/app/Skeleton': {};
     '@digigov/ui/app/ThemeOptions': {};
     '@digigov/ui/content/Accordion/auto': {};
     '@digigov/ui/content/Accordion/hooks': {};
@@ -136,7 +137,6 @@ declare const _default: {
     '@digigov/ui/layouts/Section': {};
     '@digigov/ui/layouts/SectionBreak': {};
     '@digigov/ui/layouts/Stack': {};
-    '@digigov/ui/misc/KitchenSink': {};
     '@digigov/ui/navigation/BackLink': {};
     '@digigov/ui/navigation/BackToTopLink': {};
     '@digigov/ui/navigation/Breadcrumbs': {};
@@ -169,6 +169,7 @@ declare const _default: {
     '@digigov/ui/typography': {};
     '@digigov/ui/typography/NormalText': {};
     '@digigov/ui/typography/Paragraph': {};
+    '@digigov/ui/typography/Typography': {};
     '@digigov/ui/utils/Base': {};
     '@digigov/ui/utils/hooks/useDebounce': {};
     '@digigov/ui/utils/hooks/useKeypress': {};
@@ -177,11 +178,6 @@ declare const _default: {
     '@digigov/ui/utils/hooks/useSearch': {};
     '@digigov/ui/utils/hooks/useTogglableTab': {};
     '@digigov/ui/utils': {};
-    '@digigov/ui/utils/Kitchensink/AllComponents': {};
-    '@digigov/ui/utils/Kitchensink/KitchensinkByCategory': {};
-    '@digigov/ui/utils/Kitchensink/KitchensinkByLetter': {};
-    '@digigov/ui/utils/Kitchensink/KitchensinkComponent': {};
-    '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': {};
     '@digigov/ui/utils/SvgIcon': {};
     '@digigov/ui/utils/Typography': {};
     '@digigov/ui/utils/VisuallyHidden': {};
@@ -200,6 +196,7 @@ export const stories: {
     '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories': typeof _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories;
     '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories': typeof _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories;
     '@digigov/ui/app/QrCodeViewer/QRCode.stories': typeof _digigov_ui_app_QrCodeViewer_QRCode_stories;
+    '@digigov/ui/app/Skeleton/Skeleton.stories': typeof _digigov_ui_app_Skeleton_Skeleton_stories;
     '@digigov/ui/content/Accordion/Accordion.stories': typeof _digigov_ui_content_Accordion_Accordion_stories;
     '@digigov/ui/content/Blockquote/Blockquote.stories': typeof _digigov_ui_content_Blockquote_Blockquote_stories;
     '@digigov/ui/content/Card/Card.stories': typeof _digigov_ui_content_Card_Card_stories;
@@ -259,6 +256,7 @@ import * as _digigov_ui_app_Panel_Panel_stories from '@digigov/ui/app/Panel/Pane
 import * as _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories from '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories';
 import * as _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories from '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories';
 import * as _digigov_ui_app_QrCodeViewer_QRCode_stories from '@digigov/ui/app/QrCodeViewer/QRCode.stories';
+import * as _digigov_ui_app_Skeleton_Skeleton_stories from '@digigov/ui/app/Skeleton/Skeleton.stories';
 import * as _digigov_ui_content_Accordion_Accordion_stories from '@digigov/ui/content/Accordion/Accordion.stories';
 import * as _digigov_ui_content_Blockquote_Blockquote_stories from '@digigov/ui/content/Blockquote/Blockquote.stories';
 import * as _digigov_ui_content_Card_Card_stories from '@digigov/ui/content/Card/Card.stories';

package/src/app/Footer/index.mdx

@@ -3,10 +3,6 @@ id: footer
 title: Footer
 ---
 
-```bash
-import Footer from '@digigov/ui/app/Footer';
-```
-
 ## How to use
 
 ### Default footer
@@ -47,4 +43,21 @@ import Footer from '@digigov/ui/app/Footer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Footer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Footer",
+  "FooterContainer",
+  "FooterNavigation",
+  "FooterNavigationSection",
+  "FooterHeading",
+  "FooterList",
+  "FooterListItem",
+  "FooterLink",
+  "FooterInfo",
+  "FooterInfoSection",
+  "FooterContent",
+  "FooterContentLogos",
+  "FooterImage",
+  "CopyrightContainer"]} 
+/> 

package/src/app/Header/index.mdx

@@ -3,10 +3,6 @@ id: header
 title: Header
 ---
 
-```bash
-import Header from '@digigov/ui/app/Header';
-```
-
 ## How to use
 
 ### Default header
@@ -44,4 +40,10 @@ import Header from '@digigov/ui/app/Header';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Header" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Header",
+  "HeaderContent",
+  "HeaderSection",]} 
+/> 

package/src/app/Masthead/index.mdx

@@ -5,9 +5,7 @@ title: Masthead
 
 # Masthead
 
-```bash
-import Masthead from '@digigov/ui/app/Masthead';
-```
+The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
 
 ## How to use
 
@@ -15,4 +13,11 @@ import Masthead from '@digigov/ui/app/Masthead';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Masthead" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Masthead",
+  "MastheadBody",
+  "MastheadLogo",
+]} 
+/> 

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

@@ -13,3 +13,4 @@ export * from '@digigov/ui/app/Modal/__stories__/AlertDialog';
 export * from '@digigov/ui/app/Modal/__stories__/Dense';
 export * from '@digigov/ui/app/Modal/__stories__/WithHooks';
 export * from '@digigov/ui/app/Modal/__stories__/Auto';
+export * from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';

package/src/app/Modal/__stories__/WithoutModalGaps.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 WithoutModalGaps = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Προσθήκη τηλεφώνου
+      </Button>
+      <Modal open={open} aria-labelledby="modal-label" gaps={false}>
+        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <FieldContainer>
+            <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 WithoutModalGaps;

package/src/app/Modal/index.mdx

@@ -3,9 +3,7 @@ id: modal
 title: Modal
 ---
 
-```bash
-import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Modal";
-```
+Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:
 
 ## How to use
 
@@ -30,4 +28,13 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Modal" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "ModalContainer",
+  "Modal",
+  "ModalHeading",
+  "ModalContent",
+  "ModalAction"]} 
+/> 
+

package/src/app/Modal/index.tsx

@@ -45,7 +45,7 @@ export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
       return () => {
         lastModalElementInstance.removeEventListener('focus', handleFocus);
       };
-    }, [open]);
+    }, []);
     return (
       <ModalContainer
         open={open}

package/src/app/NotFound/index.mdx

@@ -13,4 +13,6 @@ import NotFound from '@digigov/ui/app/NotFound';
 
 ## API
 
+See below for a complete reference to all of the props  available to the components mentioned here.
+
 There are no available prop types for this component.

package/src/app/Panel/index.mdx

@@ -3,9 +3,8 @@ id: panel
 title: Panel
 ---
 
-```bash
-import Panel from '@digigov/ui/app/Panel';
-```
+Panels are bordered boxes where you can place texts, lists, tables and other content. 
+Panels are similar to cards, but they don't include media.
 
 ## How to use
 
@@ -13,4 +12,10 @@ import Panel from '@digigov/ui/app/Panel';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Panel" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Panel", 
+  "PanelTitle", 
+  "PanelBody"]} 
+/> 

package/src/app/PhaseBannerHeader/index.mdx

@@ -3,9 +3,7 @@ id: phase-banner-header
 title: PhaseBannerHeader
 ---
 
-```bash
-import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
-```
+Phase banner lets users know the service is still being worked on, and encourages the user to provide feedback to help improve it.
 
 ## How to use
 
@@ -17,4 +15,6 @@ import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBannerHeader" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["PhaseBannerHeaderContainer"]} />

package/src/app/QrCodeViewer/index.mdx

@@ -3,9 +3,7 @@ id: qr-code-viewer
 title: QrCodeViewer
 ---
 
-```bash
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
-```
+QR codes are frequently used to track information and allow the users to access this information instantly.
 
 ## How to use
 
@@ -27,4 +25,6 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+There are no available prop types for this component.

package/src/app/QrCodeViewer/index.tsx

@@ -176,3 +176,5 @@ export const QrCodeViewer = React.forwardRef(function QrCodeViewer(
 ) {
   return <QrCodeViewerCanvas {...props} ref={ref} />;
 });
+
+export default QrCodeViewer;

package/src/app/Skeleton/Skeleton.stories.js

@@ -0,0 +1,19 @@
+import Skeleton from '@digigov/ui/app/Skeleton';
+export default {
+  title: 'Digigov UI/app/Skeleton',
+  description:
+    'Use a set of Skeleton components to display placeholder content when data is loading.',
+
+  component: Skeleton,
+  displayName: 'Skeleton',
+};
+export * from '@digigov/ui/app/Skeleton/__stories__/Default';
+export * from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
+export * from '@digigov/ui/app/Skeleton/__stories__/Rectangular';
+export * from '@digigov/ui/app/Skeleton/__stories__/Circular';
+export * from '@digigov/ui/app/Skeleton/__stories__/Button';
+export * from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+export * from '@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight';
+export * from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+export * from '@digigov/ui/app/Skeleton/__stories__/UnderTypography';
+export * from '@digigov/ui/app/Skeleton/__stories__/WithChildren';

package/src/app/Skeleton/__stories__/Button.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Button = () => <Skeleton variant="button" />;
+
+export default Button;

package/src/app/Skeleton/__stories__/Circular.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Circular = () => (
+  <Skeleton variant="circular" width={100} height={100} />
+);
+
+export default Circular;

package/src/app/Skeleton/__stories__/Default.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Default = () => <Skeleton />;
+
+export default Default;

package/src/app/Skeleton/__stories__/NoAnimation.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const NoAnimation = () => <Skeleton animation={false} />;
+
+export default NoAnimation;

package/src/app/Skeleton/__stories__/Rectangular.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Rectangular = () => (
+  <Skeleton variant="rectangular" height={150} />
+);
+
+export default Rectangular;

package/src/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const SpecificWidthAndHeight = () => (
+    <Skeleton width={200} height={200}/>
+);
+
+export default SpecificWidthAndHeight;

package/src/app/Skeleton/__stories__/TextSizes.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const TextSizes = () => (
+  <>
+    <Skeleton mb={2} fontSize="xs" />
+    <Skeleton mb={2} fontSize="sm" />
+    <Skeleton mb={2} fontSize="md" />
+    <Skeleton mb={2} fontSize="lg" />
+    <Skeleton mb={2} fontSize="xl" />
+  </>
+);
+
+export default TextSizes;

package/src/app/Skeleton/__stories__/UnderTypography.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+import Heading from '@digigov/ui/typography/Heading';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const UnderTypography = () => (
+  <>
+    <Heading>
+      <Skeleton />
+    </Heading>
+    <Paragraph>
+      <Skeleton />
+    </Paragraph>
+  </>
+);
+
+export default UnderTypography;

package/src/app/Skeleton/__stories__/WithChildren.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+import { NormalText } from '@digigov/ui/typography/NormalText';
+
+export const WithChildren = () => (
+  <Skeleton>
+    <NormalText>Κείμενο</NormalText>
+  </Skeleton>
+);
+
+export default WithChildren;

package/src/app/Skeleton/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/Skeleton';
+
+import Skeleton from '@digigov/react-core/Skeleton';
+export default Skeleton;

package/src/app/ThemeOptions/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { BaseProps } from '@digigov/react-core';
+import { BaseProps } from '@digigov/react-core/Base';
 import useFontSize, {
   FontSizeOptions,
 } from '@digigov/ui/app/hooks/useFontSize';

package/src/content/Accordion/__stories__/Auto.tsx

@@ -9,7 +9,7 @@ import {
   AccordionSectionSummaryHeading,
   AccordionCloseAllButtonAuto,
   AccordionOpenAllButtonAuto,
-} from '@digigov/ui/content/Accordion/';
+} from '@digigov/ui/content/Accordion';
 
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
@@ -19,7 +19,7 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const Auto = () => {
   return (
-    <AccordionAuto defaultOpen={'1'} singleOpen>
+    <AccordionAuto defaultOpen={'1'}>
       <AccordionControls>
         <AccordionOpenAllButtonAuto>Open all</AccordionOpenAllButtonAuto>
         <AccordionCloseAllButtonAuto>Close all</AccordionCloseAllButtonAuto>

package/src/content/Accordion/auto.tsx

@@ -10,7 +10,7 @@ import {
 } from '@digigov/ui/content/Accordion';
 import { UseAccordionReturn } from '@digigov/ui/content/Accordion/hooks';
 
-export interface ButtonAccordionAutoProps extends ButtonProps {}
+export interface ButtonAccordionAutoProps extends ButtonProps { }
 export interface AccordionSectionAutoProps extends AccordionSectionProps {
   id: string;
 }

package/src/content/Accordion/hooks.ts

@@ -119,7 +119,6 @@ export const useAccordion = ({
           });
         } else {
           setCurrentOpen({ ...current, [id]: e.target?.open });
-          console.log('current2 is', current);
         }
       };
 

package/src/content/Accordion/index.mdx

@@ -3,18 +3,19 @@ id: accordion
 title: Accordion
 ---
 
+ 
 # Accordion
 
+
+
 This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
 The accordion component lets users show and hide sections of related content on a page.
 
-```bash
-import Accordion from '@digigov/ui/content/Accordion';
-```
-
 ## How to use
 
+### Default Accordion
+
 <Story
   packageName="@digigov/ui"
   component="content/Accordion"
@@ -38,4 +39,7 @@ implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Accordion" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Accordion", "AccordionSection","AccordionSectionSummary","AccordionSectionSummaryHeading","AccordionSectionContent"]} />
+

package/src/content/Blockquote/index.mdx

@@ -9,10 +9,6 @@ This component is currently experimental because adding a summary line with more
 
 The Blockquote component lets users show and hide sections of related content on a page.
 
-```bash
-import Blockquote from '@digigov/ui/content/Blockquote';
-```
-
 ## How to use
 
 <Story
@@ -23,4 +19,6 @@ import Blockquote from '@digigov/ui/content/Blockquote';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Blockquote" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Blockquote"]} />

package/src/content/Card/index.mdx

@@ -8,10 +8,6 @@ title: Card
 Cards can be used to divide and organise interface content for better understandability and readability.
 When used correctly, Cards can help users to scan through vast amounts of information quicker.
 
-```bash
-import Card from '@digigov/ui/content/Card';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Card" story="Default.tsx" />
@@ -102,4 +98,6 @@ Cards also provides styles for actionable elements such as Buttons or Links.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Card" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} />