@licklist/design 0.68.5 → 0.68.6-dev.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,

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

@@ -52,7 +52,7 @@ export const ToggleHeader = ({
     <div
       onClick={(event) => showExpandButton && decoratedOnClick(event)}
       onKeyPress={(event) => showExpandButton && decoratedOnClick(event)}
-      role="button"
+      role='button'
       tabIndex={0}
       className={clsx(
         'd-flex flex-column',
@@ -60,7 +60,7 @@ export const ToggleHeader = ({
       )}
     >
       <h6 className={clsx('title', showExpandButton && 'pointer')}>
-        <div className="d-flex w-100 align-content-center justify-content-between">
+        <div className='d-flex w-100 align-content-center justify-content-between'>
           <HeaderContent
             showExpandButton={showExpandButton}
             title={title}
@@ -70,7 +70,7 @@ export const ToggleHeader = ({
           />
         </div>
       </h6>
-      {isExpanded && <hr className="mt-3" />}
+      {isExpanded && <hr className='mt-3' />}
     </div>
   )
 }
@@ -87,10 +87,10 @@ const HeaderContent = ({
   if (isPaymentPage) {
     return (
       <>
-        <div className="d-flex">
-          <p className="m-0 mr-2 toggle-title">{title || t('yourBooking')}</p>
+        <div className='d-flex'>
+          <p className='m-0 mr-2 toggle-title'>{title || t('yourBooking')}</p>
           {showExpandButton && (
-            <div className="expand-button">
+            <div className='expand-button'>
               {currentEventKey === ACCORDION_KEY ? (
                 <FaChevronUp size={8} />
               ) : (
@@ -105,12 +105,12 @@ const HeaderContent = ({
   }
   return (
     <>
-      <div className="d-flex">
-        <p className="m-0">{title || t('yourBooking')}</p>
+      <div className='d-flex'>
+        <p className='m-0'>{title || t('yourBooking')}</p>
       </div>
 
       {showExpandButton && (
-        <div className="expand-button">
+        <div className='expand-button'>
           {currentEventKey === ACCORDION_KEY ? (
             <FaChevronUp size={16} />
           ) : (

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

@@ -41,16 +41,16 @@ export const BookingSummaryFooter = ({
   const disabled = _disabled || isLoading
 
   return (
-    <div className="d-flex flex-column">
+    <div className='d-flex flex-column'>
       {children}
       {showButton && (
         <Button
-          className="m-0 d-flex align-items-center justify-content-center mt-3"
+          className='m-0 d-flex align-items-center justify-content-center mt-3'
           disabled={disabled}
           {...buttonProps}
         >
           {isLoading ? (
-            <Spinner animation="border" size="sm" role="status" />
+            <Spinner animation='border' size='sm' role='status' />
           ) : (
             (buttonLabel ?? t('continue'))
           )}

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

@@ -411,7 +411,7 @@ export function Default() {
   const [peopleAmount] = useState(0)
 
   return (
-    <div className="snippet">
+    <div className='snippet'>
       <OrderProcessContextProvider>
         <Page>
           <PageBody
@@ -423,8 +423,8 @@ export function Default() {
                 onSubmit={(values) => console.log('onSubmit', values)}
                 setFormValues={setFormValues}
                 menuStepWithVenueMap={MENU_STEPS[0] as any}
-                title="Select a product"
-                activeVenueMapId="7"
+                title='Select a product'
+                activeVenueMapId='7'
                 soldOutProducts={[{ product_id: 148, message: 'message' }]}
               />
             }
@@ -440,12 +440,12 @@ export function Default() {
                 }
               >
                 <BookingSummary
-                  date="29 Sept 2022 at 09:00"
+                  date='29 Sept 2022 at 09:00'
                   menuSteps={menuSteps as any}
                   peopleAmount={peopleAmount}
                   formValues={formValues}
                   totalWithDiscount={5}
-                  eventName="Glam!"
+                  eventName='Glam!'
                 />
               </PageBody.RightBlock>
             }