Add new prop arias and icons to components

Author: Kubit

src/assets/storybook/videos/videos.ts

@@ -161,9 +161,9 @@ const CarouselStandAloneComponent = (
           <PageControl
             arrowsControlVariant={pageControlArrowsControlVariant}
             currentPosition={currentPage}
-            leftArrowControl={leftArrowControlPageControl}
+            leftControl={leftArrowControlPageControl}
             pages={numPages}
-            rightArrowControl={rightArrowControlPageControl}
+            rightControl={rightArrowControlPageControl}
             variant={pageControlVariant}
           />
         </PageControlContainerStyled>

src/components/carousel/carouselStandAlone.tsx

@@ -85,7 +85,6 @@ export * from './tableV2';
 export * from './dataTable';
 export * from './video';
 export * from './progressBar';
-
 export * from './virtualKeyboard';
 
 /**
@@ -111,7 +110,6 @@ export * from './headerStructure';
 export * from './footer';
 export * from './portal';
 export * from './textCount';
-
 export * from './operativeLayout';
 export * from './emptyState';
 export * from './loadingState';

src/components/index.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { ButtonStyled } from '@/components/button/button.styled';
 import { ButtonStandAloneStructure } from '@/components/button/buttonStandAlone';
 import { Text } from '@/components/text/text';
+import { pickAriaProps } from '@/utils/aria/aria';
 
 import { ButtonStateType } from '../../button/types/state';
 import { TextDecorationType } from '../../text/types/decoration';
@@ -18,10 +19,12 @@ export const LinkAsButtonStandAloneComponent = (
     target,
     role,
     onClick,
+    ['aria-label']: ariaLabel,
     ...props
   }: ILinkAsButtonStandAlone,
   ref: React.ForwardedRef<HTMLElement> | undefined
 ): JSX.Element => {
+  const ariaProps = pickAriaProps(props);
   return (
     // Apply button border radius to the link when focus-visible
     <LinkAsButtonWrapperStyled
@@ -33,7 +36,7 @@ export const LinkAsButtonStandAloneComponent = (
     >
       <Text
         ref={ref}
-        aria-label={props['aria-label']}
+        aria-label={ariaLabel}
         component={component}
         decoration={TextDecorationType.NONE}
         isDisabled={props.state === ButtonStateType.DISABLED}
@@ -50,7 +53,6 @@ export const LinkAsButtonStandAloneComponent = (
           $sizeStyles={props.sizeStyles}
           $state={props.state}
           $styles={props.styles}
-          aria-label=""
         >
           <ButtonStandAloneStructure {...props}>{children}</ButtonStandAloneStructure>
         </ButtonStyled>

src/components/link/linkAsButton/linkAsButtonStandAlone.tsx

@@ -67,10 +67,6 @@ export const PopoverStyled = styled.div<PopoverVariantStylesProps & PopoverProps
     props.align
       ? alignProps(props.align, props.extraAlignGap)
       : alignProps(props[DeviceBreakpointsType.DESKTOP]?.align)};
-  top: ${props => props.top};
-  bottom: ${props => props.bottom};
-  right: ${props => props.right};
-  left: ${props => props.left};
   ${({
     theme: {
       MEDIA_QUERIES: { onlyMobile, onlyTablet, onlyDesktop },
@@ -82,6 +78,11 @@ export const PopoverStyled = styled.div<PopoverVariantStylesProps & PopoverProps
       ${getWidth(props)}
     }
 
+    top: ${props.top};
+    bottom: ${props.bottom};
+    right: ${props.right};
+    left: ${props.left};
+
     ${onlyTablet} {
       position: ${!props[DeviceBreakpointsType.TABLET]
         ? props.positionVariant
@@ -90,6 +91,10 @@ export const PopoverStyled = styled.div<PopoverVariantStylesProps & PopoverProps
         ? alignProps(props.align, props.extraAlignGap)
         : alignProps(props[DeviceBreakpointsType.TABLET]?.align)};
       ${getWidth(props)}
+      top: ${props.top};
+      bottom: ${props.bottom};
+      right: ${props.right};
+      left: ${props.left};
       z-index: ${props => props[DeviceBreakpointsType.TABLET]?.zIndex || zIndex || 'auto'};
     }
 
@@ -99,6 +104,10 @@ export const PopoverStyled = styled.div<PopoverVariantStylesProps & PopoverProps
         : props[DeviceBreakpointsType.MOBILE]?.positionVariant};
       ${alignProps(props[DeviceBreakpointsType.MOBILE]?.align)};
       ${getWidth(props)}
+      top: ${props.top};
+      bottom: ${props.bottom};
+      right: ${props.right};
+      left: ${props.left};
       z-index: ${props => props[DeviceBreakpointsType.MOBILE]?.zIndex || zIndex || 'auto'};
     }
   `}

src/components/popover/popover.styled.ts

@@ -7,7 +7,7 @@ import { useId } from '@/hooks/useId/useId';
 import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
 import { ROLES } from '../../types/role/role';
 import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
-import { IconBasic as Icon } from '../icon/icon';
+import { IconHost as Icon } from '../icon/iconHost';
 import { PopoverControlled } from '../popover/popoverControlled';
 import { PopoverComponentType } from '../popover/types/component';
 import { PopoverPositionVariantType } from '../popover/types/positionVariant';