@licklist/design 0.68.5-dev.0 → 0.68.6-dev.0

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>

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,27 +1,29 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
+import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 
 export const LAYOUT_GRID = 'grid'
 export const LAYOUT_LIST = 'list'
 
-type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST
-
 export type ActivityCardProps = {
   title: ReactNode
   duration: ReactNode
   price: ReactNode
+  description?: ReactNode
   onSelect: () => void
   isSelected: boolean
-  layout?: Layout
+  layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
   availableTimes?: string | null
+  image?: Image | null
 }
 
 export const ActivityCard = ({
   title,
   duration,
   price,
+  description,
   availableTimes,
-  // image,
+  image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -29,40 +31,49 @@ export const ActivityCard = ({
   if (layout === LAYOUT_GRID) {
     return (
       <button
-        type="button"
-        className={clsx('activity-card', isSelected && 'active')}
+        type='button'
+        className={clsx('activity-card', { active: isSelected })}
         onClick={onSelect}
       >
-        <div className={clsx('d-flex', 'flex-column')}>
-          <div className="activity-card-title">{title}</div>
-          {duration && <div>{duration}</div>}
+        {image && (
+          <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+        )}
 
+        <div>
+          <div className='activity-card-title'>{title}</div>
+          {duration && <div>{duration}</div>}
           {price && <div>{price}</div>}
+          {description && (
+            <div className='mt-2 activity-card-description'>{description}</div>
+          )}
         </div>
       </button>
     )
   }
 
   return (
-    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
-      <div
-        className={clsx('list-activity-card', {
-          active: isSelected,
-        })}
-      >
-        <div className="description">
-          <div className="title mb-2">{title}</div>
-          {availableTimes && <div>{availableTimes}</div>}
-          {duration && (
-            <div>
-              <p>{duration}</p>
-            </div>
-          )}
+    <button
+      type='button'
+      onClick={onSelect}
+      className={clsx('activity-card list-activity-card', {
+        active: isSelected,
+      })}
+    >
+      {image && (
+        <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+      )}
 
-          {price && <div>{price}</div>}
-        </div>
+      <div className='activity-card-info'>
+        <div className='activity-card-title mb-2'>{title}</div>
+        {availableTimes && <div>{availableTimes}</div>}
+        {duration && <div>{duration}</div>}
+        {price && <div>{price}</div>}
+        {description && (
+          <div className='mt-2 activity-card-description'>{description}</div>
+        )}
       </div>
-      <hr className="list-activity-card-hr" />
-    </div>
+
+      <hr className='list-activity-card-hr' />
+    </button>
   )
 }

package/src/iframe/back-button/BackButton.tsx

@@ -3,12 +3,12 @@ export interface IBackButtonProps {
 }
 
 export const BackButton = ({ onClick }: IBackButtonProps) => (
-  <div className="button-wrapper back-button">
+  <div className='button-wrapper back-button'>
     <div
-      className="back-button"
+      className='back-button'
       onClick={onClick}
       onKeyPress={onClick}
-      role="button"
+      role='button'
       tabIndex={0}
     >
       &lt;

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -61,7 +61,7 @@ export const Default: Story<any> = () => {
             isLoading={isLoading}
           />
           <div>
-            <button type="submit">Submit</button>
+            <button type='submit'>Submit</button>
           </div>
         </Form.Row>
       </form>

package/src/iframe/custom-fields/components/CustomDateField.tsx

@@ -63,14 +63,14 @@ export const CustomDateField = ({
   }, [day, month, year])
 
   return (
-    <Form.Group as={Col} className="col-12">
+    <Form.Group as={Col} className='col-12'>
       <Row>
         <div>
-          <Col sm={12} md={6} className="p-0">
-            <Form.Group as={Col} className="mb-0">
+          <Col sm={12} md={6} className='p-0'>
+            <Form.Group as={Col} className='mb-0'>
               <Form.Label>{t('Design:dayOfBirthShort')}</Form.Label>
               <Form.Control
-                type="hidden"
+                type='hidden'
                 {...register(fieldKeyValueAttribute, {
                   required: {
                     value: field.isRequired,
@@ -118,7 +118,7 @@ export const CustomDateField = ({
 
             <Col>
               <Row>
-                <Col className="d-flex">
+                <Col className='d-flex'>
                   <ManualDatePicker
                     {...manualDatePickerProps}
                     isDisabled={isLoading}
@@ -129,11 +129,11 @@ export const CustomDateField = ({
             </Col>
           </Col>
           <Col>
-            <div className="manual-form-error m-0">{fieldErrors()}</div>
+            <div className='manual-form-error m-0'>{fieldErrors()}</div>
           </Col>
         </div>
         <Form.Control
-          type="hidden"
+          type='hidden'
           {...register(`${fieldKey}.id` as const, {
             required: true,
           })}

package/src/iframe/event/event-booking-form/EventBookingForm.tsx

@@ -12,18 +12,18 @@ export function EventBookingForm({ occurrences }: EventBookingFormProps) {
   const selectDateInput = useRef<HTMLInputDateElement | null>(null)
 
   return (
-    <Form className="event-booking-form">
+    <Form className='event-booking-form'>
       <h5>{t('whenYouWouldLikeToBook')}</h5>
       <Form.Group>
         <Form.Label>{t('selectDate')}</Form.Label>
         <Form.Control
-          type="date"
+          type='date'
           ref={selectDateInput}
           onClick={() => selectDateInput?.current?.showPicker()}
         />
       </Form.Group>
       <Form.Group>
-        <Form.Control aria-label={t('selectTime')} as="select">
+        <Form.Control aria-label={t('selectTime')} as='select'>
           {occurrences.map((hour) => (
             <option value={hour} key={hour}>
               {hour}
@@ -33,23 +33,23 @@ export function EventBookingForm({ occurrences }: EventBookingFormProps) {
       </Form.Group>
 
       <h5>{t('whatWouldYouLikeToBook')}</h5>
-      <div className="d-flex flex-column">
-        <label className="event-booking-form__booking-option-container">
+      <div className='d-flex flex-column'>
+        <label className='event-booking-form__booking-option-container'>
           <input
-            type="radio"
+            type='radio'
             defaultChecked
-            className="event-booking-form__radio"
-            name="booking-option"
+            className='event-booking-form__radio'
+            name='booking-option'
           />
-          <div className="booking-option">{t('tickets')}</div>
+          <div className='booking-option'>{t('tickets')}</div>
         </label>
-        <label className="event-booking-form__booking-option-container">
+        <label className='event-booking-form__booking-option-container'>
           <input
-            type="radio"
-            className="event-booking-form__radio"
-            name="booking-option"
+            type='radio'
+            className='event-booking-form__radio'
+            name='booking-option'
           />
-          <div className="booking-option">{t('tablesAndBooths')}</div>
+          <div className='booking-option'>{t('tablesAndBooths')}</div>
         </label>
       </div>
     </Form>

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