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

package/package.json

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

package/src/atoms/Button/BaseButton.tsx

@@ -1,13 +1,14 @@
-import NextLink from 'next/link'
+import NextLink, { type LinkProps } from 'next/link'
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react'
 
 interface CommonProps {
   disabled?: boolean
   visible?: boolean
 }
 
-type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
 
-type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
 
 export type BaseButtonProps =
   | (HtmlButtonProps & CommonProps)
@@ -24,8 +25,9 @@ export function BaseButton({
   if (!visible) return null
   const isLink = !props.disabled && hasHref(props)
   if (isLink) {
+    const { href, prefetch = false, ...restProps } = props
     return (
-      <NextLink href={props.href || ''} {...props}>
+      <NextLink href={href} {...restProps} prefetch={prefetch}>
         {children}
       </NextLink>
     )

package/src/atoms/Card/Card.tsx

@@ -1,21 +1,21 @@
 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 Omit<LinkProps, 'href'> {
   visible?: boolean
   className?: string
   variant?: Variant
   isDisabled?: boolean
   isActive?: boolean
   error?: boolean
-  href?: string
   onClick?: () => void
   role?: string
   children: React.ReactNode
+  href?: string
 }
 
 export function Card({
@@ -25,6 +25,7 @@ export function Card({
   isDisabled = false,
   isActive = false,
   error = false,
+  prefetch = false,
   children,
   href,
   ...props
@@ -40,7 +41,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/CardsTable/CardsTable.scss

@@ -174,7 +174,7 @@
       }
     }
 
-    &.with-title td:not(.actions):has(.cell .badge) {
+    &.with-title td:not(.actions):nth-child(2) {
       margin-top: config.$space-2x;
     }
 

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/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/Pagination/PaginationNumber.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 { ButtonProps } from '../Button'
@@ -14,7 +15,7 @@ export interface CustomProps {
   variant?: Variant
 }
 
-export type PaginationNumberProps = CustomProps & ButtonProps
+export type PaginationNumberProps = CustomProps & ButtonProps & LinkProps
 
 export function PaginationNumber({
   label,
@@ -24,6 +25,7 @@ export function PaginationNumber({
   className,
   disabled,
   selected = false,
+  prefetch = false,
   ...props
 }: PaginationNumberProps): React.JSX.Element {
   const cssClasses = classNames('pagination-button', variant, className, {
@@ -38,6 +40,7 @@ export function PaginationNumber({
       href={disabled ? '#' : href}
       className={cssClasses}
       aria-current={selected}
+      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/generic/_helpers.scss

@@ -62,3 +62,7 @@
   white-space: nowrap;
   width: 1px;
 }
+
+.absolute {
+  position: absolute;
+}

package/src/stories/Changelog.mdx

@@ -6,7 +6,7 @@ import { Meta } from "@storybook/blocks";
 
 ## 0.31.1
 
-* Add `margin-top` to all cells containing Badges on mobile on CardsTable component.
+* Add NextLink props to button link componen
 
 ## 0.31.0