6741880448

Committed 03 Nov 2023 06:09AM UTC coverage: 88.906% (-0.5%) from 89.368%

Build # 6741880448

Build Type

Pull #92

github

Committed by

meenu-deriv

Commit Message

fix: updated meta  viewport

Pull Request Pull Request #92: Meenu/trade page table

Run Details

175 of 251 branches covered (0.0%)

Branch coverage included in aggregate %.

2387 of 2714 new or added lines in 11 files covered. (87.95%)

10 existing lines in 2 files now uncovered.

6052 of 6753 relevant lines covered (89.62%)

3.55 hits per line

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

96.99

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

import { Heading, Text, TextSize, qtMerge } from '@deriv/quill-design';
import clsx from 'clsx';
import { CardContent } from '../types';
import CustomLink from '../../link';

export interface BaseCardProps extends CardContent {
  contentPosition: 'bottom' | 'top' | 'start' | 'end';
}

const contentVariantClass = {
  bottom: 'flex-col',
  top: 'flex-col-reverse',
  start: 'flex-col lg:flex-row-reverse',
  end: 'flex-col lg:flex-row',
};

const bgColorVariantClass = {
  light: 'bg-background-primary-container',
  gray: 'bg-solid-slate-75',
};

const textColorVariantClass = {
  light: 'text-typography-prominent',
  gray: 'text-solid-slate-1400',
};

const sizeVariantComponents = {
  sm: Heading.H5,
  md: Heading.H4,
  lg: Heading.H2,
};

const sizeVariantContainerGap = {
  sm: 'gap-gap-lg p-general-xl',
  md: 'gap-gap-xl p-general-2xl',
  lg: 'gap-gap-xl p-general-3xl',
};

const sizeVariantTextGap = {
  sm: 'gap-gap-md',
  md: 'gap-gap-lg',
  lg: 'gap-gap-xl',
};

const textSizeVariant: { [key: string]: TextSize } = {
  sm: 'md',
  md: 'lg',
  lg: 'lg',
};

const linkTextSizeVariant = {
  sm: 'text-body-md',
  md: 'text-body-md',
  lg: 'text-body-lg',
};

export const BaseCard: React.FC<BaseCardProps> = ({
  header,
  description,
  children,
  content,
  icon,
  link,
  className,
  contentPosition,
  align,
  color,
  size,
  contentClassName,
  nonContentClassName,
}) => {
  const HeadingComponent = sizeVariantComponents[size];

  return (
    <div
      className={clsx(
        'flex overflow-hidden rounded-xl',
        contentVariantClass[contentPosition],
        bgColorVariantClass[color],
        className,
      )}
    >
      <div
        className={qtMerge(
          'flex max-h-max  basis-1/2 flex-col justify-center md:flex-1',
          align === 'start'
            ? 'items-start md:items-start'
            : 'items-center md:items-center',
          sizeVariantContainerGap[size],
          nonContentClassName,
        )}
      >
        {icon && icon}
        {(header || description) && (
          <div
            className={qtMerge(
              'flex flex-1 flex-col',
              textColorVariantClass[color],
              sizeVariantTextGap[size],
            )}
          >
            {header && <HeadingComponent>{header}</HeadingComponent>}
            {description && (
              <Text size={textSizeVariant[size]}>{description}</Text>
            )}
          </div>
        )}

        {link && (
          <CustomLink href={link.href} size={size} hasIcon hasHoverColor>
            {link.content}
          </CustomLink>
        )}
        {children}
      </div>
      {content && (
        <div className={qtMerge('basis-1/2', contentClassName)}>{content}</div>
      )}
    </div>
  );
};

export default BaseCard;

1	import { Heading, Text, TextSize, qtMerge } from '@deriv/quill-design';	3✔
2	import clsx from 'clsx';	3✔
3	import { CardContent } from '../types';	3✔
4	import CustomLink from '../../link';	3✔
5		3✔
6	export interface BaseCardProps extends CardContent {	3✔
7	contentPosition: 'bottom' \| 'top' \| 'start' \| 'end';	3✔
8	}	3✔
9		3✔
10	const contentVariantClass = {	3✔
11	bottom: 'flex-col',	3✔
12	top: 'flex-col-reverse',	3✔
13	start: 'flex-col lg:flex-row-reverse',	3✔
14	end: 'flex-col lg:flex-row',	3✔
15	};	3✔
16		3✔
17	const bgColorVariantClass = {	3✔
18	light: 'bg-background-primary-container',	3✔
19	gray: 'bg-solid-slate-75',	3✔
20	};	3✔
21		3✔
22	const textColorVariantClass = {	3✔
23	light: 'text-typography-prominent',	3✔
24	gray: 'text-solid-slate-1400',	3✔
25	};	3✔
26		3✔
27	const sizeVariantComponents = {	3✔
28	sm: Heading.H5,	3✔
29	md: Heading.H4,	3✔
30	lg: Heading.H2,	3✔
31	};	3✔
32		3✔
33	const sizeVariantContainerGap = {	3✔
34	sm: 'gap-gap-lg p-general-xl',	3✔
35	md: 'gap-gap-xl p-general-2xl',	3✔
36	lg: 'gap-gap-xl p-general-3xl',	3✔
37	};	3✔
38		3✔
39	const sizeVariantTextGap = {	3✔
40	sm: 'gap-gap-md',	3✔
41	md: 'gap-gap-lg',	3✔
42	lg: 'gap-gap-xl',	3✔
43	};	3✔
44		3✔
45	const textSizeVariant: { [key: string]: TextSize } = {	3✔
46	sm: 'md',	3✔
47	md: 'lg',	3✔
48	lg: 'lg',	3✔
49	};	3✔
50		3✔
51	const linkTextSizeVariant = {	3✔
52	sm: 'text-body-md',	3✔
53	md: 'text-body-md',	3✔
54	lg: 'text-body-lg',	3✔
55	};	3✔
56		3✔
57	export const BaseCard: React.FC<BaseCardProps> = ({	3✔
58	header,	65✔
59	description,	65✔
60	children,	65✔
61	content,	65✔
62	icon,	65✔
63	link,	65✔
64	className,	65✔
65	contentPosition,	65✔
66	align,	65✔
67	color,	65✔
68	size,	65✔
69	contentClassName,	65✔
70	nonContentClassName,	65✔
71	}) => {	65✔
72	const HeadingComponent = sizeVariantComponents[size];	65✔
73		65✔
74	return (	65✔
75	<div	65✔
76	className={clsx(	65✔
77	'flex overflow-hidden rounded-xl',	65✔
78	contentVariantClass[contentPosition],	65✔
79	bgColorVariantClass[color],	65✔
80	className,	65✔
81	)}	65✔
82	>	65✔
83	<div	65✔
84	className={qtMerge(	65✔
85	'flex max-h-max basis-1/2 flex-col justify-center md:flex-1',	65✔
86	align === 'start'	65✔
87	? 'items-start md:items-start'	55✔
88	: 'items-center md:items-center',	10✔
89	sizeVariantContainerGap[size],	65✔
90	nonContentClassName,	65✔
91	)}	65✔
92	>	65✔
93	{icon && icon}	65✔
94	{(header \|\| description) && (	65✔
95	<div	59✔
96	className={qtMerge(	59✔
97	'flex flex-1 flex-col',	59✔
98	textColorVariantClass[color],	59✔
99	sizeVariantTextGap[size],	59✔
100	)}	59✔
101	>	59✔
102	{header && <HeadingComponent>{header}</HeadingComponent>}	59✔
103	{description && (	59✔
104	<Text size={textSizeVariant[size]}>{description}</Text>	59✔
105	)}	59✔
106	</div>	59✔
107	)}	65✔
108		65✔
109	{link && (	65!
110	<CustomLink href={link.href} size={size} hasIcon hasHoverColor>	3✔
111	{link.content}	3✔
112	</CustomLink>	3✔
113	)}	65✔
114	{children}	65✔
115	</div>	65✔
116	{content && (	65!
UNCOV 117	<div className={qtMerge('basis-1/2', contentClassName)}>{content}</div>	×
118	)}	65✔
119	</div>	65✔
120	);	65✔
121	};	65✔
122		3✔
123	export default BaseCard;	3✔

deriv-com / deriv-com-v2 / 6741880448

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