mautourco-components 0.2.8 → 0.2.10

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import './Pagination.css';
+
+export interface PaginationProps {
+  /** Current page (1-indexed) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Handler called when page changes */
+  onPageChange: (page: number) => void;
+  /** Number of pages to display on each side of the current page */
+  siblingCount?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = '',
+}) => {
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePageClick = (page: number) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  // Generate page numbers to display
+  const getPageNumbers = (): (number | 'ellipsis')[] => {
+    const pages: (number | 'ellipsis')[] = [];
+    const totalNumbers = siblingCount * 2 + 5;
+    const totalBlocks = totalNumbers + 2;
+
+    if (totalPages <= totalBlocks) {
+      // Display all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+      const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+      const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+
+      if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {
+        // Case: [1] [2] [3] [4] ... [10]
+        const leftItemCount = 3 + 2 * siblingCount;
+        for (let i = 1; i <= leftItemCount; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      } else if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {
+        // Case: [1] ... [7] [8] [9] [10]
+        pages.push(1);
+        pages.push('ellipsis');
+        const rightItemCount = 3 + 2 * siblingCount;
+        for (let i = totalPages - rightItemCount + 1; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        // Case: [1] ... [4] [5] [6] ... [10]
+        pages.push(1);
+        pages.push('ellipsis');
+        for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+          pages.push(i);
+        }
+        pages.push('ellipsis');
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+  const isPreviousDisabled = currentPage <= 1;
+  const isNextDisabled = currentPage >= totalPages;
+
+  return (
+    <div className={`pagination ${className}`}>
+      <button
+        type="button"
+        className="pagination__button pagination__button--prev"
+        onClick={handlePrevious}
+        disabled={isPreviousDisabled}
+        aria-label="Previous page"
+      >
+        <Icon name="chevron-left" size="sm" />
+      </button>
+
+      <div className="pagination__numbers">
+        {pageNumbers.map((page, index) => {
+          if (page === 'ellipsis') {
+            return (
+              <span key={`ellipsis-${index}`} className="pagination__ellipsis">
+                ...
+              </span>
+            );
+          }
+
+          const isSelected = page === currentPage;
+
+          return (
+            <button
+              key={page}
+              type="button"
+              className={`pagination__number ${isSelected ? 'pagination__number--selected' : ''}`}
+              onClick={() => handlePageClick(page)}
+              aria-label={`Page ${page}`}
+              aria-current={isSelected ? 'page' : undefined}
+            >
+              {page}
+            </button>
+          );
+        })}
+      </div>
+
+      <button
+        type="button"
+        className="pagination__button pagination__button--next"
+        onClick={handleNext}
+        disabled={isNextDisabled}
+        aria-label="Next page"
+      >
+        <Icon name="chevron-right" size="sm" />
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;
+

package/src/components/molecules/SectionTitle/SectionTitle.css

@@ -0,0 +1,35 @@
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-gap-2, 8px);
+  padding: var(--spacing-padding-py-0, 0px) var(--spacing-padding-px-0, 0px);
+}
+
+.section-title__left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2, 8px);
+  min-width: 0;
+}
+
+.section-title__marker {
+  width: var(--dimension-width-w-1, 4px);
+  height: var(--spacing-padding-py-8, 32px);
+  background-color: var(--color-elevation-brand-subtle, #fe8839);
+  border-radius: var(--border-radius-rounded-none, 0px);
+  flex-shrink: 0;
+}
+
+.section-title__text {
+  margin: 0;
+}
+
+.section-title__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-gap-2, 8px);
+  flex-shrink: 0;
+}
+
+

package/src/components/molecules/SectionTitle/SectionTitle.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Heading } from '../../atoms/Typography/Typography';
+import './SectionTitle.css';
+
+export interface SectionTitleProps {
+  /** Main title text */
+  title: string;
+  /** Visual style of the title */
+  variant?: 'accent' | 'default';
+  /** Optional left color bar */
+  showMarker?: boolean;
+  /** Additional content displayed on the right side (e.g. actions, badges) */
+  trailing?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
+  variant = 'accent',
+  showMarker = true,
+  trailing,
+  className = '',
+}) => {
+  const baseClass = 'section-title';
+  const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes}>
+      <div className="section-title__left">
+        {showMarker && <span className="section-title__marker" aria-hidden="true" />}
+        <Heading level={3} variant="bold" color={variant === 'accent' ? 'accent' : 'default'} className="section-title__text">
+          {title}
+        </Heading>
+      </div>
+      {trailing && <div className="section-title__trailing">{trailing}</div>}
+    </div>
+  );
+};
+
+export default SectionTitle;
+
+

package/src/components/molecules/ServiceSelector/ServiceSelector.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import '../../../styles/components/molecule/service-selector.css';
+
+export type ServiceType = 'transfer' | 'accommodation' | 'excursion';
+
+export interface ServiceOption {
+  value: ServiceType;
+  label: string;
+  icon: string;
+  disabled?: boolean;
+  badge?: string;
+}
+
+export interface ServiceSelectorProps {
+  /** Selected service */
+  value?: ServiceType;
+  /** Change handler */
+  onChange: (value: ServiceType) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const DEFAULT_OPTIONS: ServiceOption[] = [
+  {
+    value: 'accommodation',
+    label: 'Accommodation',
+    icon: 'building',
+  },
+  {
+    value: 'transfer',
+    label: 'Transfer',
+    icon: 'car',
+  },
+  {
+    value: 'excursion',
+    label: 'Excursion',
+    icon: 'map-pin',
+    disabled: true,
+    badge: 'Coming soon',
+  },
+];
+
+const ServiceSelector: React.FC<ServiceSelectorProps> = ({
+  value,
+  onChange,
+  disabled = false,
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleToggleDropdown = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleOptionSelect = (option: ServiceOption) => {
+    if (disabled || option.disabled) return;
+    onChange(option.value);
+    setIsOpen(false);
+  };
+
+  const getDropdownState = () => {
+    if (disabled) return 'disabled';
+    // If a service is selected, always show selected state (even if open)
+    if (value) return 'selected';
+    if (isOpen) return 'open';
+    return 'default';
+  };
+
+  const selectedOption = value ? DEFAULT_OPTIONS.find(opt => opt.value === value) : null;
+  const displayText = selectedOption ? selectedOption.label : 'Select a service';
+
+  return (
+    <div ref={dropdownRef} className={`service-selector ${className}`}>
+      <button
+        type="button"
+        className={`service-selector__trigger service-selector__trigger--${getDropdownState()}`}
+        onClick={handleToggleDropdown}
+        disabled={disabled}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <div className="service-selector__trigger-content">
+          {selectedOption && (
+            <Icon 
+              name={selectedOption.icon as any} 
+              size="md" 
+              className="service-selector__trigger-icon" 
+            />
+          )}
+          <Text 
+            size="base" 
+            variant="bold"
+            className="service-selector__trigger-text"
+          >
+            {displayText}
+          </Text>
+        </div>
+        <Icon 
+          name="chevron-down-new" 
+          size="sm" 
+          className="service-selector__trigger-chevron"
+          style={{
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            transformOrigin: 'center'
+          }}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="service-selector__panel" role="listbox">
+          <div className="service-selector__content">
+            <div className="service-selector__options-wrapper">
+              {DEFAULT_OPTIONS.map((option) => {
+                const isSelected = value === option.value;
+                const isDisabled = option.disabled || disabled;
+                
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    className={`service-selector__option ${isSelected ? 'service-selector__option--selected' : ''} ${isDisabled ? 'service-selector__option--disabled' : ''}`}
+                    onClick={() => handleOptionSelect(option)}
+                    disabled={isDisabled}
+                    role="option"
+                    aria-selected={isSelected}
+                  >
+                    <Icon 
+                      name={option.icon as any} 
+                      size="md" 
+                      className={`service-selector__option-icon ${isSelected ? 'service-selector__option-icon--selected' : ''}`} 
+                    />
+                    <Text 
+                      size="base" 
+                      variant="bold"
+                      color={isSelected ? 'inverted' : 'default'}
+                      className="service-selector__option-text"
+                    >
+                      {option.label}
+                    </Text>
+                    {option.badge && (
+                      <span className="service-selector__option-badge">
+                        {option.badge}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ServiceSelector;
+

package/src/components/molecules/ServiceSelector/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ServiceSelector';
+export type { ServiceSelectorProps, ServiceType, ServiceOption } from './ServiceSelector';
+

package/src/components/molecules/Stepper/Stepper.css

@@ -0,0 +1,67 @@
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stepper-spacing-controller-gap, 8px);
+  padding: var(--stepper-spacing-controller-padding-y, 0px) var(--stepper-spacing-controller-padding-x, 0px);
+}
+
+.stepper__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stepper-dimension-cta-width, 32px);
+  height: var(--stepper-dimension-cta-height, 32px);
+  padding: var(--stepper-spacing-cta-padding-y, 0px) var(--stepper-spacing-cta-padding-x, 0px);
+  border: none;
+  border-radius: var(--stepper-border-radius-cta, 9999px);
+  background-color: var(--stepper-color-cta-background-default, #ffffff);
+  color: var(--stepper-color-cta-foreground-default, #000000);
+  cursor: pointer;
+  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-px, 1px) var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11),
+    var(--spacing-base-0, 0px) var(--spacing-base-1, 4px) var(--backdrop-blur-backdrop-blur, 8px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.1);
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.stepper__button:hover:not(:disabled) {
+  background-color: var(--stepper-color-cta-background-hover, #115b5e);
+  color: var(--stepper-color-cta-foreground-hover, #ffffff);
+}
+
+.stepper__button:active:not(:disabled) {
+  background-color: var(--stepper-color-cta-background-pressed, #042c2f);
+  color: var(--stepper-color-cta-foreground-pressed, #ffffff);
+}
+
+.stepper__button:disabled {
+  background-color: var(--stepper-color-cta-background-disabled, #fbfbfb);
+  color: var(--stepper-color-cta-foreground-disabled, #aaaeb8);
+  cursor: not-allowed;
+}
+
+.stepper__button:focus-visible {
+  outline: var(--border-width-focus, 2px) solid var(--color-border-active-default, #0f7173);
+  outline-offset: var(--spacing-base-0-5, 2px);
+}
+
+.stepper__counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--stepper-dimension-counter-width, 72px);
+  padding: var(--stepper-spacing-counter-padding-y, 4px) var(--spacing-padding-px-6, 24px);
+  background-color: var(--stepper-color-counter, #ffffff);
+  border-radius: var(--stepper-border-radius-counter, 8px);
+  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-0, 0px) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11),
+    var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px) var(--spacing-base-0-5, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.1);
+}
+
+.stepper__counter-value {
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-lg, 18px);
+  line-height: calc(var(--font-leading-leading-md, 24) * 1px);
+  color: var(--color-text-default, #262626);
+  text-align: center;
+}
+

package/src/components/molecules/Stepper/Stepper.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import './Stepper.css';
+
+export interface StepperProps {
+  /** Current value */
+  value: number;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Handler called when value changes */
+  onChange: (value: number) => void;
+  /** Disable the stepper */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const Stepper: React.FC<StepperProps> = ({
+  value,
+  min = 0,
+  max = 99,
+  onChange,
+  disabled = false,
+  className = '',
+}) => {
+  const handleDecrement = () => {
+    if (!disabled && value > min) {
+      onChange(value - 1);
+    }
+  };
+
+  const handleIncrement = () => {
+    if (!disabled && value < max) {
+      onChange(value + 1);
+    }
+  };
+
+  const isDecrementDisabled = disabled || value <= min;
+  const isIncrementDisabled = disabled || value >= max;
+
+  const baseClass = 'stepper';
+  const classes = [baseClass, className].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes}>
+      <button
+        type="button"
+        className="stepper__button stepper__button--decrement"
+        onClick={handleDecrement}
+        disabled={isDecrementDisabled}
+        aria-label="Decrease value"
+      >
+        <Icon name="minus" size="sm" />
+      </button>
+      <div className="stepper__counter">
+        <span className="stepper__counter-value">{value}</span>
+      </div>
+      <button
+        type="button"
+        className="stepper__button stepper__button--increment"
+        onClick={handleIncrement}
+        disabled={isIncrementDisabled}
+        aria-label="Increase value"
+      >
+        <Icon name="plus" size="sm" />
+      </button>
+    </div>
+  );
+};
+
+export default Stepper;
+

package/src/components/molecules/TableServiceItem/DetailsCol.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+interface DetailsColData {
+  icon: IconName;
+  value: React.ReactNode;
+}
+
+export interface DetailsColProps {
+  data: DetailsColData[];
+  index?: number;
+}
+
+export const DetailsCol: React.FC<DetailsColProps> = (props) => {
+  const { data } = props;
+
+  return (
+    <div className="grid gap-y-1">
+      {data.map((item) => (
+        <TextWithIcon icon={item.icon}>{item.value}</TextWithIcon>
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/TableServiceItem/ItemCol.tsx

@@ -0,0 +1,68 @@
+import { Text } from '@/src/components/atoms/Typography/Typography';
+import { cn } from '@/src/lib/utils';
+import Chip from '../../atoms/Chip/Chip';
+import { IconName } from '../../atoms/Icon/Icon';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+
+export interface ItemColProps {
+  serviceType: 'Accommodation' | 'Excursion' | 'Transfer' | 'Other Services';
+  serviceName?: string;
+  extraTitle?: React.ReactNode;
+  offers?: any[];
+  status?: string;
+  iconName?: IconName;
+  showName?: boolean;
+  children?: React.ReactNode;
+}
+
+export const ItemCol: React.FC<ItemColProps> = (props) => {
+  const {
+    serviceType,
+    serviceName,
+    offers,
+    status,
+    iconName = 'accom',
+    showName = true,
+    extraTitle,
+    children,
+  } = props;
+
+  const isOnRequest = status?.toLowerCase() === 'on request';
+
+  return (
+    <div className={cn('grid', offers?.length && 'gap-y-3')}>
+      <div>
+        {serviceName && (
+          <div className="grid gap-y-1">
+            <div className="flex items-center gap-x-2">
+              <TextWithIcon icon={iconName} color={isOnRequest ? 'yellow' : 'accent'}>
+                {serviceType}
+              </TextWithIcon>
+              {isOnRequest && <Chip color="yellow">{status}</Chip>}
+              {extraTitle}
+            </div>
+            <Text variant="bold" size="sm">
+              {showName && serviceName}
+            </Text>
+          </div>
+        )}
+        {children}
+      </div>
+      {offers && offers.length > 0 && (
+        <div>
+          <Text variant="bold" size="sm" leading="5">
+            Applicable offers:
+          </Text>
+          <Text variant="regular" size="sm" leading="5">
+            {offers.map((o) => {
+              const offerValue =
+                o.OfferType === 'GIFT' ? o.OfferName : `${o.OfferValue}%  offers applied`;
+
+              return <span>{offerValue}</span>;
+            })}
+          </Text>
+        </div>
+      )}
+    </div>
+  );
+};