@digigov/ui 2.0.0-d0adc9fb → 2.0.0-d2ffc726

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>
@@ -50,6 +58,10 @@ test('renders the All AutoComplete variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/form/AutoComplete/index.tsx

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+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/AutoComplete/interaction.test.tsx

@@ -6,6 +6,10 @@ import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
 test('renders the Multiple show chip', async ({ mount, page }) => {
   await mount(<Multiple />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page
     .locator('#root>div>div>fieldset>div>div:nth-child(2)>button')
     .click();

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

@@ -1,11 +1,54 @@
-import Button from '@digigov/ui/form/Button';
+import { Button } from '@digigov/ui/form/Button';
+import doc from './doc.mdx?raw';
 
 export default {
+  displayName: 'Button',
   title: 'Digigov UI/form/Button',
   description: 'Use the button component to help users carry out an action',
   link: 'https://guide.services.gov.gr/docs/components/button',
   component: Button,
-  displayName: 'Button',
+  tags: ['autodocs'],
+  markdown: doc,
+};
+
+export const WithControls = {
+  args: {
+    variant: 'button',
+    color: 'primary',
+    children: 'Συνέχεια',
+    dense: false,
+    printHidden: true,
+    'aria-label': 'Συνεχίστε στην επόμενη σελίδα',
+  },
+  argTypes: {
+    variant: {
+      options: ['button', 'link'],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: ['primary', 'secondary', 'warning'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'button' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+      if: { arg: 'variant', eq: 'button' },
+    },
+    printHidden: {
+      control: { type: 'boolean' },
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    'aria-label': {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: ['ref'],
+    },
+  },
 };
 
 export { Primary } from '@digigov/ui/form/Button/__stories__/Primary';

package/src/form/Button/ButtonLink.tsx

@@ -1,4 +1,20 @@
-import ButtonLink from '@digigov/react-core/ButtonLink';
+export * from '@digigov/react-core/ButtonLinkBase';
+import React from 'react';
+import {
+  ButtonLinkBase,
+  ButtonLinkBaseProps,
+} from '@digigov/react-core/ButtonLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
 
-export * from '@digigov/react-core/ButtonLink';
+export interface ButtonLinkProps extends ButtonLinkBaseProps {}
+
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function ButtonLink({ children, ...props }, ref) {
+    return (
+      <ButtonLinkBase as={Link} ref={ref} {...props}>
+        {children}
+      </ButtonLinkBase>
+    );
+  }
+);
 export default ButtonLink;

package/src/form/Button/CallToAction.tsx

@@ -1,4 +1,22 @@
-import CallToAction from '@digigov/react-core/CallToAction';
+export * from '@digigov/react-core/CallToActionBase';
+import React from 'react';
+import {
+  CallToActionBase,
+  CallToActionBaseProps,
+} from '@digigov/react-core/CallToActionBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface CallToActionProps extends CallToActionBaseProps {}
+
+export const CallToAction = React.forwardRef<
+  HTMLAnchorElement,
+  CallToActionProps
+>(function CallToAction({ children, ...props }, ref) {
+  return (
+    <CallToActionBase as={Link} ref={ref} {...props}>
+      {children}
+    </CallToActionBase>
+  );
+});
 
-export * from '@digigov/react-core/CallToAction';
 export default CallToAction;

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__/Primary.tsx

@@ -2,7 +2,29 @@ import React from 'react';
 
 import { Button } from '@digigov/ui/form/Button';
 
-export const Primary = () => (
-  <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
+export const Primary = ({
+  variant = 'button',
+  color = 'primary',
+  children = 'Συνέχεια',
+  dense = false,
+  printHidden = true,
+  'aria-label': ariaLabel = 'Συνεχίστε στην επόμενη σελίδα',
+}: {
+  variant?: 'button' | 'link';
+  color?: 'primary' | 'secondary' | 'warning';
+  children?: React.ReactNode;
+  dense?: boolean;
+  printHidden?: boolean;
+  'aria-label'?: string;
+}) => (
+  <Button
+    variant={variant}
+    color={color}
+    dense={dense}
+    printHidden={printHidden}
+    aria-label={ariaLabel}
+  >
+    {children}
+  </Button>
 );
 export default Primary;

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/Button/doc.mdx

@@ -10,36 +10,47 @@ application or saving their information.
 
 ## How to use
 
-### Default buttons
 
 Use a default button for the main call to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
 
-### Start buttons
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+### Start button - Call To Action
 
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
 
 <code src="@digigov/ui/form/Button/__stories__/CallToActionButton.tsx" />
 
-### Secondary buttons
+### Secondary color
 
 Use secondary buttons for secondary calls to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
 
-### Warning buttons
+### Warning color
 
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
 
 <code src="@digigov/ui/form/Button/__stories__/Warning.tsx" />
 
-### Disable buttons
+### Link variant
+
+<code src="@digigov/ui/form/Button/__stories__/WithVariantLink.tsx" />
+
+### Disabled
 
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
 
 <code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
 
+### Dense 
+
+<code src="@digigov/ui/form/Button/__stories__/Dense.tsx" />
+
 ### Grouping buttons
 
 Use a button group when two or more buttons are placed together.
@@ -71,15 +82,17 @@ For example, `Add another address` and `Accept and claim a tax refund`.
 
 Align the primary action button to the left edge of your form.
 
-## Default buttons
+## More buttons
 
-Use a default button for the main call to action on a page.
+### Back link button
 
-<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Back.tsx" />
+
+
+### Theme toggle button
+
+<code src="@digigov/ui/form/Button/__stories__/ThemeToggle.tsx" />
 
-Avoid using multiple default buttons on a single page. Having more than on main
-call to action reduces their impact, and makes it harder for users to know what
-to do next.
 
 ## Accessibility
 
@@ -88,9 +101,7 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-Read more about [how to use the React types](/docs/api/Button).
-
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
 <ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 
 

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

@@ -58,6 +58,10 @@ test('renders the All Button variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/form/Button/interaction.test.tsx

@@ -13,6 +13,10 @@ test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({
 }) => {
   await mount(<GroupingButtonsAndLinks />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.keyboard.press('Tab');
   await page.keyboard.press('Tab');
 
@@ -26,6 +30,10 @@ test('renders the GroupingButtonsAndLinks Keyboard navigation', async ({
 test('renders the Primary Hover and click', async ({ mount, page }) => {
   await mount(<Primary />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>button').hover();
   await page.locator('#root>button').click();
 
@@ -39,6 +47,10 @@ test('renders the Primary Hover and click', async ({ mount, page }) => {
 test('renders the Secondary Hover and click', async ({ mount, page }) => {
   await mount(<Secondary />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>button').hover();
   await page.locator('#root>button').click();
 
@@ -52,6 +64,10 @@ test('renders the Secondary Hover and click', async ({ mount, page }) => {
 test('renders the ThemeToggle change theme', async ({ mount, page }) => {
   await mount(<ThemeToggle />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -63,6 +79,10 @@ test('renders the ThemeToggle change theme', async ({ mount, page }) => {
 test('renders the Warning Hover and click', async ({ mount, page }) => {
   await mount(<Warning />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>button').hover();
   await page.locator('#root>button').click();