From 8e078c87c2bef17825f762dafafe9b35bdbc64fc Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 6 Mar 2023 15:56:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20Loader=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first use of this loader will be inside the DataGrid for its
loading state. Its colors are based on the existing primary
colors tokens.
---
 .../react/src/components/Loader/index.scss    | 34 +++++++++++++++++++
 .../src/components/Loader/index.stories.tsx   | 13 +++++++
 .../react/src/components/Loader/index.tsx     |  9 +++++
 packages/react/src/index.scss                 |  1 +
 packages/react/src/index.ts                   |  1 +
 5 files changed, 58 insertions(+)
 create mode 100644 packages/react/src/components/Loader/index.scss
 create mode 100644 packages/react/src/components/Loader/index.stories.tsx
 create mode 100644 packages/react/src/components/Loader/index.tsx

diff --git a/packages/react/src/components/Loader/index.scss b/packages/react/src/components/Loader/index.scss
new file mode 100644
index 0000000..c460a4d
--- /dev/null
+++ b/packages/react/src/components/Loader/index.scss
@@ -0,0 +1,34 @@
+.c__loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite
+}
+.c__loader::before , .c__loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 5px solid var(--c--theme--colors--primary-700);
+  animation: prixClipFix 2s linear infinite ;
+}
+.c__loader::after{
+  border-color: var(--c--theme--colors--primary-400);
+  animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
+  inset: 6px;
+}
+
+@keyframes rotate {
+  0%   {transform: rotate(0deg)}
+  100%   {transform: rotate(360deg)}
+}
+
+@keyframes prixClipFix {
+  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+}
\ No newline at end of file
diff --git a/packages/react/src/components/Loader/index.stories.tsx b/packages/react/src/components/Loader/index.stories.tsx
new file mode 100644
index 0000000..f45f8f4
--- /dev/null
+++ b/packages/react/src/components/Loader/index.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Loader } from "components/Loader/index";
+
+export default {
+  title: "Components/Loader (WIP)",
+  component: Loader,
+} as ComponentMeta<typeof Loader>;
+
+const Template: ComponentStory<typeof Loader> = () => <Loader />;
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/packages/react/src/components/Loader/index.tsx b/packages/react/src/components/Loader/index.tsx
new file mode 100644
index 0000000..b810d35
--- /dev/null
+++ b/packages/react/src/components/Loader/index.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+interface Props {
+  "aria-label"?: string;
+}
+
+export const Loader = (props: Props) => {
+  return <div className="c__loader" role="status" {...props} />;
+};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 06cdc1c..5254239 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -2,6 +2,7 @@
 @import '@openfun/cunningham-tokens/default-tokens';
 @import './components/Button';
 @import './components/Forms/Input';
+@import './components/Loader';
 @import './components/Pagination';
 
 * {
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 33c42a3..1b2aafb 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,5 +1,6 @@
 import "./index.scss";
 
 export * from "./components/Button";
+export * from "./components/Loader";
 export * from "./components/Pagination";
 export * from "./components/Provider";