agroptima-design-system 0.31.3 → 0.31.4-beta.1

package/package.json

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

package/src/atoms/Button/BaseButton.tsx

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

package/src/atoms/Card/Card.scss

@@ -5,7 +5,6 @@
 
 a.card {
   text-decoration: none;
-
   &:hover {
     background-color: color_alias.$primary-color-50;
   }
@@ -17,11 +16,9 @@ a.card {
   gap: config.$space-2x;
   padding: config.$space-3x;
   width: 100%;
-
   p {
     margin: 0;
   }
-
   .actions {
     display: flex;
     gap: config.$space-4x;
@@ -37,7 +34,6 @@ a.card {
     flex-direction: row;
     justify-content: space-between;
     gap: config.$space-1x;
-
     .title {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -45,7 +41,6 @@ a.card {
       -webkit-box-orient: vertical;
       display: -webkit-box;
     }
-
     > .bold {
       @include typography.body-bold;
     }
@@ -56,12 +51,8 @@ a.card {
   }
 
   .footer {
-    display: flex;
-    flex-direction: column;
-    gap: config.$space-2x;
     margin-top: auto;
-
-    > .button {
+    .button {
       width: 100%;
     }
   }
@@ -74,7 +65,6 @@ a.card {
     &.disabled {
       @include typography.body-regular-disabled;
       background: color_alias.$neutral-color-50;
-
       .header .bold {
         color: color_alias.$neutral-color-400;
       }

package/src/atoms/Card/Card.tsx

@@ -1,21 +1,21 @@
 import './Card.scss'
-import Link, { type LinkProps } from 'next/link'
+import Link from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 
-export interface CardProps extends Omit<LinkProps, 'href'> {
+export interface CardProps {
   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,7 +25,6 @@ export function Card({
   isDisabled = false,
   isActive = false,
   error = false,
-  prefetch = false,
   children,
   href,
   ...props
@@ -41,7 +40,7 @@ export function Card({
 
   if (href && !isDisabled) {
     return (
-      <Link href={href} className={cssClasses} prefetch={prefetch} {...props}>
+      <Link href={href} className={cssClasses} {...props}>
         {children}
       </Link>
     )

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -31,7 +31,6 @@ export function CardMenuOption({
   href,
   active,
   error,
-  prefetch = false,
   ...props
 }: CardMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('card-menu-option', variant, className, {
@@ -46,7 +45,6 @@ export function CardMenuOption({
       className={cssClasses}
       href={disabled ? '#' : href}
       aria-disabled={disabled}
-      prefetch={prefetch}
       {...props}
     >
       <div className="left">

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/DatePicker/DatePicker.scss

@@ -10,6 +10,19 @@
   .rdp-root {
     width: 309px;
     --rdp-accent-color: #{color_alias.$primary-color-600};
+  }
+  .rdp-caption_label {
+    text-transform: capitalize;
+  }
+
+  .single {
+    .rdp-selected .rdp-day_button {
+      background-color: #{color_alias.$primary-color-600} !important;
+      color: white !important;
+    }
+  }
+
+  .range {
     --rdp-accent-background-color: #{color_alias.$primary-color-50};
   }
 }

package/src/atoms/DatePicker/DatePicker.tsx

@@ -39,20 +39,36 @@ type DatePickerProps = (DateSinglePickerProps | DateRangePickerProps) &
   DatePickerBaseProps
 
 export function DatePicker(props: DatePickerProps): React.JSX.Element {
-  const { variant, className, type, lng, onSelect, selected } = props
-
+  const {
+    variant = 'primary',
+    className,
+    type,
+    lng,
+    onSelect,
+    selected,
+  } = props
   const cssClasses = classNames('date-picker', variant, className)
 
   if (type === 'single') {
     return (
       <div className={cssClasses}>
-        <DateSinglePicker lng={lng} selected={selected} onSelect={onSelect} />
+        <DateSinglePicker
+          lng={lng}
+          selected={selected}
+          onSelect={onSelect}
+          className="single"
+        />
       </div>
     )
   }
   return (
     <div className={cssClasses}>
-      <DateRangePicker lng={lng} selected={selected} onSelect={onSelect} />
+      <DateRangePicker
+        lng={lng}
+        selected={selected}
+        onSelect={onSelect}
+        className="range"
+      />
     </div>
   )
 }

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -1,6 +1,6 @@
 import 'react-day-picker/style.css'
 import { useEffect, useState } from 'react'
-import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
+import { type DateRange, DayPicker } from 'react-day-picker'
 import { enGB, es } from 'react-day-picker/locale'
 import { formatDatePickerFooterDate } from '../../utils/dateHelpers'
 import type { AvailableLocale } from './DatePicker'
@@ -15,12 +15,14 @@ export interface DateRangePickerProps {
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
+  className: string
 }
 
 export function DateRangePicker({
   onSelect = () => {},
   selected: preselected,
   lng,
+  className,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
@@ -52,16 +54,15 @@ export function DateRangePicker({
   }
 
   return (
-    <>
-      <DayPicker
-        locale={availableLocales[lng]}
-        mode="range"
-        min={1}
-        selected={selected}
-        onSelect={(dateRange) => selectDate(dateRange)}
-        footer={footer}
-        defaultMonth={selected?.from}
-      />
-    </>
+    <DayPicker
+      className={className}
+      locale={availableLocales[lng]}
+      mode="range"
+      min={1}
+      selected={selected}
+      onSelect={(dateRange) => selectDate(dateRange)}
+      footer={footer}
+      defaultMonth={selected?.from}
+    />
   )
 }

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -15,12 +15,14 @@ export interface DateSinglePickerProps {
   onSelect: (date: Date | undefined) => void
   selected?: Date
   lng: keyof typeof availableLocales
+  className: string
 }
 
 export function DateSinglePicker({
   onSelect = () => {},
   selected: preselected,
   lng,
+  className,
 }: DateSinglePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     if (!selected) return translations[lng].pickSingleDate
@@ -51,17 +53,17 @@ export function DateSinglePicker({
   }
 
   return (
-    <>
-      <DayPicker
-        locale={availableLocales[lng]}
-        mode="single"
-        selected={selected}
-        onSelect={(date) => selectDate(date)}
-        footer={footer}
-        required
-        month={month}
-        onMonthChange={(date) => setMonth(date)}
-      />
-    </>
+    <DayPicker
+      className={className}
+      locale={availableLocales[lng]}
+      mode="single"
+      selected={selected}
+      onSelect={(date) => selectDate(date)}
+      footer={footer}
+      required
+      month={month}
+      onMonthChange={(date) => setMonth(date)}
+      defaultMonth={selected}
+    />
   )
 }

package/src/atoms/Menu/MenuLink.tsx

@@ -1,19 +1,19 @@
 import './Menu.scss'
-import Link, { type LinkProps } from 'next/link'
-import React, { type AnchorHTMLAttributes } from 'react'
+import Link from 'next/link'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 
-type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps
-
-export interface MenuLinkProps extends AnchorProps {
+export interface MenuLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   title: string
   variant?: Variant
   icon?: IconType
   isActive?: boolean
+  href: string
 }
 
 export function MenuLink({
@@ -22,7 +22,7 @@ export function MenuLink({
   className,
   icon,
   title,
-  prefetch = false,
+  href,
   ...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 {...props} prefetch={prefetch} className={cssClasses}>
+      <Link href={href} {...props} className={cssClasses}>
         {icon && <Icon name={icon} size="3" />}
         <span className="title">{title}</span>
       </Link>

package/src/atoms/Pagination/PaginationArrow.tsx

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

package/src/atoms/Pagination/PaginationNumber.tsx

@@ -1,5 +1,4 @@
 import './Pagination.scss'
-import type { LinkProps } from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
 import type { ButtonProps } from '../Button'
@@ -15,7 +14,7 @@ export interface CustomProps {
   variant?: Variant
 }
 
-export type PaginationNumberProps = CustomProps & ButtonProps & LinkProps
+export type PaginationNumberProps = CustomProps & ButtonProps
 
 export function PaginationNumber({
   label,
@@ -25,7 +24,6 @@ export function PaginationNumber({
   className,
   disabled,
   selected = false,
-  prefetch = false,
   ...props
 }: PaginationNumberProps): React.JSX.Element {
   const cssClasses = classNames('pagination-button', variant, className, {
@@ -40,7 +38,6 @@ export function PaginationNumber({
       href={disabled ? '#' : href}
       className={cssClasses}
       aria-current={selected}
-      prefetch={prefetch}
       {...props}
     />
   )

package/src/atoms/Popover/PopoverMenuOption.tsx

@@ -1,12 +1,11 @@
 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 & AnchorHTMLAttributes<HTMLAnchorElement>
+type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
 export interface PopoverMenuOptionProps extends LinkProps {
   variant?: Variant
   title: string
@@ -22,7 +21,6 @@ export function PopoverMenuOption({
   disabled,
   href,
   active,
-  prefetch = false,
   ...props
 }: PopoverMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('popover-menu-option', variant, className, {
@@ -36,7 +34,6 @@ 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,7 +62,3 @@
   white-space: nowrap;
   width: 1px;
 }
-
-.absolute {
-  position: absolute;
-}

package/src/stories/Card.stories.js

@@ -1,7 +1,6 @@
 import { IconButton } from '../atoms/Button'
 import { Button } from '../atoms/Button'
 import { Card, CardContent, CardFooter, CardHeader } from '../atoms/Card'
-import { QuantitySelector } from '../atoms/QuantitySelector'
 
 const figmaPrimaryDesign = {
   design: {
@@ -102,18 +101,6 @@ export const ProductCard = {
           </div>
         </CardContent>
         <CardFooter>
-          <QuantitySelector
-            accessibilityLabel="Quantity of items to wishlist"
-            defaultValue={1}
-            hideLabel
-            id="quantity"
-            label="Quantity"
-            max={10}
-            min={1}
-            name="quantity"
-            required
-            step={0.0001}
-          />
           <Button variant="primary-outlined" label="Buy" />
         </CardFooter>
       </Card>

package/src/stories/Changelog.mdx

@@ -4,17 +4,12 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.31.3
-
-* Add `margin-top` to all cells containing Badges on mobile on CardsTable component.
-
-## 0.31.2
-
-* Manage footer buttons width and position on Card component
-
 ## 0.31.1
 
-* Add NextLink props and prefetch to false to the Button, Card, CardMenuOption, MenuLink, PopoverMenuOption PaginationArrow and PaginationNumber components
+* Capitalized characters in month DatePicker for spanish version.
+* Change the day selection style for DateSinglePicker.
+* Colors in DateRangePicker in filters in Drawer component.
+
 
 ## 0.31.0
 

package/src/stories/Drawer.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 import { Collapsible } from '../atoms/Collapsible'
-import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
+import { DatePicker } from '../atoms/DatePicker/DatePicker'
 import { Drawer } from '../atoms/Drawer'
 
 const figmaPrimaryDesign = {
@@ -130,9 +130,10 @@ export const Filters = {
       </Collapsible>
       <Collapsible noHorizontalPadding open title="Date">
         <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <DateRangePicker
+          <DatePicker
             selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
             onSelect={(date) => console.log('date: ', date)}
+            type="range"
             lng="en"
           />
         </div>