@licklist/design 0.68.7-dev.1 → 0.69.0

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

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

@@ -27,14 +27,14 @@ export const EventStepVenueMapZone = ({
         selectedVenueMapId === id && 'selected',
       )}
       onClick={onSelectVenueMap}
-      role='button'
+      role="button"
       tabIndex={0}
       onKeyPress={onSelectVenueMap}
     >
-      <div className='zone-title'>{name}</div>
+      <div className="zone-title">{name}</div>
       {image && (
         <div
-          className='zone-image'
+          className="zone-image"
           style={{ backgroundImage: `url("${image.url}")` }}
         />
       )}

package/src/iframe/event/event-tables/EventTables.stories.tsx

@@ -15,7 +15,7 @@ export default {
 
 export function Default() {
   return (
-    <div className='bg-white'>
+    <div className="bg-white">
       <EventTables tables={mockTables} />
     </div>
   )

package/src/iframe/event/event-tables/EventTables.tsx

@@ -13,9 +13,9 @@ interface TableCheckboxProps {
 
 function TableCheckbox({ table }: TableCheckboxProps) {
   return (
-    <div className='table-checkbox'>
+    <div className="table-checkbox">
       <label>
-        <input type='checkbox' value={table} />
+        <input type="checkbox" value={table} />
         <span>{table}</span>
       </label>
     </div>
@@ -24,9 +24,9 @@ function TableCheckbox({ table }: TableCheckboxProps) {
 
 export function EventTables({ tables }: EventTablesProps) {
   return (
-    <div className='event-tables'>
-      <div className='event-tables__header'>Choose Your Table</div>
-      <div className='event-tables__main'>
+    <div className="event-tables">
+      <div className="event-tables__header">Choose Your Table</div>
+      <div className="event-tables__main">
         {tables.map((table) => (
           <TableCheckbox key={table.id} table={table.name} />
         ))}

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -245,7 +245,7 @@ export function Default() {
       <PageBody
         leftBlock={
           <PageBody.LeftBlock
-            title='PLease select a product'
+            title="PLease select a product"
             component={
               <CalendarSelect
                 value={selectOptions[0].value}
@@ -255,7 +255,7 @@ export function Default() {
             }
           >
             <IframeEventVenueMap
-              url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
+              url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
               points={MENU_STEPS[0].venueMapSet.venueMaps[0].points.filter(
                 (point) =>
                   Boolean(
@@ -293,11 +293,11 @@ export function Default() {
             }
           >
             <BookingSummary
-              date='29 Sept 2022 at 09:00'
+              date="29 Sept 2022 at 09:00"
               menuSteps={MENU_STEPS}
               formValues={{}}
               totalWithDiscount={5}
-              eventName='Glam!'
+              eventName="Glam!"
             />
           </PageBody.RightBlock>
         }

package/src/iframe/event/event-venue-map/IframeEventVenueMap.tsx

@@ -17,7 +17,7 @@ export const IframeEventVenueMap = forwardRef<
   } = useContext(PageContext)
 
   return (
-    <div className='iframe-event-venue-map'>
+    <div className="iframe-event-venue-map">
       <EventVenueMap {...props} width={width} height={height} ref={ref} />
     </div>
   )

package/src/iframe/event/ticket-description/TicketDescription.stories.tsx

@@ -11,12 +11,12 @@ export const Default: Story = () => {
   return (
     <div style={{ width: '50rem' }}>
       <TicketDescription
-        title='Early Bird General Admission'
-        description='Ticket is valid for students and non students. 
+        title="Early Bird General Admission"
+        description="Ticket is valid for students and non students. 
       You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
       Ticket valid for entry before 11.30pm for 12.30am showtime. 
       If you are a student at Bucks University you do not need to buy a ticket, 
-      your general admission is included as part of the Big Deal packages.'
+      your general admission is included as part of the Big Deal packages."
         images={[
           {
             id: 1,
@@ -33,12 +33,12 @@ export const Highlighted: Story = () => {
     <div style={{ width: '50rem' }}>
       <TicketDescription
         highlighted
-        title='Early Bird General Admission'
-        description='Ticket is valid for students and non students. 
+        title="Early Bird General Admission"
+        description="Ticket is valid for students and non students. 
       You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
       Ticket valid for entry before 11.30pm for 12.30am showtime. 
       If you are a student at Bucks University you do not need to buy a ticket, 
-      your general admission is included as part of the Big Deal packages.'
+      your general admission is included as part of the Big Deal packages."
         images={[
           {
             id: 1,

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -43,9 +43,9 @@ export function TicketDescription({
   } as CSSProperties
 
   const renderDescription = () => (
-    <div className='description-content'>
-      <div className='d-flex flex-column'>
-        <div className='product-title'>
+    <div className="description-content">
+      <div className="d-flex flex-column">
+        <div className="product-title">
           {title} {isRequired && <span>*</span>}
         </div>
         {showDescription && (
@@ -63,18 +63,18 @@ export function TicketDescription({
   return (
     <div className={wrapperClasses}>
       <div
-        className='ticket-description__wrapper'
+        className="ticket-description__wrapper"
         style={descriptionWrapperStyle}
       >
-        <div className='ticket-description__wrapper-children'>
+        <div className="ticket-description__wrapper-children">
           {imageSrc && (
-            <div className='image-wrapper'>
+            <div className="image-wrapper">
               <img src={imageSrc} alt={title} />
             </div>
           )}
           {canExpand && description.length > DESCRIPTION_MAX_LENGTH ? (
             <TextExpand
-              className='ticket-description__container'
+              className="ticket-description__container"
               isExpanded={isDescriptionExpanded}
               setIsExpanded={setIsDescriptionExpanded}
             >

package/src/iframe/external-modal/ExternalModal.tsx

@@ -50,15 +50,15 @@ export const ExternalModal = () => {
       <Button onClick={() => setIsOpen((prevValue) => !prevValue)}>
         Show Modal
       </Button>
-      <div className='bkdt-mask' />
-      <div className='bkdt-modal'>
-        <div className='bkdt-modal-dialog'>
-          <div id='bkdt-modal-content' className='bkdt-modal-content'>
-            <div id='bkdt-modal-body' className='bkdt-modal-body'>
+      <div className="bkdt-mask" />
+      <div className="bkdt-modal">
+        <div className="bkdt-modal-dialog">
+          <div id="bkdt-modal-content" className="bkdt-modal-content">
+            <div id="bkdt-modal-body" className="bkdt-modal-body">
               <iframe
-                title='iframe.lickli.st'
+                title="iframe.lickli.st"
                 // eslint-disable-next-line max-len
-                src='https://iframe.lickli.st/token/QrXjoFWTcXjQ5BBQmRIkCAj7XUyNi6vg/event/6/2023-04-12_16-10-00'
+                src="https://iframe.lickli.st/token/QrXjoFWTcXjQ5BBQmRIkCAj7XUyNi6vg/event/6/2023-04-12_16-10-00"
               />
             </div>
           </div>

package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx

@@ -135,18 +135,18 @@ const menuSteps = [
 
 export function Default() {
   return (
-    <div className='payment-process'>
-      <div className='col-lg-4'>
+    <div className="payment-process">
+      <div className="col-lg-4">
         <BookingSummary
           isPaymentPage
-          eventName='new Event'
+          eventName="new Event"
           footer={
-            <div className='d-flex flex-column justify-content-between'>
+            <div className="d-flex flex-column justify-content-between">
               <SummaryTotalBlock label={'Total'} amount={2} />
               <SummaryTotalBlock label={'Total with discount'} amount={1} />
             </div>
           }
-          date='29 Sept 2022 at 09:00'
+          date="29 Sept 2022 at 09:00"
           menuSteps={menuSteps as any}
           peopleAmount={5}
           formValues={{
@@ -196,10 +196,10 @@ export function Default() {
 
 export function Loading() {
   return (
-    <div className='payment-process'>
-      <div className='col-lg-4'>
+    <div className="payment-process">
+      <div className="col-lg-4">
         <BookingSummary
-          date='29 Sept 2022 at 09:00'
+          date="29 Sept 2022 at 09:00"
           menuSteps={menuSteps as any}
           formValues={{}}
           totalWithDiscount={5}

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -33,20 +33,20 @@ export const BookingSummary = ({
 
   if (isLoading) {
     return (
-      <div className='payment-booking-summary'>
+      <div className="payment-booking-summary">
         <LoaderIndicator isLoaded={false} />
       </div>
     )
   }
 
   return (
-    <div className='payment-booking-summary'>
+    <div className="payment-booking-summary">
       <BookingSummaryAccordion
         isPaymentPage={isPaymentPage}
         hasPeopleInput={hasPeopleInput}
         headerComponent={headerComponent}
       >
-        <div className='event-info'>
+        <div className="event-info">
           <EventInfo
             eventName={eventName}
             isPaymentPage={isPaymentPage}
@@ -58,8 +58,8 @@ export const BookingSummary = ({
 
         {values(formValues)?.length > 0 ? (
           <div>
-            <div className='cart-items'>
-              <div className='products-by-menu-step'>
+            <div className="cart-items">
+              <div className="products-by-menu-step">
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
                     isPaymentLink={isPaymentLink}
@@ -74,9 +74,9 @@ export const BookingSummary = ({
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
-                  <div className='d-flex justify-content-between mt-3 people'>
-                    <p className='m-0 payment-metadata'>{t('people')}:</p>
-                    <p className='price'>{peopleAmount}</p>
+                  <div className="d-flex justify-content-between mt-3 people">
+                    <p className="m-0 payment-metadata">{t('people')}:</p>
+                    <p className="price">{peopleAmount}</p>
                   </div>
                 </>
               )}
@@ -84,11 +84,11 @@ export const BookingSummary = ({
               {!!transactionFee && (
                 <>
                   <hr />
-                  <div className='d-flex justify-content-between mt-3'>
-                    <p className='m-0 payment-metadata'>
+                  <div className="d-flex justify-content-between mt-3">
+                    <p className="m-0 payment-metadata">
                       {t('transactionFee')}:
                     </p>
-                    <p className='price'>
+                    <p className="price">
                       {formatNumber(transactionFee, {
                         style: 'currency',
                         currency: Config.Currency.GBP,
@@ -101,8 +101,8 @@ export const BookingSummary = ({
             {footer}
           </div>
         ) : (
-          <div className='cart-items'>
-            <p className='empty-cart'>{t('emptyBasket')}</p>
+          <div className="cart-items">
+            <p className="empty-cart">{t('emptyBasket')}</p>
           </div>
         )}
       </BookingSummaryAccordion>
@@ -125,25 +125,25 @@ const EventInfo = ({
   if (isPaymentPage) {
     return (
       <>
-        <div className='d-flex align-items-center mb-5'>
-          <TicketIcon height={16} width={20} fill='black' />
-          <div className='m-0 pl-2 title event-name metadata'>{eventName}</div>
+        <div className="d-flex align-items-center mb-5">
+          <TicketIcon height={16} width={20} fill="black" />
+          <div className="m-0 pl-2 title event-name metadata">{eventName}</div>
         </div>
 
-        <div className='d-flex align-items-center mb-5'>
-          <CalendarIcon height={16} width={20} fill='black' />
-          <div className='m-0 pl-2 metadata'>{date}</div>
+        <div className="d-flex align-items-center mb-5">
+          <CalendarIcon height={16} width={20} fill="black" />
+          <div className="m-0 pl-2 metadata">{date}</div>
         </div>
-        {time && <div className='mb-5 metadata'>{time}</div>}
+        {time && <div className="mb-5 metadata">{time}</div>}
       </>
     )
   }
 
   return (
     <>
-      <p className='m-0 title event-name'>{eventName}</p>
-      <p className='m-0'>{date}</p>
-      {time && <p className='m-0'>{time}</p>}
+      <p className="m-0 title event-name">{eventName}</p>
+      <p className="m-0">{date}</p>
+      {time && <p className="m-0">{time}</p>}
     </>
   )
 }

package/src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx

@@ -92,7 +92,7 @@ export const BookingSummaryAccordion = ({
         }`}
         style={rightBlockContentStyles}
       >
-        <div className='summary-wrapper'>{children}</div>
+        <div className="summary-wrapper">{children}</div>
       </Accordion.Collapse>
     </Accordion>
   )

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -30,18 +30,18 @@ export const ProductSummary = ({
   })
 
   return (
-    <div className='product'>
-      <p className='m-0 name'>{name ?? orderProduct?.name}</p>
-      <div className='d-flex justify-content-between'>
-        <p className='m-0'>
+    <div className="product">
+      <p className="m-0 name">{name ?? orderProduct?.name}</p>
+      <div className="d-flex justify-content-between">
+        <p className="m-0">
           {t('shortQuantity')}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className='price'>{fullPrice}</p>
+        <p className="price">{fullPrice}</p>
       </div>
 
       {productQuantityError && (
-        <p className='iframe-event__message-error'>{productQuantityError}</p>
+        <p className="iframe-event__message-error">{productQuantityError}</p>
       )}
     </div>
   )

package/src/iframe/order-process/components/BookingSummary/components/ProductsByMenuStep/ProductsByMenuStep.tsx

@@ -42,7 +42,7 @@ export const ProductsByMenuStep = ({
   if (!doesStepHaveItems(orderItems, step)) return null
 
   return (
-    <div className='categories'>
+    <div className="categories">
       {productCategories.map((category) => {
         const categoryOrderItems = getOrderItemsForCategory(
           orderItems,
@@ -52,8 +52,8 @@ export const ProductsByMenuStep = ({
         if (categoryOrderItems.length === 0) return null
 
         return (
-          <div key={category.id} className='products'>
-            <p className='m-0 title'>{category.name}</p>
+          <div key={category.id} className="products">
+            <p className="m-0 title">{category.name}</p>
 
             {categoryOrderItems.map((orderItem) => {
               const productQuantityError = getProductError(

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx

@@ -29,7 +29,7 @@ export const SummaryTotal = ({
   }
 
   return (
-    <div className='d-flex flex-column justify-content-between'>
+    <div className="d-flex flex-column justify-content-between">
       <SummaryTotalBlock label={t('total')} amount={cartSum} />
 
       {!!totalWithDiscount && !isFreePayment && (

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock.tsx

@@ -13,9 +13,9 @@ export const SummaryTotalBlock = ({
   const { formatNumber } = useIntl()
 
   return (
-    <div className='total'>
+    <div className="total">
       {label && <div>{label}</div>}
-      <div className='m-0 price'>
+      <div className="m-0 price">
         {formatNumber(amount, {
           style: 'currency',
           currency: Config.Currency.GBP,