From 4ecaaba1e56a4c6851b193c01222dea18ae7a5e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 09:19:04 +0200 Subject: [PATCH] :sparkles: Add RawSvg component to the design system --- frontend/.storybook/preview.js | 4 ++ frontend/src/app/main/ui/ds.cljs | 4 +- .../app/main/ui/ds/foundations/raw_svg.clj | 21 +++++++++ .../app/main/ui/ds/foundations/raw_svg.cljs | 37 ++++++++++++++++ .../ui/ds/foundations/raw_svg.stories.jsx | 43 +++++++++++++++++++ frontend/src/app/main/ui/ds/storybook.cljs | 9 ++-- frontend/src/app/main/ui/ds/storybook.scss | 6 ++- 7 files changed, 119 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/main/ui/ds/foundations/raw_svg.clj create mode 100644 frontend/src/app/main/ui/ds/foundations/raw_svg.cljs create mode 100644 frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index 132a20918..c8ce13857 100644 --- a/frontend/.storybook/preview.js +++ b/frontend/.storybook/preview.js @@ -19,6 +19,10 @@ const preview = { name: "light", value: "#fff", }, + { + name: "debug", + value: "#ccc", + }, ], }, }, diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index a644e71f6..53eb82897 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/frontend/src/app/main/ui/ds.cljs @@ -7,11 +7,13 @@ (ns app.main.ui.ds (:require [app.main.ui.ds.foundations.icon :refer [icon* icon-list]] + [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]] [app.main.ui.ds.storybook :as sb])) (def default "A export used for storybook" #js {:Icon icon* + :RawSvg raw-svg* ;; meta / misc - :meta #js {:icons icon-list} + :meta #js {:icons icon-list :svgs raw-svg-list} :storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}}) diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.clj b/frontend/src/app/main/ui/ds/foundations/raw_svg.clj new file mode 100644 index 000000000..2ba5104ae --- /dev/null +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.clj @@ -0,0 +1,21 @@ +;; 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.foundations.raw-svg + (:require + [clojure.core :as c] + [cuerdas.core :as str] + [rumext.v2])) + +(defmacro collect-raw-svgs + [] + (let [ns-info (:ns &env)] + `(cljs.core/js-obj + ~@(->> (:defs ns-info) + (map val) + (filter (fn [entry] (-> entry :meta :svg-id))) + (mapcat (fn [{:keys [name]}] + [(-> name c/name str/camel str/capital) name])))))) diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs new file mode 100644 index 000000000..0de183215 --- /dev/null +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs @@ -0,0 +1,37 @@ +;; 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.foundations.raw-svg + (:refer-clojure :exclude [mask]) + (:require-macros + [app.common.data.macros :as dm] + [app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]]) + (:require + [rumext.v2 :as mf])) + +(def ^:svg-id brand-openid "brand-openid") +(def ^:svg-id brand-github "brand-github") +(def ^:svg-id brand-gitlab "brand-gitlab") +(def ^:svg-id brand-google "brand-google") + +(def ^:svg-id loader "loader") +(def ^:svg-id logo "penpot-logo") +(def ^:svg-id logo-icon "penpot-logo-icon") +(def ^:svg-id logo-error-screen "logo-error-screen") +(def ^:svg-id login-illustration "login-illustration") + +(def ^:svg-id v2-icon-1 "v2-icon-1") +(def ^:svg-id v2-icon-2 "v2-icon-2") +(def ^:svg-id v2-icon-3 "v2-icon-3") +(def ^:svg-id v2-icon-4 "v2-icon-4") + +(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs)) + +(mf/defc raw-svg* + {::mf/props :obj} + [{:keys [asset] :rest props}] + [:> "svg" props + [:use {:href (dm/str "#asset-" asset)}]]) diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx new file mode 100644 index 000000000..6f6beb37b --- /dev/null +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx @@ -0,0 +1,43 @@ +import * as React from "react"; +import Components from "@target/components"; + +const { RawSvg } = Components; +const { StoryWrapper, IconGrid } = Components.storybook; +const { svgs } = Components.meta; + +export default { + title: "Foundations/RawSvg", + component: Components.RawSvg, +}; + +const assetList = Object.entries(svgs) + .map(([_, value]) => value) + .sort(); + +export const AllAssets = { + render: () => ( + +

All assets

+

Hover on a asset to see its id.

+ + + {assetList.map(x => ( +
+ +
+ ))} + + + ), + parameters: { + backgrounds: { default: "debug" } + } +} + +export const Default = { + render: () => ( + + + + ), +} diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs index 6aa0498cc..846b0b0e5 100644 --- a/frontend/src/app/main/ui/ds/storybook.cljs +++ b/frontend/src/app/main/ui/ds/storybook.cljs @@ -6,7 +6,9 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.ds.storybook - (:require-macros [app.main.style :as stl]) + (:require-macros + [app.common.data.macros :as dm] + [app.main.style :as stl]) (:require [rumext.v2 :as mf])) @@ -22,5 +24,6 @@ (mf/defc icon-grid* {::mf/props :obj} - [{:keys [children]}] - [:article {:class (stl/css :icon-grid)} children]) \ No newline at end of file + [{:keys [children size]}] + [:article {:class (stl/css :icon-grid) + :style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children]) \ No newline at end of file diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss index 05e1c8191..84076c8f8 100644 --- a/frontend/src/app/main/ui/ds/storybook.scss +++ b/frontend/src/app/main/ui/ds/storybook.scss @@ -7,7 +7,11 @@ .icon-grid { display: grid; - grid-template-columns: repeat(auto-fit, 16px); + grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px)); gap: 1rem; color: var(--color-foreground-primary); + + & > * { + max-width: 100%; + } }