6741568570

Committed 03 Nov 2023 05:17AM UTC coverage: 88.093% (+2.3%) from 85.764%

Build # 6741568570

Build Type

push

github

Committed by

prince-deriv

Commit Message

fix: use tailwin class and fix mobile rendering of crumbs

Run Details

150 of 219 branches covered (0.0%)

Branch coverage included in aggregate %.

0 of 11 new or added lines in 1 file covered. (0.0%)

9 existing lines in 2 files now uncovered.

3845 of 4316 relevant lines covered (89.09%)

4.18 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

75.61

/libs/components/src/lib/accordion/base/index.tsx

import styles from './base.module.css';

import { Heading, qtMerge, Text } from '@deriv/quill-design';
import { AccordionProps } from '../types';
import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons';
import { useCallback, useEffect, useRef, useState } from 'react';

export const Base = ({
  id,
  className,
  title,
  subtitle,
  content: Content,
  expanded = false,
  icon,
  divider = 'both',
  customContent: CustomContent,
  contentClass,
  onExpand,
}: AccordionProps) => {
  const [is_expanded, setExpanded] = useState(expanded);
  const [is_auto_expand, setAutoExpand] = useState(false);

  const accordion_element = useRef<HTMLDivElement>(null);

  const toggleCollapse = () => {
    setExpanded((current) => !current);
    setAutoExpand(false);
    scrollToExpanded(500);

    if (onExpand) {
      onExpand(!is_expanded, title);
    }
  };

  // Handle Collapse via Keyboard
  const handleKeyUp = useCallback((e: KeyboardEvent) => {
    if (e.code === 'Enter' || e.key === 'Enter' || e.keyCode === 13) {
      if (accordion_element.current === document.activeElement) {
        toggleCollapse();
      }
    }
  }, []);

  // Scroll to expanded item
  const scrollToExpanded = (delay = 1000) => {
    const acc_element = accordion_element.current;

    if (acc_element) {
      setTimeout(() => {
        acc_element.scrollIntoView({
          block: 'center',
          behavior: 'smooth',
        });
      }, delay);
    }
  };

  // Handle auto expand and auto scroll on hash targets
  useEffect(() => {
    const hashWithoutSymbol =
      typeof window !== 'undefined' && window.location.hash.slice(1);

    if (hashWithoutSymbol === id) {
      setAutoExpand(true);
      scrollToExpanded();
    }
  }, []);

  useEffect(() => {
    document.addEventListener('keyup', handleKeyUp);
    return () => {
      document.removeEventListener('keyup', handleKeyUp);
    };
  }, [handleKeyUp]);

  useEffect(() => {
    setExpanded(expanded);
  }, [expanded]);

  return (
    <div
      data-id={id}
      ref={accordion_element}
      tabIndex={0}
      className={qtMerge(
        'flex w-full flex-col overflow-hidden',
        'focus-visible:outline-1 focus-visible:outline-opacity-red-100',
        divider === 'bottom' && 'border-xs border-b-opacity-black-100',
        divider === 'both' &&
          'border-100 border-b-opacity-black-100 border-t-opacity-black-100',
        className,
      )}
    >
      <div
        className={qtMerge(
          'flex cursor-pointer items-center justify-between',
          'gap-general-lg p-general-lg',
          'hover:bg-opacity-black-100',
          'active:bg-opacity-black-200',
          'border-opacity-black-100',
          contentClass,
        )}
        onClick={() => toggleCollapse()}
      >
        {CustomContent ? (
          <CustomContent />
        ) : (
          <>
            {icon && <div className="flex">{icon}</div>}
            <div className="flex w-full flex-col gap-general-xs">
              <Heading.H6 className="overflow-hidden">{title}</Heading.H6>
              {subtitle && (
                <Text
                  size="sm"
                  className="overflow-hidden text-opacity-black-400"
                >
                  {subtitle}
                </Text>
              )}
            </div>
          </>
        )}
        <div
          className={qtMerge(
            styles['accordion-button'],
            (is_auto_expand || is_expanded) &&
              styles['accordion-button-expanded'],
          )}
        >
          <StandaloneChevronDownRegularIcon fill="black" iconSize="sm" />
        </div>
      </div>
      <div
        className={qtMerge(
          styles['accordion-content'],
          (is_auto_expand || is_expanded) &&
            styles['accordion-content-expanded'],
        )}
      >
        <div className="flex h-fit p-general-lg">{Content && <Content />}</div>
      </div>
    </div>
  );
};

export default Base;

1	import styles from './base.module.css';	3✔
2		3✔
3	import { Heading, qtMerge, Text } from '@deriv/quill-design';	3✔
4	import { AccordionProps } from '../types';	3✔
5	import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons';	3✔
6	import { useCallback, useEffect, useRef, useState } from 'react';	3✔
7		3✔
8	export const Base = ({	3✔
9	id,	6✔
10	className,	6✔
11	title,	6✔
12	subtitle,	6✔
13	content: Content,	6✔
14	expanded = false,	6✔
15	icon,	6✔
16	divider = 'both',	6✔
17	customContent: CustomContent,	6✔
18	contentClass,	6✔
19	onExpand,	6✔
20	}: AccordionProps) => {	6✔
21	const [is_expanded, setExpanded] = useState(expanded);	6✔
22	const [is_auto_expand, setAutoExpand] = useState(false);	6✔
23		6✔
24	const accordion_element = useRef<HTMLDivElement>(null);	6✔
25		6✔
26	const toggleCollapse = () => {	6✔
27	setExpanded((current) => !current);	×
28	setAutoExpand(false);	×
29	scrollToExpanded(500);	×
30		×
31	if (onExpand) {	×
32	onExpand(!is_expanded, title);	×
33	}	×
UNCOV 34	};	×
35		6✔
36	// Handle Collapse via Keyboard	6✔
37	const handleKeyUp = useCallback((e: KeyboardEvent) => {	6✔
38	if (e.code === 'Enter' \|\| e.key === 'Enter' \|\| e.keyCode === 13) {	×
39	if (accordion_element.current === document.activeElement) {	×
40	toggleCollapse();	×
41	}	×
UNCOV 42	}	×
43	}, []);	6✔
44		6✔
45	// Scroll to expanded item	6✔
46	const scrollToExpanded = (delay = 1000) => {	6✔
47	const acc_element = accordion_element.current;	×
48		×
49	if (acc_element) {	×
50	setTimeout(() => {	×
51	acc_element.scrollIntoView({	×
52	block: 'center',	×
53	behavior: 'smooth',	×
54	});	×
55	}, delay);	×
56	}	×
UNCOV 57	};	×
58		6✔
59	// Handle auto expand and auto scroll on hash targets	6✔
60	useEffect(() => {	6✔
61	const hashWithoutSymbol =	6✔
62	typeof window !== 'undefined' && window.location.hash.slice(1);	6✔
63		6✔
64	if (hashWithoutSymbol === id) {	6!
65	setAutoExpand(true);	×
66	scrollToExpanded();	×
UNCOV 67	}	×
68	}, []);	6✔
69		6✔
70	useEffect(() => {	6✔
71	document.addEventListener('keyup', handleKeyUp);	6✔
72	return () => {	6✔
73	document.removeEventListener('keyup', handleKeyUp);	6✔
74	};	6✔
75	}, [handleKeyUp]);	6✔
76		6✔
77	useEffect(() => {	6✔
78	setExpanded(expanded);	6✔
79	}, [expanded]);	6✔
80		6✔
81	return (	6✔
82	<div	6✔
83	data-id={id}	6✔
84	ref={accordion_element}	6✔
85	tabIndex={0}	6✔
86	className={qtMerge(	6✔
87	'flex w-full flex-col overflow-hidden',	6✔
88	'focus-visible:outline-1 focus-visible:outline-opacity-red-100',	6✔
89	divider === 'bottom' && 'border-xs border-b-opacity-black-100',	6✔
90	divider === 'both' &&	6!
91	'border-100 border-b-opacity-black-100 border-t-opacity-black-100',	2✔
92	className,	6✔
93	)}	6✔
94	>	6✔
95	<div	6✔
96	className={qtMerge(	6✔
97	'flex cursor-pointer items-center justify-between',	6✔
98	'gap-general-lg p-general-lg',	6✔
99	'hover:bg-opacity-black-100',	6✔
100	'active:bg-opacity-black-200',	6✔
101	'border-opacity-black-100',	6✔
102	contentClass,	6✔
103	)}	6✔
104	onClick={() => toggleCollapse()}	6✔
105	>	6✔
106	{CustomContent ? (	6!
UNCOV 107	<CustomContent />	×
108	) : (	6✔
109	<>	6✔
110	{icon && <div className="flex">{icon}</div>}	6!
111	<div className="flex w-full flex-col gap-general-xs">	6✔
112	<Heading.H6 className="overflow-hidden">{title}</Heading.H6>	6✔
113	{subtitle && (	6!
114	<Text	1✔
115	size="sm"	1✔
116	className="overflow-hidden text-opacity-black-400"	1✔
117	>	1✔
118	{subtitle}	1✔
119	</Text>	1✔
120	)}	6✔
121	</div>	6✔
122	</>	6✔
123	)}	6✔
124	<div	6✔
125	className={qtMerge(	6✔
126	styles['accordion-button'],	6✔
127	(is_auto_expand \|\| is_expanded) &&	6!
UNCOV 128	styles['accordion-button-expanded'],	×
129	)}	6✔
130	>	6✔
131	<StandaloneChevronDownRegularIcon fill="black" iconSize="sm" />	6✔
132	</div>	6✔
133	</div>	6✔
134	<div	6✔
135	className={qtMerge(	6✔
136	styles['accordion-content'],	6✔
137	(is_auto_expand \|\| is_expanded) &&	6!
UNCOV 138	styles['accordion-content-expanded'],	×
139	)}	6✔
140	>	6✔
141	<div className="flex h-fit p-general-lg">{Content && <Content />}</div>	6✔
142	</div>	6✔
143	</div>	6✔
144	);	6✔
145	};	6✔
146		3✔
147	export default Base;	3✔

deriv-com / deriv-com-v2 / 6741568570

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous