@licklist/design 0.68.6-dev.1 → 0.68.6

package/src/sortable-tree/SortableTreeItem.tsx

@@ -33,7 +33,6 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
-  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -83,7 +82,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -174,7 +172,7 @@ export function SortableTreeItem({
 
   return (
     <div
-      className='sortable-tree-root'
+      className="sortable-tree-root"
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -184,7 +182,7 @@ export function SortableTreeItem({
       ref={setNodeRef}
     >
       <div
-        className='sortable-tree-wrapper'
+        className="sortable-tree-wrapper"
         ref={setDragNodeRef}
         {...dragAttributes}
         {...dragListeners}
@@ -199,7 +197,7 @@ export function SortableTreeItem({
             e.stopPropagation()
           }
         }}
-        role='button'
+        role="button"
         tabIndex={0}
         style={
           modalClass === ProductSetModalClasses.step
@@ -211,17 +209,17 @@ export function SortableTreeItem({
         }
       >
         {shouldExpand && (
-          <div className='sortable-tree-line'>
+          <div className="sortable-tree-line">
             <Button
-              variant='link'
-              size='sm'
+              variant="link"
+              size="sm"
               onMouseDown={onButtonMouseDown}
               onMouseUp={onHandleExpand}
             >
               {expanded ? (
                 <FaMinus size={10} />
               ) : (
-                <div className='expand-icon-container'>
+                <div className="expand-icon-container">
                   <div />
                   <div />
                   <div />
@@ -231,13 +229,13 @@ export function SortableTreeItem({
 
             {expanded && (
               <svg
-                className='sortable-tree-line-icon'
-                version='1.1'
-                xmlns='http://www.w3.org/2000/svg'
-                width='100%'
-                height='100%'
-                viewBox='0 0 100 100'
-                preserveAspectRatio='none'
+                className="sortable-tree-line-icon"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
               >
                 <g>
                   <path
@@ -246,7 +244,7 @@ export function SortableTreeItem({
                       treeLineIconColor && 'sortable-tree-line-product-element',
                     )}
                     style={{ stroke: treeLineIconColor }}
-                    d='M 50 0 V 100'
+                    d="M 50 0 V 100"
                   />
                 </g>
               </svg>
@@ -254,15 +252,15 @@ export function SortableTreeItem({
           </div>
         )}
 
-        <div className='sortable-tree-item-wrapper'>
+        <div className="sortable-tree-item-wrapper">
           <div
             className={clsx('sortable-tree-item', isInvalid ? 'invalid' : '')}
           >
-            <div className='sortable-tree-item-header'>
+            <div className="sortable-tree-item-header">
               {isIconInHeader && (
                 <Button
-                  variant='link'
-                  className='sortable-tree-item-handle'
+                  variant="link"
+                  className="sortable-tree-item-handle"
                   {...attributes}
                   {...listeners}
                 >
@@ -270,13 +268,13 @@ export function SortableTreeItem({
                 </Button>
               )}
               <Button
-                className='sortable-tree-item-toggle'
-                variant='link'
+                className="sortable-tree-item-toggle"
+                variant="link"
                 onMouseDown={onButtonMouseDown}
                 onMouseUp={onHandleExpand}
               >
                 {badge && (
-                  <span className='sortable-tree-item-badge'>{badge}</span>
+                  <span className="sortable-tree-item-badge">{badge}</span>
                 )}
                 <div
                   className={clsx(
@@ -289,28 +287,24 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
-                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
-                    <div className='sortable-tree-item-subtitle'>
-                      {itemButton}
-                    </div>
                   </span>
                   {!expanded && (
-                    <span className='sortable-tree-item-subtitle'>
+                    <span className="sortable-tree-item-subtitle">
                       {subTitle}
                     </span>
                   )}
                 </div>
                 <div
-                  className='border-0 open-edit-right-modal-button'
-                  role='button'
+                  className="border-0 open-edit-right-modal-button"
+                  role="button"
                   tabIndex={0}
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <FaEllipsisH color='#0E8CE2' size={16} />
+                  <FaEllipsisH color="#0E8CE2" size={16} />
                 </div>
               </Button>
             </div>
@@ -318,25 +312,25 @@ export function SortableTreeItem({
             {isIconInHeader ? (
               <Collapse in={expanded}>
                 <div>
-                  <div className='sortable-tree-item-body'>{body}</div>
+                  <div className="sortable-tree-item-body">{body}</div>
                 </div>
               </Collapse>
             ) : (
               <Modal
-                size='lg'
+                size="lg"
                 show={isModalVisible}
                 // unique class
                 className={clsx(
                   'm-0 edit-product-set-element-modal edit-right-form-modal h-100',
                   modalClass,
                 )}
-                dialogClassName='edit-event-dialog edit-step-dialog'
+                dialogClassName="edit-event-dialog edit-step-dialog"
                 onHide={onHide}
               >
-                <div className='edit-step-modal-header'>
+                <div className="edit-step-modal-header">
                   <button
-                    className='p-0 cancel-add-step-btn border-0'
-                    type='button'
+                    className="p-0 cancel-add-step-btn border-0"
+                    type="button"
                     onClick={onCancel}
                   >
                     <span>{t('Design:cancel')}</span>
@@ -350,22 +344,22 @@ export function SortableTreeItem({
                     </div>
                   )}
                 </div>
-                <Modal.Body as='form' noValidate>
-                  <div className='top-label-container'>
+                <Modal.Body as="form" noValidate>
+                  <div className="top-label-container">
                     <span>{modalLabel}</span>
                   </div>
                   {body}
 
-                  <div className='d-flex product-set-element-control-btns justify-content-between'>
+                  <div className="d-flex product-set-element-control-btns justify-content-between">
                     <Button
-                      className='step-save-btn mt-4'
-                      type='button'
+                      className="step-save-btn mt-4"
+                      type="button"
                       onClick={onHide}
                     >
                       {t('saveAndAdd')}
                     </Button>
                     {isVisibleDeleteButton && (
-                      <div className='d-flex justify-content-end mt-4 delete-btn'>
+                      <div className="d-flex justify-content-end mt-4 delete-btn">
                         <ConfirmModal>
                           {(confirm) => (
                             <DeleteFieldButton
@@ -382,7 +376,7 @@ export function SortableTreeItem({
           </div>
 
           {sortableItems && (
-            <div className='sortable-tree-subitems'>
+            <div className="sortable-tree-subitems">
               {preItem}
 
               <DndContext>
@@ -391,7 +385,7 @@ export function SortableTreeItem({
                   strategy={verticalListSortingStrategy}
                 >
                   <Collapse in={expanded}>
-                    <div className='ml-0'>{children}</div>
+                    <div className="ml-0">{children}</div>
                   </Collapse>
                 </SortableContext>
               </DndContext>

package/src/sorting-select/SortingSelect.tsx

@@ -59,13 +59,13 @@ export const SortingSelect = ({
   }, [sortKey, sortDirection])
 
   return (
-    <Form.Group className='d-flex align-items-center p-0' {...formGroupProps}>
-      <Form.Label className='text-nowrap mr-4 mb-0'>
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
         {t('App:sortBy')}:
       </Form.Label>
       <Form.Control
-        as='select'
-        data-testid='sorting-select'
+        as="select"
+        data-testid="sorting-select"
         onChange={onSortingValueChange}
         custom
         value={controlValue}

package/src/static/CountryCodeSelect.tsx

@@ -40,14 +40,14 @@ function CountryCodeSelect({
         {...register(fieldName, {
           required: errorMessage,
         })}
-        as='select'
+        as="select"
         className={className}
         custom
         disabled={disabled}
-        defaultValue=''
+        defaultValue=""
         isInvalid={Boolean(error)}
       >
-        <option key='' value='' disabled>
+        <option key="" value="" disabled>
           {t('chooseCountry')}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
@@ -56,7 +56,7 @@ function CountryCodeSelect({
           </option>
         ))}
       </Form.Control>
-      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
+      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
     </>
   )
 }

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,21 @@ 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}
           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>
   )