From 87131a55b430a05d5b91d22f45a9531244839426 Mon Sep 17 00:00:00 2001
From: Pivi Lartisant <90157528+pivilartisant@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:56:39 +0100
Subject: [PATCH] add fetching component (#395)

---
 src/components/Fetching/Fetch.stories.tsx | 36 +++++++++++++++++++++
 src/components/Fetching/Fetching.test.tsx | 38 +++++++++++++++++++++++
 src/components/Fetching/Fetching.tsx      | 36 +++++++++++++++++++++
 src/components/Fetching/index.ts          |  1 +
 src/components/index.ts                   |  1 +
 5 files changed, 112 insertions(+)
 create mode 100644 src/components/Fetching/Fetch.stories.tsx
 create mode 100644 src/components/Fetching/Fetching.test.tsx
 create mode 100644 src/components/Fetching/Fetching.tsx
 create mode 100644 src/components/Fetching/index.ts

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: () => (
+    <div data-testid="fi-sun">
+      <FetchingRound />
+    </div>
+  ),
+};
+
+export const _FetchingLine = {
+  render: () => (
+    <div data-testid="fi-sun">
+      <FetchingLine />
+    </div>
+  ),
+};
+
+export const _FetchingStatus = {
+  render: () => (
+    <div data-testid="fi-sun">
+      <FetchingStatus>
+        <p>foo</p>
+      </FetchingStatus>
+    </div>
+  ),
+};
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(<FetchingRound />);
+
+    let fetchingRound = screen.getByTestId('fetching-round');
+
+    expect(fetchingRound).toBeInTheDocument();
+  });
+});
+
+describe('Components | Fetching | Fetching Line', () => {
+  test('it should render', () => {
+    render(<FetchingLine />);
+
+    let fetchingLine = screen.getByTestId('fetching-line');
+
+    expect(fetchingLine).toBeInTheDocument();
+  });
+});
+
+describe('Components | Fetching | Fetching Status', () => {
+  test('it should render', () => {
+    render(
+      <FetchingStatus>
+        {' '}
+        <p>foo</p>
+      </FetchingStatus>,
+    );
+
+    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 (
+    <span data-testid="fetching-round" className="relative flex h-3 w-3">
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-s-success opacity-75"></span>
+      <span className="relative inline-flex rounded-full h-3 w-3 bg-s-success"></span>
+    </span>
+  );
+}
+
+export function FetchingLine() {
+  return (
+    <div data-testid="fetching-line" className="shadow rounded-md w-24 pt-0.5">
+      <div className="animate-pulse flex">
+        <div className="flex-1 space-y-6 py-1">
+          <div className="h-2 bg-c-disabled-1 rounded"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FetchingStatus({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-testid="fetching-status"
+      className="bg-tertiary rounded-full w-fit px-3 pb-0.5 opacity-30"
+    >
+      {children}
+    </div>
+  );
+}
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';