✨ Add view mode to dashboard

frontend/src/app/main/ui/ds/_sizes.scss

@@ -10,5 +10,8 @@
 $sz-16: px2rem(16);
 $sz-32: px2rem(32);
 $sz-36: px2rem(36);
+$sz-160: px2rem(160);
+$sz-200: px2rem(200);
 $sz-224: px2rem(224);
 $sz-400: px2rem(400);
+$sz-964: px2rem(964);

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs

@@ -25,6 +25,10 @@
 (def ^:svg-id marketing-layers "marketing-layers")
 (def ^:svg-id penpot-logo "penpot-logo")
 (def ^:svg-id penpot-logo-icon "penpot-logo-icon")
+(def ^:svg-id empty-placeholder-1-left "empty-placeholder-1-left")
+(def ^:svg-id empty-placeholder-1-right "empty-placeholder-1-right")
+(def ^:svg-id empty-placeholder-2-left "empty-placeholder-2-left")
+(def ^:svg-id empty-placeholder-2-right "empty-placeholder-2-right")
 
 (def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
 

frontend/src/app/main/ui/ds/notifications/toast.cljs

@@ -12,8 +12,6 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [rumext.v2 :as mf]))
 
-(def levels (set '("info" "warning" "error" "success")))
-
 (def ^:private icons-by-level
   {"info" i/info
    "warning" i/msg-neutral

frontend/src/app/main/ui/ds/product/empty_placeholder.cljs

@@ -0,0 +1,40 @@
+;; 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.empty-placeholder
+  (:require-macros
+   [app.common.data.macros :as dm]
+   [app.main.style :as stl])
+  (:require
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [rumext.v2 :as mf]))
+
+(def ^:private schema:empty-placeholder
+  [:map
+   [:class {:optional true} :string]
+   [:title :string]
+   [:subtitle {:optional true} [:maybe :string]]
+   [:type {:optional true} [:maybe [:enum 1 2]]]])
+
+(mf/defc empty-placeholder*
+  {::mf/props :obj
+   ::mf/schema schema:empty-placeholder}
+  [{:keys [class title subtitle type children] :rest props}]
+
+  (let [class (dm/str class " " (stl/css :empty-placeholder))
+        props (mf/spread-props props {:class class})
+        type  (or type 1)
+        decoration-type (dm/str "empty-placeholder-" (str type))]
+    [:> "div" props
+     [:> raw-svg* {:id (dm/str decoration-type "-left") :class (stl/css :svg-decor)}]
+     [:div {:class (stl/css :text-wrapper)}
+      [:> text* {:as "span" :typography t/title-medium :class (stl/css :placeholder-title)} title]
+      (when subtitle
+        [:> text* {:as "span" :typography t/body-large} subtitle])
+      children]
+     [:> raw-svg* {:id (dm/str decoration-type "-right") :class (stl/css :svg-decor)}]]))

frontend/src/app/main/ui/ds/product/empty_placeholder.scss

@@ -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
+
+@use "../_sizes.scss" as *;
+@use "../_borders.scss" as *;
+
+.empty-placeholder {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  place-content: center;
+  background: none;
+  color: var(--color-foreground-secondary);
+  height: $sz-160;
+  max-width: $sz-964;
+  border-radius: $br-8;
+  border: $b-1 solid var(--color-background-quaternary);
+}
+
+.text-wrapper {
+  display: grid;
+  grid-auto-rows: auto;
+  align-self: center;
+  justify-self: center;
+  max-width: $sz-400;
+}
+
+.placeholder-title {
+  color: var(--color-foreground-primary);
+}
+
+.svg-decor {
+  height: $sz-160;
+  width: $sz-200;
+  color: var(--color-background-quaternary);
+}

frontend/src/app/main/ui/ds/product/empty_placeholder.stories.jsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { EmptyPlaceholder } = Components;
+
+export default {
+  title: "Product/EmptyPlaceholder",
+  component: EmptyPlaceholder,
+  argTypes: {
+    title: {
+      control: { type: "text" },
+    },
+    type: {
+      control: "radio",
+      options: [1, 2],
+    },
+  },
+  args: {
+    type: 1,
+    title: "Lorem ipsum",
+    subtitle:
+      "dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+  render: ({ ...args }) => <EmptyPlaceholder {...args} />,
+};
+
+export const Default = {};
+
+export const AlternativeDecoration = {
+  args: {
+    type: 2,
+  },
+};