split workspace stories

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -105,6 +105,7 @@ export const parameters = {
 						'Section Sidebar Items',
 						'Entity Actions',
 						'Workspaces',
+						['Intro', 'Views', 'Actions', '*'],
 						'Property Editors',
 						'Repositories',
 						'*',

src/Umbraco.Web.UI.Client/src/stories/extending/header-apps.mdx

@@ -52,6 +52,8 @@ interface UmbHeaderAppElement {}
 {}
 ```
 
+**Default Element**
+
 ```ts
 // TODO: get interface
 interface UmbButtonHeaderAppElement {}

src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/actions.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+	title="Guides/Extending the Backoffice/Workspaces/Actions"
+	parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
+
+# Workspace Actions
+
+// TODO: intro to workspace actions
+
+- Relates to a workspace alias (Umb.Workspace.Document).
+- Performs the action on the workspace draft state.
+- Has Access to the workspace context.
+
+<img src="docs/workspace-actions.svg" width="400" />
+
+**Manifest**
+
+```json
+	{
+		"type": "workspaceAction",
+		"alias": "My.WorkspaceAction.Workspace.Action",
+		"name": "My Workspace Action",
+		"meta": {
+			"workspaces": ["My.Workspace"],
+      "label": "Run",
+			"look": "primary",
+			"color": "positive",
+		},
+	},
+
+```
+
+**Default Element**
+
+```ts
+// TODO: get interface
+interface UmbWorkspaceActionElement {}
+```

src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/intro.mdx

@@ -1,6 +1,9 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Guides/Extending the Backoffice/Workspaces" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+<Meta
+	title="Guides/Extending the Backoffice/Workspaces/Intro"
+	parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
 
 # Workspaces
 
@@ -19,22 +22,6 @@ TODO: add description of a workspace
 interface UmbWorkspaceElement {}
 ```
 
-## Workspace Views
-
-TODO: descrtibe workspace views
-
-<img src="docs/workspace-views.svg" width="400" />
-
-```ts
-// TODO: get typescript interface
-```
-
-## Workspace Actions
-
-<img src="docs/workspace-actions.svg" width="400" />
-
-Relates to a workspace alias (Umb.Workspace.Document). Performs the action on the workspace draft state.
-
 ## The Workspace Context
 
 ```ts
@@ -42,6 +29,6 @@ Relates to a workspace alias (Umb.Workspace.Document). Performs the action on th
 interface UmbWorkspaceContext {}
 ```
 
-#### Examples of workspaces:
+## Examples of workspaces:
 
 TODO: link to all workspaces in storybook. Can we somehow auto-generate this list?

src/Umbraco.Web.UI.Client/src/stories/extending/workspaces/views.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+	title="Guides/Extending the Backoffice/Workspaces/Views"
+	parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
+
+# Workspace Views
+
+TODO: add description of a workspace views
+
+<img src="docs/workspace-views.svg" width="400" />
+
+**Manifest**
+
+```json
+	{
+		"type": "workspaceView",
+		"alias": "My.WorkspaceView",
+		"name": "My Workspace View",
+		"meta": {
+			"workspaces": ["My.Workspace"],
+      "label": "My View",
+			"pathname": "/my-view"
+		},
+	},
+
+```