@licklist/design 0.69.1 → 0.69.3-dev.0

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={[

package/src/header/Header.tsx

@@ -26,33 +26,33 @@ function Header({
 }: Props) {
   return (
     <Navbar
-      className="header"
-      variant="light"
+      className='header'
+      variant='light'
       collapseOnSelect
       expand={false}
-      bg="none"
+      bg='none'
     >
-      <div className="header-logo-container">
-        <Navbar.Brand href={href} className="p-0">
+      <div className='header-logo-container'>
+        <Navbar.Brand href={href} className='p-0'>
           {logo}
         </Navbar.Brand>
         {navItems?.length && (
           <>
             <Navbar.Toggle
-              aria-controls="header-navbar-nav"
-              className="d-block d-md-none ml-2 border-0"
+              aria-controls='header-navbar-nav'
+              className='d-block d-md-none ml-2 border-0'
             />
           </>
         )}
       </div>
-      <Nav className="mr-auto my-auto">{leftNavs}</Nav>
-      <div className="user-section ml-3 my-auto">{children}</div>
+      <Nav className='mr-auto my-auto'>{leftNavs}</Nav>
+      <div className='user-section ml-3 my-auto'>{children}</div>
       {navItems?.length && (
-        <Navbar.Collapse id="header-navbar-nav">
+        <Navbar.Collapse id='header-navbar-nav'>
           {renderMobileNavigation ? (
             renderMobileNavigation(navItems)
           ) : (
-            <Nav className="mr-auto">
+            <Nav className='mr-auto'>
               {navItems.map(({ label, href }) => (
                 <Nav.Link href={href} key={`${href}${label}`}>
                   {label}

package/src/header/LicklistHeader.tsx

@@ -30,7 +30,7 @@ function LicklistHeader({
         <Logo
           logo={<LogoSvg />}
           logoSm={<LogoSmSvg />}
-          className="mt-auto mr-0 mr-sm-3"
+          className='mt-auto mr-0 mr-sm-3'
         />
       }
       href={href}

package/src/header/elements/CompanySelector.tsx

@@ -12,25 +12,25 @@ function CompanySelector({ value, list, onChange }: CompanySelectorProps) {
   const hasOneItem = list.length === 1
 
   return (
-    <div className="header-company-selector-container">
+    <div className='header-company-selector-container'>
       {hasOneItem && (
-        <span className="company-selector-item company-selector-item__disabled">
+        <span className='company-selector-item company-selector-item__disabled'>
           {list[0].title}
         </span>
       )}
 
       {hasItems && !hasOneItem && (
-        <Form.Group className="m-0">
+        <Form.Group className='m-0'>
           <Form.Control
-            className="header-company-selector"
+            className='header-company-selector'
             defaultValue={value}
-            as="select"
+            as='select'
             onChange={onChange}
           >
             {hasItems &&
               list.map((item) => (
                 <option
-                  className="company-selector-item"
+                  className='company-selector-item'
                   key={item.id}
                   value={item.id}
                 >

package/src/help/example/Example.tsx

@@ -93,9 +93,9 @@ export function ExampleContent({
         onMouseOver={onMouseOverHandler}
         onMouseLeave={onMouseLeaveHandler}
         ref={copyRef}
-        size="sm"
-        className="btn-clipboard"
-        variant="outline-info"
+        size='sm'
+        className='btn-clipboard'
+        variant='outline-info'
       >
         Copy
       </Button>
@@ -104,7 +104,7 @@ export function ExampleContent({
         target={copyRef.current}
         show={isCopyTooltipActive}
         key={copyTooltipId}
-        placement="top"
+        placement='top'
       >
         <Tooltip id={copyTooltipId}>Copy to clipboard</Tooltip>
       </Overlay>
@@ -113,7 +113,7 @@ export function ExampleContent({
         target={copyRef.current}
         show={isCopiedTooltipActive}
         key={copiedTooltipId}
-        placement="top"
+        placement='top'
       >
         <Tooltip id={copiedTooltipId}>Copied!</Tooltip>
       </Overlay>
@@ -123,12 +123,12 @@ export function ExampleContent({
   return (
     <Collapse in={isActive}>
       <div id={id}>
-        <div className="bd-clipboard">{copy}</div>
+        <div className='bd-clipboard'>{copy}</div>
 
-        <figure className="help-example-highlight mt-1 mb-2 p-5 rounded">
-          {title && <strong className="d-inline-flex pb-3">{title}</strong>}
+        <figure className='help-example-highlight mt-1 mb-2 p-5 rounded'>
+          {title && <strong className='d-inline-flex pb-3'>{title}</strong>}
 
-          <pre ref={preRef} className="m-0">
+          <pre ref={preRef} className='m-0'>
             {children}
           </pre>
         </figure>
@@ -140,10 +140,10 @@ export function ExampleContent({
 export function ExampleToggle({ id, isActive, onToggle }: ExampleToggleProps) {
   return (
     <Button
-      size="sm"
-      variant="outline-info"
+      size='sm'
+      variant='outline-info'
       onClick={(_) => onToggle()}
-      className="pull-right switch on"
+      className='pull-right switch on'
       aria-controls={id}
       aria-expanded={isActive}
     >

package/src/help/popover/HelpPopover.tsx

@@ -26,15 +26,15 @@ export function HelpPopover({
 
   const popover = (
     <Popover id={popoverId} className={clsx(bordered && 'border')}>
-      <Popover.Title as="h3">{title}</Popover.Title>
+      <Popover.Title as='h3'>{title}</Popover.Title>
       <Popover.Content>{children}</Popover.Content>
     </Popover>
   )
 
   return (
     <OverlayTrigger
-      trigger="focus"
-      placement="auto"
+      trigger='focus'
+      placement='auto'
       delay={{ show: 250, hide: 400 }}
       overlay={popover}
       defaultShow={false}
@@ -42,10 +42,10 @@ export function HelpPopover({
       {({ ref, ...triggerHandler }) => (
         <Button
           variant={variant}
-          size="sm"
+          size='sm'
           ref={ref}
           {...triggerHandler}
-          className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
+          className='btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center'
         >
           {icon ?? <FaQuestion size={10} />}
         </Button>