Skip to content

Commit fe4fff6

Browse files
yaswanth-derivyaswanth-deriv
authored
Merge branch 'deriv-com:main' into yaswanth/FEQ-1997_Adding_new_stories_for_badge
2 parents 80fc158 + 322d26b commit fe4fff6

35 files changed

+1051
-255
lines changed

‎README.md

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
# Deriv Ui Library (@deriv-com/ui)
2-
<img alt="NPM Version" src="https://img.shields.io/npm/v/@deriv-com/ui"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/@deriv-com/ui"> [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.png?v=101)](https://github.com/ellerbrock/typescript-badges/) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.png?v=102)](https://opensource.org/licenses/mit-license.php)
1+
# Deriv Ui Library (@deriv-com/ui)
2+
<img alt="NPM Version" src="https://img.shields.io/npm/v/@deriv-com/ui"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/@deriv-com/ui"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="@deriv-com/ui is released under the MIT license." /> [![Coverage Status](https://coveralls.io/repos/github/deriv-com/ui/badge.svg)](https://coveralls.io/github/deriv-com/ui)
33

44

55
## Overview
6-
This is a UI component library made for ReactJS that conforms to the [Deriv Design System](https://zeroheight.com/36313d3c8/p/439a5c-deriv-design-system). Explore our [Storybook](https://deriv-ui.pages.dev/) for for comprehensive development documentation .
6+
This is a UI component library made for ReactJS that conforms to the [Deriv Design System](https://zeroheight.com/36313d3c8/p/439a5c-deriv-design-system). Explore our [Storybook](https://deriv-ui.pages.dev/) for for comprehensive development documentation .
77

88
Also available on [npm](https://www.npmjs.com/package/@deriv-com/ui).
99

@@ -38,3 +38,10 @@ npm run storybook
3838

3939
## Contributing
4040
Contributions to the @deriv-com/ui library are warmly encouraged. If you have suggestions for enhancements or encounter a bug, please feel free to open an issue or submit a pull request (ensure you fork it first).
41+
42+
<a height="15" href = "https://github.com/deriv-com/ui/contributors">
43+
<img src = "https://contrib.rocks/image?repo=deriv-com/ui&anon=0&columns=20"/>
44+
</a>
45+
46+
47+

‎package-lock.json

+25-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+17-3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
"test": "jest",
3232
"test:report": "jest --collectCoverage"
3333
},
34+
"dependencies": {
35+
"@types/react-modal": "^3.16.3"
36+
},
3437
"devDependencies": {
3538
"@babel/preset-env": "^7.24.3",
3639
"@babel/preset-react": "^7.24.1",
@@ -53,9 +56,8 @@
5356
"@testing-library/user-event": "^14.5.2",
5457
"@types/jest": "^29.5.12",
5558
"@types/node": "^20.11.30",
56-
"@types/react": "^18.2.71",
59+
"@types/react": "^18.2.72",
5760
"@types/react-dom": "^18.2.22",
58-
"@types/react-modal": "^3.16.3",
5961
"@typescript-eslint/eslint-plugin": "^7.4.0",
6062
"@typescript-eslint/parser": "^7.4.0",
6163
"@vitejs/plugin-react": "^4.2.1",
@@ -82,6 +84,7 @@
8284
"storybook": "^8.0.4",
8385
"ts-jest": "^29.1.2",
8486
"typescript": "^5.4.3",
87+
"usehooks-ts": "^3.0.2",
8588
"vite": "^5.2.6",
8689
"vite-plugin-classname": "^0.0.3",
8790
"vite-plugin-dts": "^3.7.3",
@@ -115,6 +118,17 @@
115118
"moduleNameMapper": {
116119
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
117120
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.js"
118-
}
121+
},
122+
"collectCoverageFrom": [
123+
"./src/components/*/*.{ts,tsx}",
124+
"./src/hooks/*.{ts,tsx}",
125+
"!./src/hooks/index.ts",
126+
"!./node_modules/**",
127+
"!./dist/**",
128+
"!./stories/**",
129+
"!/vite.config.ts",
130+
"!./.storybook/**",
131+
"!./coverage/**"
132+
]
119133
}
120134
}

‎src/components/Accordion/Accordion.scss

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* Style the accordion section */
2+
$border: 1px solid var(--du-general-active);
3+
$animation-duration: 0.3s;
4+
5+
.deriv-accordion {
6+
position: relative;
7+
display: inline-flex;
8+
flex-direction: column;
9+
min-width: 100%;
10+
background-color: var(--du-general-main-2);
11+
padding: 24px;
12+
13+
&--compact {
14+
padding: 16px;
15+
}
16+
17+
&--underline {
18+
border-bottom: $border;
19+
}
20+
21+
&--shadow,
22+
&--bordered {
23+
border-radius: $border-radius-2;
24+
margin-bottom: 8px;
25+
26+
&:last-child {
27+
margin-bottom: 0;
28+
}
29+
}
30+
31+
&--bordered {
32+
border: $border;
33+
}
34+
35+
&--shadow {
36+
box-shadow: $deriv-box-shadow;
37+
}
38+
39+
&__header {
40+
outline: none;
41+
width: 100%;
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
color: var(--du-text-general);
46+
cursor: pointer;
47+
}
48+
49+
&__icon {
50+
margin-left: auto;
51+
display: inline-block;
52+
transition: all $animation-duration ease-in-out;
53+
54+
&--active {
55+
transform: rotate(-180deg);
56+
}
57+
}
58+
&__content {
59+
width: 100%;
60+
overflow: auto;
61+
opacity: 0;
62+
background-color: white;
63+
transition: all $animation-duration ease;
64+
65+
&--active {
66+
opacity: 1;
67+
}
68+
}
69+
70+
&__text {
71+
margin-top: 24px;
72+
color: var(--du-text-general);
73+
74+
&--compact {
75+
margin-top: 16px;
76+
}
77+
}
78+
}
79+
.accordion__section {
80+
position: relative;
81+
display: inline-flex;
82+
flex-direction: column;
83+
min-width: 100%;
84+
}

‎src/components/Accordion/Chevron.svg

+3
Loading

‎src/components/Accordion/__test__/Accordion.test.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import { Accordion } from "..";
4+
import userEvent from "@testing-library/user-event";
5+
6+
describe("Accordion", () => {
7+
it("renders correctly", () => {
8+
const { getByText } = render(
9+
<Accordion title="Test Title">Test Content</Accordion>,
10+
);
11+
12+
expect(getByText("Test Title")).toBeInTheDocument();
13+
});
14+
15+
it("opens and closes when the header is clicked", async () => {
16+
const { getByRole } = render(
17+
<Accordion title="Test Title">Test Content</Accordion>,
18+
);
19+
const button = getByRole("button");
20+
21+
expect(button).toHaveAttribute("aria-expanded", "false");
22+
23+
await userEvent.click(button);
24+
expect(button).toHaveAttribute("aria-expanded", "true");
25+
26+
await userEvent.click(button);
27+
expect(button).toHaveAttribute("aria-expanded", "false");
28+
});
29+
30+
it("opens by default when defaultOpen is passed", async () => {
31+
const { getByRole } = render(
32+
<Accordion title="Test Title" defaultOpen>
33+
Test Content
34+
</Accordion>,
35+
);
36+
const button = getByRole("button");
37+
expect(button).toHaveAttribute("aria-expanded", "true");
38+
39+
await userEvent.click(button);
40+
expect(button).toHaveAttribute("aria-expanded", "false");
41+
});
42+
43+
it("opens by default when defaultOpen is passed", async () => {
44+
const { getByRole } = render(
45+
<Accordion title="Test Title" defaultOpen>
46+
Test Content
47+
</Accordion>,
48+
);
49+
const button = getByRole("button");
50+
expect(button).toHaveAttribute("aria-expanded", "true");
51+
52+
await userEvent.click(button);
53+
expect(button).toHaveAttribute("aria-expanded", "false");
54+
});
55+
56+
it("renders correctly with underline variant", () => {
57+
const { container } = render(
58+
<Accordion title="Test Title" variant="underline">
59+
Test Content
60+
</Accordion>,
61+
);
62+
63+
expect(container.firstChild).toHaveClass("deriv-accordion--underline");
64+
});
65+
66+
it("renders correctly with bordered variant", () => {
67+
const { container } = render(
68+
<Accordion title="Test Title" variant="bordered">
69+
Test Content
70+
</Accordion>,
71+
);
72+
73+
expect(container.firstChild).toHaveClass("deriv-accordion--bordered");
74+
});
75+
76+
it("renders correctly with shadow variant", () => {
77+
const { container } = render(
78+
<Accordion title="Test Title" variant="shadow">
79+
Test Content
80+
</Accordion>,
81+
);
82+
83+
expect(container.firstChild).toHaveClass("deriv-accordion--shadow");
84+
});
85+
86+
it("renders correctly when isCompact is true", () => {
87+
const { container } = render(
88+
<Accordion title="Test Title" isCompact={true}>
89+
Test Content
90+
</Accordion>,
91+
);
92+
93+
expect(container.firstChild).toHaveClass("deriv-accordion--compact");
94+
});
95+
96+
it("renders correctly when isCompact is false", () => {
97+
const { container } = render(
98+
<Accordion title="Test Title" isCompact={false}>
99+
Test Content
100+
</Accordion>,
101+
);
102+
103+
expect(container.firstChild).not.toHaveClass(
104+
"deriv-accordion--compact",
105+
);
106+
});
107+
});

0 commit comments

Comments
 (0)