[CL-444] Use Canvas story wrapper properly (#13375)

libs/components/src/form/forms.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs";
 
 import * as formStories from "./form.stories";
 import * as fieldStories from "../form-field/form-field.stories";
@@ -17,7 +17,7 @@ Component Library forms should always be built using [Angular Reactive Forms][re
 [ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
 always use the native `form` element and bind a `formGroup`.
 
-<Story of={formStories.FullExample} />
+<Canvas of={formStories.FullExample} />
 
 <br />
 
@@ -69,25 +69,25 @@ is too long, such as info link buttons or badges.
 
 #### Default with required attribute
 
-<Story of={fieldStories.Default} />
+<Canvas of={fieldStories.Default} />
 
 #### Password Toggle
 
-<Story of={passwordToggleStories.Default} />
+<Canvas of={passwordToggleStories.Default} />
 
 ### Search
 
-<Story of={searchStories.Default} />
+<Canvas of={searchStories.Default} />
 
 ### Selects
 
 #### Searchable single select (default)
 
-<Story of={selectStories.Default} />
+<Canvas of={selectStories.Default} />
 
 #### Multi-select
 
-<Story of={multiSelectStories.Members} />
+<Canvas of={multiSelectStories.Members} />
 
 ### Radio group
 
@@ -113,11 +113,11 @@ using a radio group for more than 5 options even if the options require addition
 
 #### Block
 
-<Story of={radioStories.Block} />
+<Canvas of={radioStories.Block} />
 
 #### Inline
 
-<Story of={radioStories.Inline} />
+<Canvas of={radioStories.Inline} />
 
 ### Checkbox
 
@@ -140,7 +140,7 @@ If a checkbox group has more than 4 options a
 
 #### Single checkbox
 
-<Story of={checkboxStories.Default} />
+<Canvas of={checkboxStories.Default} />
 
 ## Accessibility