[EN-6414] fix(cv): fix cv bugs and design

ReseauEntourage · Sep 20, 2023 · a598374 · a598374
1 parent f6260b5
commit a598374
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 39 deletions.
diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx
@@ -252,6 +252,15 @@ export const StyledRightColumn = styled.div`
   flex: 1;
 `;
 
+export const StyledTitleAccordion = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > h2 {
+    margin-bottom: 0;
+  }
+`;
+
 export const StyledCVPageContentInformations = styled.div`
   background-color: #ffffffe5;
   padding: 30px;
@@ -427,7 +436,6 @@ export const StyledCVPageContentFooter = styled.div`
 `;
 
 export const StyledChevronIcon = styled(Icon)`
-  position: absolute;
   top: 30px;
   right: 30px;
   svg {

diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.tsx
@@ -34,6 +34,7 @@ import {
   StyledCVExperienceDate,
   StyledCVExperienceDescription,
   StyledCVExperienceDateMobile,
+  StyledTitleAccordion,
 } from 'src/components/partials/CV/PageCvContent/PageCVContent.styles';
 import { Button, Icon } from 'src/components/utils';
 import { CarouselSwiper } from 'src/components/utils/CarouselSwiper';
@@ -231,11 +232,10 @@ export const PageCVContent = ({
               !isDesktop ? 'mobile' : ''
             }`}
           >
-            {!isDesktop && <StyledChevronIcon name="chevron-down" />}
             {isDesktop ? (
               <H4 title="Informations" color={CV_COLORS.titleGray} />
             ) : (
-              <span
+              <StyledTitleAccordion
                 onClick={() => {
                   setOpenedPanel({
                     ...openedPanel,
@@ -244,7 +244,8 @@ export const PageCVContent = ({
                 }}
               >
                 <H2 title="Informations" color={CV_COLORS.titleGray} />
-              </span>
+                <StyledChevronIcon name="chevron-down" />
+              </StyledTitleAccordion>
             )}
             <ul>
               {cv.contracts && cv.contracts.length > 0 && (
@@ -338,10 +339,7 @@ export const PageCVContent = ({
                 !isDesktop ? 'mobile' : ''
               }`}
             >
-              {!isDesktop && <StyledChevronIcon name="chevron-down" />}
-
-              {/* {isDesktop ?<H2 title="Expériences" color={CV_COLORS.titleGray} />:  */}
-              <span
+              <StyledTitleAccordion
                 onClick={() => {
                   setOpenedPanel({
                     ...openedPanel,
@@ -350,7 +348,8 @@ export const PageCVContent = ({
                 }}
               >
                 <H2 title="Expériences" color={CV_COLORS.titleGray} />
-              </span>
+                <StyledChevronIcon name="chevron-down" />
+              </StyledTitleAccordion>
               <ul>
                 {cv.experiences?.map((experience) => {
                   return (
@@ -423,8 +422,7 @@ export const PageCVContent = ({
                 !isDesktop ? 'mobile' : ''
               }`}
             >
-              {!isDesktop && <StyledChevronIcon name="chevron-down" />}
-              <span
+              <StyledTitleAccordion
                 onClick={() => {
                   setOpenedPanel({
                     ...openedPanel,
@@ -433,7 +431,8 @@ export const PageCVContent = ({
                 }}
               >
                 <H2 title="Formation" color={CV_COLORS.titleGray} />
-              </span>
+                <StyledChevronIcon name="chevron-down" />
+              </StyledTitleAccordion>
               <ul>
                 {cv.formations.map((formation) => {
                   return (
@@ -507,11 +506,10 @@ export const PageCVContent = ({
                 !isDesktop ? 'mobile' : ''
               }`}
             >
-              {!isDesktop && <StyledChevronIcon name="chevron-down" />}
               {isDesktop ? (
                 <H4 title="Mes Passions" color={CV_COLORS.titleGray} />
               ) : (
-                <span
+                <StyledTitleAccordion
                   onClick={() => {
                     setOpenedPanel({
                       ...openedPanel,
@@ -520,7 +518,8 @@ export const PageCVContent = ({
                   }}
                 >
                   <H2 title="Mes Passions" color={CV_COLORS.titleGray} />
-                </span>
+                  <StyledChevronIcon name="chevron-down" />
+                </StyledTitleAccordion>
               )}
               <ul>
                 {cv?.passions?.map(({ name }) => {

diff --git a/src/components/utils/Inputs/Inputs.styles.ts b/src/components/utils/Inputs/Inputs.styles.ts
@@ -64,9 +64,16 @@ export const StyledAnnotationsErrorMessage = styled(FieldErrorMessage)`
   bottom: 0 !important;
 `;
 
+export const StyledLimitContainer = styled.div`
+  display: flex;
+  > :first-child {
+    margin-right: 5px;
+  }
+`;
+
 export const StyledLimit = styled.div`
   color: ${({ warning }) => {
-    return warning ? COLORS.noRed : COLORS.darkGray;
+    return warning ? COLORS.darkOrange : COLORS.darkGray;
   }};
   font-size: 12px;
   line-height: 12px;

diff --git a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx
@@ -5,6 +5,7 @@ import {
   StyledAnnotationsErrorMessage,
   StyledInputLabel,
   StyledLimit,
+  StyledLimitContainer,
 } from '../../Inputs.styles';
 import { CommonInputProps } from '../../Inputs.types';
 import {
@@ -109,26 +110,29 @@ export function SelectCreatable<T extends FilterConstant | FilterConstant[]>({
           max={maxItems}
           maxLength={maxChar}
           isValidNewOption={(inputValue) => {
-            return maxChar ? inputValue.length < maxChar : true;
+            const isEmpty = inputValue.trim().length === 0;
+            return maxChar ? inputValue.length < maxChar && !isEmpty : !isEmpty;
           }}
         />
       </StyledSelect>
       <StyledAnnotations>
         <div>
           <StyledAnnotationsErrorMessage error={error} />
         </div>
-        {maxChar && (
-          <StyledLimit>
-            <span>
-              Chaque élément ne doit pas dépasser {maxChar} caractères.
-            </span>
-          </StyledLimit>
-        )}
-        {maxItems && (
-          <StyledLimit warning={remainingItems <= 0}>
-            <span>{remainingItems} élément(s) restant(s)</span>
-          </StyledLimit>
-        )}
+        <StyledLimitContainer>
+          {maxChar && (
+            <StyledLimit>
+              <span>
+                Chaque élément ne doit pas dépasser {maxChar} caractères.
+              </span>
+            </StyledLimit>
+          )}
+          {maxItems && (
+            <StyledLimit warning={remainingItems <= 0}>
+              <span>{remainingItems} élément(s) restant(s)</span>
+            </StyledLimit>
+          )}
+        </StyledLimitContainer>
       </StyledAnnotations>
     </StyledSelectContainer>
   );

diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx
@@ -42,16 +42,12 @@ export function TextArea({
 }: TextAreaProps) {
   const isMobile = useIsMobile();
 
-  const { textAreaRef, remainingLines, textAreaWidth } = useLineLimit(
-    value,
-    name,
-    onChange,
-    maxLines?.lines
-  );
+  const { textAreaRef, remainingLines, maxLinesReached, textAreaWidth } =
+    useLineLimit(value, name, onChange, maxLines?.lines);
 
   useEffect(() => {
     if (!maxLines) return null;
-    if (remainingLines <= 0) {
+    if (maxLinesReached) {
       setIsMaxLinesReached(true);
     } else {
       setIsMaxLinesReached(false);

diff --git a/src/components/utils/Inputs/TextArea/useLineLimit.ts b/src/components/utils/Inputs/TextArea/useLineLimit.ts
@@ -52,8 +52,9 @@ export function useLineLimit(
     }
   }, []);
 
-  const remainingLines =
-    maxLines - numberOfLines < 0 ? 0 : maxLines - numberOfLines;
+  const maxLinesReached = maxLines - numberOfLines < 0;
+
+  const remainingLines = maxLinesReached ? 0 : maxLines - numberOfLines;
 
   useEffect(() => {
     if (maxLines && ref && ref.current && value !== prevValue) {
@@ -118,5 +119,5 @@ export function useLineLimit(
     }
   }, [windowWidth]);
 
-  return { remainingLines, textAreaRef: ref, textAreaWidth };
+  return { remainingLines, maxLinesReached, textAreaRef: ref, textAreaWidth };
 }