diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
new file mode 100644
index 000000000000..ccad8a4317c1
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaDescription } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaDescription', () => {
+ it('should render children inside of proper MediaDescription div container with className', () => {
+ render({test_children});
+ const test_props_children = screen.getByText(test_children);
+
+ expect(test_props_children).toBeInTheDocument();
+ expect(test_props_children).toHaveClass('media__description');
+ });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
new file mode 100644
index 000000000000..acb7f14dab68
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaHeading } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaHeading', () => {
+ it('should render children inside of proper MediaHeading div container with className', () => {
+ render({test_children});
+ const test_props_children = screen.getByText(test_children);
+
+ expect(test_props_children).toBeInTheDocument();
+ expect(test_props_children).toHaveClass('media__heading');
+ });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
new file mode 100644
index 000000000000..d87bdfd29a27
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaIcon } from 'App/Components/Elements/Media';
+
+const test_disabled = 'Interval Duration Disabled Light Icon';
+const test_enabled = 'Interval Duration Enabled Light Icon';
+const mock_props = {
+ disabled: jest.fn(() =>
{test_disabled}
),
+ enabled: jest.fn(() => {test_enabled}
),
+ id: 'test_id',
+ is_enabled: true,
+};
+
+describe('MediaIcon', () => {
+ it('should render MediaIcon component with enabled SVG if is_enabled === true', () => {
+ render();
+
+ expect(screen.getByText(test_enabled)).toBeInTheDocument();
+ });
+ it('should render MediaIcon component with disabled SVG if is_enabled === false', () => {
+ render();
+
+ expect(screen.getByText(test_disabled)).toBeInTheDocument();
+ });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
new file mode 100644
index 000000000000..2770cd33fad3
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MediaItem from '../media-item';
+
+const test_children = 'Test Children';
+
+describe('MediaItem', () => {
+ it('should render children inside of proper MediaItem div container with className', () => {
+ render({test_children});
+ const test_props_children = screen.getByText(test_children);
+
+ expect(test_props_children).toBeInTheDocument();
+ expect(test_props_children).toHaveClass('media');
+ });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.js
deleted file mode 100644
index ce221026b9e0..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import MediaItem from './media-item.jsx';
-
-export * from './media-description.jsx';
-export * from './media-heading.jsx';
-export * from './media-icon.jsx';
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/index.ts b/packages/trader/src/App/Components/Elements/Media/index.ts
new file mode 100644
index 000000000000..16f58a9fb22e
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/index.ts
@@ -0,0 +1,6 @@
+import MediaItem from './media-item';
+
+export * from './media-description';
+export * from './media-heading';
+export * from './media-icon';
+export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.jsx b/packages/trader/src/App/Components/Elements/Media/media-description.jsx
deleted file mode 100644
index 36c190dd4dd4..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-description.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaDescription = props => {props.children}
;
-
-export { MediaDescription };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.tsx b/packages/trader/src/App/Components/Elements/Media/media-description.tsx
new file mode 100644
index 000000000000..41b4b6a66644
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-description.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MediaDescription = ({ children }: React.PropsWithChildren) => (
+ {children}
+);
+
+export { MediaDescription };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx b/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
deleted file mode 100644
index 68e63deb8f4d..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaHeading = props => {props.children}
;
-
-export { MediaHeading };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx
new file mode 100644
index 000000000000..5105497b3588
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaHeading = ({ children }: React.PropsWithChildren) => {children}
;
+
+export { MediaHeading };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx b/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
deleted file mode 100644
index 645eeb88256a..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const MediaIcon = ({ id, is_enabled, enabled, disabled }) => {
- const Icon = is_enabled ? enabled : disabled;
- return ;
-};
-
-MediaIcon.propTypes = {
- disabled: PropTypes.func,
- enabled: PropTypes.func,
- id: PropTypes.string,
- is_enabled: PropTypes.bool,
-};
-
-export { MediaIcon };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx
new file mode 100644
index 000000000000..a4d7c5c0b4ac
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type TMediaIcon = {
+ disabled: React.ComponentType>;
+ enabled: React.ComponentType>;
+ id: string;
+ is_enabled: boolean;
+};
+const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => {
+ const Icon = is_enabled ? enabled : disabled;
+ return ;
+};
+
+export { MediaIcon };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.jsx b/packages/trader/src/App/Components/Elements/Media/media-item.jsx
deleted file mode 100644
index 6347c10d720e..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-item.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaItem = props => {props.children}
;
-
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.tsx b/packages/trader/src/App/Components/Elements/Media/media-item.tsx
new file mode 100644
index 000000000000..0d0ded93016b
--- /dev/null
+++ b/packages/trader/src/App/Components/Elements/Media/media-item.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaItem = ({ children }: React.PropsWithChildren) => {children}
;
+
+export default MediaItem;