@licklist/design 0.68.7-dev.1 → 0.69.0

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')}

package/src/events/event-venue-map/components/MapPoint/components/DeleteIcon/DeleteIcon.tsx

@@ -41,7 +41,7 @@ export const DeleteIcon = ({ onClick, x, y }: DeleteIconProps) => (
       x={ACTION_ICON_MARGIN}
       y={0}
       data={ICON_DATA}
-      fill='white'
+      fill="white"
       width={ICON_WIDTH}
       height={ICON_HEIGHT}
       scaleX={0.03}

package/src/events/event-venue-map/components/MapPoint/components/EditIcon/EditIcon.tsx

@@ -41,7 +41,7 @@ export const EditIcon = ({ onClick, x, y }: EditIconProps) => (
       x={ACTION_ICON_MARGIN}
       y={ACTION_ICON_MARGIN}
       data={ICON_DATA}
-      fill='white'
+      fill="white"
       width={ICON_WIDTH}
       height={ICON_HEIGHT}
     />

package/src/events/event-venue-map/components/MapPoint/components/PointIcon/PointIcon.tsx

@@ -100,8 +100,8 @@ export const PointIcon = ({
         text={String(pointNumber)}
         strokeWidth={TEXT_STROKE_WIDTH}
         width={ICON_WIDTH - TEXT_STROKE_WIDTH}
-        align='center'
-        verticalAlign='center'
+        align="center"
+        verticalAlign="center"
         {...textColors()}
       />
     </Group>

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -137,7 +137,7 @@ export const ProductIcon = ({
         {...circleColors()}
       />
       {hovered && isSoldOut && (
-        <ProductTooltip x={defaultX} y={defaultY} text='Sold out' />
+        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
       )}
       {isProductChoosed ? (
         <Path

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

@@ -103,20 +103,20 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
   }
 
   return (
-    <div className='canvas-scrollbars'>
-      <div className='scrollbar-wrapper scrollbar-wrapper-horizontal'>
+    <div className="canvas-scrollbars">
+      <div className="scrollbar-wrapper scrollbar-wrapper-horizontal">
         {isMobileView && (
           <div
-            className='scroll-element horizontal-scroll'
+            className="scroll-element horizontal-scroll"
             onPointerDown={onDragX}
             style={horizontalScrollbarStyles()}
           />
         )}
       </div>
-      <div className='scrollbar-wrapper scrollbar-wrapper-vertical'>
+      <div className="scrollbar-wrapper scrollbar-wrapper-vertical">
         {isMobileView && (
           <div
-            className='scroll-element vertical-scroll'
+            className="scroll-element vertical-scroll"
             onPointerDown={onDragY}
             style={verticalScrollbarStyles()}
           />

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

@@ -126,8 +126,8 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       )
     }
     return (
-      <div className='venue-map' style={{ width, height }}>
-        <div className='zone-name'>
+      <div className="venue-map" style={{ width, height }}>
+        <div className="zone-name">
           <h6>{name}</h6>
         </div>
         <ZoomButtons stageRef={stageRef.current} imageRef={imageRef.current} />
@@ -141,7 +141,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
             <Stage
               width={width}
               height={height}
-              className='canvas-map'
+              className="canvas-map"
               onClick={onClick}
               onTap={onClick}
               ref={stageRef}

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

@@ -10,12 +10,12 @@ export const ZoomButtons = ({
   const { onZoomIn, onZoomOut } = useZoom({ stageRef, imageRef })
 
   return (
-    <div className='zoom-buttons'>
-      <div className='buttons-wrapper'>
-        <div className='icon-wrapper mb-1'>
+    <div className="zoom-buttons">
+      <div className="buttons-wrapper">
+        <div className="icon-wrapper mb-1">
           <FaSearch size={16} />
         </div>
-        <Button onClick={onZoomOut} className='mb-1'>
+        <Button onClick={onZoomOut} className="mb-1">
           -
         </Button>
         <Button onClick={onZoomIn}>+</Button>

package/src/file-upload/FilePreview.tsx

@@ -35,7 +35,7 @@ export function FilePreview({
   isLoading = false,
 }: FilePreviewProps) {
   return (
-    <div className='d-flex flex-row flex-wrap justify-content-center'>
+    <div className="d-flex flex-row flex-wrap justify-content-center">
       {!isLoading &&
         files.map((file) => (
           <PreviewItem
@@ -51,10 +51,10 @@ export function FilePreview({
 
 export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
   return (
-    <div className='preview-item' data-testid='preview-image'>
+    <div className="preview-item" data-testid="preview-image">
       <button
-        type='button'
-        className='preview-item__remove-btn'
+        type="button"
+        className="preview-item__remove-btn"
         onClick={(e) => {
           e.preventDefault()
           if (item instanceof File) {
@@ -81,7 +81,7 @@ const renderPendingFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className='preview-item__image'
+        className="preview-item__image"
         fluid
         rounded
       />
@@ -97,7 +97,7 @@ const renderUploadedFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className='preview-item__image'
+        className="preview-item__image"
         fluid
         rounded
       />
@@ -111,7 +111,7 @@ const renderUploadedFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className='preview-item__image'
+        className="preview-item__image"
         fluid
         rounded
       />
@@ -125,7 +125,7 @@ const renderFileTypeIcon = (itemName?: string) => {
   const isPdfFile = itemName?.includes('pdf')
 
   return (
-    <div className='preview-item__file'>
+    <div className="preview-item__file">
       {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
     </div>
   )

package/src/file-upload/FileUpload.tsx

@@ -92,10 +92,10 @@ export function FileUpload({
       }}
     >
       <input
-        type='file'
-        className='licklist-file-upload'
+        type="file"
+        className="licklist-file-upload"
         multiple={allowMultiple}
-        title='Upload Files'
+        title="Upload Files"
         accept={acceptableExtensions}
         // Clear file input
         onClick={(e) => (e.currentTarget.value = null)}
@@ -105,7 +105,7 @@ export function FileUpload({
         disabled={disabled}
       />
       {files?.length > 0 && (
-        <h5 className='drag-title'>
+        <h5 className="drag-title">
           {t('filesUploaded', {
             argument: `${files.length} ${
               1 % files.length === 0 ? t('file') : t('files')
@@ -124,17 +124,17 @@ export function FileUpload({
       {withIcon && !files?.length && !previewDefaultImages?.length && (
         <AddImageIcon />
       )}
-      <h5 className='drag-title'>{title}</h5>
+      <h5 className="drag-title">{title}</h5>
       {subTitle ? (
-        <span className='drag-sub-title'>{subTitle}</span>
+        <span className="drag-sub-title">{subTitle}</span>
       ) : (
-        <h5 className='browse-title'>{t('browseFiles')}</h5>
+        <h5 className="browse-title">{t('browseFiles')}</h5>
       )}
       {!files?.length &&
         !previewDefaultImages?.length &&
         !isLoading &&
         secondSubtitle && <Form.Label>{secondSubtitle} </Form.Label>}
-      <LoaderIndicator isLoaded={!isLoading} className='file-upload-loader' />
+      <LoaderIndicator isLoaded={!isLoading} className="file-upload-loader" />
     </label>
   )
 }

package/src/header/BookeditHeader.tsx

@@ -24,7 +24,7 @@ function BookeditHeader({
 }: Props) {
   return (
     <Header
-      logo={<Logo logo={<LogoSvg />} className='mt-auto mr-0 mr-sm-3' />}
+      logo={<Logo logo={<LogoSvg />} className="mt-auto mr-0 mr-sm-3" />}
       href={href}
       leftNavs={leftNavs}
       navItems={navItems}

package/src/header/Header.stories.tsx

@@ -25,19 +25,19 @@ export const Licklist = () => (
     <LicklistHeader
       leftNavs={
         <>
-          <ul className='navbar-nav bd-navbar-nav flex-row navbar-nav-primary'>
-            <li className='nav-item px-3 px-sm-3 px-lg-4'>
-              <Nav.Link href='#'>
+          <ul className="navbar-nav bd-navbar-nav flex-row navbar-nav-primary">
+            <li className="nav-item px-3 px-sm-3 px-lg-4">
+              <Nav.Link href="#">
                 <FaSearch />
               </Nav.Link>
             </li>
-            <li className='nav-item px-3 px-sm-4 d-none d-sm-inline'>
-              <Nav.Link href='#' className='nav-link-light-grey'>
+            <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
+              <Nav.Link href="#" className="nav-link-light-grey">
                 Explore
               </Nav.Link>
             </li>
-            <li className='nav-item px-3 px-sm-4 d-none d-sm-inline'>
-              <Nav.Link href='#' className=''>
+            <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
+              <Nav.Link href="#" className="">
                 Galleries
               </Nav.Link>
             </li>
@@ -45,13 +45,13 @@ export const Licklist = () => (
         </>
       }
     >
-      <StyledButton size='sm' className='rounded-pill mr-2'>
+      <StyledButton size="sm" className="rounded-pill mr-2">
         Login
       </StyledButton>
       <StyledButton
-        size='sm'
-        className='rounded-pill'
-        variant='outline-secondary'
+        size="sm"
+        className="rounded-pill"
+        variant="outline-secondary"
       >
         Sign up
       </StyledButton>
@@ -70,13 +70,13 @@ Licklist.story = {
 export const Bookedit = () => (
   <>
     <BookeditHeader navItems={providerNavItems}>
-      <StyledButton size='sm' className='rounded-pill mr-2'>
+      <StyledButton size="sm" className="rounded-pill mr-2">
         Login
       </StyledButton>
       <StyledButton
-        size='sm'
-        className='rounded-pill'
-        variant='outline-secondary'
+        size="sm"
+        className="rounded-pill"
+        variant="outline-secondary"
       >
         Sign up
       </StyledButton>
@@ -96,7 +96,7 @@ export const BookeditWithElements = () => (
   <>
     <BookeditHeader
       leftNavs={
-        <div className='header-elements'>
+        <div className="header-elements">
           <CompanySelector
             value={1}
             list={[