@licklist/design 0.69.1 → 0.69.2

package/src/events/edit-event-modal/component/SaleDeadline/SaleDeadline.tsx

@@ -42,14 +42,14 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   }, [saleDeadline])
 
   return (
-    <Form.Group className="sales-deadline">
+    <Form.Group className='sales-deadline'>
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {errors.saleDeadline?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name="saleDeadline"
+        name='saleDeadline'
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -111,9 +111,9 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
 
           return (
             <>
-              <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
+              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
                 <Switch
-                  name="sale-deadline"
+                  name='sale-deadline'
                   options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
                     id: type,
                     value: t(`Design:${type}`),
@@ -123,8 +123,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                   disabled={disabled}
                 />
               </Form.Group>
-              <div className="d-flex">
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+              <div className='d-flex'>
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleDays')}</Form.Label>
                   <NumberInput
                     value={days}
@@ -135,7 +135,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleHours')}</Form.Label>
                   <NumberInput
                     value={hours}
@@ -147,7 +147,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className="d-flex flex-column col-4 pl-0">
+                <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleMinutes')}</Form.Label>
                   <NumberInput
                     value={minutes}
@@ -161,8 +161,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 </Form.Group>
               </div>
               {invalid && (
-                <div className="d-flex w-100">
-                  <span className="invalid-feedback-message">
+                <div className='d-flex w-100'>
+                  <span className='invalid-feedback-message'>
                     {error?.message}
                   </span>
                 </div>

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -100,32 +100,32 @@ export const SelectEventProductSet = ({
 
   return (
     <>
-      <div className="d-flex mt-5 mb-5 align-items-end">
+      <div className='d-flex mt-5 mb-5 align-items-end'>
         <Form.Group
           controlId={productSetsId}
-          className="d-flex flex-column  w-100 choose-product-set-container "
+          className='d-flex flex-column w-100 choose-product-set-container'
         >
           <Form.Label>{t('Design:selectProductSet')}</Form.Label>
 
           <Controller
             control={control}
-            name="productSetId"
+            name='productSetId'
             render={({ field }) => {
               const fieldValue = String(field.value)
               return (
                 <>
-                  <div className="d-flex align-items-center flex-row w-100">
+                  <div className='d-flex align-items-center flex-row w-100'>
                     <ConfirmModal>
                       {(confirm) => (
                         <Form.Control
-                          as="select"
+                          as='select'
                           onChange={(e) =>
                             onChangeProductSet(Number(e.target.value), confirm)
                           }
                           isInvalid={Boolean(errors.productSetId)}
                           value={fieldValue}
                         >
-                          <option value="" hidden>
+                          <option value='' hidden>
                             {t('Design:chooseProductSet')}
                           </option>
                           {productSets?.map((productSet) => {
@@ -149,11 +149,11 @@ export const SelectEventProductSet = ({
                       )}
                     </ConfirmModal>
 
-                    <div className="buttons-container">
+                    <div className='buttons-container'>
                       {!showEditProductSet && !editedProductSet && (
                         <Button
-                          variant=""
-                          className="btn product-set-button mr-4"
+                          variant=''
+                          className='btn product-set-button mr-4'
                           onClick={handleCreateProductSet}
                         >
                           {t('addNewProductSet')}
@@ -161,8 +161,8 @@ export const SelectEventProductSet = ({
                       )}
                       {showOverrideProductSet && (
                         <Button
-                          variant=""
-                          className="btn product-set-button "
+                          variant=''
+                          className='btn product-set-button'
                           onClick={onEditProductSet}
                         >
                           {isOverrideProductSet
@@ -172,8 +172,8 @@ export const SelectEventProductSet = ({
                       )}
                       {showEditProductSet && (
                         <Button
-                          variant=""
-                          className="btn product-set-button"
+                          variant=''
+                          className='btn product-set-button'
                           onClick={revertEditProductSet}
                         >
                           {t('cancelAndRevert')}
@@ -181,8 +181,8 @@ export const SelectEventProductSet = ({
                       )}
                       {!showEditProductSet && editedProductSet && (
                         <Button
-                          variant=""
-                          className="btn product-set-button ml-4 text-danger"
+                          variant=''
+                          className='btn product-set-button ml-4 text-danger'
                           onClick={revertEditProductSet}
                         >
                           {t('undoChanges')}
@@ -191,7 +191,7 @@ export const SelectEventProductSet = ({
                     </div>
                   </div>
 
-                  <Form.Control.Feedback type="invalid">
+                  <Form.Control.Feedback type='invalid'>
                     {errors?.productSetId?.message}
                   </Form.Control.Feedback>
                 </>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -102,14 +102,14 @@ export const EditEventProductSet = ({
       providerHasMap={settings?.providerHasMap}
       venueMapSets={venueMapSets}
     >
-      <div className="edit-product-set-warning">
+      <div className='edit-product-set-warning'>
         {t('editProductSetWarning', {
           attribute: productSetData?.name,
         })}
       </div>
-      <div className="product-set-border" />
+      <div className='product-set-border' />
       <FormProvider {...form}>
-        <Form className="mt-6">
+        <Form className='mt-6'>
           <ProductSetControl
             smsTemplates={getFilteredTemplates(
               smsTemplates,
@@ -132,12 +132,12 @@ export const EditEventProductSet = ({
           />
           <Button
             disabled={isLoading}
-            className="save-event mt-4"
+            className='save-event mt-4'
             onClick={handleSubmit(onSubmit)}
           >
             {t('update')}
           </Button>
-          <div className="edit-product-set-warning mt-4">
+          <div className='edit-product-set-warning mt-4'>
             {t('recurrentOverridesWarining')}
           </div>
         </Form>

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
       <button onClick={() => setIsOpen(!isOpen)}>Open Modal</button>
       <EditRecurrentEventModal
         {...(isEditRecurrentEventModal ? {} : args)}
-        title="EditRecurrentEventModal"
+        title='EditRecurrentEventModal'
         isOpen={isOpen}
         onHide={() => setIsOpen(false)}
       />

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -56,30 +56,30 @@ export const EditRecurrentEventModal = ({
       onHide={onHide}
       animation={false}
       centered
-      contentClassName="rounded"
+      contentClassName='rounded'
     >
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
-        <Modal.Header className="border-0">
-          <Modal.Title as="h6">{title}</Modal.Title>
-          <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
+        <Modal.Header className='border-0'>
+          <Modal.Title as='h6'>{title}</Modal.Title>
+          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={16} />
           </Button>
         </Modal.Header>
-        <Modal.Body className="p-0 ml-4">
-          <Form.Group className="m-0">
+        <Modal.Body className='p-0 ml-4'>
+          <Form.Group className='m-0'>
             <Controller
               render={({ field: { value, onChange } }) => (
                 <>
                   {Object.keys(RECURRENT_MODE_TYPES_LIST).map((option) => (
                     <Form.Check
-                      type="radio"
+                      type='radio'
                       id={option}
                       key={option}
                       custom
-                      className="mt-3"
+                      className='mt-3'
                     >
                       <Form.Check.Input
-                        type="radio"
+                        type='radio'
                         value={option}
                         checked={value === option}
                         onChange={() => onChange(option)}
@@ -91,23 +91,23 @@ export const EditRecurrentEventModal = ({
                 </>
               )}
               control={control}
-              name="mode"
+              name='mode'
             />
           </Form.Group>
         </Modal.Body>
-        <Modal.Footer className="border-0">
+        <Modal.Footer className='border-0'>
           <Button
-            variant="danger"
+            variant='danger'
             onClick={onHide}
-            className="text-decoration-none"
+            className='text-decoration-none'
             disabled={disabled}
           >
             {t('cancel')}
           </Button>
           <Button
-            variant="success"
-            type="submit"
-            className="text-decoration-none"
+            variant='success'
+            type='submit'
+            className='text-decoration-none'
             disabled={disabled}
           >
             {t('ok').toUpperCase()}

package/src/events/event-card/EventCard.stories.tsx

@@ -17,7 +17,7 @@ export const Default: Story<EventCardProps> = () => {
   return (
     <div style={{ maxWidth: '34rem' }}>
       <EventCard
-        name="Glitterbomb Cambridge / Cheryl Hole"
+        name='Glitterbomb Cambridge / Cheryl Hole'
         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
@@ -31,8 +31,8 @@ export const Default: Story<EventCardProps> = () => {
           goal with Cheryl Hole and she's coming from the runway of Season 1 of
           RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
           the...`}
-        date="2023-08-31T09:35:00.000+03:00"
-        productSetName="New product set"
+        date='2023-08-31T09:35:00.000+03:00'
+        productSetName='New product set'
         imageUrl={showImage ? `https://source.unsplash.com/random` : null}
         hasPermission={hasPermission}
         onPreview={() => undefined}
@@ -68,8 +68,8 @@ export const Default: Story<EventCardProps> = () => {
         onStatistic={() => {
           console.log('onStatistic')
         }}
-        titleId="titleId"
-        descriptionId="descriptionId"
+        titleId='titleId'
+        descriptionId='descriptionId'
       />
     </div>
   )

package/src/events/event-card/EventCard.tsx

@@ -71,16 +71,16 @@ export function EventCard({
   )
 
   return (
-    <Card className="d-flex flex-column event-card h-100">
+    <Card className='d-flex flex-column event-card h-100'>
       <div
         className={clsx('event-card-image-container', !imageUrl && 'no-image')}
       >
-        {imageUrl && <Card.Img variant="top" src={imageUrl} />}
+        {imageUrl && <Card.Img variant='top' src={imageUrl} />}
         <Badge
-          className="event-card-date"
-          as="time"
+          className='event-card-date'
+          as='time'
           dateTime={date}
-          variant="primary"
+          variant='primary'
         >
           {formatDate(new Date(date), {
             weekday: 'short',
@@ -94,7 +94,7 @@ export function EventCard({
       </div>
       <Card.Body>
         <Card.Title id={titleId}>{name}</Card.Title>
-        <div className="flex-grow-1">
+        <div className='flex-grow-1'>
           <TipTapEditor
             viewMode
             disabled
@@ -102,10 +102,10 @@ export function EventCard({
             content={memoedContent}
             id={descriptionId}
           />
-          <div className="mt-2 ml-2">
+          <div className='mt-2 ml-2'>
             {Object.keys(statistics).map((key) => (
-              <div className="event-card-sale" key={key}>
-                <span className="event-card-sale-name">
+              <div className='event-card-sale' key={key}>
+                <span className='event-card-sale-name'>
                   {t(key)}:{' '}
                   {key === 'totalAmount'
                     ? formatNumber(statistics[key], {
@@ -120,11 +120,11 @@ export function EventCard({
 
           {sales &&
             sales.map((sale) => (
-              <div className="event-card-sale" key={sale.id}>
+              <div className='event-card-sale' key={sale.id}>
                 {/* TODO: make it an i18n message instead */}
-                <div className="event-card-sale-text">
-                  <span className="event-card-sale-name">{sale.name}</span>{' '}
-                  <span className="event-card-sale-quantity">
+                <div className='event-card-sale-text'>
+                  <span className='event-card-sale-name'>{sale.name}</span>{' '}
+                  <span className='event-card-sale-quantity'>
                     {[sale.current, sale.max]
                       .map((value) => formatNumber(value))
                       .join(' / ')}
@@ -135,34 +135,34 @@ export function EventCard({
             ))}
         </div>
       </Card.Body>
-      <Card.Footer className="flex-column">
+      <Card.Footer className='flex-column'>
         {productSetName && (
           <OverlayTrigger
             // Workaround for bootstrap error with "hover trigger"
             trigger={['hover', 'hover']}
             overlay={
-              <Popover id="event-product-set-popover">
-                <Popover.Content className="event-product-set-card">
+              <Popover id='event-product-set-popover'>
+                <Popover.Content className='event-product-set-card'>
                   {productSetName}
                 </Popover.Content>
               </Popover>
             }
           >
-            <div className="pl-3 text-truncate">
+            <div className='pl-3 text-truncate'>
               {t('Design:productSet')}: {productSetName}
             </div>
           </OverlayTrigger>
         )}
-        <div className="d-flex w-100 justify-content-between">
-          <div className="d-flex">
+        <div className='d-flex w-100 justify-content-between'>
+          <div className='d-flex'>
             <button
-              type="button"
-              className="event-card-link-button ml-3 mr-4"
+              type='button'
+              className='event-card-link-button ml-3 mr-4'
               onClick={onStatistic}
             >
               <ChartBarIcon />
             </button>
-            <div className="event-card-views">
+            <div className='event-card-views'>
               <FaEye />
 
               <span>{formatNumber(totalViews)}</span>
@@ -170,8 +170,8 @@ export function EventCard({
           </div>
           <div>
             <button
-              type="button"
-              className="event-card-link-button"
+              type='button'
+              className='event-card-link-button'
               onClick={onPreview}
             >
               <FaExternalLinkAlt />
@@ -179,22 +179,22 @@ export function EventCard({
             {hasPermission && (
               <>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onEdit}
                 >
                   <FaEdit />
                 </button>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onCopy}
                 >
                   <FaCopy />
                 </button>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onRemove}
                 >
                   <FaTrashAlt />

package/src/events/event-card/EventCardSkeleton.tsx

@@ -3,30 +3,30 @@ import { Card } from 'react-bootstrap'
 import Skeleton from 'react-loading-skeleton'
 
 export const EventCardSkeleton = memo(() => (
-  <Card className="d-flex flex-column event-card h-100">
-    <div className="event-card-image-container">
-      <Skeleton className="card-img-top" />
+  <Card className='d-flex flex-column event-card h-100'>
+    <div className='event-card-image-container'>
+      <Skeleton className='card-img-top' />
     </div>
     <Card.Body>
-      <Skeleton className="card-title h5" />
-      <div className="flex-grow-1">
-        <div className="editor-without-menu editor-disabled event-description">
+      <Skeleton className='card-title h5' />
+      <div className='flex-grow-1'>
+        <div className='editor-without-menu editor-disabled event-description'>
           <Skeleton />
           <Skeleton />
           <Skeleton />
         </div>
-        <div className="mt-2">
+        <div className='mt-2'>
           <Skeleton />
           <Skeleton />
         </div>
       </div>
     </Card.Body>
     <Card.Footer>
-      <div className="d-flex w-100 justify-content-between">
-        <div className="skeleton-w4">
+      <div className='d-flex w-100 justify-content-between'>
+        <div className='skeleton-w4'>
           <Skeleton />
         </div>
-        <div className="skeleton-w6">
+        <div className='skeleton-w6'>
           <Skeleton />
         </div>
       </div>

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -17,7 +17,7 @@ export const Default: Story<EventStatisticModalProps> = (args) => {
 
   return (
     <div>
-      <button type="button" onClick={() => setIsOpen(!isOpen)}>
+      <button type='button' onClick={() => setIsOpen(!isOpen)}>
         Open Modal
       </button>
       <EventStatisticModal

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -34,14 +34,14 @@ export const EventStatisticModal = ({
       onHide={handleClose}
       animation={false}
       centered
-      contentClassName="rounded"
-      className="event-statistic-modal"
+      contentClassName='rounded'
+      className='event-statistic-modal'
     >
       <Modal.Header>
-        <Modal.Title as="h6">{title ?? t('eventStatistic')}</Modal.Title>
+        <Modal.Title as='h6'>{title ?? t('eventStatistic')}</Modal.Title>
         <Button
-          variant="danger"
-          className="btn-sm rounded"
+          variant='danger'
+          className='btn-sm rounded'
           onClick={handleClose}
         >
           <FaTimes size={16} />
@@ -50,7 +50,7 @@ export const EventStatisticModal = ({
       <Modal.Body>
         {data.length ? (
           <>
-            <h5 className="mb-5">{t('statistics')}</h5>
+            <h5 className='mb-5'>{t('statistics')}</h5>
             <StaticTable
               columns={[
                 { key: 'name', label: '' },
@@ -58,11 +58,11 @@ export const EventStatisticModal = ({
                 { key: 'total', label: '' },
               ]}
               data={data}
-              className="striped-static-table"
+              className='striped-static-table'
             />
           </>
         ) : (
-          <div className="no-statistic">
+          <div className='no-statistic'>
             <h5>{t('noStatisticsForSelectedEvent')}</h5>
           </div>
         )}

package/src/events/event-venue-map/components/Dropdown/Dropdown.tsx

@@ -90,7 +90,7 @@ export const Dropdown = ({
 
   return (
     <div
-      className="canvas-dropdown"
+      className='canvas-dropdown'
       style={styles()}
       ref={dropdownContainerRef}
     >

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react'
 
 export const DropdownWrapper: FC = ({ children }) => (
-  <div className="canvas-dropdown-wrapper">
-    <div className="arrow" />
-    <div className="children-container">{children}</div>
+  <div className='canvas-dropdown-wrapper'>
+    <div className='arrow' />
+    <div className='children-container'>{children}</div>
   </div>
 )

package/src/events/event-venue-map/components/Dropdown/components/ProductsControl/ProductsControl.tsx

@@ -14,21 +14,21 @@ export const ProductsControl = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="products-control mb-3">
+    <div className='products-control mb-3'>
       {products.map(({ id, name, uuid }) => {
         const onClick = () => {
           onChange(uuid)
         }
 
         return (
-          <div className="product" key={id}>
+          <div className='product' key={id}>
             <div>
-              <p className="m-0">{name}</p>
+              <p className='m-0'>{name}</p>
             </div>
             <div>
               <Button
-                size="sm"
-                className="ml-3 select-product-button"
+                size='sm'
+                className='ml-3 select-product-button'
                 onClick={onClick}
               >
                 {t('add')}

package/src/events/event-venue-map/components/Dropdown/components/SelectControl/SelectControl.tsx

@@ -97,16 +97,16 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
   }, [activeElementKey, setShowProductSelect])
 
   return (
-    <div className="d-flex flex-column align-items-center">
+    <div className='d-flex flex-column align-items-center'>
       {!showProductSelect && (
         <>
           {selectedProduct && (
-            <p className="product-title m-0">{selectedProduct.name}</p>
+            <p className='product-title m-0'>{selectedProduct.name}</p>
           )}
           <Button
-            size="sm"
+            size='sm'
             onClick={onEditClick}
-            className="mt-3 dropdown-button"
+            className='mt-3 dropdown-button'
           >
             {t(selectedPointProduct ? 'edit' : 'addProduct')}
           </Button>
@@ -117,18 +117,18 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
       )}
       {selectedPointProduct && !showProductSelect && (
         <Button
-          size="sm"
-          variant="link"
-          className="mt-3 delete-button dropdown-button"
+          size='sm'
+          variant='link'
+          className='mt-3 delete-button dropdown-button'
           onClick={onRemove}
         >
           {t('remove')}
         </Button>
       )}
       <Button
-        variant="link"
-        size="sm"
-        className="mt-3 dropdown-button"
+        variant='link'
+        size='sm'
+        className='mt-3 dropdown-button'
         onClick={onClose}
       >
         {t('close')}