From f05e1354ff2eef45f789bfd15ef5c4b2401a7b33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 09:17:05 +0200 Subject: [PATCH 1/7] :wrench: Add assets svg sprite generation --- .../resources/images/assets/brand-github.svg | 1 + .../resources/images/assets/brand-gitlab.svg | 1 + .../resources/images/assets/brand-google.svg | 1 + .../resources/images/assets/brand-openid.svg | 1 + frontend/resources/images/assets/loader.svg | 1 + .../images/assets/login-illustration.svg | 686 ++++++++++++++++++ .../images/assets/logo-error-screen.svg | 3 + .../images/assets/penpot-logo-icon.svg | 1 + .../resources/images/assets/penpot-logo.svg | 3 + .../resources/images/assets/v2-icon-1.svg | 1 + .../resources/images/assets/v2-icon-2.svg | 1 + .../resources/images/assets/v2-icon-3.svg | 1 + .../resources/images/assets/v2-icon-4.svg | 1 + frontend/resources/templates/index.mustache | 1 + .../resources/templates/preview-body.mustache | 2 + frontend/scripts/_helpers.js | 12 + 16 files changed, 717 insertions(+) create mode 100644 frontend/resources/images/assets/brand-github.svg create mode 100644 frontend/resources/images/assets/brand-gitlab.svg create mode 100644 frontend/resources/images/assets/brand-google.svg create mode 100644 frontend/resources/images/assets/brand-openid.svg create mode 100644 frontend/resources/images/assets/loader.svg create mode 100644 frontend/resources/images/assets/login-illustration.svg create mode 100644 frontend/resources/images/assets/logo-error-screen.svg create mode 100644 frontend/resources/images/assets/penpot-logo-icon.svg create mode 100644 frontend/resources/images/assets/penpot-logo.svg create mode 100644 frontend/resources/images/assets/v2-icon-1.svg create mode 100644 frontend/resources/images/assets/v2-icon-2.svg create mode 100644 frontend/resources/images/assets/v2-icon-3.svg create mode 100644 frontend/resources/images/assets/v2-icon-4.svg diff --git a/frontend/resources/images/assets/brand-github.svg b/frontend/resources/images/assets/brand-github.svg new file mode 100644 index 000000000..cfb34953e --- /dev/null +++ b/frontend/resources/images/assets/brand-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/brand-gitlab.svg b/frontend/resources/images/assets/brand-gitlab.svg new file mode 100644 index 000000000..591427ec6 --- /dev/null +++ b/frontend/resources/images/assets/brand-gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/brand-google.svg b/frontend/resources/images/assets/brand-google.svg new file mode 100644 index 000000000..eb61aab34 --- /dev/null +++ b/frontend/resources/images/assets/brand-google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/brand-openid.svg b/frontend/resources/images/assets/brand-openid.svg new file mode 100644 index 000000000..28dd05ed8 --- /dev/null +++ b/frontend/resources/images/assets/brand-openid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/loader.svg b/frontend/resources/images/assets/loader.svg new file mode 100644 index 000000000..ee1d9b96b --- /dev/null +++ b/frontend/resources/images/assets/loader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/login-illustration.svg b/frontend/resources/images/assets/login-illustration.svg new file mode 100644 index 000000000..6e6b7394a --- /dev/null +++ b/frontend/resources/images/assets/login-illustration.svg @@ -0,0 +1,686 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/resources/images/assets/logo-error-screen.svg b/frontend/resources/images/assets/logo-error-screen.svg new file mode 100644 index 000000000..7e71215fa --- /dev/null +++ b/frontend/resources/images/assets/logo-error-screen.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/assets/penpot-logo-icon.svg b/frontend/resources/images/assets/penpot-logo-icon.svg new file mode 100644 index 000000000..06adb5d44 --- /dev/null +++ b/frontend/resources/images/assets/penpot-logo-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/resources/images/assets/penpot-logo.svg b/frontend/resources/images/assets/penpot-logo.svg new file mode 100644 index 000000000..6439292bd --- /dev/null +++ b/frontend/resources/images/assets/penpot-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/assets/v2-icon-1.svg b/frontend/resources/images/assets/v2-icon-1.svg new file mode 100644 index 000000000..b39647eb1 --- /dev/null +++ b/frontend/resources/images/assets/v2-icon-1.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/assets/v2-icon-2.svg b/frontend/resources/images/assets/v2-icon-2.svg new file mode 100644 index 000000000..d384ee2ed --- /dev/null +++ b/frontend/resources/images/assets/v2-icon-2.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/assets/v2-icon-3.svg b/frontend/resources/images/assets/v2-icon-3.svg new file mode 100644 index 000000000..bfc88da6d --- /dev/null +++ b/frontend/resources/images/assets/v2-icon-3.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/assets/v2-icon-4.svg b/frontend/resources/images/assets/v2-icon-4.svg new file mode 100644 index 000000000..dc2443432 --- /dev/null +++ b/frontend/resources/images/assets/v2-icon-4.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index b5967f94d..7846bb111 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -41,6 +41,7 @@ {{> ../public/images/sprites/symbol/icons.svg }} {{> ../public/images/sprites/symbol/cursors.svg }} + {{> ../public/images/sprites/assets.svg }}
diff --git a/frontend/resources/templates/preview-body.mustache b/frontend/resources/templates/preview-body.mustache index 216552e61..4ade10b08 100644 --- a/frontend/resources/templates/preview-body.mustache +++ b/frontend/resources/templates/preview-body.mustache @@ -1 +1,3 @@ {{> ../public/images/sprites/symbol/icons.svg }} + +{{> ../public/images/sprites/assets.svg }} diff --git a/frontend/scripts/_helpers.js b/frontend/scripts/_helpers.js index 435531ca5..bdddf3442 100644 --- a/frontend/scripts/_helpers.js +++ b/frontend/scripts/_helpers.js @@ -312,6 +312,13 @@ async function generateSvgSprites() { "resources/public/images/sprites/symbol/cursors.svg", cursorsSprite, ); + + const assets = await findFiles("resources/images/assets/", isSvgFile); + const assetsSprite = await generateSvgSprite(assets, "asset-"); + await fs.writeFile( + "resources/public/images/sprites/assets.svg", + assetsSprite, + ); } async function generateTemplates() { @@ -330,9 +337,14 @@ async function generateTemplates() { "resources/public/images/sprites/symbol/cursors.svg", "utf8", ); + const assetsSprite = await fs.readFile( + "resources/public/images/sprites/assets.svg", + "utf-8", + ); const partials = { "../public/images/sprites/symbol/icons.svg": iconsSprite, "../public/images/sprites/symbol/cursors.svg": cursorsSprite, + "../public/images/sprites/assets.svg": assetsSprite, }; const pluginRuntimeUri = From 4ac18e2ef0316e78fa68b7f918c578a585253180 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 09:18:29 +0200 Subject: [PATCH 2/7] :bug: Fix cursors svg duplicating icons sprites --- frontend/scripts/_helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/scripts/_helpers.js b/frontend/scripts/_helpers.js index bdddf3442..ce6397e47 100644 --- a/frontend/scripts/_helpers.js +++ b/frontend/scripts/_helpers.js @@ -307,7 +307,7 @@ async function generateSvgSprites() { ); const cursors = await findFiles("resources/images/cursors/", isSvgFile); - const cursorsSprite = await generateSvgSprite(icons, "cursor-"); + const cursorsSprite = await generateSvgSprite(cursors, "cursor-"); await fs.writeFile( "resources/public/images/sprites/symbol/cursors.svg", cursorsSprite, From c52da573c59a604e7ab469613da29d029047c37e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 09:47:11 +0200 Subject: [PATCH 3/7] :paperclip: Fix react warning on icon* component --- frontend/src/app/main/ui/ds/foundations/icon.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/ds/foundations/icon.cljs b/frontend/src/app/main/ui/ds/foundations/icon.cljs index c325c065a..bf77f12b2 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.cljs +++ b/frontend/src/app/main/ui/ds/foundations/icon.cljs @@ -253,7 +253,7 @@ {::mf/props :obj} [{:keys [icon size class] :rest props}] (let [class (dm/str (or class "") " " (stl/css :icon)) - props (mf/spread props {:class class :width icon-size-m :height icon-size-m}) + props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m}) size-px (cond (= size "s") icon-size-s :else icon-size-m) offset (/ (- icon-size-m size-px) 2)] [:> "svg" props 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 4/7] :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%; + } } From 203a39f07cedda190b25b7eae157100bf7efb466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 10:45:45 +0200 Subject: [PATCH 5/7] :recycle: Rename IconGrid to StoryGrid (storybook helper component) --- frontend/src/app/main/ui/ds.cljs | 3 ++- frontend/src/app/main/ui/ds/foundations/icon.stories.jsx | 6 +++--- frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx | 6 +++--- frontend/src/app/main/ui/ds/storybook.cljs | 4 ++-- frontend/src/app/main/ui/ds/storybook.scss | 2 +- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index 53eb82897..10a84e5b8 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/frontend/src/app/main/ui/ds.cljs @@ -16,4 +16,5 @@ :RawSvg raw-svg* ;; meta / misc :meta #js {:icons icon-list :svgs raw-svg-list} - :storybook #js {:StoryWrapper sb/story-wrapper* :IconGrid sb/icon-grid*}}) + :storybook #js {:StoryGrid sb/story-grid* + :StoryWrapper sb/story-wrapper*}}) diff --git a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx index d143da7c3..db0b2c23c 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx @@ -2,7 +2,7 @@ import * as React from "react"; import Components from "@target/components"; const { Icon } = Components; -const { StoryWrapper, IconGrid } = Components.storybook; +const { StoryWrapper, StoryGrid } = Components.storybook; const { icons } = Components.meta; export default { @@ -19,13 +19,13 @@ export const AllIcons = {

All Icons

Hover on an icon to see its ID

- + {iconList.map((iconId) => (
))} - + ), }; 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 index 6f6beb37b..1717a64d0 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx @@ -2,7 +2,7 @@ import * as React from "react"; import Components from "@target/components"; const { RawSvg } = Components; -const { StoryWrapper, IconGrid } = Components.storybook; +const { StoryWrapper, StoryGrid } = Components.storybook; const { svgs } = Components.meta; export default { @@ -20,13 +20,13 @@ export const AllAssets = {

All assets

Hover on a asset to see its id.

- + {assetList.map(x => (
))} - + ), parameters: { diff --git a/frontend/src/app/main/ui/ds/storybook.cljs b/frontend/src/app/main/ui/ds/storybook.cljs index 846b0b0e5..3734f8410 100644 --- a/frontend/src/app/main/ui/ds/storybook.cljs +++ b/frontend/src/app/main/ui/ds/storybook.cljs @@ -22,8 +22,8 @@ [:section {:class "default"} children] [:section {:class "light"} children]])]) -(mf/defc icon-grid* +(mf/defc story-grid* {::mf/props :obj} [{:keys [children size]}] - [:article {:class (stl/css :icon-grid) + [:article {:class (stl/css :story-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 84076c8f8..edb36fdbb 100644 --- a/frontend/src/app/main/ui/ds/storybook.scss +++ b/frontend/src/app/main/ui/ds/storybook.scss @@ -5,7 +5,7 @@ row-gap: 1rem; } -.icon-grid { +.story-grid { display: grid; grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px)); gap: 1rem; From 5309da2eeef7376812226eed1fd007f439d4711c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 11:49:00 +0200 Subject: [PATCH 6/7] :paperclip: Add storybook helper components and improve current stories --- frontend/src/app/main/ui/ds.cljs | 2 ++ .../main/ui/ds/foundations/icon.stories.jsx | 24 ++++++++++----- .../ui/ds/foundations/raw_svg.stories.jsx | 29 ++++++++++--------- frontend/src/app/main/ui/ds/storybook.cljs | 24 +++++++++++++-- frontend/src/app/main/ui/ds/storybook.scss | 12 +++++--- 5 files changed, 64 insertions(+), 27 deletions(-) diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index 10a84e5b8..805f504ff 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/frontend/src/app/main/ui/ds.cljs @@ -17,4 +17,6 @@ ;; meta / misc :meta #js {:icons icon-list :svgs raw-svg-list} :storybook #js {:StoryGrid sb/story-grid* + :StoryGridCell sb/story-grid-cell* + :StoryHeader sb/story-header* :StoryWrapper sb/story-wrapper*}}) diff --git a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx index db0b2c23c..52bb1076c 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx @@ -2,7 +2,8 @@ import * as React from "react"; import Components from "@target/components"; const { Icon } = Components; -const { StoryWrapper, StoryGrid } = Components.storybook; +const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } = + Components.storybook; const { icons } = Components.meta; export default { @@ -17,23 +18,32 @@ const iconList = Object.entries(icons) export const AllIcons = { render: () => ( -

All Icons

-

Hover on an icon to see its ID

+ +

All Icons

+

Hover on an icon to see its ID

+ {iconList.map((iconId) => ( -
+ -
+ ))} ), + parameters: { + backgrounds: { disable: true }, + }, }; export const Default = { render: () => ( - + ), }; @@ -41,7 +51,7 @@ export const Default = { export const Small = { render: () => ( - + ), }; 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 index 1717a64d0..b73e6b56e 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx @@ -2,7 +2,8 @@ import * as React from "react"; import Components from "@target/components"; const { RawSvg } = Components; -const { StoryWrapper, StoryGrid } = Components.storybook; +const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } = + Components.storybook; const { svgs } = Components.meta; export default { @@ -16,28 +17,30 @@ const assetList = Object.entries(svgs) export const AllAssets = { render: () => ( - -

All assets

-

Hover on a asset to see its id.

+ + +

All assets

+

Hover on a asset to see its id.

+ - {assetList.map(x => ( -
- -
+ {assetList.map((x) => ( + + + ))} ), parameters: { - backgrounds: { default: "debug" } - } -} + backgrounds: { values: [{ name: "debug", value: "#ccc" }] }, + }, +}; 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 3734f8410..322dbe822 100644 --- a/frontend/src/app/main/ui/ds/storybook.cljs +++ b/frontend/src/app/main/ui/ds/storybook.cljs @@ -24,6 +24,24 @@ (mf/defc story-grid* {::mf/props :obj} - [{:keys [children size]}] - [:article {:class (stl/css :story-grid) - :style (when (some? size) #js {"--component-grid-size" (dm/str size "px")})} children]) \ No newline at end of file + [{:keys [children size style] :rest other}] + (let [class (stl/css :story-grid) + size (or size 16) + style (or style {}) + style (mf/spread style :--component-grid-size (dm/str size "px")) + props (mf/spread-props other {:class class :style style})] + [:> "article" props children])) + +(mf/defc story-grid-cell* + {::mf/props :obj} + [{:keys [children] :rest other}] + (let [class (stl/css :story-grid-cell) + props (mf/spread-props other {:class class})] + [:> "article" props children])) + +(mf/defc story-header* + {::mf/props :obj} + [{:keys [children] :rest other}] + (let [class (stl/css :story-header) + props (mf/spread-props other {:class class})] + [:> "header" props children])) diff --git a/frontend/src/app/main/ui/ds/storybook.scss b/frontend/src/app/main/ui/ds/storybook.scss index edb36fdbb..6d09f0167 100644 --- a/frontend/src/app/main/ui/ds/storybook.scss +++ b/frontend/src/app/main/ui/ds/storybook.scss @@ -10,8 +10,12 @@ grid-template-columns: repeat(auto-fit, var(--component-grid-size, 16px)); gap: 1rem; color: var(--color-foreground-primary); - - & > * { - max-width: 100%; - } +} + +.story-grid-cell { + max-width: 100%; +} + +.story-header { + color: var(--color-foreground-primary); } From 5d90c463a3a4c2a5c6021931ad840529cdd7ec19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Thu, 4 Jul 2024 14:48:57 +0200 Subject: [PATCH 7/7] :books: Add docs for RawSvg component --- .../app/main/ui/ds/foundations/raw_svg.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 frontend/src/app/main/ui/ds/foundations/raw_svg.mdx diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx b/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx new file mode 100644 index 000000000..0377ce51b --- /dev/null +++ b/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx @@ -0,0 +1,28 @@ +import { Canvas, Meta } from "@storybook/blocks"; +import * as RawSvgStories from "./raw_svg.stories"; + + + +# SVG Assets + +## Technical notes + +There are some SVG assets that are not icons or cursors, and that are mostly +meant to be used as is (although depending on the context, some will be required +to be used with a specific color or size). + +The assets are located in the `frontend/resources/images/assets` folder. + +### Using asset IDs + +For convenience, asset IDs are available in the component namespace. + +```clj +(ns app.main.ui.foo + (:require + [app.main.ui.ds.foundations.raw-svg :as svg])) +``` + +```clj +[:> svg/svg-asset* {:asset svg/logo}] +```