@licklist/design 0.69.1 → 0.69.2

package/src/modals/confirmation/ConfirmModal.tsx

@@ -77,40 +77,40 @@ 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'
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
             <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}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('cancel')}
                 </Button>
                 <Button
-                  variant="danger"
+                  variant='danger'
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -120,14 +120,14 @@ export function ConfirmModal({
             ) : (
               <>
                 <Button
-                  variant="danger"
+                  variant='danger'
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('decline')}
                 </Button>
                 <Button
-                  variant="success"
+                  variant='success'
                   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')}

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -51,28 +51,28 @@ export const FullscreenModal = ({
         show={isOpen}
         onHide={handleClose}
         animation={false}
-        className="fullscreen-modal"
-        contentClassName="fullscreen-modal-content"
+        className='fullscreen-modal'
+        contentClassName='fullscreen-modal-content'
       >
         {showHeader && (
-          <ModalHeader className="align-items-center border-0">
-            {title && <ModalTitle as="h6">{title}</ModalTitle>}
+          <ModalHeader className='align-items-center border-0'>
+            {title && <ModalTitle as='h6'>{title}</ModalTitle>}
 
             <Button
-              variant="danger"
-              className="btn-sm rounded"
+              variant='danger'
+              className='btn-sm rounded'
               onClick={handleClose}
             >
               <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}
-        <ModalBody className="fullscreen-modal-body">
+        <ModalBody className='fullscreen-modal-body'>
           {!showHeader && (
             <Button
               onClick={handleClose}
-              variant="link"
-              className="body-close-button"
+              variant='link'
+              className='body-close-button'
             >
               {t('close')}
             </Button>
@@ -80,7 +80,7 @@ export const FullscreenModal = ({
           {content}
         </ModalBody>
         {showFooter && (
-          <ModalFooter className="border-0">{footerContent}</ModalFooter>
+          <ModalFooter className='border-0'>{footerContent}</ModalFooter>
         )}
       </Modal>
     </>

package/src/modals/fullscreen/FulscreenModal.stories.tsx

@@ -40,8 +40,8 @@ export const DefaultWithBodyContent: Story<FullscreenModalProps> = (args) => {
       content={
         <>
           <EventVenueMap
-            url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
-            name="Underground zone"
+            url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
+            name='Underground zone'
           />
         </>
       }

package/src/notification/components/NotificationPlaceholders.tsx

@@ -17,17 +17,17 @@ export const NotificationPlaceholders = ({
     <>
       <Row>
         <Col xs={12}>
-          <span className="mt-5">{t('Design:placeholdersDesc')}</span>
+          <span className='mt-5'>{t('Design:placeholdersDesc')}</span>
         </Col>
       </Row>
-      <Card className="mb-3 mt-3">
+      <Card className='mb-3 mt-3'>
         <Card.Body>
           <Row>
             <Col xs={12}>
               {placeholders.map((placeholder) => (
-                <div className="placeholder-row mb-3" key={placeholder.value}>
-                  <span className="placeholder-value">{`${placeholder.value} - `}</span>
-                  <span className="placeholder-desc">
+                <div className='placeholder-row mb-3' key={placeholder.value}>
+                  <span className='placeholder-value'>{`${placeholder.value} - `}</span>
+                  <span className='placeholder-desc'>
                     {placeholder.description}
                   </span>
                 </div>

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -33,8 +33,8 @@ export function EmailTemplateCard({
   const texts = useTranslatedParameters({ isDefault, isActive })
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal
@@ -46,8 +46,8 @@ export function EmailTemplateCard({
           >
             {(confirm) => (
               <button
-                type="button"
-                className="snippet-template-card-button"
+                type='button'
+                className='snippet-template-card-button'
                 onClick={(e) => {
                   e.stopPropagation()
                   confirm(onRemove)
@@ -59,18 +59,18 @@ export function EmailTemplateCard({
           </ConfirmModal>
         )}
         <button
-          type="button"
-          className="snippet-template-card-button"
+          type='button'
+          className='snippet-template-card-button'
           onClick={onDuplicate}
         >
           <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? '3' : '4'}`}>
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <div className="d-flex flex-column">
-          <span className="snippet-template-card-subject">{subject}</span>
-          <p className="mb-0">
+        {!!texts.length && <p className='mb-1'>{texts}</p>}
+        <div className='d-flex flex-column'>
+          <span className='snippet-template-card-subject'>{subject}</span>
+          <p className='mb-0'>
             {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
           </p>
         </div>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -200,29 +200,29 @@ export const EmailTemplateControl = forwardRef(
     return (
       <>
         <Row>
-          <Form.Group as={Col} controlId="type" sm={12}>
+          <Form.Group as={Col} controlId='type' sm={12}>
             <Form.Label>{t('type')}</Form.Label>
             <Form.Control
-              as="select"
+              as='select'
               {...register('type', {
                 required: t('Validation:fieldRequired', {
                   attribute: t('type'),
                 }) as string,
               })}
-              name="type"
+              name='type'
               required
               isInvalid={Boolean(errors.type)}
               placeholder={t('Design:type')}
               disabled={!!id}
             >
-              <option value="">{t('Design:choose')}</option>
+              <option value=''>{t('Design:choose')}</option>
               {notificationTypes.map((key) => (
                 <option key={key} value={key}>
                   {t(`Design:${key}`)}
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.type?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -230,7 +230,7 @@ export const EmailTemplateControl = forwardRef(
         <Row>
           <Form.Group
             as={Col}
-            controlId="formGroupName"
+            controlId='formGroupName'
             xs
             sm={12}
             md={8}
@@ -245,12 +245,12 @@ export const EmailTemplateControl = forwardRef(
                   attribute: t('name'),
                 }) as string,
               })}
-              name="name"
+              name='name'
               required
               isInvalid={Boolean(errors.name)}
               placeholder={t('Design:templateName')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -263,7 +263,7 @@ export const EmailTemplateControl = forwardRef(
             md={8}
             lg={10}
             xl={12}
-            controlId="formGroupSubject"
+            controlId='formGroupSubject'
           >
             <Form.Label>{t('subject')}</Form.Label>
             <Form.Control
@@ -273,12 +273,12 @@ export const EmailTemplateControl = forwardRef(
                   attribute: t('subject'),
                 }) as string,
               })}
-              name="subject"
+              name='subject'
               required
               isInvalid={Boolean(errors.subject)}
               placeholder={t('Design:subject')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.subject?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -288,25 +288,25 @@ export const EmailTemplateControl = forwardRef(
           <Form.Group as={Col}>
             <Form.Check
               {...register('isActive')}
-              name="isActive"
+              name='isActive'
               label={t('Design:active')}
-              id="formGroupIsActive"
+              id='formGroupIsActive'
               custom
             />
             <Form.Check
               {...register('isDefault')}
-              name="isDefault"
+              name='isDefault'
               label={t('Design:defaultTemplateForTheType')}
-              id="formGroupIsDefault"
+              id='formGroupIsDefault'
               custom
             />
           </Form.Group>
         </Row>
-        <Row className="mb-4">
+        <Row className='mb-4'>
           <Form.Group as={Col}>
             <Form.Label>{t('Design:emailBody')}</Form.Label>
 
-            <div className="alert alert-warning" role="alert">
+            <div className='alert alert-warning' role='alert'>
               Due to the mail services limitations on the length of the email
               body that can be sent or received - maximum length is set to
               65,535 characters.
@@ -320,8 +320,8 @@ export const EmailTemplateControl = forwardRef(
               />
 
               <input
-                type="hidden"
-                name="body"
+                type='hidden'
+                name='body'
                 {...register('body', {
                   maxLength: {
                     value: 65535,
@@ -334,14 +334,14 @@ export const EmailTemplateControl = forwardRef(
               />
             </div>
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.body?.message}
             </Form.Control.Feedback>
           </Form.Group>
         </Row>
         <Row>
           <FileUpload
-            className="ml-4 mr-4"
+            className='ml-4 mr-4'
             allowedExtensions={['jpg', 'jpeg', 'png', 'txt', 'pdf', 'doc']}
             enablePreview
             allowMultiple
@@ -364,7 +364,7 @@ export const EmailTemplateControl = forwardRef(
                   return (
                     <Form.Check
                       {...register(`templateOptionValues.${option?.id}.value`)}
-                      type="checkbox"
+                      type='checkbox'
                       label={t(`Design:${option.name}`)}
                       id={option.name + option.id}
                       defaultChecked={option.selectedValue === 'true'}
@@ -382,7 +382,7 @@ export const EmailTemplateControl = forwardRef(
                     <>
                       <Form.Check
                         checked={isIncludePDF}
-                        name="IsIncludePDF"
+                        name='IsIncludePDF'
                         onChange={() => {
                           setIsIncludePDF(!isIncludePDF)
                           setValue(
@@ -391,22 +391,22 @@ export const EmailTemplateControl = forwardRef(
                           )
                         }}
                         label={t('Design:includePDF')}
-                        id="formGroupIsIncludePdf"
+                        id='formGroupIsIncludePdf'
                         custom
                       />
                       {isIncludePDF && (
                         <>
-                          <Form.Label className="mt-4">
+                          <Form.Label className='mt-4'>
                             {t('Design:includeFile')}
                           </Form.Label>
                           <Form.Control
-                            as="select"
+                            as='select'
                             {...register(
                               `templateOptionValues.${option.id}.value`,
                             )}
                             defaultValue={option.selectedValue || ''}
                           >
-                            <option value="">{t('Design:choose')}</option>
+                            <option value=''>{t('Design:choose')}</option>
 
                             {fileKeys.map((fileType, index) => (
                               <option
@@ -426,14 +426,14 @@ export const EmailTemplateControl = forwardRef(
                 if (option.type === OPTION_TYPE.days_reminder) {
                   return (
                     <>
-                      <Form.Label className="mt-4">
+                      <Form.Label className='mt-4'>
                         {t(`Design:${option.name}`)}
                       </Form.Label>
                       <Form.Control
                         {...register(
                           `templateOptionValues.${option?.id}.value`,
                         )}
-                        type="number"
+                        type='number'
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -103,18 +103,18 @@ export const EmailTemplateForm = ({
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
         {hasPermission && !onSubmitSaveAndSend && (
-          <Button className="mt-5 d-no dne d-md-block" type="submit">
+          <Button className='mt-5 d-no dne d-md-block' type='submit'>
             {t('save')}
           </Button>
         )}
         {/* create email template */}
         {hasPermission && onSubmitSaveAndSend && (
           <Col as={Row}>
-            <Button className="mt-5 d-no dne d-md-block" type="submit">
+            <Button className='mt-5 d-no dne d-md-block' type='submit'>
               {t('save')}
             </Button>
             <Button
-              className="mt-5 ml-5 d-no dne d-md-block"
+              className='mt-5 ml-5 d-no dne d-md-block'
               onClick={form.handleSubmit(onSubmitSaveAndSend)}
             >
               {t('saveAndSendEmail')}

package/src/notification/send-email-template/SendEmailTemplateForm.tsx

@@ -44,8 +44,8 @@ export function SendEmailTemplateForm({
         <Col>
           <Form.Label>{t('User:emailAddress')}</Form.Label>
           <Form.Control
-            type="email"
-            name="email"
+            type='email'
+            name='email'
             isValid={isFieldValid('email')}
             {...register('email', {
               required: t('Validation:fieldRequired', {
@@ -55,10 +55,10 @@ export function SendEmailTemplateForm({
               maxLength: 100,
             })}
             disabled={isLoading}
-            placeholder="test@gmail.com"
+            placeholder='test@gmail.com'
             isInvalid={Boolean(errors?.email)}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -76,11 +76,11 @@ export function SendEmailTemplateForm({
         </Col>
         {/* update email template */}
         {!onHide && (
-          <Col className="d-flex align-items-end">
+          <Col className='d-flex align-items-end'>
             {hasPermission && (
               <Button
-                className="d-no dne d-md-block"
-                type="submit"
+                className='d-no dne d-md-block'
+                type='submit'
                 disabled={isLoading}
               >
                 {t('sendTestEmail')}
@@ -91,13 +91,13 @@ export function SendEmailTemplateForm({
       </Row>
       {/* create new email template */}
       {hasPermission && onHide && (
-        <Modal.Footer className="border-0 p-0 mt-5">
-          <Button onClick={onHide} variant="danger">
+        <Modal.Footer className='border-0 p-0 mt-5'>
+          <Button onClick={onHide} variant='danger'>
             {t('Design:cancel')}
           </Button>
           <Button
-            className="d-no dne d-md-block"
-            type="submit"
+            className='d-no dne d-md-block'
+            type='submit'
             disabled={isLoading}
           >
             {t('send')}

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -31,8 +31,8 @@ export function SmsTemplateCard({
   const texts = useTranslatedParameters({ isActive, isDefault })
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal
@@ -44,8 +44,8 @@ export function SmsTemplateCard({
           >
             {(confirm) => (
               <button
-                type="button"
-                className="snippet-template-card-button"
+                type='button'
+                className='snippet-template-card-button'
                 onClick={(e) => {
                   e.stopPropagation()
                   confirm(onRemove)
@@ -57,16 +57,16 @@ export function SmsTemplateCard({
           </ConfirmModal>
         )}
         <button
-          type="button"
-          className="snippet-template-card-button"
+          type='button'
+          className='snippet-template-card-button'
           onClick={onDuplicate}
         >
           <FaCopy />
         </button>
       </div>
-      <div className="mt-2">
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <p className="mb-0">
+      <div className='mt-2'>
+        {!!texts.length && <p className='mb-1'>{texts}</p>}
+        <p className='mb-0'>
           {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
         </p>
       </div>