agroptima-design-system 0.30.4-beta.0 → 0.30.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.30.4-beta.0",
+  "version": "0.30.4-beta.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Card/Card.tsx

@@ -1,18 +1,17 @@
 import './Card.scss'
-import Link from 'next/link'
+import Link, { type LinkProps } from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 
-export interface CardProps {
+export interface CardProps extends LinkProps {
   visible?: boolean
   className?: string
   variant?: Variant
   isDisabled?: boolean
   isActive?: boolean
   error?: boolean
-  href?: string
   onClick?: () => void
   role?: string
   children: React.ReactNode
@@ -25,6 +24,7 @@ export function Card({
   isDisabled = false,
   isActive = false,
   error = false,
+  prefetch = false,
   children,
   href,
   ...props
@@ -40,7 +40,7 @@ export function Card({
 
   if (href && !isDisabled) {
     return (
-      <Link href={href} className={cssClasses} {...props}>
+      <Link href={href} className={cssClasses} prefetch={prefetch} {...props}>
         {children}
       </Link>
     )

package/src/atoms/Menu/MenuLink.tsx

@@ -1,19 +1,19 @@
 import './Menu.scss'
-import Link from 'next/link'
-import React from 'react'
+import Link, { type LinkProps } from 'next/link'
+import React, { type AnchorHTMLAttributes } from 'react'
 import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 
-export interface MenuLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
+
+export interface MenuLinkProps extends AnchorProps {
   title: string
   variant?: Variant
   icon?: IconType
   isActive?: boolean
-  href: string
 }
 
 export function MenuLink({
@@ -22,7 +22,7 @@ export function MenuLink({
   className,
   icon,
   title,
-  href,
+  prefetch = false,
   ...props
 }: MenuLinkProps): React.JSX.Element {
   const cssClasses = classNames('menu-item', variant, className, {
@@ -31,7 +31,7 @@ export function MenuLink({
 
   return (
     <li tabIndex={0} role="menuitem">
-      <Link href={href} {...props} className={cssClasses}>
+      <Link {...props} prefetch={prefetch} className={cssClasses}>
         {icon && <Icon name={icon} size="3" />}
         <span className="title">{title}</span>
       </Link>

package/src/atoms/Multiselect.tsx

@@ -161,7 +161,6 @@ function OptionList({
     <div className="select-options">
       {isSearchable && (
         <Input
-          autoFocus
           label={searchLabel}
           hideLabel
           onChange={(e) => search(e.target.value)}

package/src/atoms/Pagination/PaginationArrow.tsx

@@ -1,4 +1,5 @@
 import './Pagination.scss'
+import type { LinkProps } from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
 import type { IconButtonProps } from '../Button'
@@ -6,7 +7,7 @@ import { IconButton } from '../Button'
 
 export type Variant = 'primary'
 
-export interface CustomProps {
+export interface CustomProps extends LinkProps {
   href: string
   accessibilityLabel?: string
   variant?: Variant
@@ -20,6 +21,7 @@ export function PaginationArrow({
   href,
   className,
   disabled,
+  prefetch = false,
   ...props
 }: PaginationArrowProps): React.JSX.Element {
   const cssClasses = classNames('pagination-button', variant, className, {
@@ -32,6 +34,7 @@ export function PaginationArrow({
       href={disabled ? '#' : href}
       className={cssClasses}
       accessibilityLabel={accessibilityLabel}
+      prefetch={prefetch}
       {...props}
     />
   )

package/src/atoms/Popover/PopoverMenuOption.tsx

@@ -1,11 +1,12 @@
 import './Popover.scss'
 import type { LinkProps as NextLinkProps } from 'next/link'
 import Link from 'next/link'
+import React, { type AnchorHTMLAttributes } from 'react'
 import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 
-type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+type LinkProps = NextLinkProps & AnchorHTMLAttributes<HTMLAnchorElement>
 export interface PopoverMenuOptionProps extends LinkProps {
   variant?: Variant
   title: string
@@ -21,6 +22,7 @@ export function PopoverMenuOption({
   disabled,
   href,
   active,
+  prefetch = false,
   ...props
 }: PopoverMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('popover-menu-option', variant, className, {
@@ -34,6 +36,7 @@ export function PopoverMenuOption({
       className={cssClasses}
       href={disabled ? '#' : href}
       aria-disabled={disabled}
+      prefetch={prefetch}
       {...props}
     >
       <span className="title">{title}</span>

package/src/atoms/QuantitySelector.tsx

@@ -60,7 +60,6 @@ export function QuantitySelector({
           className="decrement-button"
           disabled={disabled}
           onClick={handleDecrement}
-          tabIndex={-1}
         />
         <Input
           id={id}
@@ -80,7 +79,6 @@ export function QuantitySelector({
           className="increment-button"
           disabled={disabled}
           onClick={handleIncrement}
-          tabIndex={-1}
         />
       </div>
     </div>

package/src/atoms/Select.tsx

@@ -164,7 +164,6 @@ function OptionList({
     <div className="select-options">
       {isSearchable && (
         <Input
-          autoFocus
           label={searchLabel}
           hideLabel
           onChange={(e) => search(e.target.value)}

package/src/stories/QuantitySelector.stories.ts

@@ -8,9 +8,7 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2>' +
-          '<p>Quantity Selector component is similar to text inputs, but is used to specify only a numeric value. Quantity Selector incrementally increases or decreases the value with a two-segment control.</p>' +
-          '<p>When using keyboard controls, increment and decrement buttons are ignored so the user is taken to the quantity input.</p>',
+          '<h2>Usage guidelines</h2><p>Quantity Selector component is similar to text inputs, but is used to specify only a numeric value. Quantity Selector incrementally increase or decrease the value with a two-segment control.</p>',
       },
     },
   },