mautourco-components 0.2.16 → 0.2.17

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconName } from '../../../atoms/Icon/Icon';
+import './TabCancellationPolicyLayout.css';
+interface TabCancellationPolicyLayoutProps {
+    title: string;
+    icon: IconName;
+    isOnRequest: boolean;
+    children: React.ReactNode;
+    image: string;
+    header: React.ReactNode;
+}
+export default function TabCancellationPolicyLayout(props: TabCancellationPolicyLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicyLayout/TabCancellationPolicyLayout.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chip from '../../../atoms/Chip/Chip';
+import TextWithIcon from '../../../molecules/TextWithIcon/TextWithIcon';
+import './TabCancellationPolicyLayout.css';
+export default function TabCancellationPolicyLayout(props) {
+    var title = props.title, icon = props.icon, isOnRequest = props.isOnRequest, children = props.children, image = props.image, header = props.header;
+    return (_jsxs("div", __assign({ className: "details-cancellation-policy__layout" }, { children: [_jsxs(TextWithIcon, __assign({ icon: icon, color: isOnRequest ? 'yellow' : 'accent', textVariant: "bold" }, { children: [title, isOnRequest && _jsx(Chip, __assign({ color: "yellow" }, { children: "On request" }))] })), _jsxs("div", __assign({ className: "details-cancellation-policy__layout-flex" }, { children: [_jsx("figure", { children: _jsx("img", { src: image, alt: title, width: 400, height: 400 }) }), _jsxs("div", __assign({ className: "details-cancellation-policy__layout-content" }, { children: [_jsx("div", __assign({ className: "details-cancellation-policy__layout-content-header" }, { children: header })), _jsx("div", __assign({ className: "details-cancellation-policy__layout-content-body" }, { children: children }))] }))] }))] })));
+}

package/dist/components/organisms/TabCancellationPolicy/index.d.ts

@@ -0,0 +1,6 @@
+export * from './CancellationBody';
+export * from './CancellationHeader';
+export * from './TabCancellationPolicy';
+export type { CancellationAccomProps } from './CancellationAccom';
+export type { CancellationExcursionProps } from './CancellationExcursion';
+export type { CancellationTransferProps } from './CancellationTransfer';

package/dist/components/organisms/TabCancellationPolicy/index.js

@@ -0,0 +1,3 @@
+export * from './CancellationBody';
+export * from './CancellationHeader';
+export * from './TabCancellationPolicy';

package/dist/components/organisms/Table/columns/booking-columns.js

@@ -45,7 +45,7 @@ export var bookingColumns = function (_a) {
             width: 260,
             cell: function (value) {
                 var dates = value;
-                return _jsx(DateDisplay, { date: dates });
+                return _jsx(DateDisplay, { dates: dates });
             },
         },
         {

package/dist/components/organisms/Table/columns/detail-resume-columns.js

@@ -104,7 +104,7 @@ export var detailResumeColumns = function () {
                         date = [otherService.service_date];
                         break;
                 }
-                return _jsx(DateDisplay, { date: date });
+                return _jsx(DateDisplay, { dates: date });
             },
         },
         {

package/dist/components/organisms/Table/columns/quotation-columns.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Button from '@/src/components/atoms/Button/Button';
 import Chip from '@/src/components/atoms/Chip/Chip';
 import { Text } from '@/src/components/atoms/Typography/Typography';
@@ -56,7 +56,7 @@ export var quotationColumns = function (_a) {
             width: 260,
             cell: function (value) {
                 var dates = value;
-                return _jsx(DateDisplay, { date: dates });
+                return _jsx(DateDisplay, { dates: dates });
             },
         },
         {
@@ -72,7 +72,7 @@ export var quotationColumns = function (_a) {
             header: 'Created by',
             key: 'created_by',
             width: 160,
-            cell: function (value) { return (_jsx(Text, __assign({ variant: "medium", size: "sm" }, { children: value }))); },
+            cell: function (value, raw) { return (_jsxs(_Fragment, { children: [_jsxs(Text, __assign({ variant: "medium", size: "sm", leading: "4" }, { children: [raw.file_name, ","] })), _jsx(Text, __assign({ variant: "bold", size: "sm", leading: "4" }, { children: value }))] })); },
         },
         {
             header: '',

package/dist/components/organisms/Timeline/Timeline.d.ts

@@ -10,5 +10,6 @@ export interface TimelineProps {
     arrival: string;
     departure: string;
     services: TimelineServices[];
+    className?: string;
 }
 export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/organisms/Timeline/Timeline.js

@@ -10,10 +10,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/src/lib/utils';
 import { Text } from '../../atoms/Typography/Typography';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
 import TimelineItem from '../../molecules/TimelineItem/TimelineItem';
 export var Timeline = function (props) {
-    var arrival = props.arrival, departure = props.departure, services = props.services;
-    return (_jsxs("div", __assign({ className: "space-y-10" }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
+    var arrival = props.arrival, departure = props.departure, services = props.services, className = props.className;
+    return (_jsxs("div", __assign({ className: cn('space-y-10', className) }, { children: [_jsxs(TextWithIcon, __assign({ icon: "arrival", color: "accent", iconSize: "lg" }, { children: ["Arrival :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: arrival }))] })), _jsx("div", __assign({ className: "overflow-x-auto" }, { children: _jsx("div", __assign({ className: "flex gap-x-3 pb-8 2xl:pb-0" }, { children: services.map(function (service, index) { return (_jsxs(TimelineItem, { children: [service.type === 'transfer' && (_jsx(TimelineItem.Transfer, __assign({}, service.data))), service.type === 'accommodation' && (_jsx(TimelineItem.Accommodation, __assign({}, service.data))), service.type === 'excursion' && (_jsx(TimelineItem.Excursion, __assign({}, service.data)))] }, "tm-".concat(index))); }) })) })), _jsxs(TextWithIcon, __assign({ icon: "departure", color: "accent", iconSize: "lg" }, { children: ["Departure :", ' ', _jsx(Text, __assign({ variant: "regular", size: "lg", leading: "5", color: "default", as: "span" }, { children: departure }))] }))] })));
 };

package/dist/index.d.ts

@@ -14,8 +14,10 @@ export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
 export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
+export * from './components/molecules/DetailsInfo';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -39,6 +41,7 @@ export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSe
 export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
 export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';
@@ -70,6 +73,7 @@ export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './compon
 export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
 export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';

package/dist/index.js

@@ -16,8 +16,10 @@ export { Heading, Text } from './components/atoms/Typography/Typography';
 export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 // Molecules - Composed components
+export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
+export * from './components/molecules/DetailsInfo';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -42,6 +44,7 @@ export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSe
 export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
+export * from './components/organisms/TabCancellationPolicy';
 export * from './components/organisms/Table';
 export { Timeline } from './components/organisms/Timeline/Timeline';
 export { TopNavigation } from './components/organisms/TopNavigation/TopNavigation';

package/dist/types/table/action-dropdown-type.types.d.ts

@@ -1,5 +1,6 @@
 export declare enum ActionDropdownType {
     ADD_ITEM = "add_item",
     SEND_VIA_MAIL = "send_via_mail",
+    CANCEL_SERVICES = "cancel_services",
     DELETE_QUOTE = "delete_quote"
 }

package/dist/types/table/action-dropdown-type.types.js

@@ -2,5 +2,6 @@ export var ActionDropdownType;
 (function (ActionDropdownType) {
     ActionDropdownType["ADD_ITEM"] = "add_item";
     ActionDropdownType["SEND_VIA_MAIL"] = "send_via_mail";
+    ActionDropdownType["CANCEL_SERVICES"] = "cancel_services";
     ActionDropdownType["DELETE_QUOTE"] = "delete_quote";
 })(ActionDropdownType || (ActionDropdownType = {}));

package/package.json

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

package/src/components/atoms/Tab/Tab.css

@@ -16,7 +16,8 @@
   border: none;
   border-radius: calc(var(--tab-border-radius-default, 0) / 16);
   border-bottom-style: solid;
-  border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16);
+  /* border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16); */
+  border-bottom-width: 4px;
   border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
   background-color: var(--tab-color-normal-default-background, #ffffff);
   color: var(--color-text-state-default, #737373);
@@ -32,8 +33,7 @@
 
 .tab:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-normal-focused-border, #e5e5e5);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-normal-focused-border, #e5e5e5);
   background-color: var(--tab-color-normal-focused-background, #ffffff);
 }
 
@@ -67,8 +67,7 @@
 }
 
 .tab--active:focus-visible {
-  box-shadow: 0 0 0 calc(2rem / 16)
-    var(--tab-color-active-focused-border, #042c2f);
+  box-shadow: 0 0 0 calc(2rem / 16) var(--tab-color-active-focused-border, #042c2f);
   background-color: var(--tab-color-active-focused-background, #ffffff);
 }
 
@@ -141,7 +140,6 @@
   --tab-width: var(--tab-outline-sm-focus-width, 121rem);
   --tab-height: var(--tab-outline-sm-focus-height, 59rem);
   border-radius: calc(var(--border-radius-rounded-sm, 4rem) / 16);
-  border-top: calc(var(--border-border, 1rem) / 16)
-    solid var(--color-atoll-green-800, #0f7173);
+  border-top: calc(var(--border-border, 1rem) / 16) solid
+    var(--color-atoll-green-800, #0f7173);
 }
-

package/src/components/atoms/Typography/Typography.tsx

@@ -37,7 +37,7 @@ interface HeadingProps extends BaseProps {
   as?: keyof React.JSX.IntrinsicElements;
 }
 
-interface TextProps extends BaseProps {
+export interface TextProps extends BaseProps {
   size?: BodySizeInput;
   as?: keyof React.JSX.IntrinsicElements;
 }
@@ -92,11 +92,18 @@ const mapLeadingToToken = (
   return `leading-${leading}` as 'leading-4' | 'leading-5' | 'leading-6' | 'leading-7';
 };
 
-const getBodyClass = (size: BodyTokenSize, leading?: Leading): { className: string; lineHeightHandled: boolean } => {
+const getBodyClass = (
+  size: BodyTokenSize,
+  leading?: Leading
+): { className: string; lineHeightHandled: boolean } => {
   const availableLeadings = tokenBodyLeadings[size];
-  const desiredLeading = leading ? mapLeadingToToken(leading) : mapLeadingToToken(defaultBodyLeading[size]);
+  const desiredLeading = leading
+    ? mapLeadingToToken(leading)
+    : mapLeadingToToken(defaultBodyLeading[size]);
 
-  const resolvedLeading = availableLeadings.includes(desiredLeading) ? desiredLeading : availableLeadings[0];
+  const resolvedLeading = availableLeadings.includes(desiredLeading)
+    ? desiredLeading
+    : availableLeadings[0];
 
   return {
     className: `body-${size}-${resolvedLeading}`,
@@ -130,7 +137,12 @@ export const Heading: React.FC<HeadingProps> = ({
   const baseClass = headingTokenClass[level] ?? headingTokenClass[2];
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [baseClass, variantClass, leading ? leadingFallback[leading] : '', className]
+  const classes = [
+    baseClass,
+    variantClass,
+    leading ? leadingFallback[leading] : '',
+    className,
+  ]
     .filter(Boolean)
     .join(' ');
 
@@ -155,10 +167,18 @@ export const Text: React.FC<TextProps> = ({
 }) => {
   const Tag = as || 'p';
   const normalizedSize = bodySizeAlias[size];
-  const { className: baseClass, lineHeightHandled } = getBodyClass(normalizedSize, leading);
+  const { className: baseClass, lineHeightHandled } = getBodyClass(
+    normalizedSize,
+    leading
+  );
   const variantClass = buildVariantClass(baseClass, variant);
 
-  const classes = [baseClass, variantClass, leading && !lineHeightHandled ? leadingFallback[leading] : '', className]
+  const classes = [
+    baseClass,
+    variantClass,
+    leading && !lineHeightHandled ? leadingFallback[leading] : '',
+    className,
+  ]
     .filter(Boolean)
     .join(' ');
 

package/src/components/molecules/ActionDropdown/ActionDropdown.tsx

@@ -7,6 +7,9 @@ import './ActionDropdown.css';
 export interface ActionDropdownItem {
   /** Label for the action dropdown item */
   label: string;
+  /** Disable the action dropdown item */
+  disabled?: boolean;
+
   /** Callback function to be called when the action dropdown item is clicked */
   onClick?: () => void;
 }
@@ -14,6 +17,8 @@ export interface ActionDropdownItem {
 export interface ActionDropdownProps {
   /** Data for the action dropdown */
   data: ActionDropdownItem[];
+  /** Trigger element */
+  children?: React.ReactNode;
 }
 
 /**
@@ -24,17 +29,23 @@ export interface ActionDropdownProps {
  * @param ActionDropdownProps
  * @returns
  */
-export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data }) => {
+export const ActionDropdown: React.FC<ActionDropdownProps> = ({ data, children }) => {
   const [open, setOpen] = useState(false);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <button className="action-dropdown-trigger">
-          <Icon name="more-vertical" />
-        </button>
+        {children ?? (
+          <button className="action-dropdown-trigger">
+            <Icon name="more-vertical" />
+          </button>
+        )}
       </PopoverTrigger>
-      <PopoverContent className="action-dropdown" align="end">
+      <PopoverContent
+        className="action-dropdown"
+        align="end"
+        side="bottom"
+        avoidCollisions={false}>
         {data.map((item, index) => (
           <button
             key={`ad-${index}`}

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -11,7 +11,7 @@ export interface BreadcrumbsItem {
 
 export interface BreadcrumbsProps {
   items: BreadcrumbsItem[];
-  onBack: () => void;
+  onBack?: () => void;
 }
 
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = (props) => {

package/src/components/molecules/DateDisplay/DateDisplay.tsx

@@ -1,24 +1,38 @@
 import { format, isValid } from 'date-fns';
 import React, { Fragment, useMemo } from 'react';
 import Icon from '../../atoms/Icon/Icon';
-import { Text } from '../../atoms/Typography/Typography';
+import { Text, TextProps } from '../../atoms/Typography/Typography';
 
 export interface DateDisplayProps {
   /** Dates to display */
-  date: string[] | Date[];
+  dates: string[] | Date[];
+
+  /** Size of the arrow icon */
+  arrowSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Size of the calendar icon */
+  calendarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Size of the text */
+  textSize?: TextProps['size'];
 }
 
 /**
  * A component for displaying a list of dates in a readable format.
  *
  * @example
- * <DateDisplay date={['2025-01-01', '2025-01-02']} />
+ * <DateDisplay dates={['2025-01-01', '2025-01-02']} />
  * @param DateDisplayProps
  * @returns
  */
-export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
+export const DateDisplay: React.FC<DateDisplayProps> = ({
+  dates,
+  arrowSize = 'sm',
+  calendarSize = 'sm',
+  textSize = 'sm',
+}) => {
   const formattedDate = useMemo(() => {
-    return date.map((d) => {
+    return dates.map((d) => {
       const dateObj = new Date(d);
       // Check if the date is valid then format it to dd/MM/yyyy format
       if (isValid(dateObj)) {
@@ -27,19 +41,21 @@ export const DateDisplay: React.FC<DateDisplayProps> = ({ date }) => {
       // If the date is not valid, return the original date
       return d;
     }) as string[];
-  }, [date]);
+  }, [dates]);
 
   return (
     <div className="flex items-center gap-x-3">
       {formattedDate.map((date, index) => (
         <Fragment key={`dd-${index}`}>
           <span className="flex items-center gap-x-2">
-            <Icon name="calendar2" size="sm" />
-            <Text variant="medium" size="sm">
+            <Icon name="calendar2" size={calendarSize} />
+            <Text variant="medium" size={textSize}>
               {date}
             </Text>
           </span>
-          {formattedDate.length > 1 && index === 0 && <Icon name="arrow-right-outline" size="sm" />}
+          {formattedDate.length > 1 && index === 0 && (
+            <Icon name="arrow-right-outline" size={arrowSize} />
+          )}
         </Fragment>
       ))}
     </div>

package/src/components/molecules/DetailsInfo/DetailsAction.tsx

@@ -0,0 +1,55 @@
+import { ActionDropdownType } from '@/src/types/table';
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import { ActionDropdown, ActionDropdownItem } from '../ActionDropdown/ActionDropdown';
+
+export interface DetailsActionProps {
+  /** Data for the action dropdown */
+  data?: ActionDropdownItem[];
+  onAction?: (action: ActionDropdownType) => void;
+}
+
+export const DetailsAction: React.FC<DetailsActionProps> = (props) => {
+  const { data = [], onAction } = props;
+  return (
+    <ActionDropdown
+      data={
+        data.length > 0
+          ? data
+          : [
+              {
+                label: 'Add item',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.ADD_ITEM);
+                },
+              },
+              {
+                label: 'Cancel services',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.CANCEL_SERVICES);
+                },
+              },
+              {
+                label: 'Send via mail',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.SEND_VIA_MAIL);
+                },
+              },
+              {
+                label: 'Delete quote',
+                onClick: () => {
+                  onAction?.(ActionDropdownType.DELETE_QUOTE);
+                },
+              },
+            ]
+      }>
+      <Button
+        variant="outline-secondary"
+        trailingIcon="chevron-down"
+        size="sm"
+        className="w-[144px] !justify-between !px-[14px]">
+        More options
+      </Button>
+    </ActionDropdown>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsAgency.css

@@ -0,0 +1,21 @@
+.details-agency {
+  @apply grid gap-y-4;
+
+  width: 290px;
+  background-color: var(--card-color-background-default);
+  border-radius: var(--card-border-radius-default);
+  padding: var(--card-spacing-chill-padding-y) var(--card-spacing-chill-padding-x);
+  border: solid 1px var(--card-color-border-default);
+}
+
+.details-agency__content {
+  @apply grid gap-y-2;
+}
+
+.details-agency__content-item {
+  @apply flex items-center;
+}
+
+.details-agency__content-item-name {
+  flex: 0 0 150px;
+}

package/src/components/molecules/DetailsInfo/DetailsAgency.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+import { Text } from '../../atoms/Typography/Typography';
+import './DetailsAgency.css';
+
+export interface DetailsAgencyProps {
+  name: string;
+  clientType: string;
+  isOnRequest: boolean;
+  children?: React.ReactNode;
+}
+
+export const DetailsAgency: React.FC<DetailsAgencyProps> = (props) => {
+  const { name, clientType, isOnRequest, children } = props;
+  return (
+    <div className="flex flex-col gap-y-6 items-end">
+      <img src="/images/mautourco-logo.png" alt="Mautourco Logo" width={220} />
+      <div className="details-agency">
+        <Text variant="bold" color="accent">
+          Documents details:
+        </Text>
+        <div className="details-agency__content">
+          <div className="details-agency__content-item">
+            <Text
+              variant="bold"
+              size="sm"
+              leading="4"
+              className="details-agency__content-item-name">
+              Agency
+            </Text>
+            <Text size="sm" leading="4">
+              {name}
+            </Text>
+          </div>{' '}
+          <div className="details-agency__content-item">
+            <Text
+              variant="bold"
+              size="sm"
+              leading="4"
+              className="details-agency__content-item-name">
+              Client type
+            </Text>
+            <Text size="sm" leading="4">
+              {clientType}
+            </Text>
+          </div>
+        </div>
+      </div>
+      {isOnRequest && <Chip color="yellow">Waiting for confirmation</Chip>}
+      {children}
+    </div>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsFile.tsx

@@ -0,0 +1,27 @@
+import { cn } from '@/src/lib/utils';
+import React from 'react';
+import { Text } from '../../atoms/Typography/Typography';
+
+export interface DetailsFileProps {
+  number: string;
+  name: string;
+  label?: string;
+  isBig?: boolean;
+}
+
+export const DetailsFile: React.FC<DetailsFileProps> = (props) => {
+  const { number, name, label = 'File number:', isBig = false } = props;
+  return (
+    <div className="grid gap-y-2">
+      <Text
+        variant={isBig ? 'bold' : 'regular'}
+        className={cn(isBig && 'text-2xl')}
+        color={isBig ? 'brand' : 'default'}>
+        {label} {number}
+      </Text>
+      <Text variant="medium" color="accent">
+        {name}
+      </Text>
+    </div>
+  );
+};

package/src/components/molecules/DetailsInfo/DetailsInfo.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/src/lib/utils';
+import { DetailsAction } from './DetailsAction';
+import { DetailsAgency } from './DetailsAgency';
+import { DetailsFile } from './DetailsFile';
+
+export interface DetailsInfoProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function DetailsInfo(props: DetailsInfoProps) {
+  return <div className={cn('details-info', props.className)} {...props} />;
+}
+
+DetailsInfo.File = DetailsFile;
+DetailsInfo.Agency = DetailsAgency;
+DetailsInfo.Action = DetailsAction;

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

@@ -0,0 +1,4 @@
+export type { DetailsActionProps } from './DetailsAction';
+export type { DetailsAgencyProps } from './DetailsAgency';
+export type { DetailsFileProps } from './DetailsFile';
+export * from './DetailsInfo';

package/src/components/molecules/ServiceTitle/ServiceTitle.css

@@ -0,0 +1,13 @@
+.service-title {
+  @apply relative;
+  padding-left: 10px;
+  &::before {
+    content: '';
+    @apply absolute;
+    width: 2px;
+    left: 0;
+    top: 4px;
+    bottom: 4px;
+    background-color: var(--color-elevation-brand-subtle);
+  }
+}

package/src/components/molecules/ServiceTitle/ServiceTitle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text, TextProps } from '../../atoms/Typography/Typography';
+import './ServiceTitle.css';
+
+export interface ServiceTitleProps {
+  title: string;
+  textSize?: TextProps['size'];
+}
+
+export const ServiceTitle: React.FC<ServiceTitleProps> = (props) => {
+  const { title, textSize = 'md' } = props;
+  return (
+    <div className="service-title">
+      <Text variant="bold" size={textSize} color="accent">
+        {title}
+      </Text>
+    </div>
+  );
+};