docs(Playground): use relative logo url, minor changes to code

mondaycom · Dec 17, 2024 · bc7a15b · bc7a15b
1 parent 87afb2d
commit bc7a15b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/packages/core/.storybook/preview.tsx b/packages/core/.storybook/preview.tsx
@@ -3,7 +3,6 @@ import * as VibeComponents from "../src/components";
 import * as VibeComponentsNext from "../src/components/next";
 import * as VibeHooks from "../src/hooks";
 import * as VibeIcons from "@vibe/icons";
-import vibeLogo from "./logo.svg";
 import { Preview } from "@storybook/react";
 import isChromatic from "chromatic/isChromatic";
 import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";
@@ -119,7 +118,6 @@ const preview: Preview = {
     playground: {
       storyId: "playground",
       components: {
-        vibeLogo,
         ...VibeComponents,
         VibeIcons,
         VibeNext: VibeComponentsNext,

diff --git a/packages/core/.storybook/logo.svg → packages/core/.storybook/static/logo.svg b/packages/core/.storybook/logo.svg → packages/core/.storybook/static/logo.svg
diff --git a/packages/core/.storybook/theme.js b/packages/core/.storybook/theme.js
@@ -1,9 +1,8 @@
 import { create } from "@storybook/theming/create";
-import logo from "./logo.svg";
 
 export default create({
   base: "light",
-  brandImage: logo,
+  brandImage: "/logo.svg",
   brandUrl: "https://vibe.monday.com",
   barSelectedColor: "#5034ff",
   brandTitle: "Vibe Design System",

diff --git a/packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts b/packages/core/src/storybook/stand-alone-documentaion/playground/playground-helpers.ts
@@ -6,24 +6,31 @@ export const jsx = `() => {
   }
 
   return (
-    <Flex direction="column" gap={40} className="playground">
-      <img src={vibeLogo} alt="Vibe Logo" className="vibe-logo" />
-      <section>
-        <Heading type="h3" align="center" color="secondary">
+    <Flex direction="column" className="playground">
+      <img
+        src="https://vibe.monday.com/logo.svg"
+        alt="Vibe Logo"
+        className="vibe-logo"
+      />
+      <Flex direction="column" align="center" justify="center" gap="xs">
+        <Heading type="h3" align="center">
           Playground
         </Heading>
-        <Text type="text2" color="secondary" ellipsis={false}>
+        <Text type="text2" ellipsis={false}>
           Craft, Experiment, and Innovate with Vibe.
         </Text>
-      </section>
-      <Flex direction="column" align="center" justify="center" gap="small">
-        <Button kind="secondary" size="small" onClick={onButtonClick}>
-          Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
-        </Button>
-        <Text type="text3" color="secondary" ellipsis={false}>
-          Tip: Can't see the editor? Click 'D' on your keyboard
-        </Text>
       </Flex>
+      <Button
+        kind="secondary"
+        size="small"
+        onClick={onButtonClick}
+        className="count-button"
+      >
+        Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
+      </Button>
+      <Text type="text3" ellipsis={false} color="secondary">
+        Can't see the editor? Click 'D' on your keyboard
+      </Text>
     </Flex>
   );
 }`;
@@ -36,13 +43,18 @@ export const css = `.playground {
 
 .vibe-logo {
   width: 150px;
+  margin-block-end: var(--spacing-large);
   transition: transform 0.3s ease, filter 0.3s ease;
 }
 
 .vibe-logo:hover {
   transform: scale(1.02);
   filter: drop-shadow(0 0 32px rgba(80, 52, 255, 0.3));
 }
+
+.count-button {
+  margin-block: var(--spacing-medium);
+}
 `;
 
 export default { jsx, css };