agroptima-design-system 0.31.5 → 0.31.6-beta.2

package/package.json

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

package/src/atoms/DatePicker/DatePicker.scss

@@ -5,24 +5,30 @@
 @use '../../settings/breakpoints';
 
 // Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
+.rdp-root {
+  width: 309px;
+  --rdp-accent-color: #{color_alias.$primary-color-600};
+  --rdp-accent-background-color: #{color_alias.$primary-color-50};
+  --rdp-range_middle-background-color: #{color_alias.$primary-color-50}; 
+  --rdp-range_start-date-background-color: #{color_alias.$primary-color-600};
+  --rdp-range_end-date-background-color: #{color_alias.$primary-color-600};
 
-.date-picker {
-  .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};
-  }
 }
+
+.rdp-caption_label {
+  text-transform: capitalize;
+}
+
+
+.rdp-selected .rdp-day_button {
+  background-color: #{color_alias.$primary-color-600};
+  color: #{color_alias.$neutral-white};
+}
+
+.rdp-range_middle .rdp-day_button {
+  @include typography.body-regular-primary;
+  background-color: var(--rdp-range_middle-background-color);
+}
+
+
+

package/src/atoms/DatePicker/DatePicker.tsx

@@ -51,24 +51,20 @@ export function DatePicker(props: DatePickerProps): React.JSX.Element {
 
   if (type === 'single') {
     return (
-      <div className={cssClasses}>
-        <DateSinglePicker
-          lng={lng}
-          selected={selected}
-          onSelect={onSelect}
-          className="single"
-        />
-      </div>
-    )
-  }
-  return (
-    <div className={cssClasses}>
-      <DateRangePicker
+      <DateSinglePicker
         lng={lng}
         selected={selected}
         onSelect={onSelect}
-        className="range"
+        className={cssClasses}
       />
-    </div>
+    )
+  }
+  return (
+    <DateRangePicker
+      lng={lng}
+      selected={selected}
+      onSelect={onSelect}
+      className={cssClasses}
+    />
   )
 }

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -25,16 +25,21 @@ export function DateRangePicker({
   className,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
-    const hasDatesFilter = selected && selected.from && selected.to
+    console.log(selected, '-----')
+    if (!selected?.from && !selected?.to) return translations[lng].pickDate
 
-    if (!hasDatesFilter) return translations[lng].pickDate
+    if (selected.from && !selected.to)
+      return translations[lng].selectedOnlyFrom.replace(
+        '${from}',
+        formatDatePickerFooterDate(selected.from, lng as string),
+      )
 
     return translations[lng].selectedRangeOfDates
       .replace(
         '${from}',
-        formatDatePickerFooterDate(selected.from, lng as string),
+        formatDatePickerFooterDate(selected?.from, lng as string),
       )
-      .replace('${to}', formatDatePickerFooterDate(selected.to, lng as string))
+      .replace('${to}', formatDatePickerFooterDate(selected?.to, lng as string))
   }
 
   const [selected, setSelected] = useState<DateRange | undefined>(preselected)
@@ -43,7 +48,9 @@ export function DateRangePicker({
   })
 
   useEffect(() => {
-    setSelected(preselected)
+    setTimeout(() => {
+      setSelected(preselected)
+    }, 0)
     setFooter(manageFooterText())
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [preselected])

package/src/atoms/DatePicker/translations.ts

@@ -8,11 +8,13 @@ export const translations: Translation = {
     pickSingleDate: 'Pick a date',
     selectedDate: 'Selected date: ${date}',
     selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
+    selectedOnlyFrom: 'Selected dates range: from ${from}',
   },
   es: {
     pickDate: 'Selecciona un día o un rango de fechas',
     pickSingleDate: 'Selecciona una fecha',
     selectedDate: 'Fecha seleccionada: ${date}',
     selectedRangeOfDates: 'Rango de fechas seleccionado: desde ${from} a ${to}',
+    selectedOnlyFrom: 'Rango de fechas seleccionado: desde ${from}',
   },
 }

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.31.6
+
+* Refactor styles and fix range day selection
+
 ## 0.31.5
 
 * Card component has a hover effect when being a link, being clickable or not having any buttons.