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

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/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/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"]} /> 

package/src/content/Chip/index.mdx

@@ -9,10 +9,6 @@ Chips allow users to enter information, make selections, filter content, or trig
 While buttons are expected to appear consistently and with familiar calls to action,
 chips should appear dynamically as a group of multiple interactive elements.
 
-```bash
-import Chip from '@digigov/ui/content/Chip';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
@@ -51,4 +47,7 @@ import Chip from '@digigov/ui/content/Chip';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Chip" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Chip"]} />
+

package/src/content/Details/index.mdx

@@ -7,10 +7,6 @@ title: Details
 
 The details component is a short link that shows more detailed help text when a user clicks on it.
 
-```bash
-import Details from '@digigov/ui/content/Details';
-```
-
 ## How to use
 
 <Story
@@ -26,4 +22,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Details" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />

package/src/content/List/__stories__/Default.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
-import { Link } from '@digigov/ui/navigation/Link';
 
 export const Default = () => (
   <List>
     <ListItem>
-      <Link>Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων</Link>
+      Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων
     </ListItem>
     <ListItem>
-      <Link>Πτυχία τριτοβάθμιας εκπαίδευσης</Link>
+      Πτυχία τριτοβάθμιας εκπαίδευσης
     </ListItem>
     <ListItem>
-      <Link>Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής</Link>
+      Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής
     </ListItem>
   </List>
 );

package/src/content/List/index.mdx

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

package/src/content/SafeHTML/index.tsx

@@ -26,7 +26,7 @@ const elementClassNameMapping = {
 };
 
 if (typeof window !== 'undefined') {
-  DomPurify.addHook('afterSanitizeAttributes', function (node) {
+  DomPurify.addHook('afterSanitizeAttributes', function(node) {
     if (node.tagName.toLowerCase() in elementClassNameMapping) {
       node.setAttribute(
         'class',
@@ -73,7 +73,7 @@ export const SafeHTML = ({
   content,
   tags,
   Tag = 'span',
-  style = {},
+  ...props
 }: SafeHTMLProps) => {
   if (tags) {
     tags.push(...defaultTags);
@@ -89,11 +89,10 @@ export const SafeHTML = ({
   return (
     <Tag
       // @ts-ignore
-      style={{ whiteSpace: 'break-spaces', ...style }}
-      className="ds-body"
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}
+      {...props}
     />
   );
 };

package/src/content/StepNav/index.mdx

@@ -7,10 +7,6 @@ title: StepNav
 
 StepNav is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import StepNav from '@digigov/ui/content/StepNav';
-```
-
 ## How to use
 
 ### Default
@@ -21,10 +17,37 @@ import StepNav from '@digigov/ui/content/StepNav';
   story="Default.tsx"
 />
 
-### With hints
+### StepNav with hints
 
 <Story
   packageName="@digigov/ui"
   component="content/StepNav"
   story="WithHints.tsx"
 />
+
+### StepNav with dense
+
+<Story
+  packageName="@digigov/ui"
+  component="content/StepNav"
+  story="Dense.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+    "StepNav",
+    "StepNavControls", 
+    "StepNavList",
+    "StepNavListItem",
+    "StepNavAccordion",
+    "StepNavAccordionSummary",
+    "StepNavAccordionSummaryHeading",
+    "StepNavCircleNumber",
+    "StepNavAccordionHeadingTitle",
+    "StepNavAccordionHeadingText",
+    "StepNavAccordionContent"
+  ]} />