add .

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!'));

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?: (

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",
                     }}
                   />
                 }

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.

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",
 }));

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",

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!'));