@digigov/ui 2.0.0-a32ad9b2 → 2.0.0-a402a664

package/src/form/AutoComplete/__stories__/WithPlaceHolder.tsx

@@ -4,7 +4,7 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithPlaceHolder = () => (
+export const WithPlaceHolder = (_: any) => (
   <div>
     <FieldContainer>
       <AutoComplete

package/src/form/AutoComplete/__stories__/WithShowAllValues.tsx

@@ -4,7 +4,7 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import Button from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithShowAllValues = () => (
+export const WithShowAllValues = (_: any) => (
   <div>
     <FieldContainer>
       <AutoComplete source={suggest} autoselect={true} id="govgr" />

package/src/form/AutoComplete/doc.mdx

@@ -36,15 +36,16 @@ This is the minimum number of characters that should be entered before the AutoC
 
 ## API
 
-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"
-  ]} /> 
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'AutoCompleteWrapper',
+    'AutoCompleteStatus',
+    'AutoCompleteStatusWrapper',
+    'AutoCompleteInput',
+    'AutoCompleteResultList',
+    'AutoCompleteResultListItem',
+    'AutoCompleteAssistiveHint',
+  ]}
+/>{' '}

package/src/form/AutoComplete/index.test.tsx

@@ -7,7 +7,9 @@ import { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stor
 import { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
 import { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 import { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
+import { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
 import { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
+import { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
 import { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';
 import { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 import { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
@@ -34,9 +36,15 @@ test('renders the All AutoComplete variants', async ({ mount, page }) => {
     <TestVariant title="WithAutoSelect">
       <WithAutoSelect />
     </TestVariant>
+    <TestVariant title="WithCustomValue">
+      <WithCustomValue />
+    </TestVariant>
     <TestVariant title="WithDefaultValue">
       <WithDefaultValue />
     </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
     <TestVariant title="WithMinLength">
       <WithMinLength />
     </TestVariant>

package/src/form/AutoComplete/index.tsx

@@ -2,7 +2,6 @@ import React, { Component, type JSX } from 'react';
 import { AutoCompleteAssistiveHint } from '@digigov/react-core/AutoCompleteAssistiveHint';
 import { AutoCompleteContainer } from '@digigov/react-core/AutoCompleteContainer';
 import { AutoCompleteInputBase } from '@digigov/react-core/AutoCompleteInputBase';
-import { AutoCompleteInputTypeahead } from '@digigov/react-core/AutoCompleteInputTypeahead';
 import { AutoCompleteMultipleInput } from '@digigov/react-core/AutoCompleteMultipleInput';
 import { AutoCompleteMultipleInputContainer } from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import { AutoCompleteResultList } from '@digigov/react-core/AutoCompleteResultList';
@@ -36,6 +35,7 @@ export interface AutoCompleteProps {
   };
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
   autoselect?: boolean;
+  hint?: boolean;
   defaultValue?: string | string[];
   minLength?: number;
   name?: string;
@@ -70,6 +70,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     minLength: 0,
     name: 'ds-input-autocomplete',
     placeholder: '',
+    hint: false,
     onConfirm: (): void => {
       return;
     },
@@ -191,12 +192,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   handleComponentBlur(newState?: NewQueryProps): void {
     const { options, query, selected } = this.state;
-    let newQuery: string;
-    if (this.props.confirmOnBlur) {
-      newQuery = newState?.query || query;
-      this.props.onConfirm?.(options[selected as number]);
-    } else {
-      newQuery = query;
+    const { confirmOnBlur, autoselect, onConfirm } = this.props;
+    let newQuery = query;
+    if (confirmOnBlur || autoselect) {
+      newQuery = newState?.query ?? query;
+    }
+    if (confirmOnBlur) {
+      onConfirm?.(options[selected as number]);
     }
     this.setState({
       focused: null,
@@ -214,6 +216,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   }
 
   handleAutoCompleteBlur(event, index?: number): void {
+    const { autoselect } = this.props;
     const { focused, options, query, selected } = this.state;
     let focusingOutsideComponent = false;
     if (event.relatedTarget === null) {
@@ -235,7 +238,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       focusingOutsideComponent &&
       !(focusingAnotherOption || focusingInput || focusingButtonArrow);
 
-    if (blurComponent) {
+    if (blurComponent && !autoselect) {
       // In handleInputBlur:
       const newQuery = isIosDevice()
         ? query
@@ -245,11 +248,24 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         query: newQuery,
       });
     }
+    if (blurComponent && autoselect) {
+      // In handleInputBlur:
+      const selectedOption = this.templateInputValue(
+        options[selected as number]
+      );
+      const newQuery = isIosDevice()
+        ? query
+        : selectedOption?.toLowerCase().includes(query.toLowerCase())
+          ? selectedOption
+          : query;
+      this.handleComponentBlur({
+        menuOpen: false,
+        query: newQuery,
+      });
+    }
   }
-
   handleInputChange(event: { target: any }): void {
     const { source, minLength } = this.props;
-    const autoselect = this.hasAutoselect();
     const query = event.target.value;
     const queryEmpty = query.length === 0;
     this.setState({
@@ -263,7 +279,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       this.setState({
         menuOpen: optionsAvailable,
         options,
-        selected: autoselect && optionsAvailable ? 0 : -1,
+        selected: -1,
         validChoiceMade: false,
       });
     });
@@ -315,6 +331,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         hovered: index,
       });
     }
+    this.handleOptionFocus(index);
   }
 
   handleOptionClickMultiple(index: number): void {
@@ -467,11 +484,13 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       case 'enter':
         this.handleEnter(event);
         break;
-      case 'escape':
+      case 'escape': {
         this.handleComponentBlur({
           query: this.state.query,
+          menuOpen: false,
         });
         break;
+      }
       case 'backspace':
         if (this.props.multiple) {
           if (
@@ -507,7 +526,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         break;
     }
   }
-
   render(): JSX.Element {
     const {
       id,
@@ -516,6 +534,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       name,
       placeholder,
       required,
+      hint,
       tNoResults,
       tStatusQueryTooShort,
       tStatusNoResults,
@@ -550,7 +569,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       selectedOptionText &&
       selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0;
     const hintValue =
-      optionBeginsWithQuery && autoselect
+      optionBeginsWithQuery && (autoselect || hint)
         ? query + selectedOptionText.substr(query.length)
         : '';
 
@@ -646,12 +665,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           tSelectedOption={tStatusSelectedOption}
           tResults={tStatusResults}
         />
-
-        {hintValue && (placeholder === '' || !placeholder) && (
-          <AutoCompleteInputTypeahead value={hintValue} />
-        )}
-
-        {multiple ? (
+        {multiple && !autoselect ? (
           <AutoCompleteMultipleInputContainer
             isFocused={componentIsFocused}
             numberOfSelected={this.props.numberOfSelected}
@@ -711,7 +725,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -732,7 +746,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                     this.setState({
                       menuOpen: optionsAvailable,
                       options,
-                      selected: autoselect && optionsAvailable ? 0 : -1,
+                      selected: -1,
                       validChoiceMade: false,
                     });
                   });
@@ -787,7 +801,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               onChange={this.handleInputChange}
               onFocus={this.handleInputFocus}
               name={name}
-              placeholder={placeholder}
+              placeholder={hintValue || placeholder}
               ref={(inputElement) => {
                 this.elementReferences[-1] = inputElement;
               }}
@@ -823,7 +837,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 export {
   AutoComplete,
   AutoCompleteInputBase,
-  AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,
   AutoCompleteContainer,

package/src/form/Button/Button.stories.js

@@ -1,4 +1,5 @@
 import { Button } from '@digigov/ui/form/Button';
+import doc from './doc.mdx?raw';
 
 export default {
   displayName: 'Button',
@@ -6,6 +7,8 @@ export default {
   description: 'Use the button component to help users carry out an action',
   link: 'https://guide.services.gov.gr/docs/components/button',
   component: Button,
+  tags: ['autodocs'],
+  markdown: doc,
 };
 
 export const WithControls = {

package/src/form/Button/__stories__/Back.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import BackLink from '@digigov/ui/navigation/BackLink';
 
-export const Back = () => (
+export const Back = (_: any) => (
   <BackLink href="#" role="button" aria-label="Πίσω στην προηγούμενη σελίδα">
     Πίσω
   </BackLink>

package/src/form/Button/__stories__/ButtonLinkButton.tsx

@@ -4,7 +4,7 @@ import { ButtonLink } from '@digigov/ui/form/Button/ButtonLink';
 /**
  * My primary descrition is the best description that was described
  */
-export const ButtonLinkButton = () => (
+export const ButtonLinkButton = (_: any) => (
   <ButtonLink
     href="#"
     role="button"

package/src/form/Button/__stories__/CallToActionButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 
-export const CallToActionButton = () => (
+export const CallToActionButton = (_: any) => (
   <CallToAction
     href="#"
     role="button"

package/src/form/Button/__stories__/Dense.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '@digigov/ui/form/Button';
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <Button dense aria-label="Προβολή αρχείου">
     Προβολή αρχείου
   </Button>

package/src/form/Button/__stories__/Disabled.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Disabled = () => (
+export const Disabled = (_: any) => (
   <Button disabled role="button" aria-label="Αποθήκευση αρχείου">
     Αποθήκευση
   </Button>

package/src/form/Button/__stories__/GroupingButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
-export const GroupingButtons = () => (
+export const GroupingButtons = (_: any) => (
   <ButtonGroup>
     <Button>Οριστική υποβολή</Button>
     <Button color="secondary">Αποθήκευση</Button>

package/src/form/Button/__stories__/GroupingButtonsAndLinks.tsx

@@ -4,7 +4,7 @@ import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
 import { Link } from '@digigov/ui/navigation/Link';
 
-export const GroupingButtonsAndLinks = () => (
+export const GroupingButtonsAndLinks = (_: any) => (
   <ButtonGroup>
     <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
     <Link>Ακύρωση</Link>

package/src/form/Button/__stories__/Secondary.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Secondary = () => (
+export const Secondary = (_: any) => (
   <Button color="secondary" aria-label="Συνεχίστε στην επόμενη σελίδα">
     Συνέχεια
   </Button>

package/src/form/Button/__stories__/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ThemeToggleButton } from '@digigov/ui/form/Button/ThemeToggleButton';
 
-export const ThemeToggle = () => <ThemeToggleButton />;
+export const ThemeToggle = (_: any) => <ThemeToggleButton />;
 export default ThemeToggle;

package/src/form/Button/__stories__/Warning.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Warning = () => {
+export const Warning = (_: any) => {
   return (
     <Button color="warning" aria-label="Διαγραφή αρχείου">
       Διαγραφή

package/src/form/Button/__stories__/WithVariantLink.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Button } from '@digigov/ui/form/Button';
 
-export const WithVariantLink = () => (
+export const WithVariantLink = (_: any) => (
   <Button
     onClick={() => {
       console.log('clicked');

package/src/form/Checkbox/Checkbox.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import doc from './doc.mdx?raw';
 import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
 
 import {
@@ -16,6 +17,8 @@ export default {
     'Let users select one or more options by using the checkboxes component.',
   link: 'https://guide.services.gov.gr/docs/components/checkboxes',
   component: Checkbox,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Checkbox',
 };
 export const WithControls = {

package/src/form/Checkbox/__stories__/ConditionalReveal.tsx

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const ConditionalReveal = () => (
+export const ConditionalReveal = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="contact-hint">
       <FieldsetLegend>Πως θέλετε να επικοινωνήσουμε μαζί σας;</FieldsetLegend>

package/src/form/Checkbox/__stories__/Default.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>

package/src/form/Checkbox/__stories__/Dense.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>

package/src/form/Checkbox/__stories__/Inline.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Inline = () => (
+export const Inline = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>

package/src/form/Checkbox/__stories__/InlineWithDivider.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const InlineWithDivider = () => (
+export const InlineWithDivider = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>

package/src/form/Checkbox/__stories__/MultipleQuestions.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const MultipleQuestions = () => (
+export const MultipleQuestions = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="feeling-hint">
       <FieldsetLegend size="sm">Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>

package/src/form/Checkbox/__stories__/NoneAnswer.tsx

@@ -6,7 +6,7 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 
-export const NoneAnswer = () => (
+export const NoneAnswer = (_: any) => (
   <FieldContainer>
     <Fieldset>
       <FieldsetLegend>

package/src/form/Checkbox/__stories__/NoneAnswerWithError.tsx

@@ -8,7 +8,7 @@ import {
 } from '@digigov/ui/form/FieldContainer';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const NoneAnswerWithError = () => (
+export const NoneAnswerWithError = (_: any) => (
   <FieldContainer error>
     <Fieldset>
       <FieldsetLegend>

package/src/form/Checkbox/__stories__/WithErrorMessage.tsx

@@ -12,7 +12,7 @@ import {
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const WithErrorMessage = () => (
+export const WithErrorMessage = (_: any) => (
   <FieldContainer error>
     <Fieldset aria-describedby="country-hint country-error">
       <FieldsetLegend>

package/src/form/Checkbox/__stories__/WithHint.tsx

@@ -10,7 +10,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const WithHint = () => (
+export const WithHint = (_: any) => (
   <FieldContainer>
     <Fieldset aria-describedby="nationality-hint">
       <FieldsetLegend>Ποιά είναι η υπηκοότητα σας;</FieldsetLegend>

package/src/form/DateInputContainer/DateInputContainer.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import doc from './doc.mdx?raw';
 import {
   DateInputContainer,
   DateInputItem,
@@ -18,6 +19,8 @@ export default {
     'Use the date input component to help users enter a memorable date or one they can easily look up.',
   link: 'https://guide.services.gov.gr/docs/components/date-input',
   component: DateInputContainer,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'DateInputContainer',
 };
 

package/src/form/DateInputContainer/__stories__/Default.tsx

@@ -13,7 +13,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FieldContainer>
     <Fieldset>
       <FieldsetLegend heading>Πότε εκδόθηκε το διαβατήριό σας;</FieldsetLegend>

package/src/form/DateInputContainer/__stories__/Dense.tsx

@@ -10,7 +10,7 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 
-export const Dense = () => (
+export const Dense = (_: any) => (
   <FieldContainer aria-describedby="passport-hint">
     <Fieldset>
       <FieldsetLegend size="md">

package/src/form/DateInputContainer/__stories__/MultipleQuestions.tsx

@@ -13,7 +13,7 @@ import {
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const MultipleQuestions = () => (
+export const MultipleQuestions = (_: any) => (
   <FieldContainer aria-describedby="passport-hint">
     <Fieldset>
       <FieldsetLegend size="sm">

package/src/form/DateInputContainer/__stories__/WithErrorMessage.tsx

@@ -15,7 +15,7 @@ import {
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const WithErrorMessage = () => (
+export const WithErrorMessage = (_: any) => (
   <FieldContainer error aria-describedby="passport-hint">
     <Fieldset>
       <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο;</FieldsetLegend>

package/src/form/DateInputContainer/__stories__/WithErrorMessageForSingleField.tsx

@@ -15,7 +15,7 @@ import {
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const WithErrorMessageForSingleField = () => (
+export const WithErrorMessageForSingleField = (_: any) => (
   <FieldContainer error>
     <Fieldset aria-describedby="passport-hint">
       <FieldsetLegend>Πότε εκδόθηκε το διαβατήριο;</FieldsetLegend>

package/src/form/ErrorMessage/ErrorMessage.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import doc from './doc.mdx?raw';
 import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -8,6 +9,8 @@ export default {
     'Show an error message next to the field and in the error summary when there is a validation error.',
   link: 'https://guide.services.gov.gr/docs/components/error-message',
   component: ErrorMessage,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'ErrorMessage',
 };
 

package/src/form/ErrorMessage/__stories__/DateInputError.tsx

@@ -12,7 +12,7 @@ import {
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const DateInputError = () => (
+export const DateInputError = (_: any) => (
   <FieldContainer error id="passport-date">
     <Fieldset>
       <FieldsetLegend>Ποιά είναι η ημερομηνία γέννησής σας;</FieldsetLegend>

package/src/form/ErrorMessage/__stories__/Default.tsx

@@ -12,7 +12,7 @@ import {
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FieldContainer error>
     <Fieldset aria-describedby="country-hint">
       <FieldsetLegend>Ποιά είναι η εθνικότητα σας;</FieldsetLegend>

package/src/form/ErrorMessage/__stories__/ErrorMessageOnly.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-export const ErrorMessageOnly = () => (
+export const ErrorMessageOnly = (_: any) => (
   <ErrorMessage id="birth-date-error">
     <VisuallyHidden>Λάθος:</VisuallyHidden>Η ημερομηνία γέννησης πρέπει να είναι
     στο παρελθόν.

package/src/form/FileUpload/FileUpload.stories.js

@@ -1,9 +1,13 @@
 import FileUpload from '@digigov/ui/form/FileUpload';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/form/FileUpload',
   link: 'https://guide.services.gov.gr/docs/components/file-upload',
   component: FileUpload,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'FileUpload',
 };
 export { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';
 export { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+export { WithVariantLink } from '@digigov/ui/form/FileUpload/__stories__/WithVariantLink';

package/src/form/FileUpload/__stories__/Default.tsx

@@ -9,7 +9,7 @@ import {
 import { FileUpload } from '@digigov/ui/form/FileUpload';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FieldContainer>
     <Fieldset>
       <FieldsetLegend size="md">Λογότυπο επιχείρησης</FieldsetLegend>