@digigov/ui 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/src/feedback/PhaseBanner/__stories__/Underlined.tsx

@@ -8,7 +8,7 @@ import {
 
 import { Link } from '@digigov/ui/navigation/Link';
 
-export const Underlined = (_: any) => (
+export const Underlined = () => (
   <PhaseBanner underline>
     <PhaseBannerTag>ALPHA</PhaseBannerTag>
     <PhaseBannerText>

package/src/feedback/WarningText/WarningText.stories.js

@@ -1,13 +1,10 @@
 import WarningText from '@digigov/ui/feedback/WarningText';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/feedback/WarningText',
   description:
     'Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.',
   link: 'https://guide.services.gov.gr/docs/components/Warning-Text',
   component: WarningText,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'WarningText',
 };
 

package/src/feedback/WarningText/__snapshots__/index.spec.tsx.snap

@@ -1,17 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the WarningText with sample data 1`] = `
-Object {
-  "$$typeof": Symbol(react.transitional.element),
-  "_owner": null,
-  "_store": Object {},
-  "key": null,
-  "props": Object {
-    "children": "this is some random warning text",
-  },
-  "type": Object {
-    "$$typeof": Symbol(react.forward_ref),
-    "render": [Function],
-  },
-}
+<ForwardRef(WarningText2)>
+  this is some random warning text
+</ForwardRef(WarningText2)>
 `;

package/src/feedback/WarningText/__stories__/AssistiveText.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WarningText } from '@digigov/ui/feedback/WarningText';
 
-export const AssistiveText = (_: any) => (
+export const AssistiveText = () => (
   <WarningText assistiveText="Σημαντικό">
     Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
   </WarningText>

package/src/feedback/WarningText/__stories__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WarningText } from '@digigov/ui/feedback/WarningText';
 
-export const Default = (_: any) => (
+export const Default = () => (
   <WarningText>
     Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
   </WarningText>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WarningText } from '@digigov/ui/feedback/WarningText';
 
-export const Dense = (_: any) => (
+export const Dense = () => (
   <WarningText dense>
     Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
   </WarningText>

package/src/form/AutoComplete/AutoComplete.stories.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import doc from './doc.mdx?raw';
 import AutoComplete from '@digigov/ui/form/AutoComplete';
 import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 
 export default {
   title: 'Digigov UI/form/AutoComplete',
   component: AutoComplete,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'AutoComplete',
 };
 
@@ -15,14 +12,11 @@ export const WithControls = {
   render: (args) => {
     return (
       <AutoComplete
-        defaultValue={args.defaultValue}
         key={args.multiple ? 'multiple' : 'single'}
         id={args.id}
         width={args.width}
         multiple={args.multiple}
         autoselect={args.autoselect}
-        placeholder={args.placeholder}
-        hint={args.hint}
         minLength={args.minLength}
         source={suggest}
       />
@@ -31,10 +25,8 @@ export const WithControls = {
   args: {
     width: 'full',
     id: 'autocomplete-id',
-    autoselect: false,
     multiple: false,
-    hint: false,
-    placeholder: '',
+    autoselect: false,
     minLength: 2,
     numberOfSelected: 2,
     defaultValue: '',
@@ -49,21 +41,12 @@ export const WithControls = {
     id: {
       control: { type: 'text' },
     },
-    autoselect: {
-      control: { type: 'boolean' },
-      if: { arg: 'multiple', eq: false },
-    },
     multiple: {
       control: { type: 'boolean' },
-      if: { arg: 'autoselect', eq: false },
     },
-    hint: {
+    autoselect: {
       control: { type: 'boolean' },
     },
-    placeholder: {
-      control: { type: 'text' },
-      if: { arg: 'hint', eq: false },
-    },
     minLength: {
       control: { type: 'number' },
     },
@@ -72,7 +55,7 @@ export const WithControls = {
       if: { arg: 'multiple', eq: true },
     },
     defaultValue: {
-      control: { type: 'text' },
+      control: { type: 'string' },
     },
   },
   parameters: {
@@ -86,6 +69,7 @@ export const WithControls = {
         'tAssistiveHint',
         'templates',
         'name',
+        'placeholder',
         'onConfirm',
         'confirmOnBlur',
         'required',
@@ -102,8 +86,6 @@ export { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stor
 export { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
 export { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
 export { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
-export { WithCustomValue } from '@digigov/ui/form/AutoComplete/__stories__/WithCustomValue';
-export { WithHint } from '@digigov/ui/form/AutoComplete/__stories__/WithHint';
 export { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
 export { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
 export { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';

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

@@ -1,4 +1,4 @@
-import React, { Component, type JSX } from 'react';
+import React, { Component } from 'react';
 import AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
 import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 

package/src/form/AutoComplete/__stories__/Default.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 Default = (_: any) => (
+export const Default = () => (
   <div>
     <FieldContainer>
       <AutoComplete source={suggest} width="33.3%" id="govgr" />

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

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

package/src/form/AutoComplete/__stories__/MultipleShowingTwoSelected.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 MultipleShowingTwoSelected = (_: any) => (
+export const MultipleShowingTwoSelected = () => (
   <div>
     <FieldContainer>
       <AutoComplete

package/src/form/AutoComplete/__stories__/MultipleWithDefaultValues.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 MultipleWithDefaultValues = (_: any) => (
+export const MultipleWithDefaultValues = () => (
   <div>
     <FieldContainer>
       <AutoComplete

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

@@ -5,7 +5,7 @@ import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer, Fieldset } from '@digigov/ui/form/FieldContainer';
 import Paragraph from '@digigov/ui/typography/Paragraph';
 
-export const MultipleWithMinLength = (_: any) => (
+export const MultipleWithMinLength = () => (
   <div>
     <Paragraph>
       Εδώ, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να εισαχθεί ώστε να αρχίσει

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

@@ -4,10 +4,26 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithAutoSelect = (_: any) => (
+export const WithAutoSelect = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} autoselect={true} id="govgr" />
+      <AutoComplete
+        source={suggest}
+        autoselect={true}
+        id="govgr"
+        // tStatusResults={(x, y) => {
+        //   return `Results x: ${x} y: ${y}`;
+        // }}
+        templates={{
+          suggestion: (value) => {
+            return '--> ' + value;
+          },
+          inputValue: (value) => {
+            return value ? 'Χώρα: ' + value : '';
+          },
+        }}
+        tNoResults={() => 'Δεν υπάρχουν αποτελέσματα'}
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

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

@@ -4,10 +4,15 @@ import { suggest } from '@digigov/ui/form/AutoComplete/utils';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-export const WithDefaultValue = (_: any) => (
+export const WithDefaultValue = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} defaultValue="Γερμανία" id="govgr" />
+      <AutoComplete
+        source={suggest}
+        autoselect={true}
+        defaultValue="Γερμανία"
+        id="govgr"
+      />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

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

@@ -5,7 +5,7 @@ import Button from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-export const WithMinLength = (_: any) => (
+export const WithMinLength = () => (
   <div>
     <Paragraph>
       Σε αυτό το παράδειγμα, ο ελάχιστος αριθμός χαρακτήρων που πρέπει να

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 = (_: any) => (
+export const WithPlaceHolder = () => (
   <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 = (_: any) => (
+export const WithShowAllValues = () => (
   <div>
     <FieldContainer>
       <AutoComplete source={suggest} autoselect={true} id="govgr" />

package/src/form/AutoComplete/doc.mdx

@@ -36,16 +36,15 @@ 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',
-    '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",
+  "AutoCompleteInputTypeahead",
+  "AutoCompleteInput",
+  "AutoCompleteResultList",
+  "AutoCompleteResultListItem",
+  "AutoCompleteAssistiveHint"
+  ]} /> 

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

@@ -7,9 +7,7 @@ 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';
@@ -36,15 +34,9 @@ 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

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

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

@@ -1,5 +1,4 @@
 import { Button } from '@digigov/ui/form/Button';
-import doc from './doc.mdx?raw';
 
 export default {
   displayName: 'Button',
@@ -7,8 +6,6 @@ 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 = (_: any) => (
+export const Back = () => (
   <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 = (_: any) => (
+export const ButtonLinkButton = () => (
   <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 = (_: any) => (
+export const CallToActionButton = () => (
   <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 = (_: any) => (
+export const Dense = () => (
   <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 = (_: any) => (
+export const Disabled = () => (
   <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 = (_: any) => (
+export const GroupingButtons = () => (
   <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 = (_: any) => (
+export const GroupingButtonsAndLinks = () => (
   <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 = (_: any) => (
+export const Secondary = () => (
   <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 = (_: any) => <ThemeToggleButton />;
+export const ThemeToggle = () => <ThemeToggleButton />;
 export default ThemeToggle;