mautourco-components 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

package/src/components/atoms/Icon/Icon.tsx

@@ -14,7 +14,6 @@ import EyeIcon from "./icons/EyeIcon";
 import InfoIcon from "./icons/InfoIcon";
 import CheckCircleIcon from "./icons/CheckCircleIcon";
 import StrollerIcon from "./icons/StrollerIcon";
-import ChevronDownIcon from "./icons/ChevronDownIcon";
 import CarIcon from "./icons/CarIcon";
 import MoreIcon from "./icons/MoreIcon";
 import Settings from "./icons/Settings";
@@ -74,6 +73,7 @@ interface IconProps {
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   className?: string;
   color?: string;
+  style?: React.CSSProperties;
 }
 
 const Icon: React.FC<IconProps> = ({
@@ -81,8 +81,9 @@ const Icon: React.FC<IconProps> = ({
   size = "md",
   className = "",
   color,
+  style,
 }) => {
-  const iconProps = { size, className, color };
+  const iconProps = { size, className, color, style };
 
   switch (name) {
     case "chevron-down":
@@ -124,7 +125,7 @@ const Icon: React.FC<IconProps> = ({
     case "stroller":
       return <StrollerIcon {...iconProps} />;
     case "chevron-down-new":
-      return <ChevronDownIcon {...iconProps} />;
+      return <Chevron direction="down" variant="filled" {...iconProps} />;
     case "car":
       return <CarIcon {...iconProps} />;
     case "more":

package/src/components/atoms/Icon/icons/Chevron.tsx

@@ -2,16 +2,20 @@ import React from 'react';
 
 interface ChevronProps {
   direction?: 'up' | 'down' | 'left' | 'right';
+  variant?: 'outline' | 'filled';
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   className?: string;
   color?: string;
+  style?: React.CSSProperties;
 }
 
 const Chevron: React.FC<ChevronProps> = ({
   direction = 'down',
+  variant = 'outline',
   size = 'md',
   className = '',
-  color
+  color,
+  style
 }) => {
   const getSizeClasses = () => {
     switch (size) {
@@ -24,14 +28,13 @@ const Chevron: React.FC<ChevronProps> = ({
     }
   };
 
-  const getDirectionStyle = () => {
-    switch (direction) {
-      case 'up': return { transform: 'rotate(0deg)' };
-      case 'down': return { transform: 'rotate(0deg)' };
-      case 'left': return { transform: 'rotate(360deg)' };
-      case 'right': return { transform: 'rotate(360deg)' };
-      default: return { transform: 'rotate(0deg)' };
+  const getRotationStyle = () => {
+    if (variant === 'filled') {
+      const rotations = { up: 180, down: 0, left: 90, right: -90 };
+      return { transform: `rotate(${rotations[direction] || 0}deg)` };
     }
+    // Outline variant doesn't need rotation (paths handle direction)
+    return { transform: 'rotate(0deg)' };
   };
 
   const getPath = () => {
@@ -50,14 +53,30 @@ const Chevron: React.FC<ChevronProps> = ({
   };
 
   const sizeClasses = getSizeClasses();
-  const directionStyle = getDirectionStyle();
   const colorClass = color ? `text-${color}` : 'text-current';
   const classes = `${sizeClasses} ${colorClass} ${className}`;
+  const rotationStyle = getRotationStyle();
+  const combinedStyle = style ? { ...rotationStyle, ...style } : rotationStyle;
 
-  return (
+  return variant === 'filled' ? (
+    <svg
+      className={classes}
+      style={combinedStyle}
+      viewBox="0 0 15 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.4707 0.571533H2.07621C0.87817 0.571533 0.163582 1.90675 0.828137 2.90358L6.02536 10.6994C6.6191 11.59 7.92778 11.59 8.52151 10.6994L13.7187 2.90358C14.3833 1.90675 13.6687 0.571533 12.4707 0.571533Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="1.14286"
+      />
+    </svg>
+  ) : (
     <svg 
       className={classes} 
-      style={directionStyle}
+      style={combinedStyle}
       viewBox="0 0 24 24" 
       fill="none" 
       stroke="currentColor" 

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/styles/components/molecule/service-selector.css

@@ -0,0 +1,228 @@
+/* Service Selector Component Styles */
+
+.service-selector {
+  position: relative;
+  width: 100%;
+}
+
+/* Trigger Button */
+.service-selector__trigger {
+  width: 100%;
+  padding: var(--service-selector-spacing-service-selector-padding-y, 12px) var(--service-selector-spacing-service-selector-padding-x, 24px);
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  border-radius: var(--border-radius-rounded-xl, 12px);
+  opacity: var(--opacity-opacity-100, 1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--service-selector-spacing-service-selector-gap, 40px);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  /* Website/Light/Level 1 */
+  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(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.10);
+}
+
+.service-selector__trigger:hover:not(:disabled):not(.service-selector__trigger--selected) {
+  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+.service-selector__trigger-content {
+  display: flex;
+  align-items: center;
+  gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
+  flex: 1;
+  min-width: 0;
+}
+
+.service-selector__trigger-icon {
+  flex-shrink: 0;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-text {
+  flex-shrink: 0;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-chevron {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger-chevron svg {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+}
+
+/* Trigger States */
+.service-selector__trigger--default {
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+}
+
+.service-selector__trigger--default .service-selector__trigger-icon,
+.service-selector__trigger--default .service-selector__trigger-text,
+.service-selector__trigger--default .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+.service-selector__trigger--open {
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+/* Selected state - same style as default */
+.service-selector__trigger.service-selector__trigger--selected {
+  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
+}
+
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-icon,
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-text,
+.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-chevron {
+  color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
+}
+
+/* When dropdown is open AND a service is selected, keep default style */
+.service-selector__trigger.service-selector__trigger--selected:hover {
+  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
+}
+
+.service-selector__trigger--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.service-selector__trigger--disabled .service-selector__trigger-icon,
+.service-selector__trigger--disabled .service-selector__trigger-chevron {
+  color: var(--color-neutral-400, #a3a3a3);
+}
+
+/* Dropdown Panel */
+.service-selector__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8px;
+  background-color: var(--color-elevation-level-1, #ffffff);
+  border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
+  overflow: hidden;
+  z-index: 50;
+  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  box-shadow: 0px 0px 4px 0px rgba(48, 54, 66, 0.11), 0px 0px 2px 0px rgba(48, 54, 66, 0.1);
+}
+
+.service-selector__content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f3f4f6;
+}
+
+.service-selector__content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.service-selector__content::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 3px;
+}
+
+.service-selector__content::-webkit-scrollbar-thumb {
+  background: #9ca3af;
+  border-radius: 3px;
+}
+
+.service-selector__options-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+/* Option */
+.service-selector__option {
+  width: 100%;
+  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px) var(--service-selector-spacing-dropdown-item-padding-x, 24px);
+  display: flex;
+  align-items: center;
+  gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  border: 0;
+  background-color: var(--service-selector-color-dropdown-item-background-default, transparent);
+  text-align: left;
+  border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
+}
+
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) {
+  background-color: var(--service-selector-color-dropdown-item-background-hover, #f5f5f5);
+}
+
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-icon,
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-hover, #404040);
+}
+
+.service-selector__option--selected {
+  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+}
+
+.service-selector__option--selected:hover {
+  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+}
+
+.service-selector__option--selected .service-selector__option-icon,
+.service-selector__option--selected .service-selector__option-text {
+  color: var(--service-selector-color-dropdown-item-foreground-active, #ffffff);
+}
+
+.service-selector__option--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.service-selector__option--disabled:hover {
+  background-color: transparent;
+}
+
+.service-selector__option-icon {
+  flex-shrink: 0;
+  color: var(--service-selector-color-dropdown-item-foreground-default, #737373);
+}
+
+.service-selector__option-icon--selected {
+  color: var(--service-selector-color-dropdown-item-foreground-active, #ffffff);
+}
+
+.service-selector__option-text {
+  flex: 1;
+  color: var(--service-selector-color-dropdown-item-foreground-default, #737373);
+}
+
+.service-selector__option-badge {
+  padding: 2px 8px;
+  border-radius: var(--service-selector-boder-radius-dropdown-item-pill, 9999px);
+  font-size: 12px;
+  font-weight: 700;
+  margin-left: auto;
+  background-color: var(--color-brand-primary, #fe8839);
+  color: var(--color-text-inverted, #ffffff);
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .service-selector__trigger {
+    padding: 10px 16px;
+  }
+
+  .service-selector__option {
+    padding: 10px 16px;
+  }
+}
+

package/src/components/atoms/Icon/icons/ChevronDownIcon.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-interface ChevronDownIconProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-}
-
-const ChevronDownIcon: React.FC<ChevronDownIconProps> = ({
-  size = 'md',
-  className = '',
-  color
-}) => {
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'xs': return 'w-3 h-3';
-      case 'sm': return 'w-4 h-4';
-      case 'md': return 'w-5 h-5';
-      case 'lg': return 'w-6 h-6';
-      case 'xl': return 'w-8 h-8';
-      default: return 'w-5 h-5';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg
-      className={classes}
-      viewBox="0 0 15 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12.4707 0.571533H2.07621C0.87817 0.571533 0.163582 1.90675 0.828137 2.90358L6.02536 10.6994C6.6191 11.59 7.92778 11.59 8.52151 10.6994L13.7187 2.90358C14.3833 1.90675 13.6687 0.571533 12.4707 0.571533Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="1.14286"
-      />
-    </svg>
-  );
-};
-
-export default ChevronDownIcon;