@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/auth/Register/BirthDateFormComponent.tsx

@@ -120,11 +120,11 @@ function BirthDateFormComponent({
 
   return (
     <Row>
-      <Col xs={12} sm={3} className="pr-sm-1">
-        <Form.Group controlId="formGroupDay">
+      <Col xs={12} sm={3} className='pr-sm-1'>
+        <Form.Group controlId='formGroupDay'>
           <Form.Control
-            type="number"
-            name="day"
+            type='number'
+            name='day'
             placeholder={t('User:day')}
             {...register('day', {
               max: 31,
@@ -138,11 +138,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={4} className="px-sm-1">
-        <Form.Group controlId="formGroupMonth">
+      <Col xs={12} sm={4} className='px-sm-1'>
+        <Form.Group controlId='formGroupMonth'>
           <Form.Control
-            as="select"
-            name="month"
+            as='select'
+            name='month'
             custom
             {...register('month', {
               pattern: monthRule,
@@ -151,7 +151,7 @@ function BirthDateFormComponent({
             isInvalid={!!errors.month && getValues('month')}
             disabled={disabled}
           >
-            <option value="">{t('User:month')}</option>
+            <option value=''>{t('User:month')}</option>
             {Object.keys(MONTHS).map((key) => (
               <option key={key} value={key}>
                 {t(`Design:${MONTHS[key]}`)}
@@ -159,7 +159,7 @@ function BirthDateFormComponent({
             ))}
           </Form.Control>
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.month, 'pattern') &&
               t('Validation:fieldValidMonth', {
                 attribute: t('User:month'),
@@ -168,11 +168,11 @@ function BirthDateFormComponent({
         </Form.Group>
       </Col>
 
-      <Col xs={12} sm={5} className="pl-sm-1">
-        <Form.Group controlId="formGroupYear">
+      <Col xs={12} sm={5} className='pl-sm-1'>
+        <Form.Group controlId='formGroupYear'>
           <Form.Control
-            type="number"
-            name="year"
+            type='number'
+            name='year'
             placeholder={t('User:year')}
             {...register('year')}
             isValid={isValidYear && getValues('year')}
@@ -180,14 +180,14 @@ function BirthDateFormComponent({
             disabled={disabled}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {!isAdult && t('Validation:fieldValidYear')}
           </Form.Control.Feedback>
         </Form.Group>
 
         <Form.Control
-          type="hidden"
-          name="birthday"
+          type='hidden'
+          name='birthday'
           {...register('birthday', {
             validate: () => isAdult && isValidDate,
           })}

package/src/auth/Register/RegisterComponent.tsx

@@ -97,15 +97,15 @@ function RegisterComponent({
 
   return (
     <Router>
-      <Row className="justify-content-center">
-        <Col xs sm={12} md={7} lg={6} xl={5} className="align-self-center">
+      <Row className='justify-content-center'>
+        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
           <>
-            <h1 className="text-center">{t('registerTitle')}</h1>
+            <h1 className='text-center'>{t('registerTitle')}</h1>
 
-            <h6 className="text-center">
-              <Trans t={t} i18nKey="registerPromo">
+            <h6 className='text-center'>
+              <Trans t={t} i18nKey='registerPromo'>
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
-                . Already signed up? Then just <Link to="/login">Log in</Link>.
+                . Already signed up? Then just <Link to='/login'>Log in</Link>.
               </Trans>
             </h6>
 
@@ -117,7 +117,7 @@ function RegisterComponent({
                     setIsLoading={setIsLoading}
                   />
 
-                  <hr className="mb-2" />
+                  <hr className='mb-2' />
                 </>
               )}
 

package/src/auth/Register/RegisterFormComponent.tsx

@@ -118,11 +118,11 @@ function RegisterFormComponent({
     <>
       <Form onSubmit={handleSubmit(onFormSubmit)} noValidate>
         <Row>
-          <Col xs={12} sm={6} className="pr-sm-1">
-            <Form.Group controlId="formGroupFirstName">
+          <Col xs={12} sm={6} className='pr-sm-1'>
+            <Form.Group controlId='formGroupFirstName'>
               <Form.Control
-                type="input"
-                name="first_name"
+                type='input'
+                name='first_name'
                 placeholder={t('User:firstName')}
                 isValid={isFieldValid('first_name')}
                 isInvalid={!!errors.first_name}
@@ -133,7 +133,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {HookFormService.hasError(errors.first_name, 'required') &&
                   t('Validation:fieldRequired', {
                     attribute: t('User:firstName'),
@@ -146,11 +146,11 @@ function RegisterFormComponent({
               </Form.Control.Feedback>
             </Form.Group>
           </Col>
-          <Col xs={12} sm={6} className="pl-sm-1">
-            <Form.Group controlId="formGroupLastName">
+          <Col xs={12} sm={6} className='pl-sm-1'>
+            <Form.Group controlId='formGroupLastName'>
               <Form.Control
-                type="input"
-                name="last_name"
+                type='input'
+                name='last_name'
                 placeholder={t('User:lastName')}
                 isValid={isFieldValid('last_name')}
                 isInvalid={!!errors.last_name}
@@ -161,7 +161,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {HookFormService.hasError(errors.last_name, 'required') &&
                   t('Validation:fieldRequired', {
                     attribute: t('User:lastName'),
@@ -176,10 +176,10 @@ function RegisterFormComponent({
           </Col>
         </Row>
 
-        <Form.Group controlId="formGroupEmail">
+        <Form.Group controlId='formGroupEmail'>
           <Form.Control
-            type="email"
-            name="email"
+            type='email'
+            name='email'
             placeholder={t('User:email')}
             isValid={isFieldValid('email')}
             isInvalid={Boolean(errors.email)}
@@ -191,7 +191,7 @@ function RegisterFormComponent({
             disabled={isLoading || Boolean(defaultValues().email)}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -209,10 +209,10 @@ function RegisterFormComponent({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId="formGroupPassword">
+        <Form.Group controlId='formGroupPassword'>
           <Form.Control
-            type="password"
-            name="password"
+            type='password'
+            name='password'
             placeholder={t('User:password')}
             isValid={isFieldValid('password')}
             isInvalid={!!errors.password}
@@ -224,7 +224,7 @@ function RegisterFormComponent({
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.password, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:password'),
@@ -242,13 +242,13 @@ function RegisterFormComponent({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId="formGroupPhone">
-          <InputGroup className="mb-3">
+        <Form.Group controlId='formGroupPhone'>
+          <InputGroup className='mb-3'>
             <InputGroup.Prepend>
               <InputGroup.Text>
                 <CountrySelect
                   defaultCountry={Config.Country.GB}
-                  className="w-25"
+                  className='w-25'
                   onChange={handlePhoneCountry}
                 />
               </InputGroup.Text>
@@ -271,11 +271,11 @@ function RegisterFormComponent({
                 />
               )}
               control={control}
-              name="phone"
-              defaultValue=""
+              name='phone'
+              defaultValue=''
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {!isPhoneValid &&
                 t('Validation:fieldValidPhone', {
                   attribute: t('User:phoneNumber'),
@@ -295,11 +295,11 @@ function RegisterFormComponent({
         />
 
         <Row>
-          <Col xs={12} sm={6} className="pr-sm-1">
-            <Form.Group controlId="formGroupPostCode">
+          <Col xs={12} sm={6} className='pr-sm-1'>
+            <Form.Group controlId='formGroupPostCode'>
               <Form.Control
-                type="input"
-                name="post_code"
+                type='input'
+                name='post_code'
                 placeholder={t('User:postCode')}
                 onChange={handleChange}
                 isValid={isFieldValid('post_code') && !!getValues('post_code')}
@@ -310,7 +310,7 @@ function RegisterFormComponent({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {HookFormService.hasError(errors.post_code, 'pattern') &&
                   t('Validation:fieldValidPostCode', {
                     attribute: t('User:postCode'),
@@ -319,15 +319,15 @@ function RegisterFormComponent({
             </Form.Group>
           </Col>
 
-          <Col xs={12} sm={6} className="pr-sm-2">
+          <Col xs={12} sm={6} className='pr-sm-2'>
             <strong>Gender</strong>
 
             <div>
               <Form.Check
-                type="radio"
-                name="gender"
-                value="male"
-                id="genderMale"
+                type='radio'
+                name='gender'
+                value='male'
+                id='genderMale'
                 label={t('User:male')}
                 {...register('gender')}
                 disabled={isLoading}
@@ -335,10 +335,10 @@ function RegisterFormComponent({
               />
 
               <Form.Check
-                type="radio"
-                name="gender"
-                value="female"
-                id="genderFemale"
+                type='radio'
+                name='gender'
+                value='female'
+                id='genderFemale'
                 label={t('User:female')}
                 {...register('gender')}
                 disabled={isLoading}
@@ -348,15 +348,15 @@ function RegisterFormComponent({
           </Col>
         </Row>
 
-        <div className="text-left mb-4 mt-1">
+        <div className='text-left mb-4 mt-1'>
           <Form.Check
-            type="checkbox"
-            name="receive_promo"
-            className="mb-1"
-            id="noPromoFromUs"
+            type='checkbox'
+            name='receive_promo'
+            className='mb-1'
+            id='noPromoFromUs'
             {...register('receive_promo')}
             label={
-              <Trans t={t} i18nKey="User:noPromoFromUs">
+              <Trans t={t} i18nKey='User:noPromoFromUs'>
                 I&apos;d prefer to receive promotions and exclusive information
                 from {{ name: t('User:bookedit') }}
               </Trans>
@@ -365,12 +365,12 @@ function RegisterFormComponent({
           />
 
           <Form.Check
-            type="checkbox"
-            id="noPromoFromPartners"
+            type='checkbox'
+            id='noPromoFromPartners'
             {...register('receive_partner_promo')}
-            name="receive_partner_promo"
+            name='receive_partner_promo'
             label={
-              <Trans t={t} i18nKey="User:noPromoFromPartners">
+              <Trans t={t} i18nKey='User:noPromoFromPartners'>
                 I&apos;d prefer to receive promotions and exclusive information
                 from {{ name: t('User:bookedit') }} Partners
               </Trans>
@@ -381,30 +381,30 @@ function RegisterFormComponent({
 
         <Form.Control
           hidden
-          name="invitation_hash"
+          name='invitation_hash'
           {...register('invitation_hash')}
           disabled
         />
 
         <Button
-          variant="primary"
-          type="submit"
-          className="rounded-pill text-uppercase"
+          variant='primary'
+          type='submit'
+          className='rounded-pill text-uppercase'
           block
           disabled={isLoading}
         >
           {t('register')}
         </Button>
 
-        <p className="text-center mb-0 mt-3">
-          <Trans t={t} i18nKey="User:agreementsPromo">
+        <p className='text-center mb-0 mt-3'>
+          <Trans t={t} i18nKey='User:agreementsPromo'>
             By creating an account, I agree to {{ name: t('User:bookedit') }}
             &apos;s{' '}
-            <Link to="/terms" className={[isLoading && 'disabled'].join(' ')}>
+            <Link to='/terms' className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
-            <Link to="/privacy" className={[isLoading && 'disabled'].join(' ')}>
+            <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>
             .

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -50,10 +50,10 @@ function ResetPasswordComponent() {
 
   return (
     <Router>
-      <Row className="justify-content-center">
-        <Col xs sm={12} md={7} lg={6} xl={5} className="align-self-center">
+      <Row className='justify-content-center'>
+        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
           <>
-            <h1 className="text-center">{t('User:resetPasswordTitle')}</h1>
+            <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
 
             <FormCard>
               <ResetPasswordFormComponent

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -57,10 +57,10 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
   return (
     <>
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
-        <Form.Group controlId="formGroupEmail">
+        <Form.Group controlId='formGroupEmail'>
           <Form.Control
-            type="email"
-            name="email"
+            type='email'
+            name='email'
             placeholder={t('User:email')}
             onChange={handleChange}
             isValid={isFieldValid('email')}
@@ -72,7 +72,7 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
             disabled={isLoading}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -85,29 +85,29 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         </Form.Group>
 
         <Button
-          variant="primary"
-          type="submit"
-          className="rounded-pill text-uppercase"
+          variant='primary'
+          type='submit'
+          className='rounded-pill text-uppercase'
           block
           disabled={isLoading}
         >
           {t('User:submit')}
         </Button>
 
-        <p className="text-center mb-0 mt-3">
-          <Trans t={t} i18nKey="User:signinPromo">
+        <p className='text-center mb-0 mt-3'>
+          <Trans t={t} i18nKey='User:signinPromo'>
             Already a user?{' '}
-            <Link to="/login" className={[isLoading && 'disabled'].join(' ')}>
+            <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
             !
           </Trans>
         </p>
-        <p className="text-center mb-0 mt-3">
-          <Trans t={t} i18nKey="User:loginPromo">
+        <p className='text-center mb-0 mt-3'>
+          <Trans t={t} i18nKey='User:loginPromo'>
             Don&apos;t have an account?{' '}
             <Link
-              to="/register"
+              to='/register'
               className={[isLoading && 'disabled'].join(' ')}
             >
               Sign up

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -115,10 +115,10 @@ function SocialCallbackComponent() {
 
   return (
     <>
-      <Row className="justify-content-center">
-        <Col xs sm={12} md={7} lg={5} xl={4} className="align-self-center">
+      <Row className='justify-content-center'>
+        <Col xs sm={12} md={7} lg={5} xl={4} className='align-self-center'>
           <>
-            <FormCard className="p-5">
+            <FormCard className='p-5'>
               <LoaderIndicator isLoaded={false} />
             </FormCard>
           </>

package/src/auth/Social/SocialFormComponent.tsx

@@ -70,10 +70,10 @@ function SocialFormComponent(props: SocialFormComponentProps) {
       <LoaderIndicator isLoaded={!isLoading} />
 
       <Row>
-        <Col xs={6} className="pr-1">
+        <Col xs={6} className='pr-1'>
           <SocialButton
             className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
-            type="facebook"
+            type='facebook'
             onClick={handleFacebookClick}
             disabled={isLoading}
           >
@@ -81,10 +81,10 @@ function SocialFormComponent(props: SocialFormComponentProps) {
           </SocialButton>
         </Col>
 
-        <Col xs={6} className="pl-1">
+        <Col xs={6} className='pl-1'>
           <SocialButton
             className={['btn-social-lg', 'pl-5', 'pr-1'].join(' ')}
-            type="twitter"
+            type='twitter'
             onClick={handleTwitterClick}
             disabled={isLoading}
           >

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -60,7 +60,7 @@ export const AvailabilityIndicator = ({
 }
 
 const Indicator = ({ Icon, label }: Config) => (
-  <div className="availability-indicator">
+  <div className='availability-indicator'>
     <Icon />
     <div>{label}</div>
   </div>

package/src/calendar/Calendar.tsx

@@ -29,8 +29,8 @@ export type CalendarProps = {
 export const Calendar = (props: CalendarProps) => {
   const { initialDate = defaultStartDay, isLoading } = props
   return (
-    <div className="calendar-wrapper">
-      <div className="calendar">
+    <div className='calendar-wrapper'>
+      <div className='calendar'>
         <CalendarButtons initialDate={initialDate} {...props} />
 
         {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -38,9 +38,9 @@ export const CalendarDates = ({
   }, [calendarDates])
 
   return (
-    <div className="calendar-dates-wrapper">
+    <div className='calendar-dates-wrapper'>
       <CalendarWeekdays />
-      <div className="calendar-dates">
+      <div className='calendar-dates'>
         {fillCalendarDates.map((date: DateTime | null) => {
           if (date === null) return <div />
 

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -35,9 +35,9 @@ export const CalendarSelect = ({
       id={PAGE_CALENDAR_SELECT_WRAPPER}
     >
       <Form.Control
-        as="select"
+        as='select'
         onChange={onValueChange}
-        className="calendar-select"
+        className='calendar-select'
         value={value}
         ref={selectRef}
       >

package/src/calendar/components/CalendarWeekdays/CalendarWeekdays.tsx

@@ -14,9 +14,9 @@ export const CalendarWeekdays = () => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="calendar-weekdays">
+    <div className='calendar-weekdays'>
       {WEEKDAYS.map(({ key }) => (
-        <div key={key} className="calendar-weekday">
+        <div key={key} className='calendar-weekday'>
           {t(key)}
         </div>
       ))}

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -31,16 +31,16 @@ export function CollapsibleInputGroup({
   const isInvalid = Boolean(error)
 
   return (
-    <Card className="rounded-0">
+    <Card className='rounded-0'>
       <Accordion.Toggle
         as={Card.Header}
         eventKey={eventKey}
         alwaysopen={alwaysOpen}
-        role="button"
+        role='button'
         className={clsx('accordion-form-control', isInvalid && 'is-invalid')}
       >
-        <div className="accordion-form-control-header">
-          <h5 className="mb-0 pl-3">{label}</h5>
+        <div className='accordion-form-control-header'>
+          <h5 className='mb-0 pl-3'>{label}</h5>
           {currentEventKey === eventKey ? (
             <FaChevronUp size={20} />
           ) : (
@@ -48,10 +48,10 @@ export function CollapsibleInputGroup({
           )}
         </div>
         <Collapse in={currentEventKey !== eventKey}>
-          <div className="pl-3">{description}</div>
+          <div className='pl-3'>{description}</div>
         </Collapse>
         {isInvalid && (
-          <Form.Control.Feedback type="invalid" className="pl-3">
+          <Form.Control.Feedback type='invalid' className='pl-3'>
             {error}
           </Form.Control.Feedback>
         )}

package/src/custom-fields/CustomFields.stories.tsx

@@ -194,5 +194,5 @@ WithDefault.args = {
 }
 
 export function Item() {
-  return <FieldItem icon="font" label="Text" onClick={() => null} />
+  return <FieldItem icon='font' label='Text' onClick={() => null} />
 }

package/src/custom-fields/field/FieldItem.tsx

@@ -11,7 +11,7 @@ interface FieldItemProps {
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
-    <div className="custom-field-item" onClick={onClick}>
+    <div className='custom-field-item' onClick={onClick}>
       {icon}
       <h6>{label}</h6>
     </div>

package/src/custom-fields/field/SelectFieldModal.tsx

@@ -18,14 +18,14 @@ export function SelectFieldModal({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       centered
       show={isVisible}
       onHide={onHide}
-      className="p-3 border-0"
+      className='p-3 border-0'
     >
-      <h5 className="mt-5 p-2 ml-3">Select Field</h5>
-      <div className="d-flex flex-row flex-wrap p-3 my-3">
+      <h5 className='mt-5 p-2 ml-3'>Select Field</h5>
+      <div className='d-flex flex-row flex-wrap p-3 my-3'>
         {allFieldTypes.map((fieldKey) => {
           const { label, icon } = FIELD_TYPES[fieldKey]
           const id = uniqueId(fieldKey)