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

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/DropDownToggle.tsx

@@ -13,7 +13,7 @@ const DropDownToggle = forwardRef((props: Props, ref: any) => {
   }
 
   return (
-    <a href="/" ref={ref} onClick={onClickHandler}>
+    <a href='/' ref={ref} onClick={onClickHandler}>
       {props.children}
     </a>
   )

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>

package/src/modals/confirmation/ConfirmModal.tsx

@@ -88,17 +88,17 @@ export function ConfirmModal({
         onHide={handleClose}
         animation={false}
         centered
-        contentClassName="rounded"
-        className="confirm-modal"
+        contentClassName='rounded'
+        className='confirm-modal'
       >
-        <ModalHeader className="align-items-center border-0">
-          <ModalTitle as="h6">
+        <ModalHeader className='align-items-center border-0'>
+          <ModalTitle as='h6'>
             {title ?? t('pleaseConfirmThisAction')}
           </ModalTitle>
 
           <Button
-            variant="danger"
-            className="btn-sm rounded"
+            variant='danger'
+            className='btn-sm rounded'
             disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
@@ -106,16 +106,16 @@ export function ConfirmModal({
             <FaTimes size={16} />
           </Button>
         </ModalHeader>
-        <ModalBody className="confirmation-modal-body">
+        <ModalBody className='confirmation-modal-body'>
           {content ?? t('areUSureYouWantToPerformThisAction')}
         </ModalBody>
         {!hideButtons && (
-          <ModalFooter className="border-0">
+          <ModalFooter className='border-0'>
             {type === ConfirmModalType.remove ? (
               <>
                 <Button
-                  variant="outline"
-                  className="cancel-button"
+                  variant='outline'
+                  className='cancel-button'
                   onClick={handleClose}
                   disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
@@ -123,7 +123,7 @@ export function ConfirmModal({
                   {t('cancel')}
                 </Button>
                 <Button
-                  variant="danger"
+                  variant='danger'
                   disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
@@ -134,7 +134,7 @@ export function ConfirmModal({
             ) : (
               <>
                 <Button
-                  variant="danger"
+                  variant='danger'
                   disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
@@ -142,7 +142,7 @@ export function ConfirmModal({
                   {t('decline')}
                 </Button>
                 <Button
-                  variant="success"
+                  variant='success'
                   disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}

package/src/modals/dialog/Dialog.tsx

@@ -37,29 +37,29 @@ export const Dialog = ({
         show={isActive}
         onHide={onDecline}
         animation={false}
-        size="sm"
+        size='sm'
         centered
-        className="text-center justify-content-center rounded"
+        className='text-center justify-content-center rounded'
       >
-        <Modal.Header className="justify-content-center border-0 ">
-          {title && <Modal.Title as="h6">{title}</Modal.Title>}
+        <Modal.Header className='justify-content-center border-0 '>
+          {title && <Modal.Title as='h6'>{title}</Modal.Title>}
         </Modal.Header>
         {content && (
-          <Modal.Body className="justify-content-center ">{content}</Modal.Body>
+          <Modal.Body className='justify-content-center '>{content}</Modal.Body>
         )}
-        <Modal.Footer className="border-0 justify-content-center">
+        <Modal.Footer className='border-0 justify-content-center'>
           {customButtons || (
             <>
               <Button
-                variant="secondary"
-                className="modal-buttons"
+                variant='secondary'
+                className='modal-buttons'
                 onClick={declineHandler}
               >
                 {t('cancel')}
               </Button>
               <Button
-                variant="primary"
-                className="modal-buttons"
+                variant='primary'
+                className='modal-buttons'
                 onClick={approveHandler}
               >
                 {t('Design:confirm')}