From eb459c8bd603479541e3a91e31604fdcecb1a3fd Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 7 Dec 2024 23:05:01 +0000
Subject: [PATCH] Improve Button docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/docs/components/Canvas/index.tsx    | 21 ++++++++
 .../src/components/Button/Button.stories.tsx  |  1 -
 packages/canon/src/components/Button/Docs.mdx | 50 +++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 packages/canon/docs/components/Canvas/index.tsx
 create mode 100644 packages/canon/src/components/Button/Docs.mdx

diff --git a/packages/canon/docs/components/Canvas/index.tsx b/packages/canon/docs/components/Canvas/index.tsx
new file mode 100644
index 0000000000..566b785203
--- /dev/null
+++ b/packages/canon/docs/components/Canvas/index.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+export const Canvas = props => {
+  console.log(props);
+  return <div>Canvas</div>;
+};
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index fe3b1d58f6..6cab1cd1ba 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -26,7 +26,6 @@ const meta = {
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',
diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx
new file mode 100644
index 0000000000..7fa1886a4e
--- /dev/null
+++ b/packages/canon/src/components/Button/Docs.mdx
@@ -0,0 +1,50 @@
+import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+import { Title, Text } from '../../../docs/components';
+import { PropsTable } from '../../../docs/components/PropsTable';
+
+<Meta of={ButtonStories} />
+
+<Unstyled>
+
+<Title type="h1">Button</Title>
+<Text>A button component that can be used to trigger actions.</Text>
+
+<Canvas of={ButtonStories.Primary} />
+
+<Source of={ButtonStories.Primary} dark />
+
+<Title type="h2" style={{ marginBottom: '16px' }}>
+  API reference
+</Title>
+
+<PropsTable
+  data={{
+    size: {
+      type: ['small', 'medium'],
+      responsive: false,
+    },
+    variant: {
+      type: ['primary', 'secondary', 'tertiary'],
+      responsive: false,
+    },
+    disabled: {
+      type: 'boolean',
+      responsive: false,
+    },
+    children: {
+      type: 'ReactNode',
+      responsive: false,
+    },
+    className: {
+      type: 'string',
+      responsive: false,
+    },
+    style: {
+      type: 'CSSProperties',
+      responsive: false,
+    },
+  }}
+/>
+
+</Unstyled>