diff --git a/frontend/src/app/main/ui/ds/helpers.cljs b/frontend/src/app/main/ui/ds/helpers.cljs
index 0e6ac6d73..7f52522aa 100644
--- a/frontend/src/app/main/ui/ds/helpers.cljs
+++ b/frontend/src/app/main/ui/ds/helpers.cljs
@@ -7,8 +7,11 @@
(ns app.main.ui.ds.helpers
"A collection of helpers for exporting them to be used on storybook code."
(:require
+ [app.common.uuid :refer [random]]
[rumext.v2 :as mf]))
(def default
(mf/object
- {:uuid parse-uuid}))
+ {:generate-uuid random
+ :keyword keyword}))
+
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.cljs b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
index 880cb55a2..1a6453b91 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.cljs
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.cljs
@@ -80,7 +80,10 @@
button-type (if (not read-only?) "button" nil)
size (or size "small")
active (or active false)
- gradient (:gradient background)
+ gradient-type (-> background :gradient :type)
+ gradient-stops (-> background :gradient :stops)
+ gradient-data {:type gradient-type
+ :stops gradient-stops}
image (:image background)
format (if id? "rounded" "square")
class (dm/str class " " (stl/css-case
@@ -100,9 +103,9 @@
[:> element-type props
(cond
- (some? gradient)
+ (some? gradient-type)
[:span {:class (stl/css :swatch-gradient)
- :style {:background-image (str gradient ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
+ :style {:background-image (str (uc/gradient->css gradient-data) ", repeating-conic-gradient(lightgray 0% 25%, white 0% 50%)")}}]
(some? image)
(let [uri (cfg/resolve-file-media image)]
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.mdx b/frontend/src/app/main/ui/ds/utilities/swatch.mdx
index bef929f07..16c8790bd 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.mdx
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.mdx
@@ -13,30 +13,25 @@ A swatch component can receive several props. The `background` prop is the most
## Variants
-If the background prop has a hex `color` value it will display a full swatch with a solid color
+If the background prop has a property `value` with an hex color value it will display a full swatch with a solid color
-If the background prop has a hex `color` value and an opacity value it will display a full swatch with a solid color on one side and the same color with the opacity applied on the other side. (default opacity: 1)
+If the background prop has a property `value` with an hex color value and a a property `opacity` it will display a full swatch with a solid color on one side and the same color with the opacity applied on the other side. (default opacity: 1)
-This component can take a size property to set the size of the swatch. In this case we can set it to `small` (default size: `medium`)
+If the background prop has a gradient property it will display a full swatch with the gradient (linear or radial)
-
-
-With the `active` property, we can display the element as being active
-
-
+
+
The element can also be interactive, and execute an external function. Typically, it launches the color picker. To make it an interactive button, it accepts an onClick function.
-> Due to technical issues regarding the transformation between Clojurescript and Javascript, we are unable to display:
+> Due to technical issues regarding how we display internal images in Penpot we cannot preview:
- - Swatches with gradients
- - Library Swatches
- Swatches with images
## Technical Notes
diff --git a/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx b/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
index cd5217df6..8a7aa5f14 100644
--- a/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
+++ b/frontend/src/app/main/ui/ds/utilities/swatch.stories.jsx
@@ -6,6 +6,7 @@
import * as React from "react";
import Components from "@target/components";
+import { helpers } from "@target/components";
import { action } from "@storybook/addon-actions";
const { Swatch } = Components;
@@ -38,61 +39,64 @@ export const Default = {};
export const WithOpacity = {
args: {
background: {
- color: "#7efff5",
+ color: "#2f226c",
opacity: 0.5,
},
},
};
-// These stories are disabled because the gradient and the UUID variants cannot be translated from cljs into JS
-// When the repo is updated to use the new version of rumext, these stories should be re-enabled and tested
-//
-// export const LinearGradient = {
-// args: {
-// background: {
-// gradient: {
-// type: "linear",
-// startX: 0,
-// startY: 0,
-// endX: 1,
-// endY: 0,
-// width: 1,
-// stops: [
-// {
-// color: "#fabada",
-// opacity: 1,
-// offset: 0,
-// },
-// {
-// color: "#cc0000",
-// opacity: 0.5,
-// offset: 1,
-// },
-// ],
-// },
-// },
-// },
-// };
+const stops = [
+ {
+ color: "#151035",
+ opacity: 1,
+ offset: 0,
+ },
+ {
+ color: "#2f226c",
+ opacity: 0.5,
+ offset: 1,
+ },
+];
-// export const Rounded = {
-// args: {
-// background: {
-// id: crypto.randomUUID(),
-// color: "#7efff5",
-// opacity: 0.5,
-// },
-// },
-// };
-
-export const Small = {
+export const LinearGradient = {
args: {
- size: "small",
+ background: {
+ gradient: {
+ type: helpers.keyword("linear"),
+ "start-x": 0,
+ "start-y": 0,
+ "end-x": 1,
+ "end-y": 0,
+ width: 1,
+ stops,
+ },
+ },
},
};
-export const Active = {
+export const RadialGradient = {
args: {
- active: true,
+ background: {
+ gradient: {
+ type: helpers.keyword("radial"),
+ "start-x": 0,
+ "start-y": 0,
+ "end-x": 1,
+ "end-y": 0,
+ width: 1,
+ stops,
+ },
+ },
+ },
+};
+
+export const Rounded = {
+ args: {
+ background: {
+ id: helpers.generateUuid(),
+ color: "#2f226c",
+ opacity: 0.5,
+ },
},
};