Add view mode to dashboard

This commit is contained in:
Pablo Alba 2024-09-26 16:28:31 +02:00
parent c841ed6419
commit cf150891df
36 changed files with 699 additions and 240 deletions

View file

@ -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);

View file

@ -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))

View file

@ -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

View file

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

View file

@ -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);
}

View file

@ -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,
},
};