Enrich styleguide with new features, rules and changes

The styleguide for usage of visual elements has not been updated for a long time. In the course of this story it should be adapted to the current standards and rules. In addition, heavy violations were rectified directly.

scm-ui/ui-components/src/modals/Modal.stories.tsx

@@ -52,6 +52,24 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const doNothing = () => {};
+const withFormElementsBody = (
+  <>
+    <RadioList>
+      <Radio label="One" checked={true} helpText="The first one" />
+      <Radio label="Two" checked={false} helpText="The second one" />
+    </RadioList>
+    <hr />
+    <p>{text}</p>
+    <hr />
+    <Textarea label="Text" onChange={doNothing} />
+  </>
+);
+const withFormElementsFooter = (
+  <ButtonGroup>
+    <Button label="One" />
+    <Button label="Two" />
+  </ButtonGroup>
+);
 
 storiesOf("Modal|Modal", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -66,21 +84,13 @@ storiesOf("Modal|Modal", module)
     </CloseableModal>
   ))
   .add("With form elements", () => (
-    <NonCloseableModal>
-      <RadioList>
-        <Radio label="One" checked={true} helpText="The first one" />
-        <Radio label="Two" checked={false} helpText="The second one" />
-      </RadioList>
-      <hr />
-      <p>{text}</p>
-      <hr />
-      <Textarea label="Text" onChange={doNothing} />
-      <hr />
-      <ButtonGroup>
-        <Button label="One" />
-        <Button label="Two" />
-      </ButtonGroup>
-    </NonCloseableModal>
+    <Modal
+      body={withFormElementsBody}
+      closeFunction={doNothing}
+      active={true}
+      title={"Hitchhiker Modal"}
+      footer={withFormElementsFooter}
+    />
   ))
   .add("With long tooltips", () => {
     return (