From 271be57c9912c1f3c3d3792e416439c1df1aca37 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 10 Jul 2024 11:43:24 +0200
Subject: [PATCH] :sparkles: Add loader component to the ds

---
 frontend/src/app/main/ui/ds.cljs              |  2 +
 .../src/app/main/ui/ds/product/loader.cljs    | 38 +++++++++++++++++++
 .../src/app/main/ui/ds/product/loader.scss    | 25 ++++++++++++
 .../app/main/ui/ds/product/loader.stories.jsx | 18 +++++++++
 4 files changed, 83 insertions(+)
 create mode 100644 frontend/src/app/main/ui/ds/product/loader.cljs
 create mode 100644 frontend/src/app/main/ui/ds/product/loader.scss
 create mode 100644 frontend/src/app/main/ui/ds/product/loader.stories.jsx

diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs
index 150048e7a..43b1b6104 100644
--- a/frontend/src/app/main/ui/ds.cljs
+++ b/frontend/src/app/main/ui/ds.cljs
@@ -11,12 +11,14 @@
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
    [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default
   "A export used for storybook"
   #js {:Heading heading*
        :Icon icon*
+       :Loader loader*
        :RawSvg raw-svg*
        :Text text*
        ;; meta / misc
diff --git a/frontend/src/app/main/ui/ds/product/loader.cljs b/frontend/src/app/main/ui/ds/product/loader.cljs
new file mode 100644
index 000000000..8c6ad6ce9
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/product/loader.cljs
@@ -0,0 +1,38 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.ds.product.loader
+  (:require-macros
+   [app.common.data.macros :as dm]
+   [app.main.style :as stl])
+  (:require
+   [rumext.v2 :as mf]))
+
+(mf/defc loader*
+  {::mf/props :obj}
+  [{:keys [class width height title] :rest props}]
+  (let [class (dm/str (or class "") " " (stl/css :loader))
+        both-provided (and width height)
+        neither-provided (and (nil? width) (nil? height))
+        props (mf/spread-props props {:viewBox "0 0 677.34762 182.15429"
+                                      :role "status"
+                                      :width (or width "100px")
+                                      :height (or height "27px")
+                                      :class class})]
+    (assert (or both-provided neither-provided)
+            (dm/str "Invalid props: both 'width' and 'height' must be provided or neither. "
+                    "Received width: " width ", height: " height))
+    ;; TODO: Add a translated label insted of the title prop.    
+    (assert title
+            (dm/str "You must provide an accesible name for the component"))
+    [:> "svg" props
+     [:title title]
+     [:g
+      [:path {:d
+              "M128.273 0l-3.9 2.77L0 91.078l128.273 91.076 549.075-.006V.008L128.273 0zm20.852 30l498.223.006V152.15l-498.223.007V30zm-25 9.74v102.678l-49.033-34.813-.578-32.64 49.61-35.225z"}]
+      [:path {:class (stl/css :loader-line)
+              :d
+              "M134.482 157.147v25l518.57.008.002-25-518.572-.008z"}]]]))
diff --git a/frontend/src/app/main/ui/ds/product/loader.scss b/frontend/src/app/main/ui/ds/product/loader.scss
new file mode 100644
index 000000000..67564586e
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/product/loader.scss
@@ -0,0 +1,25 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@keyframes line-pencil {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-150px);
+  }
+}
+
+.loader {
+  --color-loader-foreground: var(--color-foreground-secondary);
+  fill: var(--color-loader-foreground);
+}
+
+.loader-line {
+  fill: var(--color-loader-foreground);
+  animation: line-pencil 0.8s infinite linear;
+}
diff --git a/frontend/src/app/main/ui/ds/product/loader.stories.jsx b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
new file mode 100644
index 000000000..963c3f254
--- /dev/null
+++ b/frontend/src/app/main/ui/ds/product/loader.stories.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Loader } = Components;
+const { StoryWrapper } = Components.storybook;
+
+export default {
+  title: "Product/Loader",
+  component: Components.Loader,
+};
+
+export const Default = {
+  render: () => (
+    <StoryWrapper theme="default">
+      <Loader title="Loading" />
+    </StoryWrapper>
+  ),
+};