Include customBack prop text to Calendar component

Author: Kubit

src/components/calendar/calendarStandAlone.tsx

@@ -12,7 +12,7 @@ import { YearSelector } from './selector/yearSelector/yearSelector';
 import { ICalendarStandAlone } from './types';
 
 const CalendarStandAloneComponent = (
-  { maxDate = new Date(), ...props }: ICalendarStandAlone,
+  { maxDate = new Date(), customBackText = 'Back', ...props }: ICalendarStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
 ): React.JSX.Element => {
   const [showMonthSelector, setShowMonthSelector] = React.useState(false);
@@ -31,6 +31,7 @@ const CalendarStandAloneComponent = (
         configAccesibility={props.configAccesibility}
         configCalendar={props.configCalendar}
         currentDate={props.currentDate}
+        customBackText={customBackText}
         maxDate={maxDate}
         minDate={props.minDate}
         setCurrentDate={props.setCurrentDate}

src/components/calendar/selector/__tests__/selector.test.tsx

@@ -38,9 +38,7 @@ describe('Selector component', () => {
   it('Selector with Range and selected Date Component', () => {
     renderProvider(<Selector {...mockProps} />);
 
-    const selector = screen.getByRole('button', {
-      name: mockProps.configCalendar.leftArrowIcon['aria-label'],
-    });
+    const selector = screen.getByLabelText(mockProps.configCalendar.leftArrowIcon['aria-label']);
 
     expect(selector).toBeInTheDocument();
   });

src/components/calendar/selector/selector.styled.ts

@@ -30,9 +30,10 @@ export const RightIconStyled = styled.span<RightIconType>`
   visibility: ${({ showCustomSelector }) => (showCustomSelector ? 'hidden' : 'visible')};
 `;
 
-export const IconAndBackTextStyled = styled.div<SelectorStyledType>`
+export const IconAndBackTextStyled = styled.button<SelectorStyledType>`
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
   ${({ styles }) => getStyles(styles?.selectorIconAndBackTextContainer)};
 `;

src/components/calendar/selector/selector.tsx

@@ -123,22 +123,21 @@ export const Selector = (props: ISelector): JSX.Element => {
 
   return (
     <SelectorStyled isDaySelector={isDaySelector} styles={props.styles}>
-      <IconAndBackTextStyled styles={props.styles}>
+      <IconAndBackTextStyled
+        aria-label={showCustomSelector ? '' : leftArrowIcon['aria-label']}
+        styles={props.styles}
+        type="button"
+        onClick={handleOnClickLeftIcon}
+      >
         <ElementOrIcon
           color={iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined}
           customIconStyles={props.styles?.leftArrow}
           disabled={iconArrowDisabled(props.minDate)}
           {...leftArrowIcon}
-          aria-label={
-            showCustomSelector
-              ? props.configAccesibility?.backToMonthAriaLabel
-              : leftArrowIcon['aria-label']
-          }
-          onClick={handleOnClickLeftIcon}
         />
         {showCustomSelector && (
           <Text component={TextComponentType.PARAGRAPH} customTypography={props.styles?.backText}>
-            {'Back'}
+            {props.customBackText}
           </Text>
         )}
       </IconAndBackTextStyled>

src/components/calendar/selector/types/selector.ts

@@ -4,6 +4,7 @@ import { CalendarContainerStylesType } from '../../types/calendarTheme';
 
 export interface ISelector {
   currentDate: Date;
+  customBackText?: string;
   setCurrentDate: (date: Date) => void;
   maxDate: Date;
   minDate: Date;

src/components/calendar/types/calendar.ts

@@ -34,6 +34,7 @@ export type IConfigAccesibility = {
 };
 export interface ICalendarStandAlone<V = undefined extends string ? unknown : string> {
   id?: string;
+  customBackText?: string;
   selectedDate: Date[];
   hasRange?: boolean;
   disabledDates?: Date[];