From 5e0a2e93b2e44478de781137ba841f855ad91fc3 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Fri, 17 Feb 2023 10:32:14 +0000 Subject: [PATCH] Document umb-debug in a story.mdx --- .../shared/components/debug/debug.stories.mdx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.stories.mdx diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.stories.mdx b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.stories.mdx new file mode 100644 index 0000000000..634d578d4e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.stories.mdx @@ -0,0 +1,38 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + + + +# Debugging + +## Debugging Contexts + +The component `` allows you to discover the available contexts from the current DOM element, that you are able to consume and use. + +For example it will help you as a package developer or implementor to know you are able to consume the `DigalogService` and quickly see what properties and methods are available to use. + +This can help with the developer experience to quickly see what is available to use and how to use it. + +### Usage +The `` component can be used in two different ways + + +```typescript +// This will add + +``` + +This example uses an additional property/attribute `dialog` which adds a smaller badge to the UI as opposed to a button and will open the information in a small dialog/modal from the right hand side. + +```typescript +// This will open the debug information in a small dialog/modal from the right hand side + +``` + +You may wish to temporarily hide or disable the debug information but return to it later on in the development process. + +```typescript +// To hide or remove the button ensure you remove the enabled attribute or set the enabled property to false + +```