agroptima-design-system 0.29.3-beta.4 → 0.30.0

package/package.json

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

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -1,32 +1,60 @@
 import 'react-day-picker/style.css'
+import './DateRangePicker.scss'
 import { useEffect, useState } from 'react'
 import { type DateRange, DayPicker, type Locale } from 'react-day-picker'
 import { enGB, es } from 'react-day-picker/locale'
-import { formatDatePickerFooterDate } from '../../utils/dateHelpers'
-import type { AvailableLocale } from './DatePicker'
+import { classNames } from '../../utils/classNames'
+import {
+  formatDatePickerFooterDate,
+  formatDatePickerParamsDate,
+} from '../../utils/dateHelpers'
 import { translations } from './translations'
 
+export type Variant = 'primary'
+
+type DivPropsWithoutOnSelect = Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'onSelect'
+>
+
+interface AvailableLocale {
+  [index: string]: Locale
+}
+
 const availableLocales: AvailableLocale = {
   es: es,
   en: enGB,
 }
 
-export interface DateRangePickerProps {
+export interface DateRangePickerProps extends DivPropsWithoutOnSelect {
+  variant?: Variant
   onSelect: (dateRange: DateRange | undefined) => void
   selected?: DateRange
   lng: keyof typeof availableLocales
 }
 
 export function DateRangePicker({
+  className,
+  variant = 'primary',
   onSelect = () => {},
   selected: preselected,
   lng,
 }: DateRangePickerProps): React.JSX.Element {
   const manageFooterText = (): string => {
     const hasDatesFilter = selected && selected.from && selected.to
+    const isExactDate =
+      formatDatePickerParamsDate(selected?.from) ===
+      formatDatePickerParamsDate(selected?.to)
 
     if (!hasDatesFilter) return translations[lng].pickDate
 
+    if (isExactDate) {
+      return translations[lng].selectedDate.replace(
+        '${date}',
+        formatDatePickerFooterDate(selected.from, lng as string),
+      )
+    }
+
     return translations[lng].selectedRangeOfDates
       .replace(
         '${from}',
@@ -39,6 +67,7 @@ export function DateRangePicker({
   const [footer, setFooter] = useState<string>(() => {
     return manageFooterText()
   })
+  const cssClasses = classNames('date-picker', variant, className)
 
   useEffect(() => {
     setSelected(preselected)
@@ -47,12 +76,18 @@ export function DateRangePicker({
   }, [preselected])
 
   function selectDate(dateRange: DateRange | undefined) {
+    const isSingleDaySelection = dateRange && !dateRange.to
+
+    if (isSingleDaySelection) {
+      dateRange.to = dateRange.from
+    }
+
     setSelected(dateRange)
     onSelect(dateRange)
   }
 
   return (
-    <>
+    <div className={cssClasses}>
       <DayPicker
         locale={availableLocales[lng]}
         mode="range"
@@ -62,6 +97,6 @@ export function DateRangePicker({
         footer={footer}
         defaultMonth={selected?.from}
       />
-    </>
+    </div>
   )
 }

package/src/atoms/DatePicker/translations.ts

@@ -5,13 +5,11 @@ interface Translation {
 export const translations: Translation = {
   en: {
     pickDate: 'Pick a day or a range of dates',
-    pickSingleDate: 'Pick a date',
     selectedDate: 'Selected date: ${date}',
     selectedRangeOfDates: 'Selected dates range: from ${from} to ${to}',
   },
   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}',
   },

package/src/atoms/Input.scss

@@ -36,12 +36,7 @@
     padding: config.$space-2x config.$space-3x config.$space-2x;
     input[type='date'] {
       min-width: -webkit-fill-available;
-   
     }
-    input[type='date']::-webkit-calendar-picker-indicator {
-      display: none;
-    }
-
     input[type='number'] {
       text-align: right;
     }

package/src/atoms/Switch.scss

@@ -0,0 +1,98 @@
+@use '../settings/color_alias';
+@use '../settings/typography/form' as typography;
+@use '../settings/config';
+
+.switch-group {
+  @include typography.checkbox-label;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: config.$space-1x;
+
+  .switch {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    position: relative;
+    font-size: inherit;
+    box-sizing: content-box;
+    border-radius: 1em;
+    vertical-align: text-bottom;
+    color: inherit;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate(0, -50%);
+      box-sizing: border-box;
+      border-radius: 50%;
+    }
+
+    &.primary {
+      border: 1px solid color_alias.$neutral-color-800;
+    }
+
+    &.primary::before {
+      background-color: color_alias.$neutral-color-800;
+    }
+
+    &.primary:checked {
+      border: 1px solid color_alias.$primary-color-600;
+    }
+
+    &.primary:checked::before {
+      background-color: color_alias.$primary-color-600;
+    }
+
+    &.primary:disabled {
+      background-color: color_alias.$neutral-color-50;
+      border: 1px solid color_alias.$neutral-color-400;
+    }
+
+    &.primary:checked:disabled {
+      background-color: color_alias.$primary-color-50;
+      border: 1px solid color_alias.$primary-color-400;
+    }
+
+    &.primary:disabled::before {
+      background-color: color_alias.$neutral-color-400;
+    }
+
+    &.primary:checked:disabled::before {
+      background-color: color_alias.$primary-color-400;
+    }
+
+    &.medium {
+      width: 2.75em;
+      height: 1.375em;
+    }
+
+    &.medium::before {
+      width: 1.1em;
+      height: 1.1em;
+      margin: 0 0.15em;
+    }
+
+    &.medium:checked::before {
+      left: 1.375em;
+    }
+
+    &.small {
+      width: 1.75em;
+      height: 1em;
+    }
+
+    &.small::before {
+      width: 0.75em;
+      height: 0.75em;
+      margin: 0 0.15em;
+    }
+
+    &.small:checked::before {
+      left: 0.75em;
+    }
+  }
+}

package/src/atoms/Switch.tsx

@@ -0,0 +1,51 @@
+import './Switch.scss'
+import { classNames } from '../utils/classNames'
+
+export type Variant = 'primary'
+export type Size = 'small' | 'medium'
+
+type InputPropsWithoutSize = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'size'
+>
+
+export interface SwitchProps extends InputPropsWithoutSize {
+  label: string
+  accessibilityLabel?: string
+  hideLabel?: boolean
+  variant?: Variant
+  id?: string
+  size?: Size
+}
+
+export function Switch({
+  label,
+  accessibilityLabel,
+  hideLabel = false,
+  disabled,
+  variant = 'primary',
+  size = 'medium',
+  id,
+  className,
+  ...props
+}: SwitchProps) {
+  return (
+    <div className={classNames('switch-group', className)}>
+      <label
+        htmlFor={id}
+        className={classNames({ 'visually-hidden': hideLabel })}
+      >
+        {label}
+      </label>
+      <input
+        id={id}
+        type="checkbox"
+        className={classNames('switch', variant, size)}
+        disabled={disabled}
+        aria-label={accessibilityLabel || label}
+        role="switch"
+        {...props}
+      />
+    </div>
+  )
+}

package/src/stories/Changelog.mdx

@@ -4,13 +4,9 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.31.0
+## 0.30.0
 
-* DatePicker option for a single day created.
-* Updated the footer message for a single day date picker.
-* DatePicker component now is a wrapper for the single and range options to select.
-* DateRangePicker component refactored to DatePicker.
-* Change input component style for deleting calendar icon if is date type.
+* Add Switch component
 
 ## 0.29.2
 

package/src/stories/DatePicker.stories.ts

@@ -1,11 +1,14 @@
 import type { StoryObj } from '@storybook/react'
-import { DatePicker } from '../atoms/DatePicker/DatePicker'
+import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 
 const meta = {
-  title: 'Design System/Atoms/DatePicker',
-  component: DatePicker,
+  title: 'Design System/Atoms/DateRangePicker',
+  component: DateRangePicker,
   tags: ['autodocs'],
   argTypes: {
+    footer: {
+      description: 'Text for the footer',
+    },
     variant: {
       description: 'Component variant used',
     },
@@ -18,9 +21,6 @@ const meta = {
     lng: {
       description: 'String with the locale to be used on the translations',
     },
-    type: {
-      description: 'Type of date that could be range or single',
-    },
   },
 }
 
@@ -34,43 +34,31 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const SingleDatePicker: Story = {
+export const Primary: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
     lng: 'en',
-    type: 'single',
-  },
-}
-
-export const RangeDatePicker: Story = {
-  args: {
-    variant: 'primary',
-    onSelect: (date) => console.log('onSelect date:', date),
-    lng: 'en',
-    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }
 
-export const WithSingleDaySelected: Story = {
+export const WithDateRangeSelected: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
-    selected: new Date(2024, 1, 2),
+    selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 15) },
     lng: 'en',
-    type: 'single',
   },
   parameters: figmaPrimaryDesign,
 }
 
-export const WithRangeDateSelected: Story = {
+export const WithSingleDaySelected: Story = {
   args: {
     variant: 'primary',
     onSelect: (date) => console.log('onSelect date:', date),
-    selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 12) },
+    selected: { from: new Date(2024, 1, 2), to: new Date(2024, 1, 2) },
     lng: 'en',
-    type: 'range',
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/Input.stories.ts

@@ -124,12 +124,3 @@ export const WithSuffix: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
-export const Date: Story = {
-  args: {
-    label: 'Input with date',
-    helpText: 'This text can help you',
-    name: 'price',
-    type: 'date',
-  },
-  parameters: figmaPrimaryDesign,
-}

package/src/stories/Switch.stories.ts

@@ -0,0 +1,93 @@
+import type { StoryObj } from '@storybook/react'
+import { Switch } from '../atoms/Switch'
+
+const meta = {
+  title: 'Design System/Atoms/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    accessibilityLabel: {
+      description: 'Accessible name & description of the element',
+    },
+    variant: {
+      description: 'Variant used from a list of values',
+    },
+    disabled: {
+      description: 'Is the component in disabled state?',
+    },
+    label: {
+      description: 'Label for the component',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+    size: {
+      description: 'Medium or small sizes available',
+    },
+    hideLabel: {
+      description: 'Show or hide label?',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=3854-81&t=Hb5zHVDMclLNXeS6-4',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'switch-videogames-preference',
+    onClick: (e) =>
+      console.log('onClick: ', (e.target as HTMLInputElement).checked),
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryWithoutLabel: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'switch-videogames-preference',
+    hideLabel: true,
+    onClick: (e) =>
+      console.log('onClick: ', (e.target as HTMLInputElement).checked),
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Disabled: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: true,
+    label: 'Do you like videogames?',
+    id: 'switch-videogames-preference',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Small: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'switch-videogames-preference',
+    onClick: (e) =>
+      console.log('onClick: ', (e.target as HTMLInputElement).checked),
+    size: 'small',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/tests/DateRangePicker.spec.tsx

@@ -0,0 +1,26 @@
+import { getAllByRole, render } from '@testing-library/react'
+import React from 'react'
+import { DateRangePicker } from '../src/atoms/DatePicker/DateRangePicker'
+
+describe('DateRangePicker', () => {
+  it('renders with expected footer, language and month', () => {
+    const { getByText } = render(
+      <DateRangePicker
+        selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
+        onSelect={() => jest.fn()}
+        lng={'es'}
+      />,
+    )
+    expect(getByText('enero 2025')).toBeInTheDocument()
+    expect(getByText('lu')).toBeInTheDocument()
+    expect(getByText('ma')).toBeInTheDocument()
+    expect(getByText('mi')).toBeInTheDocument()
+    expect(getByText('ju')).toBeInTheDocument()
+    expect(getByText('vi')).toBeInTheDocument()
+    expect(getByText('sá')).toBeInTheDocument()
+    expect(getByText('do')).toBeInTheDocument()
+    expect(
+      getByText('Rango de fechas seleccionado: desde 1/1/2025 a 15/1/2025'),
+    ).toBeInTheDocument()
+  })
+})

package/tests/Switch.spec.tsx

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Switch } from '../src/atoms/Switch'
+
+describe('Switch', () => {
+  it('renders medium size', () => {
+    const { getByRole, getByText } = render(
+      <Switch
+        accessibilityLabel="Marks if the user likes videogames"
+        id="switch-videogames-preference"
+        label="Do you like videogames?"
+        onClick={() => {}}
+        variant="primary"
+      />,
+    )
+
+    expect(getByText(/Do you like videogames/i)).toBeInTheDocument()
+    expect(getByRole('switch')).toHaveClass(`switch primary medium`)
+  })
+
+  it('renders small size', () => {
+    const { getByRole } = render(
+      <Switch
+        accessibilityLabel="Marks if the user likes videogames"
+        id="switch-videogames-preference"
+        label="Do you like videogames?"
+        onClick={() => {}}
+        variant="primary"
+        size="small"
+      />,
+    )
+
+    expect(getByRole('switch')).toHaveClass(`switch primary small`)
+  })
+})

package/src/atoms/DatePicker/DatePicker.tsx

@@ -1,75 +0,0 @@
-import 'react-day-picker/style.css'
-import './DatePicker.scss'
-import { type DateRange, type Locale } from 'react-day-picker'
-import { classNames } from '../../utils/classNames'
-import { DateRangePicker } from './DateRangePicker'
-import { DateSinglePicker } from './DateSinglePicker'
-
-export type Variant = 'primary'
-export type DatePickerType = 'single' | 'range'
-
-type DivPropsWithoutOnSelect = Omit<
-  React.ComponentPropsWithoutRef<'div'>,
-  'onSelect'
->
-
-export interface AvailableLocale {
-  [index: string]: Locale
-}
-
-export interface DatePickerBaseProps extends DivPropsWithoutOnSelect {
-  variant?: Variant
-  lng: keyof AvailableLocale
-  type: DatePickerType
-  month?: Date
-  onMonthChange?: (date: Date | undefined) => void
-}
-
-export interface DateSinglePickerProps {
-  type: 'single'
-  selected?: Date | undefined
-  onSelect: (date: Date | undefined) => void
-}
-
-export interface DateRangePickerProps {
-  type: 'range'
-  selected?: DateRange | undefined
-  onSelect: (date: DateRange | undefined) => void
-}
-
-type DatePickerProps = (DateSinglePickerProps | DateRangePickerProps) &
-  DatePickerBaseProps
-
-export function DatePicker(props: DatePickerProps): React.JSX.Element {
-  const {
-    variant,
-    className,
-    type,
-    lng,
-    onSelect,
-    selected,
-    month,
-    onMonthChange,
-  } = props
-
-  const cssClasses = classNames('date-picker', variant, className)
-
-  if (type === 'single') {
-    return (
-      <div className={cssClasses}>
-        <DateSinglePicker
-          lng={lng}
-          selected={selected}
-          onSelect={onSelect}
-          month={month}
-          onMonthChange={onMonthChange}
-        />
-      </div>
-    )
-  }
-  return (
-    <div className={cssClasses}>
-      <DateRangePicker lng={lng} selected={selected} onSelect={onSelect} />
-    </div>
-  )
-}

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -1,75 +0,0 @@
-import 'react-day-picker/style.css'
-import { useEffect, useState } from 'react'
-import { DayPicker, type Locale } from 'react-day-picker'
-import { enGB, es } from 'react-day-picker/locale'
-import {
-  formatDatePickerFooterDate,
-  formatDatePickerParamsDate,
-} from '../../utils/dateHelpers'
-import { Input } from '../Input'
-import type { AvailableLocale } from './DatePicker'
-import { translations } from './translations'
-
-const availableLocales: AvailableLocale = {
-  es: es,
-  en: enGB,
-}
-
-export interface DateSinglePickerProps {
-  onSelect: (date: Date | undefined) => void
-  selected?: Date
-  lng: keyof typeof availableLocales
-  month?: Date
-  onMonthChange?: (date: Date | undefined) => void
-}
-
-export function DateSinglePicker({
-  onSelect = () => {},
-  selected: preselected,
-  lng,
-  month: selectedMonth,
-  onMonthChange = () => {},
-}: DateSinglePickerProps): React.JSX.Element {
-  const manageFooterText = (): string => {
-    if (!selected) return translations[lng].pickSingleDate
-
-    return translations[lng].selectedDate.replace(
-      '${date}',
-      formatDatePickerFooterDate(selected, lng as string),
-    )
-  }
-
-  const [selected, setSelected] = useState<Date | undefined>(preselected)
-  const [month, setMonth] = useState<Date | undefined>(selectedMonth)
-  const [footer, setFooter] = useState<string>(() => {
-    return manageFooterText()
-  })
-
-  useEffect(() => {
-    setSelected(preselected)
-    setFooter(manageFooterText())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preselected])
-
-  function selectDate(date: Date | undefined) {
-    setSelected(date)
-    setMonth(date)
-    onSelect(date)
-    onMonthChange(date)
-  }
-
-  return (
-    <>
-      <DayPicker
-        locale={availableLocales[lng]}
-        mode="single"
-        selected={selected}
-        onSelect={(date) => selectDate(date)}
-        footer={footer}
-        required
-        month={month}
-        onMonthChange={(date) => setMonth(date)}
-      />
-    </>
-  )
-}

package/tests/DatePicker.spec.tsx

@@ -1,48 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { DatePicker } from '../src/atoms/DatePicker/DatePicker'
-
-describe('DatePicker', () => {
-  it('renders with expected footer, language and month for a range type', () => {
-    const { getByText } = render(
-      <DatePicker
-        selected={{ from: new Date(2025, 0, 1), to: new Date(2025, 0, 15) }}
-        onSelect={() => jest.fn()}
-        lng={'es'}
-        type="range"
-      />,
-    )
-
-    expect(getByText('enero 2025')).toBeInTheDocument()
-    expect(getByText('lu')).toBeInTheDocument()
-    expect(getByText('ma')).toBeInTheDocument()
-    expect(getByText('mi')).toBeInTheDocument()
-    expect(getByText('ju')).toBeInTheDocument()
-    expect(getByText('vi')).toBeInTheDocument()
-    expect(getByText('sá')).toBeInTheDocument()
-    expect(getByText('do')).toBeInTheDocument()
-    expect(
-      getByText('Rango de fechas seleccionado: desde 1/1/2025 a 15/1/2025'),
-    ).toBeInTheDocument()
-  })
-  it('renders with expected footer, language and month for a single type', () => {
-    const { getByText } = render(
-      <DatePicker
-        selected={new Date(2025, 1, 15)}
-        onSelect={() => jest.fn()}
-        lng={'es'}
-        type="single"
-      />,
-    )
-
-    expect(getByText('febrero 2025')).toBeInTheDocument()
-    expect(getByText('lu')).toBeInTheDocument()
-    expect(getByText('ma')).toBeInTheDocument()
-    expect(getByText('mi')).toBeInTheDocument()
-    expect(getByText('ju')).toBeInTheDocument()
-    expect(getByText('vi')).toBeInTheDocument()
-    expect(getByText('sá')).toBeInTheDocument()
-    expect(getByText('do')).toBeInTheDocument()
-    expect(getByText('Fecha seleccionada: 15/2/2025')).toBeInTheDocument()
-  })
-})