agroptima-design-system 0.28.4-beta.2 → 0.28.4

package/package.json

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

package/src/atoms/Alert/Alert.scss

@@ -46,7 +46,6 @@
     .icon {
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
-
       > svg {
         fill: color_alias.$neutral-color-400;
         path {
@@ -73,61 +72,21 @@
   &.info {
     border: 1px solid color_alias.$info-color-600;
     background: color_alias.$info-color-50;
-    .information-container {
-      .icon {
-        > svg {
-          fill: color_alias.$info-color-1000;
-          path {
-            fill: color_alias.$info-color-1000;
-          }
-        }
-      }
-    }
   }
 
   &.success {
     border: 1px solid color_alias.$success-color-300;
     background: color_alias.$success-color-50;
-    .information-container {
-      .icon {
-        > svg {
-          fill: color_alias.$success-color-1000;
-          path {
-            fill: color_alias.$success-color-1000;
-          }
-        }
-      }
-    }
   }
 
   &.warning {
     border: 1px solid color_alias.$warning-color-300;
     background: color_alias.$warning-color-50;
-    .information-container {
-      .icon {
-        > svg {
-          fill: color_alias.$warning-color-1000;
-          path {
-            fill: color_alias.$warning-color-1000;
-          }
-        }
-      }
-    }
   }
 
   &.error {
     border: 1px solid color_alias.$error-color-1000;
     background: color_alias.$error-color-50;
-    .information-container {
-      .icon {
-        > svg {
-          fill: color_alias.$error-color-1000;
-          path {
-            fill: color_alias.$error-color-1000;
-          }
-        }
-      }
-    }
   }
 
   @keyframes fadeOut {

package/src/atoms/Alert/Alert.tsx

@@ -46,7 +46,7 @@ export function Alert({
       {...props}
     >
       <div className="information-container">
-        <Icon name={IconVariant[variant]} className={variant} />
+        <Icon name={IconVariant[variant]} variant={variant} />
         <span id={`${id}-text`} className="text">
           {text}
         </span>

package/src/atoms/{DatePicker/DateRangePicker.scss → DatePicker.scss}

@@ -1,8 +1,8 @@
-@use '../../settings/color_alias';
-@use '../../settings/typography/content' as typography;
-@use '../../settings/config';
-@use '../../settings/depth';
-@use '../../settings/breakpoints';
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
+@use '../settings/breakpoints';
 
 // Interpolation applied: https://sass-lang.com/documentation/breaking-changes/css-vars/
 

package/src/atoms/DatePicker.tsx

@@ -0,0 +1,66 @@
+import 'react-day-picker/style.css'
+import './DatePicker.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 { classNames } from '../utils/classNames'
+
+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 DatePickerProps extends DivPropsWithoutOnSelect {
+  variant?: Variant
+  onSelect: (dateRange: DateRange | undefined) => void
+  footer: string
+  selected?: DateRange
+  lng: keyof typeof availableLocales
+}
+
+export function DatePicker({
+  className,
+  variant = 'primary',
+  onSelect = () => {},
+  footer = 'Pick a day',
+  selected: preselected,
+  lng,
+}: DatePickerProps): React.JSX.Element {
+  useEffect(() => {
+    setSelected(preselected)
+  }, [preselected])
+
+  const cssClasses = classNames('date-picker', variant, className)
+
+  const [selected, setSelected] = useState<DateRange | undefined>(preselected)
+
+  function selectDate(dateRange: DateRange | undefined) {
+    setSelected(dateRange)
+    onSelect(dateRange)
+  }
+
+  return (
+    <div className={cssClasses}>
+      <DayPicker
+        locale={availableLocales[lng]}
+        mode="range"
+        min={1}
+        selected={selected}
+        onSelect={(dateRange) => selectDate(dateRange)}
+        footer={footer}
+        defaultMonth={selected?.from}
+      />
+    </div>
+  )
+}

package/src/atoms/Form/{Form.scss → Actions.scss}

@@ -4,26 +4,6 @@
 
 $gap: config.$space-4x;
 
-.form {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  gap: $gap;
-  padding: 0;
-
-  width: breakpoints.$medium;
-  max-width: breakpoints.$medium;
-
-  &.full-width {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  &:has(.footer-actions) {
-    padding-bottom: 6.25rem;
-  }
-}
-
 .footer-actions {
   display: flex;
   justify-content: flex-end;
@@ -39,13 +19,6 @@ $gap: config.$space-4x;
 }
 
 @media only screen and (max-width: breakpoints.$large) {
-  .form {
-    max-width: 100%;
-    width: 100%;
-    &:has(.footer-actions) {
-      padding-bottom: 9rem;
-    }
-  }
   .footer-actions {
     background-color: color_alias.$neutral-white;
     border-top: 1px solid color_alias.$neutral-color-200;

package/src/atoms/Form/Actions.tsx

@@ -1,11 +1,11 @@
-import './Form.scss'
+import './Actions.scss'
 import { classNames } from '../../utils/classNames'
 
 export interface ActionsProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode
 }
 
-export default function Actions({ className, children }: ActionsProps) {
+export function Actions({ className, children }: ActionsProps) {
   return (
     <div className={classNames('footer-actions', className)}>{children}</div>
   )

package/src/atoms/Form/Form.tsx

@@ -1,25 +1,14 @@
-import './Form.scss'
-import { classNames } from '../../utils/classNames'
+import { FormContainer } from './FormContainer'
 
 export interface FormProps extends React.ComponentPropsWithoutRef<'form'> {
-  fullWidth?: boolean
+  fluid?: boolean
   children: React.ReactNode
 }
 
-export default function Form({
-  className,
-  fullWidth,
-  children,
-  ...props
-}: FormProps) {
+export function Form({ fluid, children, ...props }: FormProps) {
   return (
-    <form
-      className={classNames(className, 'form', {
-        'full-width': fullWidth,
-      })}
-      {...props}
-    >
-      {children}
+    <form {...props}>
+      <FormContainer fluid={fluid}>{children}</FormContainer>
     </form>
   )
 }

package/src/atoms/Form/FormContainer.scss

@@ -0,0 +1,35 @@
+@use '../../settings/config';
+@use '../../settings/breakpoints';
+@use '../../settings/color_alias';
+
+$gap: config.$space-4x;
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  gap: $gap;
+  padding: 0;
+
+  width: breakpoints.$medium;
+  max-width: breakpoints.$medium;
+
+  &.fluid {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  &:has(.footer-actions) {
+    padding-bottom: 6.25rem;
+  }
+}
+
+@media only screen and (max-width: breakpoints.$large) {
+  .form-container {
+    max-width: 100%;
+    width: 100%;
+    &:has(.footer-actions) {
+      padding-bottom: 9rem;
+    }
+  }
+}

package/src/atoms/Form/FormContainer.tsx

@@ -0,0 +1,25 @@
+import './FormContainer.scss'
+import { classNames } from '../../utils/classNames'
+
+export interface FormContainerProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  fluid?: boolean
+}
+
+export function FormContainer({
+  fluid,
+  className,
+  children,
+  ...props
+}: FormContainerProps) {
+  return (
+    <div
+      className={classNames(className, 'form-container', {
+        fluid,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/atoms/Form/index.ts

@@ -1,4 +1,5 @@
-import Actions from './Actions'
-import Form from './Form'
+import { Actions } from './Actions'
+import { Form } from './Form'
+import { FormContainer } from './FormContainer'
 
-export { Actions, Form }
+export { Actions, Form, FormContainer }

package/src/atoms/Icon.scss

@@ -1,5 +1,6 @@
 @use '../settings/color_alias';
 @use '../settings/config';
+@use '../settings/mixins';
 
 .icon {
   display: inline-flex;
@@ -12,36 +13,41 @@
   }
 
   &.size-1 {
-    width: config.$icon-size-1x;
-    height: config.$icon-size-1x;
+    @include mixins.size(config.$icon-size-1x);
   }
   &.size-2 {
-    width: config.$icon-size-2x;
-    height: config.$icon-size-2x;
+    @include mixins.size(config.$icon-size-2x);
   }
   &.size-3 {
-    width: config.$icon-size-3x;
-    height: config.$icon-size-3x;
+    @include mixins.size(config.$icon-size-3x);
   }
   &.size-4 {
-    width: config.$icon-size-4x;
-    height: config.$icon-size-4x;
+    @include mixins.size(config.$icon-size-4x);
   }
   &.size-5 {
-    width: config.$icon-size-5x;
-    height: config.$icon-size-5x;
+    @include mixins.size(config.$icon-size-5x);
   }
   &.size-6 {
-    width: config.$icon-size-6x;
-    height: config.$icon-size-6x;
+    @include mixins.size(config.$icon-size-6x);
   }
   &.size-7 {
-    width: config.$icon-size-7x;
-    height: config.$icon-size-7x;
+    @include mixins.size(config.$icon-size-7x);
   }
   &.size-8 {
-    width: config.$icon-size-8x;
-    height: config.$icon-size-8x;
+    @include mixins.size(config.$icon-size-8x);
+  }
+
+  &.info {
+    @include mixins.svg-color(color_alias.$info-color-1000);
+  }
+  &.success {
+    @include mixins.svg-color(color_alias.$success-color-1000);
+  }
+  &.warning {
+    @include mixins.svg-color(color_alias.$warning-color-1000);
+  }
+  &.error {
+    @include mixins.svg-color(color_alias.$error-color-1000);
   }
 
   @keyframes rotate {

package/src/atoms/Icon.tsx

@@ -5,6 +5,7 @@ import { classNames } from '../utils/classNames'
 export type IconType = keyof typeof icons
 
 export type IconSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'
+export type Variant = 'info' | 'success' | 'warning' | 'error'
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
@@ -12,18 +13,20 @@ export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   title?: string
   visible?: boolean
   size?: IconSize
+  variant?: Variant
 }
 
 export const Icon: React.FC<IconProps> = ({
   name,
   className,
+  variant,
   size = '5',
   visible = true,
   ...props
 }) => {
   if (!visible) return null
 
-  const cssClasses = classNames('icon', `size-${size}`, className, {
+  const cssClasses = classNames('icon', `size-${size}`, variant, className, {
     rotate: name === 'Loading',
   })
   return (

package/src/atoms/Modal/Modal.scss

@@ -0,0 +1,139 @@
+@use '../../settings/mixins';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/color_alias';
+@use '../../settings/breakpoints';
+@use '../../settings/depth';
+@use '../../settings/config';
+
+$modal-margin: 3rem;
+$modal-width: 34.5rem;
+$modal-detail-width: 50rem;
+$modal-background-color: color_alias.$neutral-white;
+$modal-boder-color: color_alias.$neutral-color-200;
+$backdrop-opacity: 0.4;
+$backdrop-background-color: color_alias.$neutral-color-900;
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: depth.$z-modal;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+}
+
+.modal-dialog {
+  transition: transform 0.3s ease-out;
+  max-width: $modal-width;
+  position: relative;
+  width: auto;
+  margin-block: $modal-margin;
+  margin-inline: auto;
+  padding-inline: config.$space-4x;
+  pointer-events: none;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: $modal-background-color;
+  background-clip: padding-box;
+  outline: 0;
+  border-radius: config.$corner-radius-xxs;
+  padding: config.$space-4x;
+  box-shadow:
+    0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+    0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.modal-header {
+  gap: config.$space-2x;
+  padding-bottom: config.$space-1x;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  button {
+    margin-inline-start: auto;
+  }
+}
+
+.modal-title {
+  @include typography.h4;
+}
+
+.modal-body {
+  padding-top: config.$space-1x;
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.modal-footer {
+  padding-top: config.$space-2x;
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: config.$space-2x;
+}
+
+.modal-backdrop {
+  opacity: $backdrop-opacity;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: depth.$z-modal;
+  width: 100vw;
+  height: 100vh;
+  background-color: $backdrop-background-color;
+  transition: opacity 0.15s linear;
+}
+
+.modal-details {
+  .modal-dialog {
+    max-width: 50rem;
+  }
+
+  .modal-header {
+    border-bottom: 1px solid $modal-boder-color;
+    padding-bottom: config.$space-3x;
+  }
+
+  .modal-body {
+    padding-top: config.$space-3x;
+  }
+
+  .modal-footer {
+    padding-top: config.$space-3x;
+  }
+}
+
+.modal-dialog-scrollable {
+  height: calc(100vh - $modal-margin * 2);
+  .modal-content {
+    max-height: 100%;
+    overflow: hidden;
+  }
+  .modal-body {
+    overflow-y: auto;
+    margin-inline: config.$space-4x * -1;
+    padding-inline: config.$space-4x;
+  }
+}
+
+.modal-icon {
+  margin-top: config.$space-1x;
+  align-self: flex-start;
+}
+
+body:has(.modal-backdrop) {
+  overflow: hidden;
+  padding-right: 0px;
+}

package/src/atoms/Modal/Modal.tsx

@@ -0,0 +1,74 @@
+import './Modal.scss'
+import type { ReactNode } from 'react'
+import type { ButtonProps } from '../Button'
+import { Button } from '../Button'
+import { Icon } from '../Icon'
+import {
+  ModalBody,
+  ModalCloseButton,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '.'
+
+export type Variant =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'discard'
+  | 'details'
+
+export interface ModalProps {
+  id: string
+  title: string
+  variant?: Variant
+  closeButton?: boolean
+  scrollable?: boolean
+  className?: string
+  onClose?: () => void
+  buttons: ButtonProps[]
+  children: ReactNode
+}
+
+const ICONS: { [key: string]: ReactNode } = {
+  info: <Icon className="modal-icon" name="Info" variant="info" />,
+  success: <Icon className="modal-icon" name="Check" variant="success" />,
+  warning: <Icon className="modal-icon" name="Warning" variant="warning" />,
+  error: <Icon className="modal-icon" name="Error" variant="error" />,
+  discard: <Icon className="modal-icon" name="Warning" variant="warning" />,
+}
+
+export function Modal({
+  id,
+  title,
+  buttons,
+  onClose,
+  children,
+  closeButton = false,
+  variant = 'details',
+  ...props
+}: ModalProps) {
+  return (
+    <ModalDialog
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-body`}
+      onClose={onClose}
+      details={variant === 'details'}
+      {...props}
+    >
+      <ModalHeader>
+        {ICONS[variant]}
+        <ModalTitle id={`${id}-title`}>{title}</ModalTitle>
+        {closeButton && <ModalCloseButton onClick={onClose} />}
+      </ModalHeader>
+      <ModalBody id={`${id}-body`}>{children}</ModalBody>
+      <ModalFooter>
+        {buttons.map(({ ...button }) => (
+          <Button key={button.label} {...button} />
+        ))}
+      </ModalFooter>
+    </ModalDialog>
+  )
+}

package/src/atoms/Modal/ModalBody.tsx

@@ -0,0 +1,12 @@
+import './Modal.scss'
+import { classNames } from '../../utils/classNames'
+
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function ModalBody({ className, children, ...props }: ModalBodyProps) {
+  return (
+    <div className={classNames('modal-body', className)} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/Modal/ModalCloseButton.tsx

@@ -0,0 +1,23 @@
+import './Modal.scss'
+import { IconButton } from '../Button'
+
+export interface ModalCloseButtonProps {
+  label?: string
+  onClick?: () => void
+}
+
+export function ModalCloseButton({
+  label = 'Close',
+  onClick,
+}: ModalCloseButtonProps) {
+  return (
+    <IconButton
+      type="button"
+      variant="tertiary"
+      accessibilityLabel={label}
+      icon="Close"
+      size="4"
+      onClick={onClick}
+    />
+  )
+}