deriv-com · balakrishna-deriv · Feb 8, 2024 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ArrowButton from '../arrow-button';
+
+const mockedTitle = 'mocked title';
+
+const mockedDefaultProps = {
+    is_collapsed: false,
+    position: 'top' as React.ComponentProps<typeof ArrowButton>['position'],
+    onClick: jest.fn(),
+    title: mockedTitle,
+    handle_button: false,
+};
+
+describe('<ArrowButton/>', () => {
+    it('should render icon with title for top position if title is defined', () => {
+        render(<ArrowButton {...mockedDefaultProps} />);
+
+        expect(screen.getByText(mockedTitle)).toBeInTheDocument();
+    });
+
+    it('should not render icon with title for top position if title is undefined', () => {
+        render(<ArrowButton {...mockedDefaultProps} title={undefined} />);
+
+        expect(screen.queryByText(mockedTitle)).not.toBeInTheDocument();
+    });
+
+    it('should render icon with title for bottom position if title is defined', () => {
+        render(<ArrowButton {...mockedDefaultProps} position='bottom' />);
+
+        expect(screen.getByText(mockedTitle)).toBeInTheDocument();
+    });
+
+    it('should not render icon with title for bottom position if title is undefined', () => {
+        render(<ArrowButton {...mockedDefaultProps} title={undefined} position='bottom' />);
+
+        expect(screen.queryByText(mockedTitle)).not.toBeInTheDocument();
+    });
+
+    it('should render icon_flat with if handle_button === true', () => {
+        render(<ArrowButton {...mockedDefaultProps} handle_button />);
+
+        expect(screen.getByTestId('icon_handle')).toBeInTheDocument();
+    });
+
+    it('should call onClick function if user clicks on icon', () => {
+        render(<ArrowButton {...mockedDefaultProps} />);
+        userEvent.click(screen.getByText(mockedTitle));
+
+        expect(mockedDefaultProps.onClick).toHaveBeenCalled();
+    });
+});
@@ -14,6 +14,7 @@ type TArrowButton = {
     onClick: () => void;
     title?: string;
     position?: 'top' | 'bottom';
+    handle_button?: boolean;
 };
 
 const IconArrow = ({ className }: { className?: string }) => (
@@ -29,7 +30,7 @@ const IconArrowWithTitle = ({ title, ...props }: TIconArrowWithTitle) => (
     </React.Fragment>
 );
 
-const ArrowButton = ({ is_collapsed = false, position, onClick, title }: TArrowButton) => {
+const ArrowButton = ({ is_collapsed = false, position, onClick, title, handle_button = false }: TArrowButton) => {
     const [is_open, expand] = React.useState(!is_collapsed);
 
     const toggleExpand = () => {
@@ -82,8 +83,16 @@ const ArrowButton = ({ is_collapsed = false, position, onClick, title }: TArrowB
             );
     }
 
+    if (handle_button) icon_arrow = <div className='dc-collapsible__icon--handle' data-testid='icon_handle' />;
+
     return (
-        <div className='dc-collapsible__button' onClick={toggleExpand}>
+        <div
+            className={classNames('dc-collapsible__button', {
+                'dc-collapsible__button--handle': handle_button,
+            })}
+            onClick={toggleExpand}
+            onKeyDown={toggleExpand}
+        >
             {icon_arrow}
         </div>
     );

@@ -38,10 +38,23 @@
         align-items: center;
         justify-content: center;
         height: 32px;
+
+        &--handle {
+            align-items: baseline;
+            height: 3.8rem;
+        }
     }
     &__icon {
         transition: transform 0.3s ease-in-out;
 
+        &--handle {
+            width: 4rem;
+            height: 0.4rem;
+            margin-top: 0.8rem;
+            border-radius: 0.2rem;
+            background-color: var(--general-active);
+        }
+
         &--top {
             transform: rotate(180deg);
 

@@ -9,6 +9,7 @@ type TCollapsible = {
     position?: 'top' | 'bottom';
     onClick: (state: boolean) => void;
     title?: string;
+    handle_button?: boolean;
 };
 
 const swipe_config = {
@@ -24,6 +25,7 @@ const Collapsible = ({
     children,
     onClick,
     title,
+    handle_button,
 }: React.PropsWithChildren<TCollapsible>) => {
     const [is_open, expand] = React.useState(!is_collapsed);
     const [should_show_collapsible, setShouldShowCollapsible] = React.useState(false);
@@ -58,7 +60,13 @@ const Collapsible = ({
     });
 
     const arrow_button = (
-        <ArrowButton is_collapsed={!is_open} position={position} onClick={toggleExpand} title={title} />
+        <ArrowButton
+            is_collapsed={!is_open}
+            position={position}
+            onClick={toggleExpand}
+            title={title}
+            handle_button={handle_button}
+        />
     );
     const CustomTag = as || 'div';
     return (

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Items from '../items';
+
+describe('<Items />', () => {
+    let mockedDefaultProps: React.ComponentProps<typeof Items>;
+
+    beforeEach(() => {
+        mockedDefaultProps = {
+            handleSelect: jest.fn(),
+            onKeyPressed: jest.fn(),
+            value: 'multiplier',
+            nodes: null,
+            items: [
+                { text: 'Multipliers', value: 'multiplier' },
+                { text: 'Accumulators', value: 'accumulator' },
+            ],
+            setScrollHeight: jest.fn(),
+        };
+    });
+
+    it('should render list of passed items', () => {
+        render(<Items {...mockedDefaultProps} />);
+
+        expect(screen.getByText('Multipliers')).toBeInTheDocument();
+        expect(screen.getByText('Accumulators')).toBeInTheDocument();
+    });
+
+    it('should call setScrollHeight function if value === item.value', () => {
+        render(<Items {...mockedDefaultProps} />);
+
+        expect(mockedDefaultProps.setScrollHeight).toBeCalled();
+    });
+    it('should not call setScrollHeight function if value !== item.value', () => {
+        mockedDefaultProps.value = 'vanilla';
+        render(<Items {...mockedDefaultProps} />);
+
+        expect(mockedDefaultProps.setScrollHeight).not.toBeCalled();
+    });
+});
@@ -269,7 +269,8 @@
         min-width: 15rem;
         width: 100%;
 
-        &:not(.cfd-personal-details-modal__form *):not(.trade-container__multiplier-dropdown):not(.dc-dropdown--left) {
+        &:not(.cfd-personal-details-modal__form *):not(.trade-container__multiplier-dropdown):not(
+                .dc-dropdown--left):not(.contract-type-info__dropdown) {
             margin-top: unset;
         }
 

@@ -44,6 +44,8 @@ type TDropdown = {
     onClick?: () => void;
     placeholder?: string;
     suffix_icon?: string;
+    should_scroll_to_selected?: boolean;
+    should_autohide?: boolean;
     test_id?: string;
     value?: string | number;
     classNameIcon?: string;
@@ -67,6 +69,8 @@ type TDropdownList = {
     parent_ref: React.RefObject<HTMLElement>;
     portal_id?: string;
     suffix_icon?: string;
+    should_scroll_to_selected?: boolean;
+    should_autohide?: boolean;
     value?: string | number;
 };
 
@@ -89,11 +93,15 @@ const DropdownList = React.forwardRef<HTMLDivElement, TDropdownList>((props, lis
         parent_ref,
         portal_id,
         suffix_icon,
+        should_scroll_to_selected,
+        should_autohide,
         value,
     } = props;
 
     const [list_dimensions, setListDimensions] = React.useState([initial_offset, 0]);
     const [style, setStyle] = React.useState({});
+    const [scroll_height, setScrollHeight] = React.useState<number>();
+
     const is_portal = !!portal_id;
 
     React.useEffect(() => {
@@ -188,7 +196,12 @@ const DropdownList = React.forwardRef<HTMLDivElement, TDropdownList>((props, lis
                     role='list'
                     ref={list_ref}
                 >
-                    <ThemedScrollbars height={list_dimensions[1] || '200px'}>
+                    <ThemedScrollbars
+                        height={list_dimensions[1] || '200px'}
+                        scroll_height={scroll_height}
+                        should_scroll_to_selected={should_scroll_to_selected}
+                        autohide={should_autohide}
+                    >
                         {Array.isArray(list) ? (
                             <Items
                                 onKeyPressed={onKeyPressed}
@@ -199,6 +212,7 @@ const DropdownList = React.forwardRef<HTMLDivElement, TDropdownList>((props, lis
                                 is_align_text_left={is_align_text_left}
                                 value={value}
                                 nodes={nodes.current}
+                                setScrollHeight={setScrollHeight}
                             />
                         ) : (
                             Object.keys(list).map((key, idx) => (
@@ -261,6 +275,8 @@ const Dropdown = ({
     onClick,
     placeholder,
     suffix_icon,
+    should_scroll_to_selected,
+    should_autohide,
     test_id,
     value,
     classNameIcon,
@@ -503,6 +519,8 @@ const Dropdown = ({
                         portal_id={list_portal_id}
                         ref={list_ref}
                         suffix_icon={suffix_icon}
+                        should_scroll_to_selected={should_scroll_to_selected}
+                        should_autohide={should_autohide}
                         value={value}
                     />
                 </div>

@@ -14,6 +14,7 @@ type TItem = {
     is_align_text_left?: boolean;
     nodes: Map<string, HTMLDivElement | null> | null;
     item: TListItem;
+    setScrollHeight?: (new_value: number) => void;
 };
 
 type TItems = Omit<TItem, 'item'> & {
@@ -30,10 +31,21 @@ const Items = ({ items, ...props }: TItems) => {
     );
 };
 
-const Item = ({ onKeyPressed, value, item, handleSelect, nodes, has_symbol, is_align_text_left, className }: TItem) => {
+const Item = ({
+    onKeyPressed,
+    value,
+    item,
+    handleSelect,
+    nodes,
+    has_symbol,
+    is_align_text_left,
+    className,
+    setScrollHeight,
+}: TItem) => {
     const item_ref = React.useRef<HTMLDivElement>(null);
     const symbol_type_class_name =
         item.text && typeof item.text === 'string' ? `symbols--${item.text.toLowerCase()}` : null;
+    const is_selected = value === item.value;
 
     React.useEffect(() => {
         const removeListeners = () => {
@@ -51,11 +63,17 @@ const Item = ({ onKeyPressed, value, item, handleSelect, nodes, has_symbol, is_a
         return () => removeListeners();
     }, [item, nodes, onKeyPressed]);
 
+    React.useEffect(() => {
+        if (setScrollHeight && item_ref.current && is_selected) {
+            setScrollHeight(item_ref.current.offsetTop - item_ref.current.scrollHeight);
+        }
+    }, [item_ref, setScrollHeight, is_selected]);
+
     return (
         <div
             className={classNames(
                 'dc-list__item',
-                { 'dc-list__item--selected': value === item.value },
+                { 'dc-list__item--selected': is_selected },
                 { 'dc-list__item--disabled': item.disabled }
             )}
             data-testid='dti_list_item'

@@ -93,7 +93,21 @@
                         border-bottom: 0.01rem solid transparent;
 
                         .inline-message__information {
-                            margin: 1.6rem 0.8rem;
+                            margin: 1.6rem 0.8rem -0.8rem;
+                        }
+
+                        .learn-more {
+                            height: 5rem;
+                            width: calc(100% - 1.6rem);
+                            margin: 1.6rem 0.8rem 0.8rem;
+                            padding: 1.6rem;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            border: none;
+                            background-color: var(--general-section-1);
+                            cursor: pointer;
+                            border-radius: $BORDER_RADIUS;
                         }
                     }
                 }

@@ -21,6 +21,7 @@ type TMobileDialog = {
     title?: React.ReactNode;
     visible?: boolean;
     wrapper_classname?: string;
+    learn_more_banner?: React.ReactNode;
 };
 
 const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
@@ -36,6 +37,7 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
         title,
         visible,
         wrapper_classname,
+        learn_more_banner,
     } = props;
 
     const footer_ref = React.useRef<HTMLDivElement>(null);
@@ -100,16 +102,25 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
                 <Div100vhContainer
                     className={classNames('dc-mobile-dialog__container', {
                         'dc-mobile-dialog__container--has-scroll': props.has_content_scroll,
-                        'dc-mobile-dialog__container--has-info-banner': info_banner,
+                        'dc-mobile-dialog__container--has-info-banner': info_banner || learn_more_banner,
                     })}
                     height_offset={props.content_height_offset || '8px'}
                 >
                     <ThemedScrollbars
-                        is_bypassed={!info_banner}
+                        is_bypassed={!info_banner && !learn_more_banner}
                         is_scrollbar_hidden
-                        className={info_banner ? classNames('dc-mobile-dialog__header-wrapper', header_classname) : ''}
+                        className={
+                            info_banner || learn_more_banner
+                                ? classNames('dc-mobile-dialog__header-wrapper', header_classname)
+                                : ''
+                        }
                     >
-                        <div className={classNames('dc-mobile-dialog__header', !info_banner && header_classname)}>
+                        <div
+                            className={classNames(
+                                'dc-mobile-dialog__header',
+                                !info_banner && !learn_more_banner && header_classname
+                            )}
+                        >
                             <Text
                                 as='h2'
                                 size='xs'
@@ -131,6 +142,7 @@ const MobileDialog = (props: React.PropsWithChildren<TMobileDialog>) => {
                             )}
                         </div>
                         {info_banner}
+                        {learn_more_banner}
                     </ThemedScrollbars>
                     <div
                         className={classNames('dc-mobile-dialog__content', {