@licklist/design 0.68.6-dev.2 → 0.68.6

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,29 +1,27 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
-import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 
 export const LAYOUT_GRID = 'grid'
 export const LAYOUT_LIST = 'list'
 
+type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST
+
 export type ActivityCardProps = {
   title: ReactNode
   duration: ReactNode
   price: ReactNode
-  description?: ReactNode
   onSelect: () => void
   isSelected: boolean
-  layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
+  layout?: Layout
   availableTimes?: string | null
-  image?: Image | null
 }
 
 export const ActivityCard = ({
   title,
   duration,
   price,
-  description,
   availableTimes,
-  image,
+  // image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -31,49 +29,40 @@ export const ActivityCard = ({
   if (layout === LAYOUT_GRID) {
     return (
       <button
-        type='button'
-        className={clsx('activity-card', { active: isSelected })}
+        type="button"
+        className={clsx('activity-card', isSelected && 'active')}
         onClick={onSelect}
       >
-        {image && (
-          <img src={image.url} alt={typeof title === 'string' ? title : ''} />
-        )}
-
-        <div>
-          <div className='activity-card-title'>{title}</div>
+        <div className={clsx('d-flex', 'flex-column')}>
+          <div className="activity-card-title">{title}</div>
           {duration && <div>{duration}</div>}
+
           {price && <div>{price}</div>}
-          {description && (
-            <div className='mt-2 activity-card-description'>{description}</div>
-          )}
         </div>
       </button>
     )
   }
 
   return (
-    <button
-      type='button'
-      onClick={onSelect}
-      className={clsx('activity-card list-activity-card', {
-        active: isSelected,
-      })}
-    >
-      {image && (
-        <img src={image.url} alt={typeof title === 'string' ? title : ''} />
-      )}
+    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
+      <div
+        className={clsx('list-activity-card', {
+          active: isSelected,
+        })}
+      >
+        <div className="description">
+          <div className="title mb-2">{title}</div>
+          {availableTimes && <div>{availableTimes}</div>}
+          {duration && (
+            <div>
+              <p>{duration}</p>
+            </div>
+          )}
 
-      <div className='activity-card-info'>
-        <div className='activity-card-title mb-2'>{title}</div>
-        {availableTimes && <div>{availableTimes}</div>}
-        {duration && <div>{duration}</div>}
-        {price && <div>{price}</div>}
-        {description && (
-          <div className='mt-2 activity-card-description'>{description}</div>
-        )}
+          {price && <div>{price}</div>}
+        </div>
       </div>
-
-      <hr className='list-activity-card-hr' />
-    </button>
+      <hr className="list-activity-card-hr" />
+    </div>
   )
 }

package/src/iframe/back-button/BackButton.tsx

@@ -3,12 +3,12 @@ export interface IBackButtonProps {
 }
 
 export const BackButton = ({ onClick }: IBackButtonProps) => (
-  <div className='button-wrapper back-button'>
+  <div className="button-wrapper back-button">
     <div
-      className='back-button'
+      className="back-button"
       onClick={onClick}
       onKeyPress={onClick}
-      role='button'
+      role="button"
       tabIndex={0}
     >
       &lt;

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -61,7 +61,7 @@ export const Default: Story<any> = () => {
             isLoading={isLoading}
           />
           <div>
-            <button type='submit'>Submit</button>
+            <button type="submit">Submit</button>
           </div>
         </Form.Row>
       </form>

package/src/iframe/custom-fields/components/CustomDateField.tsx

@@ -63,14 +63,14 @@ export const CustomDateField = ({
   }, [day, month, year])
 
   return (
-    <Form.Group as={Col} className='col-12'>
+    <Form.Group as={Col} className="col-12">
       <Row>
         <div>
-          <Col sm={12} md={6} className='p-0'>
-            <Form.Group as={Col} className='mb-0'>
+          <Col sm={12} md={6} className="p-0">
+            <Form.Group as={Col} className="mb-0">
               <Form.Label>{t('Design:dayOfBirthShort')}</Form.Label>
               <Form.Control
-                type='hidden'
+                type="hidden"
                 {...register(fieldKeyValueAttribute, {
                   required: {
                     value: field.isRequired,
@@ -118,7 +118,7 @@ export const CustomDateField = ({
 
             <Col>
               <Row>
-                <Col className='d-flex'>
+                <Col className="d-flex">
                   <ManualDatePicker
                     {...manualDatePickerProps}
                     isDisabled={isLoading}
@@ -129,11 +129,11 @@ export const CustomDateField = ({
             </Col>
           </Col>
           <Col>
-            <div className='manual-form-error m-0'>{fieldErrors()}</div>
+            <div className="manual-form-error m-0">{fieldErrors()}</div>
           </Col>
         </div>
         <Form.Control
-          type='hidden'
+          type="hidden"
           {...register(`${fieldKey}.id` as const, {
             required: true,
           })}

package/src/iframe/event/event-booking-form/EventBookingForm.tsx

@@ -12,18 +12,18 @@ export function EventBookingForm({ occurrences }: EventBookingFormProps) {
   const selectDateInput = useRef<HTMLInputDateElement | null>(null)
 
   return (
-    <Form className='event-booking-form'>
+    <Form className="event-booking-form">
       <h5>{t('whenYouWouldLikeToBook')}</h5>
       <Form.Group>
         <Form.Label>{t('selectDate')}</Form.Label>
         <Form.Control
-          type='date'
+          type="date"
           ref={selectDateInput}
           onClick={() => selectDateInput?.current?.showPicker()}
         />
       </Form.Group>
       <Form.Group>
-        <Form.Control aria-label={t('selectTime')} as='select'>
+        <Form.Control aria-label={t('selectTime')} as="select">
           {occurrences.map((hour) => (
             <option value={hour} key={hour}>
               {hour}
@@ -33,23 +33,23 @@ export function EventBookingForm({ occurrences }: EventBookingFormProps) {
       </Form.Group>
 
       <h5>{t('whatWouldYouLikeToBook')}</h5>
-      <div className='d-flex flex-column'>
-        <label className='event-booking-form__booking-option-container'>
+      <div className="d-flex flex-column">
+        <label className="event-booking-form__booking-option-container">
           <input
-            type='radio'
+            type="radio"
             defaultChecked
-            className='event-booking-form__radio'
-            name='booking-option'
+            className="event-booking-form__radio"
+            name="booking-option"
           />
-          <div className='booking-option'>{t('tickets')}</div>
+          <div className="booking-option">{t('tickets')}</div>
         </label>
-        <label className='event-booking-form__booking-option-container'>
+        <label className="event-booking-form__booking-option-container">
           <input
-            type='radio'
-            className='event-booking-form__radio'
-            name='booking-option'
+            type="radio"
+            className="event-booking-form__radio"
+            name="booking-option"
           />
-          <div className='booking-option'>{t('tablesAndBooths')}</div>
+          <div className="booking-option">{t('tablesAndBooths')}</div>
         </label>
       </div>
     </Form>

package/src/iframe/event/event-booking-products/EventBookingProducts.tsx

@@ -16,11 +16,11 @@ export function EventBookingProducts({
   setOrder,
 }: EventBookingProductsProps) {
   return (
-    <div className='event-booking-products'>
-      <div className='event-booking-products__header p-4'>
+    <div className="event-booking-products">
+      <div className="event-booking-products__header p-4">
         Choose Your Table
       </div>
-      <div className='event-booking-products__main'>
+      <div className="event-booking-products__main">
         <Accordion>
           {productsCategories?.map((productsCategory) => (
             <AccordionItem

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -47,7 +47,7 @@ function CustomToggle({
   })
 
   return (
-    <Card.Header className='accordion-toggle p-4' onClick={decoratedOnClick}>
+    <Card.Header className="accordion-toggle p-4" onClick={decoratedOnClick}>
       <div className={contentClassName}>{children}</div>
       <FaAngleRight className={iconClassName} size={24} />
     </Card.Header>
@@ -63,10 +63,10 @@ export function AccordionItem({
   productCategoryId,
 }: AccordionItemProps) {
   return (
-    <Card className='event-booking-products__card'>
+    <Card className="event-booking-products__card">
       <CustomToggle eventKey={eventKey}>{name}</CustomToggle>
       <Accordion.Collapse eventKey={eventKey}>
-        <Card.Body className='px-4 pb-0'>
+        <Card.Body className="px-4 pb-0">
           {products.map((product) => (
             <ProductItem
               key={product.id}
@@ -107,10 +107,10 @@ function ProductItem({
   const { formatNumber } = useIntl()
 
   return (
-    <div className='product-item mb-4'>
-      <div className='product-item__title pb-1'>{name}</div>
-      <div className='product-item__description pb-3'>{description} </div>
-      <div className='product-item__selector d-flex align-items-center'>
+    <div className="product-item mb-4">
+      <div className="product-item__title pb-1">{name}</div>
+      <div className="product-item__description pb-3">{description} </div>
+      <div className="product-item__selector d-flex align-items-center">
         <NumberInput
           onChange={(val) => {
             setOrder((prev) => ({
@@ -150,10 +150,10 @@ function ProductItem({
           }
           min={0}
           value={order[id]?.quantity || 0}
-          className='product-item__counter'
+          className="product-item__counter"
         />
-        <FaTimes className='product-item__icon m-3' size={16} />
-        <div className='product-item__price'>
+        <FaTimes className="product-item__icon m-3" size={16} />
+        <div className="product-item__price">
           {formatNumber(price * (order[id]?.quantity || 1), {
             style: 'currency',
             currency: 'GBP',

package/src/iframe/event/event-booking-view/EventBookingView.tsx

@@ -22,7 +22,7 @@ export function EventBookingView({
   return (
     <>
       <SlideCurtain>{children}</SlideCurtain>
-      <div className='event-fixed-footer'>
+      <div className="event-fixed-footer">
         <EventNavigationFooter
           amount={amount}
           activeElement={activeElement}

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -22,10 +22,10 @@ export function Default() {
               'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
             : undefined
         }
-        title='Glitterbomb Bucks / Baga Chipz'
-        type='22:00 - 03:00'
+        title="Glitterbomb Bucks / Baga Chipz"
+        type="22:00 - 03:00"
         cost={6}
-        date='18 Apr 2023, 13:15'
+        date="18 Apr 2023, 13:15"
         description={`Category: Essex, They call her <i>Cheryl Hole</i>. Any holes a
         goal with Cheryl Hole and she's coming from the runway of <b>Season 1</b> of
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
@@ -45,9 +45,9 @@ export function Default() {
         }}
         goToDetails={() => null}
         isListView={isListView}
-        shortDate='07/03/2023'
-        titleId='titleId'
-        descriptionId='descriptionId'
+        shortDate="07/03/2023"
+        titleId="titleId"
+        descriptionId="descriptionId"
       />
     </div>
   )

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -33,47 +33,47 @@ export const IframeEventCardSkeleton = memo(
       )}
     >
       {showImage && (
-        <div className='card-img-top card-image'>
-          <Skeleton className='h-100 w-100' />
+        <div className="card-img-top card-image">
+          <Skeleton className="h-100 w-100" />
         </div>
       )}
       <Card.Body
         className={clsx('d-flex', 'flex-column', !showImage && 'no-image')}
       >
-        <Card.Title className='iframe-event-card__title'>
+        <Card.Title className="iframe-event-card__title">
           <Skeleton />
         </Card.Title>
 
-        <div className='flex-grow-1 iframe-event-card__description'>
-          <Card.Text as='div'>
-            <div className='d-flex align-items-center mb-3'>
-              <p className='iframe-event-card__bold m-0 list-view-hided'>
-                <Skeleton className='skeleton-w6' />
+        <div className="flex-grow-1 iframe-event-card__description">
+          <Card.Text as="div">
+            <div className="d-flex align-items-center mb-3">
+              <p className="iframe-event-card__bold m-0 list-view-hided">
+                <Skeleton className="skeleton-w6" />
               </p>
-              <p className='iframe-event-card__bold m-0 grid-view-hided'>
-                <Skeleton className='skeleton-w6' />
+              <p className="iframe-event-card__bold m-0 grid-view-hided">
+                <Skeleton className="skeleton-w6" />
               </p>
             </div>
           </Card.Text>
 
-          <Card.Text as='div' className='list-view-hided'>
-            <div className='d-flex align-items-center mb-3'>
-              <p className='iframe-event-card__bold m-0'>
-                <Skeleton className='skeleton-w6' />
+          <Card.Text as="div" className="list-view-hided">
+            <div className="d-flex align-items-center mb-3">
+              <p className="iframe-event-card__bold m-0">
+                <Skeleton className="skeleton-w6" />
               </p>
             </div>
           </Card.Text>
 
-          <Card.Text as='div'>
-            <div className='d-flex align-items-center mb-3'>
-              <p className='iframe-event-card__bold m-0'>
-                <Skeleton className='skeleton-w6' />
+          <Card.Text as="div">
+            <div className="d-flex align-items-center mb-3">
+              <p className="iframe-event-card__bold m-0">
+                <Skeleton className="skeleton-w6" />
               </p>
             </div>
           </Card.Text>
 
-          <Card.Text as='div' className='list-view-hided'>
-            <Skeleton className='w-100 h-100' />
+          <Card.Text as="div" className="list-view-hided">
+            <Skeleton className="w-100 h-100" />
           </Card.Text>
         </div>
       </Card.Body>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -562,7 +562,7 @@ export function Default() {
 
   return (
     <div
-      className='events'
+      className="events"
       style={{
         display: 'grid',
         gridTemplateColumns: isListView ? '1fr' : 'repeat(auto-fill, 20rem)',
@@ -588,7 +588,7 @@ export function Default() {
             description={event.description}
             isListView={isListView}
             className={className}
-            shortDate='07/03/2023'
+            shortDate="07/03/2023"
           />
         </div>
       ))}

package/src/iframe/event/event-description/EventDescription.stories.tsx

@@ -41,8 +41,8 @@ export function Default() {
     <div>
       <EventDescription
         description={shortDescription ? SHORT_DESCRIPTION : LONG_DESCRIPTION}
-        title='Glitterbomb Bucks / Baga Chipz'
-        date='12/1/2023'
+        title="Glitterbomb Bucks / Baga Chipz"
+        date="12/1/2023"
         eventImages={[
           {
             hash: '1b2cf52f814b92d9',
@@ -65,7 +65,7 @@ export function Default() {
             url: imageSrc,
           } as Image,
         ]}
-        providerName='Baga Chipz studio'
+        providerName="Baga Chipz studio"
         onNextStep={onNextStep}
         onPrevStep={() => {}}
       />

package/src/iframe/event/event-description/EventDescription.tsx

@@ -49,8 +49,8 @@ export function EventDescription({
 
   return (
     <>
-      <div className='iframe-event pb-5 event-description'>
-        <div className='iframe-event__header pb-5'>
+      <div className="iframe-event pb-5 event-description">
+        <div className="iframe-event__header pb-5">
           <div
             className={clsx('event-image-wrapper', !eventImageSrc && 'empty')}
             style={
@@ -60,22 +60,22 @@ export function EventDescription({
             }
           />
 
-          <div className='d-flex flex-column pl-5 pr-5'>
-            <h1 className='mt-2 iframe-event__title'>{title}</h1>
-            <h6 className='mt-3'>{date}</h6>
+          <div className="d-flex flex-column pl-5 pr-5">
+            <h1 className="mt-2 iframe-event__title">{title}</h1>
+            <h6 className="mt-3">{date}</h6>
           </div>
         </div>
-        <div className='iframe-event__provider p-5'>
-          <div className='d-flex align-items-center justify-content-center flex-column'>
+        <div className="iframe-event__provider p-5">
+          <div className="d-flex align-items-center justify-content-center flex-column">
             <div
-              className='provider-image-wrapper'
+              className="provider-image-wrapper"
               style={
                 providerImageSrc
                   ? { backgroundImage: `url("${providerImageSrc}")` }
                   : {}
               }
             />
-            <h3 className='mt-2 iframe-event__title'>{providerName}</h3>
+            <h3 className="mt-2 iframe-event__title">{providerName}</h3>
           </div>
         </div>
         {!!description && (
@@ -89,7 +89,7 @@ export function EventDescription({
           >
             {description.length > DESCRIPTION_MAX_LENGTH ? (
               <TextExpand
-                className='iframe-event__description'
+                className="iframe-event__description"
                 isExpanded={isDescriptionExpanded}
                 setIsExpanded={setIsDescriptionExpanded}
               >

package/src/iframe/event/event-navigation-footer/EventNavigationFooter.tsx

@@ -51,7 +51,7 @@ export function EventNavigationFooter({
   return (
     <>
       <Button
-        className='event-fixed-footer__prev-btn m-0'
+        className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
         <FaArrowLeft size={16} />
@@ -62,17 +62,17 @@ export function EventNavigationFooter({
 
       {activeElement === amount ? (
         <Button
-          className='m-0'
+          className="m-0"
           disabled={isBuyNowDisabled}
           {...submitButtonProps}
         >
           {t('continue')}
-          <FaArrowRight size={16} className='ml-2' />
+          <FaArrowRight size={16} className="ml-2" />
         </Button>
       ) : (
-        <Button className='m-0' onClick={onNextClick}>
+        <Button className="m-0" onClick={onNextClick}>
           {t('next')}
-          <FaArrowRight size={16} className='ml-2' />
+          <FaArrowRight size={16} className="ml-2" />
         </Button>
       )}
     </>
@@ -81,7 +81,7 @@ export function EventNavigationFooter({
 
 function PaginationDots({ amount, activeElement }: PaginationDotsProps) {
   return (
-    <div className='pagination-dots'>
+    <div className="pagination-dots">
       {new Array(amount)
         .fill('')
         .map((_, i) => i + 1)

package/src/iframe/event/event-order-short-summary/EventOrderShortSummary.tsx

@@ -9,8 +9,8 @@ export function EventOrderShortSummary({
   const { t } = useTranslation('Design')
 
   return (
-    <div className='event-order-short-summary'>
-      <h4 className='mb-4 event-order-short-summary__title'>
+    <div className="event-order-short-summary">
+      <h4 className="mb-4 event-order-short-summary__title">
         {t('yourBooking')}
       </h4>
       <Summary data={data} />

package/src/iframe/event/event-order-short-summary/components/Summary/Summary.tsx

@@ -13,12 +13,12 @@ export const Summary = ({ data = [] }: { data: SummaryDataType }) => (
       const classNames = clsx('name', 'mb-4', image && 'align-items-center')
 
       return (
-        <div key={name} className='summary'>
-          <p className='title mb-1'>{title}</p>
+        <div key={name} className="summary">
+          <p className="title mb-1">{title}</p>
           <div className={classNames}>
-            {image && <img className='image mr-3' src={image} alt={name} />}
+            {image && <img className="image mr-3" src={image} alt={name} />}
             {quantity && quantity > 1 && (
-              <span className='quantity mr-3'>{quantity}x</span>
+              <span className="quantity mr-3">{quantity}x</span>
             )}
             {name}
           </div>

package/src/iframe/event/event-order-summary/EventOrderSummary.stories.tsx

@@ -10,7 +10,7 @@ export function Default() {
   return (
     <EventOrderSummary
       data={[{ key: '1', name: 'Beavertown', quantity: 1, price: 4.6 }]}
-      tableName='Table1'
+      tableName="Table1"
     />
   )
 }

package/src/iframe/event/event-order-summary/EventOrderSummary.tsx

@@ -10,11 +10,11 @@ export function EventOrderSummary({ data, tableName }: EventOrderSummaryProps) {
   const { t } = useTranslation('Design')
 
   return (
-    <div className='event-order-summary'>
-      <h1 className='event-order-summary__header mb-5'>{t('tableOrder')}</h1>
-      <div className='event-order-summary__table'>
-        <div className='order-label mb-2'>{t('orderTo')}</div>
-        {tableName && <div className='selected-table'>{tableName}</div>}
+    <div className="event-order-summary">
+      <h1 className="event-order-summary__header mb-5">{t('tableOrder')}</h1>
+      <div className="event-order-summary__table">
+        <div className="order-label mb-2">{t('orderTo')}</div>
+        {tableName && <div className="selected-table">{tableName}</div>}
       </div>
       {data.length !== 0 && (
         <StaticTable

package/src/iframe/event/event-product-sets/EventProductSets.stories.tsx

@@ -11,7 +11,7 @@ export default {
 export function Default() {
   const [productSetId, setProductSetId] = useState<number>()
   return (
-    <div className='bg-white'>
+    <div className="bg-white">
       <EventProductSets
         productSets={[
           {

package/src/iframe/event/event-product-sets/EventProductSets.tsx

@@ -12,7 +12,7 @@ export const EventProductSets = ({
   onSelectProductSet,
   productSets,
 }: EventProductSetsProps) => (
-  <div className='event-product-sets'>
+  <div className="event-product-sets">
     {productSets.map((productSet) => (
       <EventProductSet
         productSet={productSet}

package/src/iframe/event/event-product-sets/components/EventProductSet.tsx

@@ -18,7 +18,7 @@ export const EventProductSet = ({
 
   return (
     <div
-      role='button'
+      role="button"
       onClick={onClick}
       onKeyPress={onClick}
       className={clsx(

package/src/iframe/event/event-step-venue-map-zones/EventStepVenueMapZones.tsx

@@ -13,7 +13,7 @@ export const EventStepVenueMapZones = ({
   selectedVenueMapId,
   onSelectVenueMap,
 }: EventStepVenueMapZonesProps) => (
-  <div className='event-step-venue-map-zones'>
+  <div className="event-step-venue-map-zones">
     {venueMaps.map((venueMap) => (
       <Fragment key={venueMap.id}>
         <EventStepVenueMapZone