@licklist/design 0.68.5 → 0.68.6-dev.0

package/src/static/date-range-input/DateRangeInput.tsx

@@ -106,8 +106,8 @@ export const DateRangeInput = ({
       <OverlayTrigger
         show={isDateRangePopovedVisible}
         overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
+          <Popover id={popoverId} className='rounded'>
+            <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
               <DateRange
                 onChange={(item) => setState([item.selection])}
                 moveRangeOnFirstSelection={false}
@@ -115,19 +115,19 @@ export const DateRangeInput = ({
                 months={months}
                 direction={direction}
               />
-              <div className="mt-3 d-flex justify-content-end">
-                <Button onClick={onReset} variant="link">
+              <div className='mt-3 d-flex justify-content-end'>
+                <Button onClick={onReset} variant='link'>
                   {t('clear')}
                 </Button>
-                <Button onClick={onApply} className="ml-3" variant="link">
+                <Button onClick={onApply} className='ml-3' variant='link'>
                   {t('apply')}
                 </Button>
               </div>
             </Popover.Content>
           </Popover>
         }
-        trigger="click"
-        placement="bottom"
+        trigger='click'
+        placement='bottom'
         popperConfig={{ modifiers: [sameWidthPopperModifier] }}
       >
         <div
@@ -137,19 +137,19 @@ export const DateRangeInput = ({
           onKeyDown={() =>
             setIsDateRangePopoverVisible((prevValue) => !prevValue)
           }
-          role="button"
+          role='button'
           tabIndex={0}
-          className="date-range-input-wrapper"
+          className='date-range-input-wrapper'
         >
           <Form.Control
-            type="input"
+            type='input'
             placeholder={placeholder}
             disabled={disabled}
             readOnly
-            className="date-range-input"
+            className='date-range-input'
             value={stringDatesToInputValue({ startDate, endDate })}
           />
-          <FaCalendar size={16} className="date-range-input-icon" />
+          <FaCalendar size={16} className='date-range-input-icon' />
         </div>
       </OverlayTrigger>
     </div>

package/src/static/form-number-input/FormNumberInput.stories.tsx

@@ -14,7 +14,7 @@ export const Default: Story = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(console.log)}>
-        <FormNumberInput fieldName="field" label="Label" />
+        <FormNumberInput fieldName='field' label='Label' />
       </form>
     </FormProvider>
   )

package/src/static/form-number-input/FormNumberInput.tsx

@@ -49,10 +49,10 @@ export const FormNumberInput = ({
 
       <InputGroup hasValidation>
         <InputGroup.Prepend
-          className="arrow-up-btn"
+          className='arrow-up-btn'
           onClick={() => setValue(fieldName, Number(value) + 1)}
         >
-          <InputGroup.Text className="py-0 px-3">
+          <InputGroup.Text className='py-0 px-3'>
             <IncrementIcon />
           </InputGroup.Text>
         </InputGroup.Prepend>
@@ -72,7 +72,7 @@ export const FormNumberInput = ({
           }}
           render={({ field }) => (
             <Form.Control
-              type="number"
+              type='number'
               step={step}
               disabled={disabled}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
@@ -88,7 +88,7 @@ export const FormNumberInput = ({
           )}
         />
 
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.getErrors(fieldName, errors)}
         </Form.Control.Feedback>
       </InputGroup>

package/src/static/images/Images.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Static/Images',
 }
 
-export const DefaultUser = () => <Image src={DefaultUserImage} alt="test" />
+export const DefaultUser = () => <Image src={DefaultUserImage} alt='test' />
 
 DefaultUser.story = {
   parameters: {

package/src/static/loader/BlockLoader.tsx

@@ -2,8 +2,8 @@ import { LoaderIndicator } from './LoaderIndicator'
 
 export function BlockLoader() {
   return (
-    <div className="block-loader">
-      <div className="block-loader__wrapper">
+    <div className='block-loader'>
+      <div className='block-loader__wrapper'>
         <LoaderIndicator isLoaded={false} />
       </div>
     </div>

package/src/static/loader/ButtonLoader.tsx

@@ -7,7 +7,7 @@ export type ButtonLoaderProps = {
 
 export function ButtonLoader({ color = '#fff' }: ButtonLoaderProps) {
   return (
-    <div className="button-loader position-relative ml-1 mr-4 float-left">
+    <div className='button-loader position-relative ml-1 mr-4 float-left'>
       <LoaderIndicator
         isLoaded={false}
         options={{

package/src/static/loader/Loader.stories.tsx

@@ -20,7 +20,7 @@ export const Default: Story = () => {
 export const Button: Story = () => {
   return (
     <>
-      <button type="button" className="btn btn-primary">
+      <button type='button' className='btn btn-primary'>
         <ButtonLoader />
         Click me
       </button>
@@ -38,7 +38,7 @@ export const Block: Story = () => {
 
 export const PaymentLoader: Story = () => {
   return (
-    <div className="h-100 w-100 m-0">
+    <div className='h-100 w-100 m-0'>
       <PaymentLoaderComponent />
     </div>
   )

package/src/static/loader/PaymentLoader.tsx

@@ -30,13 +30,13 @@ export const PaymentLoader = ({
   }, [width])
 
   return (
-    <div className="payment-loader">
-      <div className="position-relative">
-        <div className="payment-loader-text">
+    <div className='payment-loader'>
+      <div className='position-relative'>
+        <div className='payment-loader-text'>
           {t('Design:paymentIsProcessing')}
         </div>
         <LoaderIndicator
-          className="loader"
+          className='loader'
           options={{
             ...options,
             scale,

package/src/static/loader/SnippetLoader.tsx

@@ -2,8 +2,8 @@ import { LoaderIndicator } from './LoaderIndicator'
 
 export function SnippetLoader() {
   return (
-    <div className="snippet-loader">
-      <div className="snippet-loader__wrapper">
+    <div className='snippet-loader'>
+      <div className='snippet-loader__wrapper'>
         <LoaderIndicator isLoaded={false} />
       </div>
     </div>

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -27,18 +27,18 @@ export const ManualDatePicker = ({
 
   return (
     <>
-      <div className="custom-date-field-picker mr-4">
+      <div className='custom-date-field-picker mr-4'>
         <Form.Group>
           <Form.Control
             value={day}
-            as="select"
+            as='select'
             isInvalid={isRequred && !day}
             onChange={({ target: { value } }) => {
               setDay(value ? Number(value) : undefined)
             }}
             disabled={isDisabled}
           >
-            <option value="">{t('Design:dayShort')}</option>
+            <option value=''>{t('Design:dayShort')}</option>
             {DAYS_ARRAY.map((key) => (
               <option key={key} value={key}>
                 {key}
@@ -48,18 +48,18 @@ export const ManualDatePicker = ({
         </Form.Group>
       </div>
 
-      <div className="custom-date-field-picker mr-4">
+      <div className='custom-date-field-picker mr-4'>
         <Form.Group>
           <Form.Control
             value={month}
-            as="select"
+            as='select'
             isInvalid={isRequred && !month}
             onChange={({ target: { value } }) =>
               setMonth(value ? Number(value) : undefined)
             }
             disabled={isDisabled}
           >
-            <option value="">{t('Design:monthShort')}</option>
+            <option value=''>{t('Design:monthShort')}</option>
             {MONTHS_ARRAY.map((object) => (
               <option key={object.key} value={object.value}>
                 {object.key}
@@ -69,18 +69,18 @@ export const ManualDatePicker = ({
         </Form.Group>
       </div>
 
-      <div className="custom-date-field-picker">
+      <div className='custom-date-field-picker'>
         <Form.Group>
           <Form.Control
             value={year}
-            as="select"
+            as='select'
             isInvalid={isRequred && !year}
             onChange={({ target: { value } }) =>
               setYear(value ? Number(value) : undefined)
             }
             disabled={isDisabled}
           >
-            <option value="">{t('Design:yearShort')}</option>
+            <option value=''>{t('Design:yearShort')}</option>
             {YEARS_ARRAY.map((key) => (
               <option key={key} value={key}>
                 {key}

package/src/static/number-input/NumberInput.tsx

@@ -48,27 +48,27 @@ export function NumberInput({
   return (
     <div className={inputWrapperClasses}>
       <FormControl
-        type="number"
+        type='number'
         onChange={(e) => onChange(Number(e.target.value))}
         value={value}
         min={min}
         max={max}
         defaultValue={defaultValue}
-        height="5rem"
+        height='5rem'
         disabled={disabled}
       />
       <button
-        type="button"
+        type='button'
         onClick={handleArrowUpClick}
-        className="licklist-number-input__btn-up"
+        className='licklist-number-input__btn-up'
         disabled={disabled}
       >
         <FaChevronUp size={16} />
       </button>
       <button
-        type="button"
+        type='button'
         onClick={handleArrowDownClick}
-        className="licklist-number-input__btn-down"
+        className='licklist-number-input__btn-down'
         disabled={disabled}
       >
         <FaChevronDown size={16} />

package/src/static/switch/Switch.stories.tsx

@@ -39,12 +39,12 @@ export const WithForm: Story<SwitchProps<string>> = () => {
       <Form>
         <Controller
           control={form.control}
-          name="type"
+          name='type'
           render={({ field }) => (
-            <Form.Group className="d-flex flex-column align-items-start">
+            <Form.Group className='d-flex flex-column align-items-start'>
               <Form.Label>Type</Form.Label>
               <Switch
-                name="type"
+                name='type'
                 options={['sale', 'enquiry'].map((type) => ({
                   id: type,
                   value: t(type),

package/src/static/switch/Switch.tsx

@@ -24,10 +24,10 @@ export function Switch<T extends string | number>({
   const layoutId = useId()
 
   return (
-    <div className="btn-switch-container">
+    <div className='btn-switch-container'>
       <AnimateSharedLayout>
         <ToggleButtonGroup
-          type="radio"
+          type='radio'
           name={name}
           onChange={onChange}
           value={value}
@@ -37,7 +37,7 @@ export function Switch<T extends string | number>({
             return (
               <ToggleButton
                 key={option.id}
-                variant="link"
+                variant='link'
                 disabled={disabled}
                 value={option.id}
               >
@@ -51,7 +51,7 @@ export function Switch<T extends string | number>({
                 {isChecked && (
                   <motion.div
                     layoutId={layoutId}
-                    className="btn-switch-indicator"
+                    className='btn-switch-indicator'
                     transition={{ duration: TRANSITION_DURATION }}
                   />
                 )}

package/src/static/tabs/Tabs.tsx

@@ -30,7 +30,7 @@ export function Tabs({
       activeKey={activeKey}
       onSelect={onSelect}
       id={tabsId}
-      className="licklist-tabs"
+      className='licklist-tabs'
       {...props}
     >
       {children}

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: auto;
 
-  &.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-events/Calendar.scss

@@ -48,7 +48,6 @@
         height: 2.25rem;
         width: 14.125rem;
         justify-content: space-between;
-        border: 1px solid $snippet-dropdown-border-color;
         border-radius: $iframe-border-radius;
         transition: $color-transition;
 

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/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')}