@licklist/design 0.69.1 → 0.69.2

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

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}