From af3caed43f3fa45bd37f1d797592d8ee3f7aaea8 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 22 Jun 2023 17:15:47 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20improve=20loader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add small size to the loader for the file uploader.
---
 .../react/src/components/Loader/index.scss    | 61 +++++++++++++------
 .../src/components/Loader/index.stories.tsx   | 14 +++--
 .../react/src/components/Loader/index.tsx     | 12 +++-
 3 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/components/Loader/index.scss b/packages/react/src/components/Loader/index.scss
index 258beba..61ab788 100644
--- a/packages/react/src/components/Loader/index.scss
+++ b/packages/react/src/components/Loader/index.scss
@@ -1,23 +1,50 @@
 .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;
+  animation: rotate 1s linear infinite;
+
+  &::before,
+  &::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: var(--c--theme--colors--primary-700);
+    animation: prixClipFix 2s linear infinite;
+  }
+
+  &::after {
+    border-color: var(--c--theme--colors--primary-400);
+    animation: prixClipFix 2s linear infinite,
+      rotate 0.5s linear infinite reverse;
+    inset: 6px;
+  }
+
+  span {
+    display: none;
+  }
+
+  &--small {
+    width: 24px;
+    height: 24px;
+
+    &::before,
+    &::after {
+      border-width: 2px;
+    }
+  }
+
+  &--medium {
+    width: 48px;
+    height: 48px;
+
+    &::before,
+    &::after {
+      border-width: 5px;
+    }
+  }
 }
 
 @keyframes rotate {
diff --git a/packages/react/src/components/Loader/index.stories.tsx b/packages/react/src/components/Loader/index.stories.tsx
index 22ef418..371385f 100644
--- a/packages/react/src/components/Loader/index.stories.tsx
+++ b/packages/react/src/components/Loader/index.stories.tsx
@@ -1,5 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Loader } from ":/components/Loader/index";
 
 export default {
@@ -7,9 +6,14 @@ export default {
   component: Loader,
 } as Meta<typeof Loader>;
 
-const Template: StoryFn<typeof Loader> = () => <Loader />;
+type Story = StoryObj<typeof Loader>;
 
-export const Default = {
-  render: Template,
+export const Medium: Story = {
   args: {},
 };
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+};
diff --git a/packages/react/src/components/Loader/index.tsx b/packages/react/src/components/Loader/index.tsx
index b810d35..d36006a 100644
--- a/packages/react/src/components/Loader/index.tsx
+++ b/packages/react/src/components/Loader/index.tsx
@@ -1,9 +1,17 @@
 import React from "react";
+import classNames from "classnames";
 
 interface Props {
   "aria-label"?: string;
+  size?: "small" | "medium";
 }
 
-export const Loader = (props: Props) => {
-  return <div className="c__loader" role="status" {...props} />;
+export const Loader = ({ size = "medium", ...props }: Props) => {
+  return (
+    <div
+      className={classNames("c__loader", "c__loader--" + size)}
+      role="status"
+      {...props}
+    />
+  );
 };