@licklist/design 0.69.1 → 0.69.2

package/src/iframe/order-process/components/Timer/Timer.tsx

@@ -10,16 +10,16 @@ export const Timer = ({ timer }: TimerProps) => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="payment-timer-counter">
-      <div className="timer-wrapper ">
-        <div className="timer">
-          <div className="d-flex align-items-center">
+    <div className='payment-timer-counter'>
+      <div className='timer-wrapper'>
+        <div className='timer'>
+          <div className='d-flex align-items-center'>
             <FaStopwatch />
           </div>
-          <div className="time">{fancyTimeFormat(timer)}</div>
+          <div className='time'>{fancyTimeFormat(timer)}</div>
         </div>
       </div>
-      <div className="timer-explanation">{t('toCompleteThisBooking')}</div>
+      <div className='timer-explanation'>{t('toCompleteThisBooking')}</div>
     </div>
   )
 }

package/src/iframe/page/Page.stories.tsx

@@ -213,12 +213,12 @@ export function Default() {
       <PageBody
         leftBlock={
           <PageBody.LeftBlock
-            title="Test Iframe Page"
+            title='Test Iframe Page'
             component={
               <>
                 <CalendarSelect
                   options={[{ label: 'Floor 1', value: '1' }]}
-                  value="1"
+                  value='1'
                   onChange={(chagedId: string) => console.log({ chagedId })}
                 />
               </>
@@ -226,7 +226,7 @@ export function Default() {
           >
             <div>
               <div
-                className="events"
+                className='events'
                 style={{
                   display: 'grid',
                   gridTemplateColumns: 'repeat(auto-fill, 18.5rem)',
@@ -262,7 +262,7 @@ export function Default() {
               bottomBlock={
                 showBottomBlock && (
                   <div>
-                    <Button size="sm">Book Now</Button>
+                    <Button size='sm'>Book Now</Button>
                   </div>
                 )
               }

package/src/iframe/page/Page.tsx

@@ -32,7 +32,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(
       {...props}
       ref={ref}
     >
-      {headerBlock && <div className="header-block">{headerBlock}</div>}
+      {headerBlock && <div className='header-block'>{headerBlock}</div>}
       {children}
       <PoweredBy url={poweredByUrl} />
     </div>

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -26,11 +26,11 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx('left-block', className)} {...props}>
-      <div className="navigation">
+      <div className='navigation'>
         {pageTitle && (
           <>
             {typeof pageTitle === 'string' ? (
-              <div className="title" id="navigation-title">
+              <div className='title' id='navigation-title'>
                 {pageTitle}
               </div>
             ) : (

package/src/iframe/page/components/PageBody/components/RightBlock/RightBlock.tsx

@@ -92,7 +92,7 @@ export const RightBlock = ({
       id={PAGE_RIGHT_BLOCK_ID}
     >
       <div
-        className="children-wrapper"
+        className='children-wrapper'
         ref={childBlockRef}
         id={PAGE_RIGHT_BLOCK_CHILDREN_ID}
       >
@@ -102,7 +102,7 @@ export const RightBlock = ({
         <>
           <hr />
           <div
-            className="bottom-wrapper"
+            className='bottom-wrapper'
             ref={bottomBlockRef}
             id={PAGE_RIGHT_BLOCK_BOTTOM_ID}
           >

package/src/iframe/page/components/PageHeader/PageHeader.tsx

@@ -34,21 +34,21 @@ export const PageHeader = ({
   }, [onBackButtonClick])
 
   return (
-    <div className="page-header" {...props}>
-      <div className="header-container">
+    <div className='page-header' {...props}>
+      <div className='header-container'>
         {showBackButton && <BackButton onClick={onReturnBack} />}
         {children && (
-          <div className="children-wrapper" style={style}>
+          <div className='children-wrapper' style={style}>
             {children}
           </div>
         )}
         {showCloseButton && (
-          <div className="button-wrapper close-button">
+          <div className='button-wrapper close-button'>
             <div
-              className="close-button"
+              className='close-button'
               onClick={onButtonClick}
               onKeyPress={onButtonClick}
-              role="button"
+              role='button'
               tabIndex={0}
             >
               &#x2715;

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -12,11 +12,11 @@ export function Default(args) {
   const isPaymentProcessed = boolean('isPaymentProcessed', true)
 
   return (
-    <div style={{ width: '800px' }} className="m-5">
+    <div style={{ width: '800px' }} className='m-5'>
       <OrderItemsTable
         {...args}
         isPaymentProcessed={isPaymentProcessed}
-        externalDiscount="877.21"
+        externalDiscount='877.21'
       />
     </div>
   )

package/src/iframe/payment/order-items-table/OrderItemsTable.tsx

@@ -20,7 +20,7 @@ export const OrderItemsTable = ({
   }
 
   return (
-    <div className="snippet__table">
+    <div className='snippet__table'>
       <StaticTable
         columns={[
           { key: 'name', label: '' },
@@ -28,7 +28,7 @@ export const OrderItemsTable = ({
           { key: 'price', label: '' },
         ]}
         data={data}
-        className="order-items-table"
+        className='order-items-table'
       />
     </div>
   )

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -36,7 +36,7 @@ export const useTableData = ({
     })
 
   const wrapLabelContent = (string: string) => (
-    <div className="label">{string}</div>
+    <div className='label'>{string}</div>
   )
 
   const renderCategoryItem = (products: Product[]) => ({
@@ -64,8 +64,8 @@ export const useTableData = ({
       key: product.id,
       name: product.name,
       quantity: (
-        <div className="quantity">
-          <div className="multiplier">x</div>
+        <div className='quantity'>
+          <div className='multiplier'>x</div>
           {quantity}
         </div>
       ),

package/src/iframe/payment/payment-form/PaymentForm.stories.tsx

@@ -10,7 +10,7 @@ export default {
 const orderColumns = [
   { key: 'what', label: 'What' },
   { key: 'amount', label: 'Amount' },
-  { key: 'price', label: <p className="iframe-item-price">Item price</p> },
+  { key: 'price', label: <p className='iframe-item-price'>Item price</p> },
 ]
 
 export function Default() {
@@ -21,7 +21,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -31,7 +31,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -41,7 +41,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -49,7 +49,7 @@ export function Default() {
     },
   ]
   return (
-    <div style={{ width: '800px' }} className="m-5">
+    <div style={{ width: '800px' }} className='m-5'>
       <PaymentForm orderColumns={orderColumns} orderData={data} />
     </div>
   )

package/src/iframe/payment/payment-form/PaymentForm.tsx

@@ -14,44 +14,44 @@ export function PaymentForm({ orderColumns, orderData }: PaymentFormProps) {
 
   return (
     <>
-      <h2 className="mb-3">{t('reviewAndPay')}</h2>
+      <h2 className='mb-3'>{t('reviewAndPay')}</h2>
       <StaticTable
         columns={orderColumns}
         data={orderData}
-        className="payment-form-table"
+        className='payment-form-table'
       />
-      <div className="order-summary">
+      <div className='order-summary'>
         {t('amountTotal')}
         <span>{formatNumber(800, { style: 'currency', currency: 'GBP' })}</span>
       </div>
-      <div className="order-payment">
+      <div className='order-payment'>
         <div>
           <p>{t('halfPaymentRequired')}</p>
-          <button type="button">{t('iHavePromocode')}</button>
+          <button type='button'>{t('iHavePromocode')}</button>
         </div>
 
         <span>{formatNumber(440, { style: 'currency', currency: 'GBP' })}</span>
       </div>
 
-      <Form className="mt-5">
+      <Form className='mt-5'>
         <Form.Group>
           <Form.Label>{t('yourName')}</Form.Label>
-          <Form.Control type="text" isValid value="Tanel Kaarel Sepp" />
+          <Form.Control type='text' isValid value='Tanel Kaarel Sepp' />
         </Form.Group>
         <Form.Group>
           <Form.Label>{t('yourEmail')}</Form.Label>
           <Form.Control
-            type="email"
+            type='email'
             isInvalid
-            value="tanelatweekendvisuals.com"
+            value='tanelatweekendvisuals.com'
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {t('checkEmail')}
           </Form.Control.Feedback>
         </Form.Group>
-        <Form.Group className="d-flex justify-content-between mt-5">
+        <Form.Group className='d-flex justify-content-between mt-5'>
           <Form.Check
-            className="subscribe-checkbox"
+            className='subscribe-checkbox'
             label="I'd prefer not to receive promotions and exclusive information from Licklist partner venues"
           />
           <Button>{t('book')}</Button>

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -88,10 +88,10 @@ export const PaymentPage = ({
         <PageBody
           leftBlock={
             <PageBody.LeftBlock>
-              <div className="d-flex h-100 w-100 justify-content-center align-items-center flex-column">
+              <div className='d-flex h-100 w-100 justify-content-center align-items-center flex-column'>
                 <h6>{t('linkNotActiveOrExpired')}</h6>
                 <Col xs={12} md={3}>
-                  <Button className="mt-5 w-20" onClick={onCloseWindow}>
+                  <Button className='mt-5 w-20' onClick={onCloseWindow}>
                     {t('backToSite')}
                   </Button>
                 </Col>
@@ -116,7 +116,7 @@ export const PaymentPage = ({
     orderTotalAmountByFormValues > data?.amount
 
   return (
-    <Page className="payment_link">
+    <Page className='payment_link'>
       {/* TODO wait for Brad's design for close and go back buttons */}
       {/* <PageHeader
         className="no-page-header"
@@ -129,7 +129,7 @@ export const PaymentPage = ({
         id={PAGE_BODY_WITH_SCROLL}
         leftBlock={
           <PageBody.LeftBlock>
-            <div className="d-flex align-items-center mb-5">
+            <div className='d-flex align-items-center mb-5'>
               <PaymentTimer />
             </div>
             <RyftPaymentForm {...ryftPaymentFormProps} />
@@ -151,7 +151,7 @@ export const PaymentPage = ({
                 />
               }
               footer={
-                <div className="d-flex flex-column justify-content-between">
+                <div className='d-flex flex-column justify-content-between'>
                   {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock

package/src/iframe/payment/payment-status-header/PaymentStatusHeader.stories.tsx

@@ -11,13 +11,13 @@ export function Default() {
   const success = boolean('success', true)
   return (
     <div
-      className="snippet d-flex justify-content-center align-items-center h-100"
+      className='snippet d-flex justify-content-center align-items-center h-100'
       style={{ width: '30rem' }}
     >
       <PaymentStatusHeader
         showCloseButton
         onCloseButtonClick={() => {}}
-        title="test"
+        title='test'
         success={success}
       />
     </div>

package/src/iframe/payment/payment-status-header/PaymentStatusHeader.tsx

@@ -27,11 +27,11 @@ export const PaymentStatusHeader = ({
       onCloseButtonClick={onCloseButtonClick}
       {...props}
     >
-      <div className="payment-status-header">
+      <div className='payment-status-header'>
         <div className={clsx('icon', { success })}>
           <Logo logo={success ? <SuccessPayment /> : <FailedPayment />} />
         </div>
-        <p className="m-0 ml-3">{statusTitle}</p>
+        <p className='m-0 ml-3'>{statusTitle}</p>
       </div>
     </PageHeader>
   )

package/src/iframe/payment/payment-status-page/PaymentStatusComponent.stories.tsx

@@ -8,13 +8,13 @@ export default {
 
 export function Default() {
   return (
-    <div className="snippet d-flex justify-content-center align-items-center h-100">
+    <div className='snippet d-flex justify-content-center align-items-center h-100'>
       <PaymentStatusPage
         isLoading={false}
         onCloseWindow={() => {}}
         onTryAgain={() => {}}
         status={ORDER_STATUS_SUCCESS}
-        email="someemail@gmail.com"
+        email='someemail@gmail.com'
       />
     </div>
   )

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -74,7 +74,7 @@ export const PaymentStatusPage = ({
 
   return (
     <Page
-      className="payment-status-page"
+      className='payment-status-page'
       isAppUsingInIframe={isAppUsingInIframe}
       headerBlock={
         <PaymentStatusHeader
@@ -105,7 +105,7 @@ export const PaymentStatusPage = ({
           <PageBody.RightBlock
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
-                <div className="d-flex flex-column justify-content-between">
+                <div className='d-flex flex-column justify-content-between'>
                   {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock

package/src/iframe/payment/status-body/StatusBody.tsx

@@ -11,9 +11,9 @@ export const StatusBody = ({ onTryAgain, onBack, title }: StatusBodyProps) => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="status-body-wrapper mt-4">
-      {title && <p className="status-body-wrapper__text">{title}</p>}
-      <div className="d-flex buttons-wrapper">
+    <div className='status-body-wrapper mt-4'>
+      {title && <p className='status-body-wrapper__text'>{title}</p>}
+      <div className='d-flex buttons-wrapper'>
         {onTryAgain && <Button onClick={onTryAgain}>{t('tryAgain')}</Button>}
         <Button onClick={onBack}>{t('backToSite')}</Button>
       </div>

package/src/iframe/powered-by/PoweredBy.tsx

@@ -11,11 +11,11 @@ type PoweredByProps = {
 export const PoweredBy = ({ url = URL }: PoweredByProps) => {
   const { t } = useTranslation('Design')
   return (
-    <div className="bkdt-powered-by">
-      <div className="powered booked-it">
+    <div className='bkdt-powered-by'>
+      <div className='powered booked-it'>
         &nbsp;{t('poweredBy')}&nbsp;
-        <a href={url} target="_blank" rel="noreferrer">
-          <Logo logo={<LogoSvg color="white" />} />
+        <a href={url} target='_blank' rel='noreferrer'>
+          <Logo logo={<LogoSvg color='white' />} />
         </a>
       </div>
     </div>

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -169,15 +169,15 @@ export const RyftPaymentForm = ({
 
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
-      <div className="mt-5 pt-5">
+      <div className='mt-5 pt-5'>
         <BlockLoader />
       </div>
     )
 
   if (accountId.isError) {
     return (
-      <div className="mt-5 ryft-init-failure">
-        <Alert key="danger" variant="danger">
+      <div className='mt-5 ryft-init-failure'>
+        <Alert key='danger' variant='danger'>
           <h5>{t('Ryft:errorMessage')}</h5>
           {t('Ryft:noPaymentProviderFound')}
         </Alert>
@@ -187,13 +187,13 @@ export const RyftPaymentForm = ({
 
   if (ryftInitFailure) {
     return (
-      <div className="mt-5 ryft-init-failure">
-        <Alert key="danger" variant="danger">
+      <div className='mt-5 ryft-init-failure'>
+        <Alert key='danger' variant='danger'>
           <h5>{t('Ryft:errorMessage')}</h5>
           {t('Ryft:initFailureMessage')}
-          <div className="flex flex-column align-items-center mt-4">
+          <div className='flex flex-column align-items-center mt-4'>
             <Button
-              variant="primary"
+              variant='primary'
               onClick={() => {
                 history.go(0)
               }}
@@ -210,19 +210,19 @@ export const RyftPaymentForm = ({
     <>
       <form
         ref={formRef}
-        id="ryft-pay-form"
+        id='ryft-pay-form'
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
-        className="ryft-payment-form"
+        className='ryft-payment-form'
       >
-        <div className="submit-button-wrapper mt-4 p-1">
-          <Button type="submit" disabled={isBtnDisabled || !isValid}>
+        <div className='submit-button-wrapper mt-4 p-1'>
+          <Button type='submit' disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t('Design:buyNow')}
           </Button>
         </div>
         {ryftError && (
-          <div id="ryft-payment-error">{t(`${ryftErrorMap[ryftError]}`)}</div>
+          <div id='ryft-payment-error'>{t(`${ryftErrorMap[ryftError]}`)}</div>
         )}
       </form>
     </>

package/src/image-radio-input/ImageRadioInput.tsx

@@ -28,15 +28,15 @@ export const ImageRadioInput = <FormModel,>({
   const { register } = useFormContext<FormModel>()
 
   return (
-    <Form.Check className="image-radio-input">
+    <Form.Check className='image-radio-input'>
       <Form.Check.Label
         className={clsx('image-radio-input-wrapper', disabled && 'disabled')}
       >
-        <div className="image-radio-input-image-wrapper">{img}</div>
+        <div className='image-radio-input-image-wrapper'>{img}</div>
 
-        <div className="image-radio-input-label">
+        <div className='image-radio-input-label'>
           <Form.Check.Input
-            type="radio"
+            type='radio'
             value={value}
             disabled={disabled}
             {...register(name, rules)}
@@ -45,7 +45,7 @@ export const ImageRadioInput = <FormModel,>({
           <span>{label}</span>
         </div>
       </Form.Check.Label>
-      <Form.Control.Feedback type="valid" className="d-block text-center">
+      <Form.Control.Feedback type='valid' className='d-block text-center'>
         {disabledMessage}
       </Form.Control.Feedback>
     </Form.Check>

package/src/layout/BackgroundVideoContainer.tsx

@@ -14,14 +14,14 @@ function BackgroundVideoContainer(props: Props) {
   return (
     <>
       <div
-        className="background-video-container"
+        className='background-video-container'
         style={{
           backgroundImage: poster ? `url(${poster})` : 'inherit',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',
         }}
       >
-        <video autoPlay loop preload="auto" muted>
+        <video autoPlay loop preload='auto' muted>
           <source src={video} type={videoType || 'video/mp4'} />
         </video>
       </div>

package/src/layout/Container.tsx

@@ -7,7 +7,7 @@ interface Props {
 function Container(props: Props) {
   const { children } = props
 
-  return <div className="container">{children}</div>
+  return <div className='container'>{children}</div>
 }
 
 export default Container

package/src/layout/Layout.stories.tsx

@@ -23,7 +23,7 @@ _Container.story = {
 }
 
 export const BackgroundVideoContainerOnlyVideo = () => (
-  <BackgroundVideoContainer video="https://files.licklist.co.uk/v408/video/intro.mp4">
+  <BackgroundVideoContainer video='https://files.licklist.co.uk/v408/video/intro.mp4'>
     <div>I&apos;m in a container</div>
   </BackgroundVideoContainer>
 )
@@ -37,7 +37,7 @@ BackgroundVideoContainerOnlyVideo.story = {
 }
 
 export const BackgroundVideoContainerOnlyPoster = () => (
-  <BackgroundVideoContainer poster="https://licklist.co.uk/img/video.poster.jpg">
+  <BackgroundVideoContainer poster='https://licklist.co.uk/img/video.poster.jpg'>
     <div>I&apos;m in a container</div>
   </BackgroundVideoContainer>
 )
@@ -57,13 +57,13 @@ export const _DropDown = () => (
     }}
   >
     <Dropdown>
-      <Dropdown.Toggle as={DropDownToggle} id="dropdown-custom-components">
+      <Dropdown.Toggle as={DropDownToggle} id='dropdown-custom-components'>
         Dropdown Button
       </Dropdown.Toggle>
 
       <Dropdown.Menu as={DropDown}>
-        <Dropdown.Item eventKey="1">test 1</Dropdown.Item>
-        <Dropdown.Item eventKey="2">test 2</Dropdown.Item>
+        <Dropdown.Item eventKey='1'>test 1</Dropdown.Item>
+        <Dropdown.Item eventKey='2'>test 2</Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>
   </div>

package/src/logo/Logo.tsx

@@ -13,10 +13,10 @@ function Logo(props: Props) {
   return (
     <div className={['brand-logo-container', className].join(' ')}>
       <Row>
-        <Col className="brand-logo d-none d-sm-none d-md-block">
+        <Col className='brand-logo d-none d-sm-none d-md-block'>
           <span style={{ lineHeight: 1 }}>{logo}</span>
         </Col>
-        <Col className="brand-logo d-block d-md-none d-lg-none">
+        <Col className='brand-logo d-block d-md-none d-lg-none'>
           <span style={{ lineHeight: 1 }}>{logoSm || logo}</span>
         </Col>
       </Row>