mautourco-components 0.2.46 → 0.2.48

package/src/components/molecules/AgeSelector/AgeSelector.tsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useRef, useState } from 'react';
+import '../../../styles/components/molecule/age-selector.css';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface AgeSelectorProps {
+  /** Label for the selector */
+  label: string;
+  /** Current selected age value */
+  value: number | undefined;
+  /** Callback when age changes */
+  onChange: (age: number) => void;
+  /** Available age range */
+  ageRange: number[];
+  /** Whether the field is required */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Placeholder text */
+  placeholder?: string;
+}
+
+const AgeSelector: React.FC<AgeSelectorProps> = ({
+  label,
+  value,
+  onChange,
+  ageRange,
+  required = false,
+  className = '',
+  placeholder = '--',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>(
+    value !== undefined ? value.toString() : ''
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync input value when prop value changes
+  useEffect(() => {
+    setInputValue(value !== undefined ? value.toString() : '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    // Only allow numeric input or empty string
+    if (newValue === '' || /^\d+$/.test(newValue)) {
+      setInputValue(newValue);
+
+      // Only update if it's a valid number within range
+      const numValue = parseInt(newValue, 10);
+      if (newValue === '') {
+        // Allow empty input - don't update onChange
+        return;
+      } else if (!isNaN(numValue) && ageRange.includes(numValue)) {
+        onChange(numValue);
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Validate and set to valid value or clear if invalid
+    const numValue = parseInt(inputValue, 10);
+    if (inputValue === '') {
+      // Keep empty if user cleared it
+      return;
+    } else if (isNaN(numValue) || !ageRange.includes(numValue)) {
+      // Reset to current value if invalid
+      setInputValue(value !== undefined ? value.toString() : '');
+    } else {
+      // Ensure the input value matches the validated value
+      setInputValue(numValue.toString());
+    }
+  };
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      inputRef.current?.blur();
+    }
+  };
+
+  const handleSelect = (age: string) => {
+    const numAge = parseInt(age, 10);
+    onChange(numAge);
+    setIsOpen(false);
+    setInputValue(age);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ageOptions = ageRange.map((age) => age.toString());
+
+  return (
+    <div className={`age-selector ${className}`} ref={containerRef}>
+      <Text size="sm" variant="regular" className="age-selector__label">
+        {label}
+        {required && <span className="age-selector__required"> *</span>}
+      </Text>
+      <div className="age-selector__container">
+        <div
+          className={`age-selector__input ${isOpen ? 'age-selector__input--open' : ''} ${value !== undefined ? 'age-selector__input--selected' : 'age-selector__input--default'}`}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            className="age-selector__input-field"
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputBlur}
+            onKeyDown={handleInputKeyDown}
+            onFocus={() => setIsOpen(false)}
+            placeholder={placeholder}
+            aria-label={`${label} age`}
+          />
+          <button
+            type="button"
+            className="age-selector__dropdown-btn"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleDropdownToggle();
+            }}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-label="Open age dropdown">
+            <Icon
+              name="chevron-down"
+              size="sm"
+              className={`age-selector__icon ${isOpen ? 'age-selector__icon--open' : ''}`}
+            />
+          </button>
+        </div>
+        {isOpen && (
+          <div className="age-selector__dropdown" role="listbox">
+            {ageOptions.map((age) => (
+              <div
+                key={age}
+                className={`age-selector__option ${value?.toString() === age ? 'age-selector__option--selected' : ''}`}
+                onClick={() => handleSelect(age)}
+                role="option"
+                aria-selected={value?.toString() === age}>
+                {age}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AgeSelector;

package/src/components/molecules/LocationDropdown/LocationDropdown.tsx

@@ -189,7 +189,7 @@ const LocationDropdown: React.FC<LocationDropdownProps> = ({
   return (
     <div
       ref={dropdownRef}
-      className={`location-dropdown location-dropdown--${type} ${className}`}>
+      className={`location-dropdown location-dropdown--${type} ${disabled ? 'location-dropdown--disabled' : ''} ${className}`}>
       {label && (
         <div className="location-dropdown__label">
           <Text size="sm" variant="medium">

package/src/components/molecules/Pagination/Pagination.css

@@ -1,11 +1,12 @@
-.pagination {
+.mtc-pagination {
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-gap-3, 12px);
-  padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-1-5, 6px);
+  padding: var(--spacing-gap-gap-3, 12px) var(--spacing-gap-gap-3, 12px)
+    var(--spacing-gap-gap-1-5, 6px);
 }
 
-.pagination__button {
+.mtc-pagination__button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,35 +15,38 @@
   border-radius: var(--border-radius-rounded-lg, 8px);
   padding: var(--spacing-padding-py-2, 8px) var(--spacing-padding-px-2, 8px);
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
 }
 
-.pagination__button:hover:not(:disabled) {
+.mtc-pagination__button:hover:not(:disabled) {
   background-color: var(--color-elevation-state-hover-subtle, #ededed);
   border-color: var(--color-border-medium, #a3a3a3);
 }
 
-.pagination__button:active:not(:disabled) {
+.mtc-pagination__button:active:not(:disabled) {
   background-color: var(--color-elevation-state-pressed-subtle, #d9d9d9);
 }
 
-.pagination__button:disabled {
+.mtc-pagination__button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.pagination__button:focus-visible {
+.mtc-pagination__button:focus-visible {
   outline: 2px solid var(--color-atoll-green-800, #0f7173);
   outline-offset: 2px;
 }
 
-.pagination__numbers {
+.mtc-pagination__numbers {
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-gap-1, 4px);
 }
 
-.pagination__number {
+.mtc-pagination__number {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -51,40 +55,45 @@
   background-color: var(--color-elevation-level-1, #ffffff);
   border: none;
   border-radius: var(--border-radius-rounded-lg, 8px);
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: var(--font-size-text-sm, 14px);
   font-weight: var(--font-weight-font-medium, 500);
   line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
   color: var(--color-text-default, #262626);
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
 }
 
-.pagination__number:hover:not(.pagination__number--selected) {
+.mtc-pagination__number:hover:not(.mtc-pagination__number--selected) {
   background-color: var(--color-elevation-level-2, #f5f5f5);
 }
 
-.pagination__number--selected {
+.mtc-pagination__number--selected {
   background-color: var(--color-atoll-green-800, #0f7173);
   color: var(--color-text-inverted, #ffffff);
 }
 
-.pagination__number:focus-visible {
+.mtc-pagination__number:focus-visible {
   outline: 2px solid var(--color-atoll-green-800, #0f7173);
   outline-offset: 2px;
 }
 
-.pagination__ellipsis {
+.mtc-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--dimension-width-w-10, 40px);
   height: var(--dimension-height-h-10, 40px);
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
   font-size: var(--font-size-text-sm, 14px);
   font-weight: var(--font-weight-font-medium, 500);
   line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
   color: var(--color-text-default, #262626);
   user-select: none;
 }
-

package/src/components/molecules/Pagination/Pagination.tsx

@@ -94,22 +94,21 @@ const Pagination: React.FC<PaginationProps> = ({
   const isNextDisabled = currentPage >= totalPages;
 
   return (
-    <div className={`pagination ${className}`}>
+    <div className={`mtc-pagination ${className}`}>
       <button
         type="button"
-        className="pagination__button pagination__button--prev"
+        className="mtc-pagination__button mtc-pagination__button--prev"
         onClick={handlePrevious}
         disabled={isPreviousDisabled}
-        aria-label="Previous page"
-      >
+        aria-label="Previous page">
         <Icon name="chevron-left" size="sm" />
       </button>
 
-      <div className="pagination__numbers">
+      <div className="mtc-pagination__numbers">
         {pageNumbers.map((page, index) => {
           if (page === 'ellipsis') {
             return (
-              <span key={`ellipsis-${index}`} className="pagination__ellipsis">
+              <span key={`ellipsis-${index}`} className="mtc-pagination__ellipsis">
                 ...
               </span>
             );
@@ -121,11 +120,10 @@ const Pagination: React.FC<PaginationProps> = ({
             <button
               key={page}
               type="button"
-              className={`pagination__number ${isSelected ? 'pagination__number--selected' : ''}`}
+              className={`mtc-pagination__number ${isSelected ? 'mtc-pagination__number--selected' : ''}`}
               onClick={() => handlePageClick(page)}
               aria-label={`Page ${page}`}
-              aria-current={isSelected ? 'page' : undefined}
-            >
+              aria-current={isSelected ? 'page' : undefined}>
               {page}
             </button>
           );
@@ -134,11 +132,10 @@ const Pagination: React.FC<PaginationProps> = ({
 
       <button
         type="button"
-        className="pagination__button pagination__button--next"
+        className="mtc-pagination__button mtc-pagination__button--next"
         onClick={handleNext}
         disabled={isNextDisabled}
-        aria-label="Next page"
-      >
+        aria-label="Next page">
         <Icon name="chevron-right" size="sm" />
       </button>
     </div>
@@ -146,4 +143,3 @@ const Pagination: React.FC<PaginationProps> = ({
 };
 
 export default Pagination;
-