feat(look&feel): ajout des variantes de couleur du loader (#682)

* feat(look&feel): ajout des variantes de couleur du loader * feat(look&feel): création du mdx et mise à jour des stories du loader --------- Co-authored-by: Tanguy SINGEOT SOUSA <[email protected]>
AxaFrance · Dec 18, 2024 · 2c9068f · 2c9068f
1 parent d904696
commit 2c9068f
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 3 deletions.
diff --git a/look-and-feel/css/src/Loader/Loader.scss b/look-and-feel/css/src/Loader/Loader.scss
@@ -10,6 +10,21 @@
     align-items: center;
     justify-content: center;
     animation: spin 2s linear infinite;
+
+    &--blue {
+      border: solid color-mix(in srgb, var(--color-axa), transparent 80%);
+      border-top: solid var(--color-axa);
+    }
+
+    &--gray {
+      border: solid color-mix(in srgb, var(--color-gray), transparent 80%);
+      border-top: solid var(--color-gray);
+    }
+
+    &--white {
+      border: solid color-mix(in srgb, var(--color-white), transparent 80%);
+      border-top: solid var(--color-white);
+    }
   }
 }
 

diff --git a/look-and-feel/react/src/Loader/Loader.mdx b/look-and-feel/react/src/Loader/Loader.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs";
+import * as LoaderStories from "./Loader.stories";
+
+<Meta of={LoaderStories} name="Loader" />
+
+# Loader
+
+To use the loader import it like that:
+
+```tsx title="test.js"
+import { Loader } from "@axa-fr/design-system-look-and-feel-react";
+
+const MyComponent = () => (
+  <Loader size={60} border={5} variant="blue" text="Chargement en cours" />
+);
+```
+
+## Playground
+
+<Canvas of={LoaderStories.LoaderStory} />
+
+<Controls of={LoaderStories.LoaderStory} />
+
+## Variants
+
+Use the `variant` prop to change the look of the loader. The available variants are `"blue"` (default), `"gray"` and `"white"`. [See the examples](#examples-of-variants).
+
+## Examples of variants
+
+<Canvas of={LoaderStories.MultiExamples} layout="fullscreen" />
+
+For more information regarding the use of this component, you can refer to [the documentation and guidelines](https://zeroheight.com/54c5bd254/v/latest/p/892d26-spinner/b/44fc87) written by our UX and UI designers.
diff --git a/look-and-feel/react/src/Loader/Loader.stories.tsx b/look-and-feel/react/src/Loader/Loader.stories.tsx
@@ -18,3 +18,44 @@ export const LoaderStory: Story = {
     border: 5,
   },
 };
+
+export const LoaderGrayStory: Story = {
+  name: "Loader gray",
+  render: ({ ...args }) => <Loader {...args} />,
+  args: {
+    size: 60,
+    border: 5,
+    variant: "gray",
+  },
+};
+
+export const LoaderWhiteStory: Story = {
+  name: "Loader white",
+  render: ({ ...args }) => <Loader {...args} />,
+  args: {
+    size: 60,
+    border: 5,
+    variant: "white",
+  },
+};
+
+export const MultiExamples: StoryObj<typeof Loader> = {
+  name: "Loader examples",
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        alignItems: "center",
+        padding: "2rem",
+        flexWrap: "wrap",
+        gap: "2rem",
+        backgroundColor: "lightgray",
+      }}
+    >
+      <Loader variant="blue" />
+      <Loader variant="gray" />
+      <Loader variant="white" />
+    </div>
+  ),
+};
diff --git a/look-and-feel/react/src/Loader/Loader.tsx b/look-and-feel/react/src/Loader/Loader.tsx
@@ -1,27 +1,33 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
+import classNames from "classnames";
 
 type LoaderProps = {
   border?: number;
   size?: number;
+  variant?: "blue" | "gray" | "white";
   text?: string;
 };
 
 const Loader = ({
   border = 5,
   size = 60,
+  variant = "blue",
   text = "Chargement en cours",
 }: LoaderProps) => (
   <div
     role="alert"
     aria-busy
     aria-label={text}
     aria-live="assertive"
-    className="af-loader__container"
+    className={classNames(
+      "af-loader__container",
+      `af-loader__container--${variant}`,
+    )}
     style={{
       width: `${size}px`,
       height: `${size}px`,
-      border: `${border}px solid #f3f3f3`,
-      borderTop: `${border}px solid #00008f`,
+      borderWidth: `${border}px`,
+      borderTopWidth: `${border}px`,
     }}
   >
     <div className="af-loader__container-spin" aria-hidden="true" />