[MID-162] Merged changes from dev branch

Author: MaksRomanchuk

package-lock.json

@@ -19,6 +19,7 @@ import { ChipList } from '@components/CardSpecialist/ChipList';
 import { OwnershipTypeTile } from '@components/CardSpecialist/Organization/OwnershipTypeTile';
 import { OrganizationChipLists } from '@components/CardSpecialist/Organization/OrganizationChipLists';
 import { transformClientCategoryIntoChipListItem } from '@components/CardSpecialist/utils';
+import { cn } from '@utils/cn';
 
 export function ShortCardWrapper({ data, type, isHoveredOn, className }) {
   const { id } = data;
@@ -29,13 +30,15 @@ export function ShortCardWrapper({ data, type, isHoveredOn, className }) {
   const { lastName, firstName, surname } = data;
   const name = isOrganization ? data.name : [lastName, firstName, surname].filter(Boolean).join(' ');
 
-  const { yearsOnMarket, isFreeReception, formatOfWork } = data;
+  const { yearsOnMarket, yearsOfExperience, isFreeReception, formatOfWork, isInclusiveSpace } = data;
   const labelsList = getLabelsList({
-    yearsOfExperience: yearsOnMarket,
+    yearsOfExperience: isOrganization ? yearsOnMarket : yearsOfExperience,
     isFreeReception,
     formatOfWork,
+    isInclusiveSpace,
     specialistType: type,
   });
+
   const isBadgeList = !!labelsList.filter(label => !!label.content).length;
 
   const { instagram, facebook, tiktok, youtube, linkedin, viber, telegram } = data;
@@ -57,7 +60,6 @@ export function ShortCardWrapper({ data, type, isHoveredOn, className }) {
     transformClientCategoryIntoChipListItem({ workingWith: false }),
   );
   const clientsList = [...clientsWorkingWithList, ...clientsNotWorkingWithList];
-
   return (
     <CardWrapper className={className} id={id} type={type}>
       <div className="flex w-full flex-col lg:hidden">
@@ -79,7 +81,7 @@ export function ShortCardWrapper({ data, type, isHoveredOn, className }) {
             {data.ownershipType && <OwnershipTypeTile ownershipType={data?.ownershipType} className="mt-1" />}
           </div>
         </div>
-        <BadgeList labels={labelsList} className="mb-2 mt-4 flex-wrap border-0" />
+        <BadgeList labels={labelsList} className={cn('mt mb-2 flex-wrap border-0', { hidden: !isBadgeList })} />
         <MethodList
           specializations={specializationsList}
           methods={methodsList}
@@ -114,28 +116,28 @@ export function ShortCardWrapper({ data, type, isHoveredOn, className }) {
               extendedCardOpened
               className="flex-wrap"
             />
-            {data.ownershipType && <OwnershipTypeTile ownershipType={data?.ownershipType} className="mt-2.5" />}
             <SpecialistTitle id={id} truncate name={name} className="mt-2" />
+            {data.ownershipType && <OwnershipTypeTile ownershipType={data?.ownershipType} className="mt-2.5" />}
             {isBadgeList && <BadgeList labels={labelsList} className="mt-4 flex-wrap" />}
+            <div className="mt-5 w-full">
+              {isOrganization ? (
+                <OrganizationChipLists
+                  id={id}
+                  expertSpecializations={data.expertSpecializations}
+                  className="border-t border-dashed border-t-gray-200 pt-4"
+                  showCaption={false}
+                />
+              ) : (
+                <MethodList
+                  specializations={specializationsList}
+                  methods={methodsList}
+                  className="max-w-[300px] border-0"
+                  showCaption={false}
+                />
+              )}
+            </div>
             {isHoveredOn && (
               <>
-                <div className="border-1 mt-5 w-full border-t border-dashed border-t-gray-200">
-                  {isOrganization ? (
-                    <OrganizationChipLists
-                      id={id}
-                      expertSpecializations={data.expertSpecializations}
-                      className="border-t border-dashed border-t-gray-200 pt-4"
-                      showCaption={false}
-                    />
-                  ) : (
-                    <MethodList
-                      specializations={specializationsList}
-                      methods={methodsList}
-                      className="max-w-[300px] border-0"
-                      showCaption={false}
-                    />
-                  )}
-                </div>
                 <ChipList id={`${id}-clientCategories`} items={clientsList} className="mt-4" />
               </>
             )}

src/app/_components/CardSpecialist/ShortCardWrapper.js

@@ -4,7 +4,6 @@ import { PillButton } from '@components/PillButton';
 import { List, Map } from '@icons';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cn } from '@utils/cn';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { motion } from 'framer-motion';
@@ -28,8 +27,13 @@ export function MapLink({ mapMode = false, className }) {
       }}
       className={className}
     >
-      <Link href={href} aria-label="">
-        <PillButton icon={icon} variant="filled" colorVariant="orange" className={cn('z-10 flex items-center')}>
+      <Link href={href} aria-label={`Click to see specialist list${mapMode ? ' along with the map' : ''}`}>
+        <PillButton
+          icon={icon}
+          variant="filled"
+          colorVariant="orange"
+          className="z-10 flex items-center *:gap-0 md:*:gap-2"
+        >
           <span className="hidden md:block">{buttonText}</span>
         </PillButton>
       </Link>

src/app/_components/MapLink.js

@@ -23,7 +23,7 @@ export function PillButton({ children, className, icon, variant, colorVariant, .
 
   return (
     <button type="button" className={styles} {...props}>
-      <div className={layoutStyle || ''}>
+      <div className={cn(layoutStyle)}>
         {icon}
         <Paragraph className="text-inherit">{children}</Paragraph>
       </div>

src/app/_components/PillButton/component.js

@@ -2,7 +2,7 @@ import { DistrictFilter, FormatFilter, PriceFilter, SpecializationFilter, TypeFi
 
 export function Filters() {
   return (
-    <section className="relative z-[50] -mb-[250px] inline-flex w-full flex-col items-start gap-6 py-6">
+    <section className="relative z-10 -mb-[250px] inline-flex w-full flex-col items-start gap-6 py-6">
       <div className="no-scrollbar relative flex w-full touch-pan-x content-start items-start gap-4 overflow-x-auto">
         <TypeFilter />
         <SpecializationFilter />

src/app/_components/Specialists/Filters.js

@@ -15,13 +15,7 @@ export function SpecialistListWrapper({ className }) {
   const isMapMode = searchParams.get('mode') === 'map';
 
   return (
-    <section
-      className={cn(
-        { 'mx-auto px-2 md:px-4 lg:max-w-[1600px]': isMapMode },
-        { 'mx-auto lg:max-w-[900px]': !isMapMode },
-        className,
-      )}
-    >
+    <section className={cn('mx-auto px-4 lg:max-w-[900px]', { 'lg:max-w-[1600px]': isMapMode }, className)}>
       <SearchProvider>
         <SearchInput />
       </SearchProvider>