From 1e60876158e5864d1c7f93020878c1a880d4bf3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Tis=C3=A4ter?= <marcus.tisater@kivra.com>
Date: Mon, 24 Jun 2024 10:16:00 +0200
Subject: [PATCH] add .

---
 readme.md                                            | 4 ++--
 src/types.ts                                         | 6 +++---
 src/webapp/index.tsx                                 | 4 ++--
 src/webapp/layout/story/Button.story.tsx             | 3 ++-
 src/webapp/layout/story/Story.tsx                    | 7 +++++--
 src/webapp/layout/story/story-button/StoryButton.tsx | 1 -
 startpage.story.md                                   | 2 +-
 7 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/readme.md b/readme.md
index 9139640..0be00c1 100644
--- a/readme.md
+++ b/readme.md
@@ -25,7 +25,7 @@ const config: Config = {
 module.exports = config;
 ```
 
-You are now ready to start Toybox: `npx run start`.
+You are now ready to start Toybox: `pnpm run start`.
 
 ### 🤩 Creating a story
 
@@ -78,7 +78,7 @@ header: {
         <Button${props}>
           ${children}
         </Button>`,
-      variant: "filled", // Optionally, you can switch to another background on the codeTemplate.
+      variant: "filled" | "transparent", // Optionally, you can switch to another background on the codeTemplate.
       render({ boolean, text, segment, button }, action) {
         // This will add a control button but will not add any extra props in `codeTemplate`
         button('Click on me', () => alert('Hello!'));
diff --git a/src/types.ts b/src/types.ts
index e16301b..82446b0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -22,12 +22,12 @@ export interface StoryRoute {
   headName: string;
 }
 
-export type StatusVariants = "core" | "lab" | "deprecated" | "notSupported";
+export type StatusVariants = "core" | "deprecated" | "notSupported";
 export type StoryButtonTypes = "github" | "figma" | "import" | "status";
 
 export type StoryButtonType =
   | {
-      type: Exclude<StoryButtonTypes, "status" | "import">;
+      type: "figma" | "github";
       url?: string;
     }
   | {
@@ -66,7 +66,7 @@ export interface Story {
   type?: "fullsize" | "configurator";
   center?: boolean;
   information?: string;
-  variant?: "filled";
+  variant?: "filled" | "transparent";
   codeTemplate?: CodeTemplateFn;
   hideControls?: boolean;
   render?: (
diff --git a/src/webapp/index.tsx b/src/webapp/index.tsx
index 6d8ae85..f0e6721 100644
--- a/src/webapp/index.tsx
+++ b/src/webapp/index.tsx
@@ -24,8 +24,8 @@ function App() {
                       component: () =>
                         import("__STARTPAGE_COMPONENT_PATH__" as string),
                       urlPath: "/",
-                      name: "release",
-                      headName: "release",
+                      name: "startpage",
+                      headName: "startpage",
                     }}
                   />
                 }
diff --git a/src/webapp/layout/story/Button.story.tsx b/src/webapp/layout/story/Button.story.tsx
index af9a323..2b6397d 100644
--- a/src/webapp/layout/story/Button.story.tsx
+++ b/src/webapp/layout/story/Button.story.tsx
@@ -20,7 +20,7 @@ export const story: Story = {
       },
       {
         type: "figma",
-        url: "",
+        url: "#",
       },
     ],
   },
@@ -53,6 +53,7 @@ export const story: Story = {
     {
       name: "Displaying examples",
       center: true,
+      variant: "transparent",
       hideControls: true,
       information: `
 In your story, you could showcase various examples of the button component without showing the property toolbar.
diff --git a/src/webapp/layout/story/Story.tsx b/src/webapp/layout/story/Story.tsx
index 12c8a71..043f7ad 100644
--- a/src/webapp/layout/story/Story.tsx
+++ b/src/webapp/layout/story/Story.tsx
@@ -153,13 +153,16 @@ const Preview = styled.div<{
   flex: "1",
   padding: "16px",
   background:
-    variant === "filled" ? "var(--surface-200)" : "var(--surface-100)",
+    variant === "filled"
+      ? "var(--surface-200)"
+      : variant === "transparent"
+      ? "transparent"
+      : "var(--surface-100)",
   borderTopLeftRadius: "12px",
   borderTopRightRadius: hideControls ? "12px" : 0,
   borderBottomLeftRadius: codeTemplate ? 0 : "12px",
   borderBottomRightRadius: hideControls ? "12px" : 0,
   border: "1px solid var(--border)",
-  borderRight: hideControls ? 0 : undefined,
   borderBottom: hideControls ? 0 : undefined,
   minHeight: "270px",
 }));
diff --git a/src/webapp/layout/story/story-button/StoryButton.tsx b/src/webapp/layout/story/story-button/StoryButton.tsx
index c38d635..61a85c2 100644
--- a/src/webapp/layout/story/story-button/StoryButton.tsx
+++ b/src/webapp/layout/story/story-button/StoryButton.tsx
@@ -52,7 +52,6 @@ export const StoryHeaderButton: React.FC<Props> = ({
 const Status = ({ type }: { type: StatusVariants }) => {
   const statusStyles = {
     core: { color: "var(--green-primary)", variant: "outline" },
-    lab: { color: "#BD500C", variant: "outline" },
     notSupported: {
       color: "#B50019",
       variant: "outline",
diff --git a/startpage.story.md b/startpage.story.md
index e5bd3c8..bd201b0 100644
--- a/startpage.story.md
+++ b/startpage.story.md
@@ -45,7 +45,7 @@ export const story: Story = {
         <Button${props}>
           ${children}
         </Button>`,
-      variant: "filled", // Optionally, you can switch to another background on the codeTemplate.
+      variant: "filled" | "transparent", // Optionally, you can switch to another background on the codeTemplate.
       render({ boolean, text, segment, button }, action) {
         // This will add a control button but will not add any extra props in `codeTemplate`
         button('Click on me', () => alert('Hello!'));