@digigov/ui 2.0.0-0edebf87 → 2.0.0-13876dba

package/src/form/AutoComplete/index.tsx

@@ -1,24 +1,23 @@
-import React from 'react';
-import { Component } from 'react';
-import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
-import AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
-import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
-import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
-import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
-import AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
-import AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
-
+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';
+import { AutoCompleteResultListItem } from '@digigov/react-core/AutoCompleteResultListItem';
+import { Base } from '@digigov/react-core/Base';
 import { CaretIcon } from '@digigov/react-icons/CaretIcon';
+import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
   isIosDevice,
   keyCodes,
   isPrintableKeyCode,
 } from '@digigov/ui/form/AutoComplete/utils';
-import Checkbox, { CheckboxItem } from '../Checkbox';
-import { Chip, ChipContainer } from '@digigov/ui/content/Chip';
 import Button from '@digigov/ui/form/Button';
+import Checkbox, { CheckboxItem } from '@digigov/ui/form/Checkbox';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export interface AutoCompleteProps {
@@ -47,7 +46,7 @@ export interface AutoCompleteProps {
   numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 
-export type State = {
+export interface State {
   focused: any;
   hovered: any;
   menuOpen: boolean;
@@ -57,9 +56,12 @@ export type State = {
   validChoiceMade: boolean;
   selected: any;
   ariaHint: boolean;
-};
+}
 
-export type NewQueryProps = { menuOpen?: boolean; query?: string };
+export interface NewQueryProps {
+  menuOpen?: boolean;
+  query?: string;
+}
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
@@ -136,7 +138,6 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
   componentDidMount(): void {
     this.getDirectInputChanges();
-
   }
 
   getDirectInputChanges(): void {
@@ -473,21 +474,32 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
         break;
       case 'backspace':
         if (this.props.multiple) {
-          if (this.state.query.length === 0 && this.state.selectedValues.length > 0) {
+          if (
+            this.state.query.length === 0 &&
+            this.state.selectedValues.length > 0
+          ) {
             event.preventDefault();
-            const updatedSelectedValues = this.state.selectedValues.slice(0, -1);
-            this.setState({
-              selectedValues: updatedSelectedValues,
-            }, () => {
-              this.props.onConfirm?.(updatedSelectedValues);
-            });
-            break;
+            const updatedSelectedValues = this.state.selectedValues.slice(
+              0,
+              -1
+            );
+            this.setState(
+              {
+                selectedValues: updatedSelectedValues,
+              },
+              () => {
+                this.props.onConfirm?.(updatedSelectedValues);
+              }
+            );
+          } else {
+            if (isPrintableKeyCode(event.keyCode)) {
+              this.handlePrintableKey(event);
+            }
           }
-        }
-        else {
+        } else {
           this.props.onConfirm?.('');
-          break;
         }
+        break;
       default:
         if (isPrintableKeyCode(event.keyCode)) {
           this.handlePrintableKey(event);
@@ -545,8 +557,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     const assistiveHintID = id + '__assistiveHint';
     const ariaDescribedProp = ariaHint
       ? {
-        'aria-describedby': assistiveHintID,
-      }
+          'aria-describedby': assistiveHintID,
+        }
       : null;
 
     const showAutoCompleteResultListItems = (
@@ -558,7 +570,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           const showFocused =
             focused === -1 ? selected === index : focused === index;
           const iosPosinsetHtml = isIosDevice() ? (
-            <span
+            <Base
+              as="span"
               id={`${id}__option-suffix--${index}`}
               style={{
                 border: '0',
@@ -574,7 +587,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               }}
             >
               {index + 1} από {options.length}
-            </span>
+            </Base>
           ) : (
             ''
           );
@@ -594,6 +607,8 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               }}
               role="option"
               tabIndex={-1}
+              // @ts-ignore
+              value={typeof option === 'object' ? option?.value : option}
               aria-posinset={index + 1}
               aria-setsize={options.length}
             >
@@ -601,7 +616,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                 <CheckboxItem
                   value={option}
                   checked={this.state.selectedValues.includes(option)}
-                  onChange={() => { }}
+                  onChange={() => {}}
                 >
                   {this.templateSuggestion(option)}
                 </CheckboxItem>
@@ -647,29 +662,32 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
                   <Chip
                     key={index}
                     onDelete={() => {
-                      this.setState(prevState => ({
-                        selectedValues: prevState.selectedValues.filter(
-                          (v) => {
-                            if (typeof v === "string") {
-                              return v !== value;
-                            } else {
-                              return v.value !== value.value;
+                      this.setState(
+                        (prevState) => ({
+                          selectedValues: prevState.selectedValues.filter(
+                            (v) => {
+                              if (typeof v === 'string') {
+                                return v !== value;
+                              } else {
+                                return v.value !== value.value;
+                              }
                             }
-                          }
-                        ),
-                      }), () => {
-                        this.props.onConfirm?.(this.state.selectedValues);
-                      });
+                          ),
+                        }),
+                        () => {
+                          this.props.onConfirm?.(this.state.selectedValues);
+                        }
+                      );
                     }}
                   >
-                    {typeof value === "string" ? value : value.label.primary}
+                    {typeof value === 'string' ? value : value.label.primary}
                   </Chip>
                 );
               })}
               {!componentIsFocused &&
                 typeof this.props.numberOfSelected === 'number' &&
                 this.state.selectedValues.length >
-                this.props.numberOfSelected && (
+                  this.props.numberOfSelected && (
                   <NormalText fontWeight="bold" margin={0}>
                     +
                     {this.state.selectedValues.length -
@@ -702,6 +720,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
               value={query}
             />
             <Button
+              id={`${id}__button-arrow`}
               ref={(buttonElement) => {
                 this.elementReferences['button-arrow'] = buttonElement;
               }}
@@ -752,7 +771,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
           </AutoCompleteMultipleInputContainer>
         ) : (
           <>
-            <AutoCompleteInput
+            <AutoCompleteInputBase
               aria-expanded={menuOpen ? 'true' : 'false'}
               aria-activedescendant={
                 optionFocused ? `${id}__option--${focused}` : ''
@@ -803,7 +822,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
 
 export {
   AutoComplete,
-  AutoCompleteInput,
+  AutoCompleteInputBase,
   AutoCompleteInputTypeahead,
   AutoCompleteResultList,
   AutoCompleteResultListItem,

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

@@ -4,15 +4,27 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
 
 test('renders the Multiple show chip', async ({ mount, page }) => {
-  await mount(
-    <Multiple />
-  )
+  await mount(<Multiple />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)").click();
- await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // 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();
+  await page
+    .locator(
+      '#root>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)'
+    )
+    .click();
+  await page
+    .locator('#root>div>div>fieldset>div>div:nth-child(2)>button')
+    .click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/AutoComplete/utils.ts

@@ -10,8 +10,8 @@ export function isIosDevice(): boolean | undefined {
   return (
     typeof navigator !== 'undefined' &&
     !!(
-      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
-      navigator.userAgent.match(/AppleWebKit/g)
+      navigator.userAgent?.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent?.match(/AppleWebKit/g)
     )
   );
 }

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

@@ -1,22 +1,65 @@
-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 * from '@digigov/ui/form/Button/__stories__/Primary';
-export * from '@digigov/ui/form/Button/__stories__/Secondary';
-export * from '@digigov/ui/form/Button/__stories__/Warning';
-export * from '@digigov/ui/form/Button/__stories__/GroupingButtons';
-export * from '@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks';
-export * from '@digigov/ui/form/Button/__stories__/CallToActionButton';
-export * from '@digigov/ui/form/Button/__stories__/Disabled';
-export * from '@digigov/ui/form/Button/__stories__/Dense';
-export * from '@digigov/ui/form/Button/__stories__/ButtonLinkButton';
-export * from '@digigov/ui/form/Button/__stories__/Back';
-export * from '@digigov/ui/form/Button/__stories__/WithVariantLink';
-export * from '@digigov/ui/form/Button/__stories__/ThemeToggle';
+export { Primary } from '@digigov/ui/form/Button/__stories__/Primary';
+export { Secondary } from '@digigov/ui/form/Button/__stories__/Secondary';
+export { Warning } from '@digigov/ui/form/Button/__stories__/Warning';
+export { GroupingButtons } from '@digigov/ui/form/Button/__stories__/GroupingButtons';
+export { GroupingButtonsAndLinks } from '@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks';
+export { CallToActionButton } from '@digigov/ui/form/Button/__stories__/CallToActionButton';
+export { Disabled } from '@digigov/ui/form/Button/__stories__/Disabled';
+export { Dense } from '@digigov/ui/form/Button/__stories__/Dense';
+export { ButtonLinkButton } from '@digigov/ui/form/Button/__stories__/ButtonLinkButton';
+export { Back } from '@digigov/ui/form/Button/__stories__/Back';
+export { WithVariantLink } from '@digigov/ui/form/Button/__stories__/WithVariantLink';
+export { ThemeToggle } from '@digigov/ui/form/Button/__stories__/ThemeToggle';

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/__snapshots__/index.spec.tsx.snap

@@ -1,17 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the button 1`] = `
-<ForwardRef(Button)>
-  <ForwardRef(Base)
-    as="button"
-    className="ds-btn-primary ds-btn"
-    printHidden={true}
-  >
+<body>
+  <div>
     <button
-      className="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
-  </ForwardRef(Base)>
-</ForwardRef(Button)>
+  </div>
+</body>
 `;

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__/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

@@ -0,0 +1,96 @@
+---
+id: button
+title: Button
+---
+
+# Button
+
+Use the button component to help users carry out an action like starting an
+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
+
+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
+
+Use secondary buttons for secondary calls to action on a page.
+
+<code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
+
+### Warning buttons
+
+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
+
+Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
+
+<code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
+
+### Grouping buttons
+
+Use a button group when two or more buttons are placed together.
+
+<code src="@digigov/ui/form/Button/__stories__/GroupingButtons.tsx" />
+
+Any links within a button group will automatically align with the buttons.
+
+<code src="@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks.tsx" />
+
+Write button text in sentence case, describing the action it performs. For
+example:
+
+- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
+- `Sign in` to an account a user has already created
+- `Continue` when the service does not save a user's information
+- `Save and continue` when the service does save a user's information
+- `Save and come back later` when a user can save their information and come back later
+- `Add another` to add another item to a list or group
+- `Pay` to make a payment
+- `Confirm and send` on a check answers page that does not have any legal
+  content a user must agree to
+- `Accept and send` on a check answers page that has legal content a user
+  must agree to
+- `Sign out` when a user is signed in to an account
+
+You may need to include more or different words to better describe the action.
+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
+
+Use a default button for the main call to action on a page.
+
+<code src="@digigov/ui/form/Button/__stories__/Primary.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
+
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
+
+## 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.
+
+<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 
+