mautourco-components 0.2.164 → 0.2.166

package/dist/components/organisms/Table/Table.css

@@ -6,10 +6,11 @@
   overflow-y: hidden;
   overflow-x: auto;
   max-width: 1680px;
-  &.table-container--no-total {
+}
+
+.table-container.table-container--no-total {
     padding-bottom: var(--spacing-padding-px-4);
   }
-}
 
 .text--highlight {
   background-color: var(--color-amber-100);
@@ -20,108 +21,86 @@
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  &.table-layout-fixed {
+}
+
+.table.table-layout-fixed {
     table-layout: fixed;
-    .table {
+  }
+
+.table.table-layout-fixed .table {
       table-layout: fixed;
     }
-  }
-  th,
-  td {
+
+.table th,
+  .table td {
     padding-inline: var(--spacing-padding-px-4);
   }
-  .table__cell-highlighted {
+
+.table .table__cell-highlighted {
     padding: 0;
   }
-}
-.table__header {
-  th {
-    height: 2.75rem;
-  }
-  th {
-    text-align: left;
-  }
-  th {
+.table__header th {
+  height: 2.75rem;
+  text-align: left;
     background-color: var(--color-elevation-level-2);
-  }
 }
-.table__body {
-  > tr {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  > tr {
-    transition-duration: 200ms;
-  }
-  > tr {
+.table__body > tr {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
     border-top: solid 1px var(--color-surface-300);
-    &:hover:not(.table__row-with-children) {
+}
+.table__body > tr:hover:not(.table__row-with-children) {
       background-color: var(--color-elevation-state-hover-subtle);
     }
-    &.table__row-highlighted:hover {
-      .table__row-div-highlighted {
+.table__body > tr.table__row-highlighted:hover .table__row-div-highlighted {
         background-color: var(--color-yellow-100);
       }
-    }
-    &.table__row-div-highlighted {
-      div.table__nested-wrapper table tr {
+.table__body > tr.table__row-div-highlighted div.table__nested-wrapper table tr {
         background-color: var(--color-yellow-50);
-        &:hover {
+      }
+.table__body > tr.table__row-div-highlighted div.table__nested-wrapper table tr:hover {
           background-color: var(--color-yellow-100);
         }
-      }
-    }
-    &.table__row-with-children {
-      tr:hover {
+.table__body > tr.table__row-with-children tr:hover {
         background-color: var(--color-elevation-state-hover-subtle);
       }
-    }
-    &:first-child {
+.table__body > tr:first-child {
       border-top: none;
     }
-    &.table__row-border-0 {
+.table__body > tr.table__row-border-0 {
       border-top: none;
-      &:not(:nth-of-type(1)) {
-        td {
+    }
+.table__body > tr.table__row-border-0:not(:nth-of-type(1)) td {
           vertical-align: top;
         }
-      }
-    }
-  }
-  td {
+.table__body td {
     padding-block: var(--spacing-padding-px-4);
-    &.table__cell-nested {
+  }
+.table__body td.table__cell-nested {
       padding: 0;
       overflow: hidden;
-      tr:last-child {
+    }
+.table__body td.table__cell-nested tr:last-child {
         border-bottom: none;
       }
-    }
-  }
-  .table__nested-wrapper {
+.table__body .table__nested-wrapper {
     overflow: hidden;
     display: block;
   }
-  .button__icon {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .button__icon {
-    transition-duration: 200ms;
-  }
+.table__body .button__icon {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
 }
 
 .table__row-nested {
   border-left: solid 4px var(--color-primary-brand);
 }
 
-.table__button-expanded {
-  .button__icon {
-    --tw-rotate: 180deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
+.table__button-expanded .button__icon {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .table__row-clickable {
@@ -132,38 +111,38 @@
   width: 136px;
 }
 
-.table__row-grouped {
-  > td {
+.table__row-grouped > td {
     padding: 0;
   }
-}
 
 .table__total-container {
   max-width: 1680px;
 }
 
-.table__total {
-  tr {
+.table__total tr {
     border: 1px solid var(--divider-color-default);
     border-left: none;
     border-right: none;
     position: relative;
   }
-  td {
+
+.table__total td {
     padding-block: var(--spacing-padding-px-4);
-    &:last-child {
+  }
+
+.table__total td:last-child {
       /* width: 160px;*/
       /* @media (min-width: 1680px) {
       } */
       width: var(--last-column-width);
     }
-  }
-}
 
 .table__total--dashed tr {
   border: 1px solid transparent;
   position: relative;
-  &::after {
+}
+
+.table__total--dashed tr::after {
     content: '';
     position: absolute;
     inset: -1px;
@@ -189,33 +168,35 @@
     background-position: top, bottom;
     background-repeat: repeat-x, repeat-x;
   }
-}
 
-.table__row-with-children {
-  > td {
+.table__row-with-children > td {
     padding: 0;
   }
-  .table__row-nested {
+
+.table__row-with-children .table__row-nested {
     border-top: none;
   }
-  .table .table__nested-wrapper tr {
+
+.table__row-with-children .table .table__nested-wrapper tr {
     border-top: none;
     background-color: #fff;
-    &:last-child {
+  }
+
+.table__row-with-children .table .table__nested-wrapper tr:last-child {
       border-bottom: solid 1px var(--color-surface-300);
     }
-    &:hover {
+
+.table__row-with-children .table .table__nested-wrapper tr:hover {
       background-color: var(--color-elevation-state-hover-subtle);
     }
-  }
-}
 
 .table__row-div-highlighted {
   background-color: var(--color-yellow-50);
   border: 1px solid transparent;
   position: relative;
+}
 
-  &::after {
+.table__row-div-highlighted::after {
     content: '';
     position: absolute;
     inset: -1px;
@@ -257,19 +238,22 @@
     background-position: top, bottom, left, right;
     background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   }
-  &:hover {
+
+.table__row-div-highlighted:hover {
     background-color: var(--color-yellow-100);
   }
-  & + tr {
+
+.table__row-div-highlighted + tr {
     border-top: none;
   }
-}
 
 .table__children--visible .table__children-wrapper {
   position: relative;
   border: 1px solid transparent;
   border-left: none;
-  &::after {
+}
+
+.table__children--visible .table__children-wrapper::after {
     content: '';
     position: absolute;
     inset: -1px;
@@ -311,5 +295,4 @@
       1px 100%;
     background-position: top, bottom, left, right;
     background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-  }
-}
+  }

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as Icon } from './components/atoms/Icon/Icon';
 export { default as DropdownInput } from './components/atoms/Inputs/DropdownInput/DropdownInput';
 export { default as Input } from './components/atoms/Inputs/Input/Input';
 export { default as Textarea } from './components/atoms/Inputs/Textarea/Textarea';
+export { default as Radio } from './components/atoms/Radio/Radio';
 export { default as RatingStar } from './components/atoms/RatingStar/RatingStar';
 export { default as SegmentedButton } from './components/atoms/SegmentedButton/SegmentedButton';
 export { default as SelectedValue } from './components/atoms/SelectedValue/SelectedValue';
@@ -59,6 +60,7 @@ export { default as DateTimePicker } from './components/organisms/DateTimePicker
 export { Dialog } from './components/organisms/Dialog/Dialog';
 export * from './components/organisms/DialogBookingAddItem';
 export * from './components/organisms/DialogBookingConfirm';
+export * from './components/organisms/DialogBookNow/DialogBookNow';
 export * from './components/organisms/DialogCancelService';
 export { DialogComparison } from './components/organisms/DialogComparison/DialogComparison';
 export * from './components/organisms/DialogDeleteConfirm';
@@ -112,6 +114,7 @@ export type { TopNavigationProps } from './components/organisms/TopNavigation/To
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
 export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
 export type { InputProps } from './components/atoms/Inputs/Input/Input';
+export type { RadioProps } from './components/atoms/Radio/Radio';
 export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
 export type { AgeSelectorProps } from './components/molecules/AgeSelector/AgeSelector';
 export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as Icon } from './components/atoms/Icon/Icon';
 export { default as DropdownInput } from './components/atoms/Inputs/DropdownInput/DropdownInput';
 export { default as Input } from './components/atoms/Inputs/Input/Input';
 export { default as Textarea } from './components/atoms/Inputs/Textarea/Textarea';
+export { default as Radio } from './components/atoms/Radio/Radio';
 export { default as RatingStar } from './components/atoms/RatingStar/RatingStar';
 export { default as SegmentedButton } from './components/atoms/SegmentedButton/SegmentedButton';
 export { default as SelectedValue } from './components/atoms/SelectedValue/SelectedValue';
@@ -61,6 +62,7 @@ export { default as DateTimePicker } from './components/organisms/DateTimePicker
 export { Dialog } from './components/organisms/Dialog/Dialog';
 export * from './components/organisms/DialogBookingAddItem';
 export * from './components/organisms/DialogBookingConfirm';
+export * from './components/organisms/DialogBookNow/DialogBookNow';
 export * from './components/organisms/DialogCancelService';
 export { DialogComparison } from './components/organisms/DialogComparison/DialogComparison';
 export * from './components/organisms/DialogDeleteConfirm';

package/package.json

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

package/src/components/atoms/Radio/Radio.css

@@ -0,0 +1,38 @@
+.mtc-radio {
+  @apply flex gap-x-2 items-center;
+  input {
+    display: none;
+    &:checked + .mtc-radio__btn {
+      border-color: var(--radio-button-color-radio-border-selected-default);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.mtc-radio__btn {
+  @apply w-5 h-5 inline-block relative cursor-pointer;
+  flex: 0 0 20px;
+  border: 1px solid var(--radio-button-color-radio-border-default-default);
+  border-radius: 50%;
+  &::after {
+    content: '';
+    @apply absolute;
+    inset: 4px;
+    background-color: var(--radio-button-color-radio-selected-default, #0f7173);
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.mtc-radio__text {
+  @apply cursor-pointer;
+  font-size: var(--font-size-text-sm, 14px);
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: var(--font-leading-leading-sm, 20px);
+  font-family:
+    var(--font-font-family-body, 'Satoshi'), 'Satoshi', 'Inter', 'Segoe UI', 'system-ui',
+    sans-serif;
+}

package/src/components/atoms/Radio/Radio.tsx

@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import './Radio.css';
+
+export interface RadioProps {
+  onChange: (checked: boolean) => void;
+  checked?: boolean;
+  label?: string;
+}
+
+export default function Radio(props: RadioProps) {
+  const { checked, label, onChange } = props;
+
+  const id = useId();
+
+  return (
+    <label htmlFor={id} className="mtc-radio">
+      <input
+        type="radio"
+        id={id}
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span className="mtc-radio__btn" />
+      {label && <span className="mtc-radio__text">{label}</span>}
+    </label>
+  );
+}

package/src/components/organisms/DialogBookNow/DialogBookNow.css

@@ -0,0 +1,29 @@
+.book-now-form {
+  @apply space-y-9;
+}
+
+.book-now-quote-price {
+  @media (width >= 768px) {
+    @apply text-right;
+  }
+}
+
+.book-now-quotes {
+  @apply space-y-6;
+  &__list {
+    @apply space-y-2;
+  }
+  li {
+    @apply flex flex-col;
+    @media (width >= 768px) {
+      @apply flex-row justify-between items-center;
+    }
+  }
+}
+
+.book-now-footer {
+  @apply grid grid-cols-1 gap-4;
+  @media (width >= 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/src/components/organisms/DialogBookNow/DialogBookNow.tsx

@@ -0,0 +1,83 @@
+import { priceFormatter } from '@/src/lib/price-formatter';
+import { useState } from 'react';
+import Button from '../../atoms/Button/Button';
+import Radio from '../../atoms/Radio/Radio';
+import { Text } from '../../atoms/Typography/Typography';
+import { DialogBookingConfirm } from '../DialogBookingConfirm';
+import './DialogBookNow.css';
+
+export interface BookNowQuotePrice {
+  currency: string;
+  amount: number;
+}
+
+export interface BookNowQuote {
+  id: string | number;
+  name: string;
+  prices: BookNowQuotePrice[];
+}
+
+export interface DialogBookNowProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  proposals: BookNowQuote[];
+  onSubmit?: (quoteId: string | number | null) => void;
+}
+
+export default function DialogBookNow(props: DialogBookNowProps) {
+  const { open, setOpen, proposals, onSubmit } = props;
+
+  const [selectedQuoteId, setSelectedQuoteId] = useState<string | number | null>(null);
+
+  return (
+    <DialogBookingConfirm
+      open={open}
+      setOpen={setOpen}
+      title="Book quotation"
+      className="!max-w-[800px]">
+      <div className="book-now-form">
+        <div className="book-now-quotes">
+          <Text>
+            To avoid conflicts, you can only book one quotation at a time. Please select a
+            quotation:
+          </Text>
+          <ul className="book-now-quotes__list">
+            {proposals.map((proposal, index) => (
+              <li key={`dbc-${index}`}>
+                <Radio
+                  checked={selectedQuoteId === proposal.id}
+                  onChange={() => {
+                    if (selectedQuoteId === proposal.id) {
+                      console.log('unselecting');
+                      setSelectedQuoteId(null);
+                      return;
+                    }
+                    setSelectedQuoteId(proposal.id);
+                  }}
+                  label={proposal.name}
+                />
+                <Text className="book-now-quote-price" size="sm">
+                  {proposal.prices
+                    .map((price) => priceFormatter(price.amount, price.currency))
+                    .join(' ')}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="book-now-footer">
+          <Button variant="outline-secondary" size="sm">
+            Cancel
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            disabled={!selectedQuoteId}
+            onClick={() => onSubmit?.(selectedQuoteId)}>
+            Book quotation
+          </Button>
+        </div>
+      </div>
+    </DialogBookingConfirm>
+  );
+}