diff --git a/src/components/Fetching/Fetch.stories.tsx b/src/components/Fetching/Fetch.stories.tsx new file mode 100644 index 00000000..b49515a5 --- /dev/null +++ b/src/components/Fetching/Fetch.stories.tsx @@ -0,0 +1,36 @@ +// https://react-icons.github.io/react-icons/icons?name=fi +// https://github.com/react-icons/react-icons + +import { FetchingLine, FetchingRound, FetchingStatus } from './Fetching'; + +export default { + title: 'Components/Fetching', +}; + +// to render the icon +// set icon color, size... etc using className and then normal tailwind presents +export const _FetchingRound = { + render: () => ( +
+ +
+ ), +}; + +export const _FetchingLine = { + render: () => ( +
+ +
+ ), +}; + +export const _FetchingStatus = { + render: () => ( +
+ +

foo

+
+
+ ), +}; diff --git a/src/components/Fetching/Fetching.test.tsx b/src/components/Fetching/Fetching.test.tsx new file mode 100644 index 00000000..122a8854 --- /dev/null +++ b/src/components/Fetching/Fetching.test.tsx @@ -0,0 +1,38 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import { FetchingLine, FetchingRound, FetchingStatus } from './Fetching'; + +describe('Components | Fetching | Fetching Round', () => { + test('it should render', () => { + render(); + + let fetchingRound = screen.getByTestId('fetching-round'); + + expect(fetchingRound).toBeInTheDocument(); + }); +}); + +describe('Components | Fetching | Fetching Line', () => { + test('it should render', () => { + render(); + + let fetchingLine = screen.getByTestId('fetching-line'); + + expect(fetchingLine).toBeInTheDocument(); + }); +}); + +describe('Components | Fetching | Fetching Status', () => { + test('it should render', () => { + render( + + {' '} +

foo

+
, + ); + + let fetchingStatus = screen.getByTestId('fetching-status'); + + expect(fetchingStatus).toBeInTheDocument(); + }); +}); diff --git a/src/components/Fetching/Fetching.tsx b/src/components/Fetching/Fetching.tsx new file mode 100644 index 00000000..23995b0d --- /dev/null +++ b/src/components/Fetching/Fetching.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore + +export function FetchingRound() { + return ( + + + + + ); +} + +export function FetchingLine() { + return ( +
+
+
+
+
+
+
+ ); +} + +export function FetchingStatus({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} diff --git a/src/components/Fetching/index.ts b/src/components/Fetching/index.ts new file mode 100644 index 00000000..dc0dc896 --- /dev/null +++ b/src/components/Fetching/index.ts @@ -0,0 +1 @@ +export * from '.'; diff --git a/src/components/index.ts b/src/components/index.ts index 50f9bf59..a9a5cd20 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -33,3 +33,4 @@ export * from './Tooltip'; export * from './Token'; export * from './Tag'; export * from './Accordion'; +export * from './Fetching';