Merge pull request #4870 from penpot/eva-add-loader-component-to-ds

✨  Add loader component to ds

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

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"}]]]))

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;
+}

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>
+  ),
+};