@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/static/CountrySelect.tsx

@@ -42,19 +42,19 @@ function CountrySelect(props: Props) {
   }, [onChange, country, prevCountry])
 
   return (
-    <div className="PhoneInputCountry">
-      <div className="PhoneInputCountryIcon">
+    <div className='PhoneInputCountry'>
+      <div className='PhoneInputCountryIcon'>
         <FlagComponent
           country={country}
           countryName={country}
           // it points to `country-flag-icons` gitlab pages website.
-          flagUrl="https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg"
-          className="PhoneInputCountryIconImg"
+          flagUrl='https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg'
+          className='PhoneInputCountryIconImg'
         />
       </div>
 
       <Form.Control
-        as="select"
+        as='select'
         className={['PhoneInputCountrySelect', className].join(' ')}
         custom
         onChange={handleOnChange}

package/src/static/CurrencyNumberInput.tsx

@@ -34,21 +34,22 @@ export const CurrencyNumberInput = forwardRef<
     },
     ref,
   ) => (
-    <Form.Group className="currency-number-input">
+    <Form.Group className='currency-number-input'>
       <Form.Label className={labelClassName}>{label}</Form.Label>
-      <div className="position-relative">
-        <div className="currency">{currency}</div>
+      <div className='position-relative'>
+        <div className='currency'>{currency}</div>
 
         <Form.Control
           className={controlClassName}
-          type="number"
+          type='number'
           disabled={disabled}
           value={value}
           onChange={onChange}
+          onWheel={(event) => event.currentTarget.blur()}
           ref={ref}
           {...props}
         />
-        <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+        <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
       </div>
     </Form.Group>
   ),

package/src/static/RestrictedAccess.tsx

@@ -9,16 +9,16 @@ function RestrictedAccess() {
   return (
     <>
       <Button
-        className="mt-3 ml-3"
-        variant="link"
+        className='mt-3 ml-3'
+        variant='link'
         onClick={() => RouteService.goBack()}
       >
         <FaArrowLeft size={25} />
       </Button>
-      <div className="container d-flex justify-content-center pt-5">
-        <div className="text-center">
-          <h2 className="pb-5">{t('Design:noAccessTitle')}</h2>
-          <h5 className="pb-4">{t('Design:noAccessDescription')}</h5>
+      <div className='container d-flex justify-content-center pt-5'>
+        <div className='text-center'>
+          <h2 className='pb-5'>{t('Design:noAccessTitle')}</h2>
+          <h5 className='pb-4'>{t('Design:noAccessDescription')}</h5>
         </div>
       </div>
     </>

package/src/static/SocialButton.tsx

@@ -35,7 +35,7 @@ function SocialButton(props: Props) {
       ].join(' ')}
       onClick={handleClick}
     >
-      <span className="separator">
+      <span className='separator'>
         {type === 'facebook' && <FaFacebookF />}
         {type === 'twitter' && <FaTwitter />}
       </span>

package/src/static/Static.stories.tsx

@@ -29,14 +29,14 @@ export const ATag = () => (
   >
     <Row>
       <Col>
-        <a href="#" className="">
+        <a href='#' className=''>
           active
         </a>
       </Col>
     </Row>
     <Row>
       <Col>
-        <a href="#" className="disabled">
+        <a href='#' className='disabled'>
           disabled
         </a>
       </Col>
@@ -55,7 +55,7 @@ ATag.story = {
 }
 
 export const _Image = () => (
-  <Image src={DefaultUserImage} alt="test" roundedCircle />
+  <Image src={DefaultUserImage} alt='test' roundedCircle />
 )
 
 _Image.story = {
@@ -86,17 +86,17 @@ export const _StyledButton = () => (
   <>
     <StyledButton>Primary</StyledButton>
 
-    <StyledButton variant="outline-primary">LG outline primary</StyledButton>
+    <StyledButton variant='outline-primary'>LG outline primary</StyledButton>
 
-    <StyledButton size="lg" variant="outline-secondary">
+    <StyledButton size='lg' variant='outline-secondary'>
       LG outline secondary
     </StyledButton>
 
-    <StyledButton size="sm" variant="secondary">
+    <StyledButton size='sm' variant='secondary'>
       SM Secondary
     </StyledButton>
 
-    <StyledButton variant="primary" className="rounded-pill">
+    <StyledButton variant='primary' className='rounded-pill'>
       SM Secondary
     </StyledButton>
   </>
@@ -145,7 +145,7 @@ export const _Input = () => (
         padding: 15,
       }}
     >
-      <Form.Control placeholder="default" />
+      <Form.Control placeholder='default' />
     </div>
 
     <div
@@ -154,8 +154,8 @@ export const _Input = () => (
       }}
     >
       <Form.Control
-        type="input"
-        placeholder="valid"
+        type='input'
+        placeholder='valid'
         isValid
         isInvalid={false}
       />
@@ -166,7 +166,7 @@ export const _Input = () => (
         padding: 15,
       }}
     >
-      <Form.Control type="input" placeholder="invalid" value="test" isInvalid />
+      <Form.Control type='input' placeholder='invalid' value='test' isInvalid />
     </div>
   </>
 )
@@ -186,18 +186,18 @@ export const _CountrySelect = () => (
         padding: 15,
       }}
     >
-      <InputGroup className="mb-3">
+      <InputGroup className='mb-3'>
         <InputGroup.Prepend>
           <InputGroup.Text>
-            <CountrySelect defaultCountry="GB" />
+            <CountrySelect defaultCountry='GB' />
           </InputGroup.Text>
         </InputGroup.Prepend>
 
         <Input
-          defaultCountry="GB"
-          className="form-control"
+          defaultCountry='GB'
+          className='form-control'
           onChange={() => {}}
-          value=""
+          value=''
         />
       </InputGroup>
     </div>
@@ -221,7 +221,7 @@ export const _SocialButton = () => (
         padding: 15,
       }}
     >
-      <SocialButton className="btn-social-lg" type="twitter">
+      <SocialButton className='btn-social-lg' type='twitter'>
         Twitter
       </SocialButton>
     </div>
@@ -231,7 +231,7 @@ export const _SocialButton = () => (
         padding: 15,
       }}
     >
-      <SocialButton className="btn-social-lg" type="facebook" icon="facebook-f">
+      <SocialButton className='btn-social-lg' type='facebook' icon='facebook-f'>
         Facebook
       </SocialButton>
     </div>
@@ -241,7 +241,7 @@ export const _SocialButton = () => (
         padding: 15,
       }}
     >
-      <SocialButton className="btn-social-lg" type="google" icon="google">
+      <SocialButton className='btn-social-lg' type='google' icon='google'>
         Google
       </SocialButton>
     </div>
@@ -251,7 +251,7 @@ export const _SocialButton = () => (
         padding: 15,
       }}
     >
-      <SocialButton className="btn-social-lg" type="twitter" disabled>
+      <SocialButton className='btn-social-lg' type='twitter' disabled>
         Twitter disabled
       </SocialButton>
     </div>
@@ -270,7 +270,7 @@ _SocialButton.story = {
 
 export const _UserBadge = () => (
   <div style={{ width: '300px' }}>
-    <UserBadge userName="Apple Inc" balance={500} />
+    <UserBadge userName='Apple Inc' balance={500} />
   </div>
 )
 
@@ -280,7 +280,7 @@ _UserBadge.story = {
 
 export const _CurrencyNumberInput = () => (
   <div style={{ width: '300px' }}>
-    <CurrencyNumberInput label="CurrencyNumberInput" />
+    <CurrencyNumberInput label='CurrencyNumberInput' />
   </div>
 )
 
@@ -297,8 +297,8 @@ export const _CountryCodeSelect = () => {
           padding: 15,
         }}
       >
-        <InputGroup className="mb-3">
-          <CountryCodeSelect fieldName="country" />
+        <InputGroup className='mb-3'>
+          <CountryCodeSelect fieldName='country' />
         </InputGroup>
       </div>
     </FormProvider>

package/src/static/UserBadge.tsx

@@ -22,20 +22,20 @@ export function UserBadge({
   const { t } = useTranslation('Design')
 
   return (
-    <Button className={`user-badge ${className}`} as="div" variant="outline">
-      <div className="badge-avatar">
+    <Button className={`user-badge ${className}`} as='div' variant='outline'>
+      <div className='badge-avatar'>
         <span>{usernameShortcut}</span>
       </div>
-      <div className="user-info-wrapper">
-        <div className="user-ingo">
-          <h3 className="user-name">{userName}</h3>
-          <p className="user-balance">
+      <div className='user-info-wrapper'>
+        <div className='user-ingo'>
+          <h3 className='user-name'>{userName}</h3>
+          <p className='user-balance'>
             {t('balance')}{' '}
             {formatNumber(balance, { style: 'currency', currency: 'GBP' })}
           </p>
         </div>
       </div>
-      <FaLongArrowAltDown size={24} className="user-badge-down-icon" />
+      <FaLongArrowAltDown size={24} className='user-badge-down-icon' />
     </Button>
   )
 }

package/src/static/WarningMessage.tsx

@@ -7,9 +7,9 @@ interface WarningMessageProps {
 }
 
 const WarningMessage = ({ message }: WarningMessageProps) => (
-  <Alert variant="warning">
+  <Alert variant='warning'>
     <WarningIcon />
-    <span className="ml-2" style={{ fontSize: '0.8rem' }}>
+    <span className='ml-2' style={{ fontSize: '0.8rem' }}>
       {message}
     </span>
   </Alert>

package/src/static/date-range-input/DateRangeInput.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = () => {
   return (
     <div>
       <DateRangeInput
-        placeholder="Date"
+        placeholder='Date'
         onDateChange={(nextDates) => {
           setState(nextDates)
         }}

package/src/static/date-range-input/DateRangeInput.tsx

@@ -106,8 +106,8 @@ export const DateRangeInput = ({
       <OverlayTrigger
         show={isDateRangePopovedVisible}
         overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
+          <Popover id={popoverId} className='rounded'>
+            <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
               <DateRange
                 onChange={(item) => setState([item.selection])}
                 moveRangeOnFirstSelection={false}
@@ -115,19 +115,19 @@ export const DateRangeInput = ({
                 months={months}
                 direction={direction}
               />
-              <div className="mt-3 d-flex justify-content-end">
-                <Button onClick={onReset} variant="link">
+              <div className='mt-3 d-flex justify-content-end'>
+                <Button onClick={onReset} variant='link'>
                   {t('clear')}
                 </Button>
-                <Button onClick={onApply} className="ml-3" variant="link">
+                <Button onClick={onApply} className='ml-3' variant='link'>
                   {t('apply')}
                 </Button>
               </div>
             </Popover.Content>
           </Popover>
         }
-        trigger="click"
-        placement="bottom"
+        trigger='click'
+        placement='bottom'
         popperConfig={{ modifiers: [sameWidthPopperModifier] }}
       >
         <div
@@ -137,19 +137,19 @@ export const DateRangeInput = ({
           onKeyDown={() =>
             setIsDateRangePopoverVisible((prevValue) => !prevValue)
           }
-          role="button"
+          role='button'
           tabIndex={0}
-          className="date-range-input-wrapper"
+          className='date-range-input-wrapper'
         >
           <Form.Control
-            type="input"
+            type='input'
             placeholder={placeholder}
             disabled={disabled}
             readOnly
-            className="date-range-input"
+            className='date-range-input'
             value={stringDatesToInputValue({ startDate, endDate })}
           />
-          <FaCalendar size={16} className="date-range-input-icon" />
+          <FaCalendar size={16} className='date-range-input-icon' />
         </div>
       </OverlayTrigger>
     </div>

package/src/static/form-number-input/FormNumberInput.stories.tsx

@@ -14,7 +14,7 @@ export const Default: Story = () => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(console.log)}>
-        <FormNumberInput fieldName="field" label="Label" />
+        <FormNumberInput fieldName='field' label='Label' />
       </form>
     </FormProvider>
   )

package/src/static/form-number-input/FormNumberInput.tsx

@@ -49,10 +49,10 @@ export const FormNumberInput = ({
 
       <InputGroup hasValidation>
         <InputGroup.Prepend
-          className="arrow-up-btn"
+          className='arrow-up-btn'
           onClick={() => setValue(fieldName, Number(value) + 1)}
         >
-          <InputGroup.Text className="py-0 px-3">
+          <InputGroup.Text className='py-0 px-3'>
             <IncrementIcon />
           </InputGroup.Text>
         </InputGroup.Prepend>
@@ -72,9 +72,10 @@ export const FormNumberInput = ({
           }}
           render={({ field }) => (
             <Form.Control
-              type="number"
+              type='number'
               step={step}
               disabled={disabled}
+              onWheel={(event) => event.currentTarget.blur()}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
               onChange={(event) => {
@@ -88,7 +89,7 @@ export const FormNumberInput = ({
           )}
         />
 
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.getErrors(fieldName, errors)}
         </Form.Control.Feedback>
       </InputGroup>

package/src/static/images/Images.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: 'Static/Images',
 }
 
-export const DefaultUser = () => <Image src={DefaultUserImage} alt="test" />
+export const DefaultUser = () => <Image src={DefaultUserImage} alt='test' />
 
 DefaultUser.story = {
   parameters: {

package/src/static/loader/BlockLoader.tsx

@@ -2,8 +2,8 @@ import { LoaderIndicator } from './LoaderIndicator'
 
 export function BlockLoader() {
   return (
-    <div className="block-loader">
-      <div className="block-loader__wrapper">
+    <div className='block-loader'>
+      <div className='block-loader__wrapper'>
         <LoaderIndicator isLoaded={false} />
       </div>
     </div>

package/src/static/loader/ButtonLoader.tsx

@@ -7,7 +7,7 @@ export type ButtonLoaderProps = {
 
 export function ButtonLoader({ color = '#fff' }: ButtonLoaderProps) {
   return (
-    <div className="button-loader position-relative ml-1 mr-4 float-left">
+    <div className='button-loader position-relative ml-1 mr-4 float-left'>
       <LoaderIndicator
         isLoaded={false}
         options={{

package/src/static/loader/Loader.stories.tsx

@@ -20,7 +20,7 @@ export const Default: Story = () => {
 export const Button: Story = () => {
   return (
     <>
-      <button type="button" className="btn btn-primary">
+      <button type='button' className='btn btn-primary'>
         <ButtonLoader />
         Click me
       </button>
@@ -38,7 +38,7 @@ export const Block: Story = () => {
 
 export const PaymentLoader: Story = () => {
   return (
-    <div className="h-100 w-100 m-0">
+    <div className='h-100 w-100 m-0'>
       <PaymentLoaderComponent />
     </div>
   )

package/src/static/loader/PaymentLoader.tsx

@@ -30,13 +30,13 @@ export const PaymentLoader = ({
   }, [width])
 
   return (
-    <div className="payment-loader">
-      <div className="position-relative">
-        <div className="payment-loader-text">
+    <div className='payment-loader'>
+      <div className='position-relative'>
+        <div className='payment-loader-text'>
           {t('Design:paymentIsProcessing')}
         </div>
         <LoaderIndicator
-          className="loader"
+          className='loader'
           options={{
             ...options,
             scale,

package/src/static/loader/SnippetLoader.tsx

@@ -2,8 +2,8 @@ import { LoaderIndicator } from './LoaderIndicator'
 
 export function SnippetLoader() {
   return (
-    <div className="snippet-loader">
-      <div className="snippet-loader__wrapper">
+    <div className='snippet-loader'>
+      <div className='snippet-loader__wrapper'>
         <LoaderIndicator isLoaded={false} />
       </div>
     </div>

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -27,18 +27,18 @@ export const ManualDatePicker = ({
 
   return (
     <>
-      <div className="custom-date-field-picker mr-4">
+      <div className='custom-date-field-picker mr-4'>
         <Form.Group>
           <Form.Control
             value={day}
-            as="select"
+            as='select'
             isInvalid={isRequred && !day}
             onChange={({ target: { value } }) => {
               setDay(value ? Number(value) : undefined)
             }}
             disabled={isDisabled}
           >
-            <option value="">{t('Design:dayShort')}</option>
+            <option value=''>{t('Design:dayShort')}</option>
             {DAYS_ARRAY.map((key) => (
               <option key={key} value={key}>
                 {key}
@@ -48,18 +48,18 @@ export const ManualDatePicker = ({
         </Form.Group>
       </div>
 
-      <div className="custom-date-field-picker mr-4">
+      <div className='custom-date-field-picker mr-4'>
         <Form.Group>
           <Form.Control
             value={month}
-            as="select"
+            as='select'
             isInvalid={isRequred && !month}
             onChange={({ target: { value } }) =>
               setMonth(value ? Number(value) : undefined)
             }
             disabled={isDisabled}
           >
-            <option value="">{t('Design:monthShort')}</option>
+            <option value=''>{t('Design:monthShort')}</option>
             {MONTHS_ARRAY.map((object) => (
               <option key={object.key} value={object.value}>
                 {object.key}
@@ -69,18 +69,18 @@ export const ManualDatePicker = ({
         </Form.Group>
       </div>
 
-      <div className="custom-date-field-picker">
+      <div className='custom-date-field-picker'>
         <Form.Group>
           <Form.Control
             value={year}
-            as="select"
+            as='select'
             isInvalid={isRequred && !year}
             onChange={({ target: { value } }) =>
               setYear(value ? Number(value) : undefined)
             }
             disabled={isDisabled}
           >
-            <option value="">{t('Design:yearShort')}</option>
+            <option value=''>{t('Design:yearShort')}</option>
             {YEARS_ARRAY.map((key) => (
               <option key={key} value={key}>
                 {key}

package/src/static/number-input/NumberInput.tsx

@@ -48,27 +48,28 @@ export function NumberInput({
   return (
     <div className={inputWrapperClasses}>
       <FormControl
-        type="number"
+        type='number'
+        onWheel={(event) => event.currentTarget.blur()}
         onChange={(e) => onChange(Number(e.target.value))}
         value={value}
         min={min}
         max={max}
         defaultValue={defaultValue}
-        height="5rem"
+        height='5rem'
         disabled={disabled}
       />
       <button
-        type="button"
+        type='button'
         onClick={handleArrowUpClick}
-        className="licklist-number-input__btn-up"
+        className='licklist-number-input__btn-up'
         disabled={disabled}
       >
         <FaChevronUp size={16} />
       </button>
       <button
-        type="button"
+        type='button'
         onClick={handleArrowDownClick}
-        className="licklist-number-input__btn-down"
+        className='licklist-number-input__btn-down'
         disabled={disabled}
       >
         <FaChevronDown size={16} />

package/src/static/switch/Switch.stories.tsx

@@ -39,12 +39,12 @@ export const WithForm: Story<SwitchProps<string>> = () => {
       <Form>
         <Controller
           control={form.control}
-          name="type"
+          name='type'
           render={({ field }) => (
-            <Form.Group className="d-flex flex-column align-items-start">
+            <Form.Group className='d-flex flex-column align-items-start'>
               <Form.Label>Type</Form.Label>
               <Switch
-                name="type"
+                name='type'
                 options={['sale', 'enquiry'].map((type) => ({
                   id: type,
                   value: t(type),

package/src/static/switch/Switch.tsx

@@ -24,10 +24,10 @@ export function Switch<T extends string | number>({
   const layoutId = useId()
 
   return (
-    <div className="btn-switch-container">
+    <div className='btn-switch-container'>
       <AnimateSharedLayout>
         <ToggleButtonGroup
-          type="radio"
+          type='radio'
           name={name}
           onChange={onChange}
           value={value}
@@ -37,7 +37,7 @@ export function Switch<T extends string | number>({
             return (
               <ToggleButton
                 key={option.id}
-                variant="link"
+                variant='link'
                 disabled={disabled}
                 value={option.id}
               >
@@ -51,7 +51,7 @@ export function Switch<T extends string | number>({
                 {isChecked && (
                   <motion.div
                     layoutId={layoutId}
-                    className="btn-switch-indicator"
+                    className='btn-switch-indicator'
                     transition={{ duration: TRANSITION_DURATION }}
                   />
                 )}

package/src/static/tabs/Tabs.tsx

@@ -30,7 +30,7 @@ export function Tabs({
       activeKey={activeKey}
       onSelect={onSelect}
       id={tabsId}
-      className="licklist-tabs"
+      className='licklist-tabs'
       {...props}
     >
       {children}