@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/static/text-expand/TextExpand.tsx

@@ -28,13 +28,13 @@ export function TextExpand({
 
   return (
     <div className={wrapperClasses}>
-      <div className="text-expand-container">
+      <div className='text-expand-container'>
         <div className={contentClasses}>{children}</div>
       </div>
 
       <button
-        type="button"
-        className="text-expand-wrapper__expand-btn"
+        type='button'
+        className='text-expand-wrapper__expand-btn'
         onClick={() => setIsExpanded(!isExpanded)}
       >
         {isExpanded ? t('readLess') : t('readMore')}

package/src/striped-static-table/StripedStaticTable.tsx

@@ -26,7 +26,7 @@ export const StripedStaticTable = ({
               if (rowIndex === 0) {
                 return [
                   key,
-                  <div key={key} className="bold header-row">
+                  <div key={key} className='bold header-row'>
                     {value}
                   </div>,
                 ]
@@ -36,7 +36,7 @@ export const StripedStaticTable = ({
               if (rowIndex === length - 1) {
                 return [
                   key,
-                  <div key={key} className="bold">
+                  <div key={key} className='bold'>
                     {value}
                   </div>,
                 ]

package/src/styles/activity-card/{GridActivitiesCard.scss → ActivitiesCard.scss}

@@ -11,10 +11,7 @@
   background-color: #fff;
   font-size: 0.8rem;
   background-color: $snippet-product-set-background-color;
-
-  div {
-    text-align: left;
-  }
+  text-align: left;
 
   &.active {
     border: 2px solid #0e8be1;
@@ -23,7 +20,24 @@
   &-title {
     font-weight: 600;
     line-height: 1.25rem;
-    cursor: pointer;
     font-size: 0.875rem;
   }
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    aspect-ratio: 1.2/1;
+    margin-bottom: 0.8rem;
+    border-radius: 0.5rem;
+  }
+
+  &-description {
+    line-clamp: 5;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
 }

package/src/styles/activity-card/ListActivitiesCard.scss

@@ -3,56 +3,26 @@
 .list-activity-card {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 6rem;
-  padding: 0.375rem;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  background-color: $snippet-product-set-background-color;
-  color: $snippet-product-set-font-color;
-  transition: $color-transition;
+  gap: 0.5rem;
+  width: 100%;
 
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  .description {
+  &-info {
     width: 70%;
     font-size: 0.81rem;
     display: flex;
     flex-direction: column;
+    align-items: start;
   }
 
-  .title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: start;
+  img {
+    max-width: 120px;
     height: 100%;
-
-    .image {
-      display: flex;
-      align-items: start;
-      width: 7rem;
-      height: 4rem;
-      margin-left: 3rem;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      border-radius: 0.5rem;
-    }
+    object-fit: cover;
+    aspect-ratio: 1.2/1;
+    border-radius: 0.5rem;
   }
-}
 
-.list-activity-card-hr {
-  margin-top: 0;
+  &-hr {
+    margin-top: 0;
+  }
 }

package/src/styles/activity-card/_index.scss

@@ -1,2 +1,2 @@
-@import './GridActivitiesCard.scss';
+@import './ActivitiesCard.scss';
 @import './ListActivitiesCard.scss';

package/src/styles/iframe-external-modal/IframeExternalModal.scss

@@ -15,7 +15,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000000;
+  z-index: 2147483646;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000001;
+  z-index: 2147483647;
   display: none;
   width: 100%;
   height: 100%;

package/src/styles/product-set/ProductSetForm.scss

@@ -15,10 +15,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +36,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +62,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +89,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +116,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +176,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +184,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -14,6 +14,7 @@
 
     .navigation {
       display: block;
+
       @include media-breakpoint-down(sm) {
         padding: 0;
       }
@@ -23,6 +24,7 @@
       margin-left: 0;
       height: calc(100vh - 2rem);
       max-height: calc(100vh - 1rem);
+
       @include media-breakpoint-down(sm) {
         width: calc(100% - 2rem);
         max-width: unset;
@@ -69,9 +71,11 @@
           .left-block {
             min-height: 100%;
           }
+
           .right-block {
             margin: 0 auto;
             width: 100%;
+
             .children-wrapper {
               .accordion {
                 .collapse {
@@ -85,6 +89,7 @@
         }
       }
     }
+
     ::-webkit-scrollbar {
       display: none;
       scrollbar-width: none;
@@ -97,6 +102,14 @@
 }
 
 .ryft-payment-form {
+
+  .form-disable-box {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
   .submit-button-wrapper {
     margin: -1rem 0 1rem;
 
@@ -104,15 +117,18 @@
       width: 100%;
     }
   }
+
   #mobile-pay-divider-container {
     display: flex;
     position: relative;
     margin-bottom: 1rem;
+
     #mobile-pay-divider-text {
       margin-right: 1rem;
       font-size: 0.875rem;
       font-weight: 600;
     }
+
     #mobile-pay-divider {
       width: 100%;
       border-bottom: 1px #dfdfdf solid;
@@ -125,6 +141,7 @@
     border: none;
     margin-bottom: 0.5rem;
     text-align: left;
+
     :first-child {
       font-size: 1rem;
       font-weight: 600;
@@ -135,14 +152,17 @@
       margin-bottom: 0.5rem;
     }
   }
+
   .ryft-pay-grid {
     display: flex;
     flex-direction: column;
+
     .apple-pay-button {
       height: 2.5rem;
       margin-top: 1rem;
     }
   }
+
   .mobile-pay-title {
     display: block;
     font-weight: 600;
@@ -156,10 +176,16 @@
 }
 
 @include media-breakpoint-up(md) {
+
   .ryft-payment-form,
+  .form-disable-box {
+    height: 50%;
+    top: 15rem;
+  }
   .iframe-payment-form {
     position: relative;
     max-height: 300px !important;
+
     .submit-button-wrapper {
       max-width: 15.5rem;
     }
@@ -171,6 +197,7 @@
     max-width: 15.5rem;
     margin-bottom: 1rem;
   }
+
   .ryft-pay-apple-pay-button {
     border-radius: 0.25rem;
   }
@@ -178,4 +205,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/src/table/FilterHelperComponent.tsx

@@ -50,28 +50,28 @@ function FilterHelperComponent({
 
   return (
     <>
-      <div className="filter">
-        <label htmlFor="filter">
-          <div className="d-flex flex-row align-items-center">
+      <div className='filter'>
+        <label htmlFor='filter'>
+          <div className='d-flex flex-row align-items-center'>
             <FormControl
-              id="filter"
-              name="filter"
+              id='filter'
+              name='filter'
               placeholder={t('Design:search')}
-              type="text"
+              type='text'
               value={item}
               onChange={onChange}
               onKeyDown={onEnter}
             />
             <Button
-              variant="secondary"
-              className="d-flex align-items-center align-self-end ml-2"
+              variant='secondary'
+              className='d-flex align-items-center align-self-end ml-2'
               onClick={onClear}
             >
               {t('Design:clear')}
             </Button>
             <Button
-              type="submit"
-              className="d-flex align-items-center align-self-end ml-2"
+              type='submit'
+              className='d-flex align-items-center align-self-end ml-2'
               onClick={onSearch}
             >
               {t('Design:search')}

package/src/table/MenuButton.tsx

@@ -20,7 +20,7 @@ export const MenuButton = ({
 }: MenuButtonProps) => (
   <>
     <button
-      type="button"
+      type='button'
       onClick={(e) => {
         e.stopPropagation()
         onClick?.()

package/src/table/PaginationHelperComponent.tsx

@@ -41,7 +41,7 @@ function PaginationHelperComponent({
 
   const renderShowingSection = useCallback(
     () => (
-      <div className="pt-1">
+      <div className='pt-1'>
         {t('Table:showing')} {paginator?.from} {t('Table:to')} {paginator?.to}{' '}
         {t('Table:of')} {paginator?.total} {t('Table:entries')}
       </div>
@@ -53,12 +53,12 @@ function PaginationHelperComponent({
     () => (
       <Pagination>
         <button
-          type="button"
+          type='button'
           disabled={!paginationService.hasPrevPage()}
-          className="border-0"
+          className='border-0'
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <FaArrowLeft size={14} color="black" />
+          <FaArrowLeft size={14} color='black' />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -78,12 +78,12 @@ function PaginationHelperComponent({
         })}
 
         <button
-          type="button"
+          type='button'
           disabled={!paginationService.hasNextPage()}
-          className="border-0"
+          className='border-0'
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <FaArrowRight size={14} color="black" />
+          <FaArrowRight size={14} color='black' />
         </button>
       </Pagination>
     ),

package/src/table/PerPageHelperComponent.tsx

@@ -26,13 +26,13 @@ function PerPageHelperComponent(props: PerPageHelperComponentProps) {
 
   return (
     <>
-      <div className="per-page">
-        <label htmlFor="per-page">
+      <div className='per-page'>
+        <label htmlFor='per-page'>
           Show{' '}
           <select
-            id="per-page"
-            name="per_page"
-            className="form-control form-control-sm per-page-control"
+            id='per-page'
+            name='per_page'
+            className='form-control form-control-sm per-page-control'
             value={item}
             onChange={onChange}
           >

package/src/table/ReactTableHelperComponent.tsx

@@ -258,7 +258,7 @@ function WrappedReactTableHelperComponent<T extends object>(
         </Row>
         <Row>
           <Col>
-            <div className="table-responsive">
+            <div className='table-responsive'>
               <Table striped={striped} bordered={bordered} hover>
                 <thead>
                   {getHeaderGroups().map((headerGroup) => (

package/src/table/TableHelperComponent.tsx

@@ -319,7 +319,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         </Row>
         <Row>
           <Col>
-            <div className="table-responsive">
+            <div className='table-responsive'>
               <Table striped={striped} bordered={bordered} hover>
                 <thead>
                   <tr>

package/src/theme/Theme.stories.tsx

@@ -14,84 +14,84 @@ export const Basics = () => (
     >
       <p>Examples:</p>
       <p>
-        <Button variant="primary">Primary</Button>{' '}
-        <Button variant="secondary">Secondary</Button>{' '}
-        <Button variant="success">Success</Button>{' '}
-        <Button variant="warning">Warning</Button>{' '}
-        <Button variant="danger">Danger</Button>{' '}
-        <Button variant="info">Info</Button>{' '}
-        <Button variant="light">Light</Button>{' '}
-        <Button variant="dark">Dark</Button>{' '}
-        <Button variant="link">Link</Button>
+        <Button variant='primary'>Primary</Button>{' '}
+        <Button variant='secondary'>Secondary</Button>{' '}
+        <Button variant='success'>Success</Button>{' '}
+        <Button variant='warning'>Warning</Button>{' '}
+        <Button variant='danger'>Danger</Button>{' '}
+        <Button variant='info'>Info</Button>{' '}
+        <Button variant='light'>Light</Button>{' '}
+        <Button variant='dark'>Dark</Button>{' '}
+        <Button variant='link'>Link</Button>
       </p>
       <p>Outline buttons:</p>
       <p>
-        <Button variant="outline-primary">Primary</Button>{' '}
-        <Button variant="outline-secondary">Secondary</Button>{' '}
-        <Button variant="outline-success">Success</Button>{' '}
-        <Button variant="outline-warning">Warning</Button>{' '}
-        <Button variant="outline-danger">Danger</Button>{' '}
-        <Button variant="outline-info">Info</Button>{' '}
-        <Button variant="outline-light">Light</Button>{' '}
-        <Button variant="outline-dark">Dark</Button>
+        <Button variant='outline-primary'>Primary</Button>{' '}
+        <Button variant='outline-secondary'>Secondary</Button>{' '}
+        <Button variant='outline-success'>Success</Button>{' '}
+        <Button variant='outline-warning'>Warning</Button>{' '}
+        <Button variant='outline-danger'>Danger</Button>{' '}
+        <Button variant='outline-info'>Info</Button>{' '}
+        <Button variant='outline-light'>Light</Button>{' '}
+        <Button variant='outline-dark'>Dark</Button>
       </p>
       <p>Sizes</p>
       <p>
-        <div className="mb-2">
-          <Button variant="primary" size="lg">
+        <div className='mb-2'>
+          <Button variant='primary' size='lg'>
             Large button
           </Button>{' '}
-          <Button variant="secondary" size="lg">
+          <Button variant='secondary' size='lg'>
             Large button
           </Button>
         </div>
         <div>
-          <Button variant="primary" size="sm">
+          <Button variant='primary' size='sm'>
             Small button
           </Button>{' '}
-          <Button variant="secondary" size="sm">
+          <Button variant='secondary' size='sm'>
             Small button
           </Button>
         </div>
       </p>
       <p>
-        <Button variant="primary" size="lg" block>
+        <Button variant='primary' size='lg' block>
           Block level button
         </Button>
-        <Button variant="secondary" size="lg" block>
+        <Button variant='secondary' size='lg' block>
           Block level button
         </Button>
       </p>
       <p>Active state</p>
       <p>
-        <Button variant="primary" size="lg" active>
+        <Button variant='primary' size='lg' active>
           Primary button
         </Button>{' '}
-        <Button variant="secondary" size="lg" active>
+        <Button variant='secondary' size='lg' active>
           Button
         </Button>
       </p>
       <p>Disabled state</p>
       <p>
-        <Button variant="primary" size="lg" disabled>
+        <Button variant='primary' size='lg' disabled>
           Primary button
         </Button>{' '}
-        <Button variant="secondary" size="lg" disabled>
+        <Button variant='secondary' size='lg' disabled>
           Button
         </Button>{' '}
-        <Button href="#" variant="secondary" size="lg" disabled>
+        <Button href='#' variant='secondary' size='lg' disabled>
           Link
         </Button>
       </p>
       <p>Badges</p>
       <p>
-        <Badge variant="primary">Primary</Badge>{' '}
-        <Badge variant="secondary">Secondary</Badge>{' '}
-        <Badge variant="success">Success</Badge>{' '}
-        <Badge variant="warning">Warning</Badge>{' '}
-        <Badge variant="danger">Danger</Badge>{' '}
-        <Badge variant="info">Info</Badge> <Badge variant="light">Light</Badge>{' '}
-        <Badge variant="dark">Dark</Badge> <Badge variant="link">Link</Badge>
+        <Badge variant='primary'>Primary</Badge>{' '}
+        <Badge variant='secondary'>Secondary</Badge>{' '}
+        <Badge variant='success'>Success</Badge>{' '}
+        <Badge variant='warning'>Warning</Badge>{' '}
+        <Badge variant='danger'>Danger</Badge>{' '}
+        <Badge variant='info'>Info</Badge> <Badge variant='light'>Light</Badge>{' '}
+        <Badge variant='dark'>Dark</Badge> <Badge variant='link'>Link</Badge>
       </p>
     </div>
   </>

package/src/tiptap-editor/TipTapEditor.tsx

@@ -97,7 +97,7 @@ export function TipTapEditor({
         <TipTapMenu editor={editor} withEmoji={withEmoji} disabled={disabled} />
       )}
       <EditorContent
-        name="editor"
+        name='editor'
         className={clsx(
           !viewMode ? 'editor editor-with-menu' : 'editor-without-menu',
           disabled && 'editor-disabled',