agroptima-design-system 0.31.4-beta.0 → 0.31.4

package/package.json

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

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

@@ -40,13 +40,13 @@
         }
       }
 
-      &:not(:disabled):hover {
+      &:hover {
         border: 1px solid color_alias.$primary-color-1000;
         background: color_alias.$primary-color-50;
         color: color_alias.$primary-color-1000;
       }
 
-      &:not(:disabled).selected {
+      &.selected {
         border: 1px solid color_alias.$primary-color-1000;
         color: color_alias.$primary-color-1000;
       }
@@ -80,8 +80,8 @@
         border: 1px solid transparent;
         background: none;
 
-        &:not(:disabled).selected,
-        &:not(:disabled):hover {
+        &.selected,
+        &:hover {
           border: 1px solid color_alias.$primary-color-1000;
           color: color_alias.$primary-color-1000;
         }

package/src/stories/Changelog.mdx

@@ -4,6 +4,12 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.4
+
+* 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.3
 
 * Add `margin-top` to all cells containing Badges on mobile on CardsTable component.

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>