Merge pull request #5596 from penpot/xaviju-9419-swatch-storybook

[TOKENS] 📚 Add gradients to storybook swatch component

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}))
+

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

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
 
 <Canvas of={SwatchStories.Default} />
 
-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)
 
 <Canvas of={SwatchStories.WithOpacity} />
 
-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)
 
-<Canvas of={SwatchStories.Small} />
-
-With the `active` property, we can display the element as being active
-
-<Canvas of={SwatchStories.Active} />
+<Canvas of={SwatchStories.LinearGradient} />
+<Canvas of={SwatchStories.RadialGradient} />
 
 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.
 
 <Canvas of={SwatchStories.Clickable} />
 
-> 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

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