Skip to content

Commit 8f11adf

Browse files
yaswanth-derivyaswanth-deriv
authored
Merge branch 'deriv-com:main' into yaswanth/FEQ-1858_Implement_circular_progressbar
2 parents 8d3e4c5 + 3a2d74b commit 8f11adf

File tree

11 files changed

+1074
-79
lines changed

11 files changed

+1074
-79
lines changed

‎src/components/Badge/Badge.scss

+526
Large diffs are not rendered by default.

‎src/components/Badge/__test__/Badge.spec.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from "react";
2+
import { render, screen } from "@testing-library/react";
3+
import { Badge } from "..";
4+
5+
describe("Badge component", () => {
6+
it("renders children", () => {
7+
render(<Badge isBold={false}>Test</Badge>);
8+
expect(screen.getByText("Test")).toBeInTheDocument();
9+
});
10+
11+
it("renders left and right icons", () => {
12+
const leftIcon = <span data-testid="dt-left-icon">Left Icon</span>;
13+
const rightIcon = <span data-testid="dt-right-icon">Right Icon</span>;
14+
render(
15+
<Badge isBold={false} leftIcon={leftIcon} rightIcon={rightIcon}>
16+
Test
17+
</Badge>,
18+
);
19+
expect(screen.getByTestId("dt-left-icon")).toBeInTheDocument();
20+
expect(screen.getByTestId("dt-right-icon")).toBeInTheDocument();
21+
});
22+
23+
it("applies custom class", () => {
24+
render(
25+
<Badge isBold={false} className="custom-class">
26+
Test
27+
</Badge>,
28+
);
29+
expect(document.querySelector(".custom-class")).toBeInTheDocument();
30+
});
31+
32+
it("applies color variant class", () => {
33+
render(
34+
<Badge isBold={false} color="blue">
35+
Test
36+
</Badge>,
37+
);
38+
expect(
39+
document.querySelector(".deriv-badge__color--blue"),
40+
).toBeInTheDocument();
41+
});
42+
43+
it("applies padding variant class", () => {
44+
render(
45+
<Badge isBold={false} padding="loose">
46+
Test
47+
</Badge>,
48+
);
49+
expect(
50+
document.querySelector(".deriv-badge__size--loose"),
51+
).toBeInTheDocument();
52+
});
53+
54+
it("applies badge size class", () => {
55+
render(
56+
<Badge isBold={false} badgeSize="lg">
57+
Test
58+
</Badge>,
59+
);
60+
expect(
61+
document.querySelector(".deriv-badge__padding--lg"),
62+
).toBeInTheDocument();
63+
});
64+
65+
it("applies bold text class", () => {
66+
render(<Badge isBold={true}>Test</Badge>);
67+
expect(screen.getByText("Test")).toHaveClass(
68+
"derivs-text__weight--bold",
69+
);
70+
});
71+
72+
it("applies variant class", () => {
73+
render(
74+
<Badge isBold={false} variant="bordered">
75+
Test
76+
</Badge>,
77+
);
78+
expect(
79+
document.querySelector(".deriv-badge__variant--bordered"),
80+
).toBeInTheDocument();
81+
});
82+
});

‎src/components/Badge/index.tsx

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { ComponentProps, ReactElement, ReactNode,forwardRef } from "react";
2+
import clsx from "clsx";
3+
import { TGenericSizes } from "../../types";
4+
import { Text } from "../Text";
5+
import "./Badge.scss";
6+
7+
type TVariant = "contained" | "bordered";
8+
type TColor =
9+
| "blue"
10+
| "light-blue"
11+
| "general"
12+
| "purple"
13+
| "success"
14+
| "warning"
15+
| "danger"
16+
| "gold"
17+
| "green"
18+
type TPadding = "tight" | "loose";
19+
20+
interface BadgeProps extends ComponentProps<"div"> {
21+
badgeSize?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
22+
children: ReactNode;
23+
color?: TColor;
24+
isBold?: boolean;
25+
rightIcon?: ReactElement;
26+
leftIcon?: ReactElement;
27+
padding?: TPadding;
28+
rounded?: Extract<TGenericSizes, "lg" | "md" | "sm">;
29+
textSize?: ComponentProps<typeof Text>["size"];
30+
variant?: TVariant;
31+
}
32+
33+
const BadgeVariants = {
34+
contained: "deriv-badge__variant--contained",
35+
bordered: "deriv-badge__variant--bordered",
36+
} as const;
37+
38+
const PaddingVariants = {
39+
tight: "deriv-badge__size--tight",
40+
loose: "deriv-badge__size--loose",
41+
} as const;
42+
43+
const BadgeColor = {
44+
blue: "deriv-badge__color--blue",
45+
"light-blue": "deriv-badge__color--lightblue",
46+
general: "deriv-badge__color--general",
47+
purple: "deriv-badge__color--purple",
48+
success: "deriv-badge__color--success",
49+
warning: "deriv-badge__color--warning",
50+
danger: "deriv-badge__color--danger",
51+
gold: "deriv-badge__color--gold",
52+
green: "deriv-badge__color--green",
53+
} as const;
54+
55+
const BadgeSize = {
56+
lg: "deriv-badge__padding--lg",
57+
md: "deriv-badge__padding--md",
58+
sm: "deriv-badge__padding--sm",
59+
xs: "deriv-badge__padding--xs",
60+
} as const;
61+
62+
const BadgeRounded = {
63+
lg: "deriv-badge__rounded--lg",
64+
md: "deriv-badge__rounded--md",
65+
sm: "deriv-badge__rounded--sm",
66+
} as const;
67+
68+
const FontSize = {
69+
lg: "lg",
70+
md: "md",
71+
sm: "sm",
72+
xs: "xs",
73+
} as const;
74+
75+
export const Badge = forwardRef<HTMLDivElement, BadgeProps>(({
76+
children,
77+
className,
78+
color = "general",
79+
isBold = false,
80+
leftIcon,
81+
padding = "tight",
82+
rightIcon,
83+
rounded = "sm",
84+
badgeSize = "md",
85+
textSize,
86+
variant = "contained",
87+
...rest
88+
}: BadgeProps,ref) => {
89+
return (
90+
<>
91+
<div
92+
ref={ref}
93+
className={clsx(
94+
"deriv-badge",
95+
BadgeVariants[variant],
96+
BadgeColor[color],
97+
PaddingVariants[padding],
98+
BadgeSize[badgeSize],
99+
BadgeRounded[rounded],
100+
{
101+
"deriv-badge__variant--bold-text": isBold,
102+
},
103+
className,
104+
)}
105+
{...rest}
106+
>
107+
{leftIcon}
108+
{children && (
109+
<Text
110+
align="center"
111+
size={textSize ?? FontSize[badgeSize]}
112+
weight={isBold ? "bold" : "normal"}
113+
as="span"
114+
>
115+
{children}
116+
</Text>
117+
)}
118+
{rightIcon}
119+
</div>
120+
</>
121+
);
122+
});

‎src/components/Dialog/__test__/Dialog.spec.tsx

+73-71
Original file line numberDiff line numberDiff line change
@@ -5,75 +5,77 @@ import { Dialog } from "..";
55
import { DialogHeader } from "../DialogHeader";
66

77
describe("Dialog component", () => {
8-
it("should render the basic dialog without header, footer and body", () => {
9-
render(
10-
<Dialog isOpen={true}>
11-
<p>This is some dialog content</p>
12-
</Dialog>,
13-
);
14-
15-
const dialog = screen.getByText("This is some dialog content");
16-
17-
expect(dialog).toBeInTheDocument();
18-
});
19-
20-
it("should render dialog header", () => {
21-
render(
22-
<Dialog isOpen={true}>
23-
<Dialog.Header hideCloseIcon={false} title={"Dialog Title"} />
24-
</Dialog>,
25-
);
26-
27-
const dialogHeader = screen.getByText("Dialog Title");
28-
const dialogCloseIcon = screen.queryByTestId("dt-close-icon");
29-
30-
expect(dialogHeader).toBeInTheDocument();
31-
expect(dialogCloseIcon).toBeDefined();
32-
});
33-
34-
it("should render the dialog header without close icon ", () => {
35-
render(
36-
<Dialog isOpen={true}>
37-
<Dialog.Header hideCloseIcon={true} title={"Dialog Title"} />
38-
</Dialog>,
39-
);
40-
41-
const dialogHeader = screen.getByText("Dialog Title");
42-
const dialogCloseIcon = screen.queryByTestId("dt-close-icon");
43-
44-
expect(dialogHeader).toBeInTheDocument();
45-
expect(dialogCloseIcon).not.toBeInTheDocument();
46-
});
47-
48-
49-
it("should render dialog Footer", () => {
50-
render(
51-
<Dialog isOpen={true}>
52-
<Dialog.Footer>Dialog Footer</Dialog.Footer>
53-
</Dialog>,
54-
);
55-
56-
const dialogFooter = screen.getByText("Dialog Footer");
57-
58-
expect(dialogFooter).toBeInTheDocument();
59-
});
60-
61-
it("should close the modal when the close button in header is clicked", async () => {
62-
render(
63-
<Dialog isOpen={true}>
64-
<DialogHeader title={" Modal Title"} hideCloseIcon={false}></DialogHeader>
65-
<Dialog.Body>
66-
<p>This is some dialog content</p>
67-
</Dialog.Body>
68-
</Dialog>,
69-
);
70-
71-
const modal = await screen.getByText("This is some dialog content");
72-
73-
const modalCloseIcon = screen.getByTestId("dt-close-icon");
74-
75-
await userEvent.click(modalCloseIcon);
76-
77-
expect(modal).toBeInTheDocument();
78-
});
8+
it("should render the basic dialog without header, footer and body", () => {
9+
render(
10+
<Dialog isOpen={true}>
11+
<p>This is some dialog content</p>
12+
</Dialog>,
13+
);
14+
15+
const dialog = screen.getByText("This is some dialog content");
16+
17+
expect(dialog).toBeInTheDocument();
18+
});
19+
20+
it("should render dialog header", () => {
21+
render(
22+
<Dialog isOpen={true}>
23+
<Dialog.Header hideCloseIcon={false}>Dialog Title</Dialog.Header>
24+
</Dialog>,
25+
);
26+
27+
const dialogHeader = screen.getByText("Dialog Title");
28+
const dialogCloseIcon = screen.queryByTestId("dt-close-icon");
29+
30+
expect(dialogHeader).toBeInTheDocument();
31+
expect(dialogCloseIcon).toBeDefined();
32+
});
33+
34+
it("should render the dialog header without close icon ", () => {
35+
render(
36+
<Dialog isOpen={true}>
37+
<Dialog.Header hideCloseIcon={true} >Dialog Title</Dialog.Header>
38+
</Dialog>,
39+
);
40+
41+
const dialogHeader = screen.getByText("Dialog Title");
42+
const dialogCloseIcon = screen.queryByTestId("dt-close-icon");
43+
44+
expect(dialogHeader).toBeInTheDocument();
45+
expect(dialogCloseIcon).not.toBeInTheDocument();
46+
});
47+
48+
it("should render dialog Footer", () => {
49+
render(
50+
<Dialog isOpen={true}>
51+
<Dialog.Footer>Dialog Footer</Dialog.Footer>
52+
</Dialog>,
53+
);
54+
55+
const dialogFooter = screen.getByText("Dialog Footer");
56+
57+
expect(dialogFooter).toBeInTheDocument();
58+
});
59+
60+
it("should close the modal when the close button in header is clicked", async () => {
61+
render(
62+
<Dialog isOpen={true}>
63+
<DialogHeader
64+
title={" Modal Title"}
65+
hideCloseIcon={false}
66+
></DialogHeader>
67+
<Dialog.Body>
68+
<p>This is some dialog content</p>
69+
</Dialog.Body>
70+
</Dialog>,
71+
);
72+
73+
const modal = await screen.getByText("This is some dialog content");
74+
75+
const modalCloseIcon = screen.getByTestId("dt-close-icon");
76+
77+
await userEvent.click(modalCloseIcon);
78+
79+
expect(modal).toBeInTheDocument();
80+
});
7981
});

0 commit comments

Comments
 (0)