@digigov/ui 2.0.0-af1b5f33 → 2.0.0-cbc56209

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

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

@@ -62,7 +62,7 @@ export const getClosingTags = (htmlString) => {
   return stack;
 };
 
-interface SafeHTMLProps {
+export interface SafeHTMLProps {
   content: string;
   tags?: Array<string>;
   Tag?: string;

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

package/src/content/SummaryList/index.mdx

@@ -7,10 +7,6 @@ title: SummaryList
 
 Use the summary list to summarise information, for example, a user’s responses at the end of a form.
 
-```bash
-import SummaryList from '@digigov/ui/content/SummaryList';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,13 @@ If you do not include actions in your summary list and it would be better for yo
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SummaryList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["SummaryList",
+  "SummaryListItem",
+  "SummaryListItemAction",
+  "SummaryListItemKey",
+  "SummaryListItemValue"
+  ]
+} />

package/src/content/Table/index.mdx

@@ -5,19 +5,6 @@ title: Table
 
 # Table
 
-```bash
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/content/Table';
-```
-
 ## How to use
 
 <Story
@@ -109,4 +96,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://ww
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Table" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TableContainer",
+  "Table",
+  "TableCaption",
+  "TableHead",
+  "TableRow",
+  "TableBody",
+  "TableHeadCell",
+  "TableDataCell"
+  ]
+} />

package/src/content/Table/index.tsx

@@ -48,12 +48,12 @@ export const TableSortLabel = React.forwardRef<
           <CaretIcon
             direction={'up'}
             size="sm"
-            variant={direction === 1 ? 'dark' : 'gray'}
+            color={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
             size="sm"
-            variant={direction === -1 ? 'dark' : 'gray'}
+            color={direction === -1 ? 'dark' : 'gray'}
           />
         </TableSortIconContainer>
       </DropdownButton>

package/src/content/TaskList/index.mdx

@@ -7,10 +7,6 @@ title: TaskList
 
 TaskList is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import TaskList from '@digigov/ui/content/TaskList';
-```
-
 ## How to use
 
 ### Default
@@ -23,4 +19,12 @@ import TaskList from '@digigov/ui/content/TaskList';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TaskList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TaskList",
+  "TaskListItem",
+  "TaskListItemHeading",
+  "TaskListItemContent",
+  "TaskListItemTag"
+  ]} /> 

package/src/content/Timeline/index.mdx

@@ -9,10 +9,6 @@ A timeline is a useful way to display a whole range of information and/or data p
 Keeping things organized in logical sequence timeline helps to keep track of what’s happening.
 User can better understand what has happened and also understand what the next steps should be.
 
-```bash
-import Timeline from '@digigov/ui/content/Timeline';
-```
-
 ## How to use
 
 ### Default
@@ -25,4 +21,13 @@ import Timeline from '@digigov/ui/content/Timeline';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Timeline" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Timeline",
+  "TimelineItem",
+  "TimelineHeading",
+  "TimelineContent",
+  "TimelineActions",
+  ]} /> 
+

package/src/feedback/CopyToClipboard/index.mdx

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

package/src/feedback/ErrorSummary/index.mdx

@@ -9,10 +9,6 @@ Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
-```bash
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-```
-
 ## How to use
 
 <Story
@@ -53,4 +49,6 @@ For questions that require a user to select one or more options from a list usin
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorSummary" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/NotificationBanner/index.mdx

@@ -9,16 +9,15 @@ This component is currently experimental because more research is needed to vali
 
 Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
 
-```bash
-import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
-```
-
 ## How to use
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
+## How to use
+
+### Default NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
@@ -27,12 +26,22 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
+### Success NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
   story="Success.tsx"
 />
 
+### Dense NotificationBanner
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Dense.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NotificationBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 

package/src/feedback/PhaseBanner/index.mdx

@@ -7,14 +7,12 @@ title: PhaseBanner
 
 Use the phase banner component to show users your service is still being worked on.
 
-```bash
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-```
-
 ## How to use
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/PhaseBanner"
@@ -31,4 +29,9 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "PhaseBanner",
+  "PhaseBannerTag",
+  "PhaseBannerText"]} /> 

package/src/feedback/WarningText/index.mdx

@@ -5,15 +5,13 @@ title: WarningText
 
 # WarningText
 
-```bash
-import WarningText from '@digigov/ui/feedback/WarningText';
-```
-
 ## How to use
 
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/WarningText"
@@ -22,4 +20,6 @@ This will be used by screen-readers.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="WarningText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["WarningText"]} /> 

package/src/form/AutoComplete/index.mdx

@@ -8,19 +8,9 @@ through, select from large collections of options and help services get more con
 
 ## Usage
 
-### How to import
-
-```bash
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-```
-
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
@@ -74,4 +64,15 @@ This is the minimum number of characters that should be entered before the autoc
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="AutoComplete" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["AutoCompleteWrapper",
+  "AutoCompleteStatus",
+  "AutoCompleteStatusWrapper",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

package/src/form/Button/index.mdx

@@ -8,10 +8,6 @@ title: Button
 Use the button component to help users carry out an action like starting an
 application or saving their information.
 
-```bash
-import Button from '@digigov/ui/form/Button';
-```
-
 ## How to use
 
 ### Default buttons
@@ -110,4 +106,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Button" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} />