docs(many): remove class based examples

keep only functional examples
remove code that rendered both
rearrange components a bit: move ScreenReaderContent/...Content to utilites/a11y, move Options and
Selectable to Utilities

INSTUI-4753

Author: matyasf

docs/contributor-docs/writing-docs.md

@@ -54,12 +54,12 @@ If a code example is needed with syntax highlighting:
 type: code
 ---
 
-    ```js
-    ---
-    type: code
-    ---
-    console.log("my js example comes here")
-    ```
+```js
+---
+type: code
+---
+console.log("my js example comes here")
+```
 ````
 
 The above code will display like this:
@@ -82,12 +82,12 @@ The `type: embed` will render the containing code into the page. It must be vali
 type: code
 ---
 
-    ```js
-    ---
-    type: embed
-    ---
-    <Button>InstUI button</Button>
-    ```
+```js
+---
+type: embed
+---
+<Button>InstUI button</Button>
+```
 ````
 
 The above code will display like this:
@@ -117,19 +117,19 @@ In the second example, a whole `component` is needed and it must be `rendered` w
 type: code
 ---
 
-    ```js
-    ---
-    type: example
-    ---
-    <div>
-        <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
-        <Avatar name="Sarah Robinson" margin="0 small 0 0" />
-        <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
-        <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
-        <Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
-        <Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
-    </div>
-    ```
+```js
+---
+type: example
+---
+<div>
+    <Avatar name="Sarah Robinson" src={avatarSquare} margin="0 small 0 0" />
+    <Avatar name="Sarah Robinson" margin="0 small 0 0" />
+    <Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} margin="0 small 0 0" />
+    <Avatar name="Kyle Montgomery" src={avatarSquare} shape="rectangle" margin="0 small 0 0" />
+    <Avatar name="Kyle Montgomery" shape="rectangle" margin="0 small 0 0" />
+    <Avatar name="Kyle Montgomery" renderIcon={<IconGroupLine />} shape="rectangle" />
+</div>
+```
 ````
 
 The above code will display like this:
@@ -155,50 +155,6 @@ type: example
 type: code
 ---
 
-    ```js
-    ---
-    type: example
-    ---
-    class Example extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-        selected: "",
-        colors: [
-            "#ffffff",
-            "#0CBF94",
-            "#0C89BF00",
-            "#BF0C6D",
-            "#BF8D0C",
-            "#ff0000",
-            "#576A66",
-            "#35423A",
-            "#35423F",
-        ],
-        };
-    }
-
-    render() {
-        return (
-        <div>
-            <ColorPreset
-            label="Choose a color"
-            colors={this.state.colors}
-            selected={this.state.selected}
-            onSelect={(selected) => this.setState({ selected })}
-            />
-        </div>
-        );
-    }
-    }
-
-
-    render(<Example />);
-    ```
-````
-
-The above code will display like this:
-
 ```js
 ---
 type: example
@@ -233,109 +189,57 @@ render() {
         />
     </div>
     );
-    }
 }
+}
+
 
 render(<Example />);
 ```
+````
 
-**_Note:_** you can use `funcional React` as well.
-
-#### 4. Multi example
-
-If an example should be shown in `class` and `function` form as well, it needs to be written as a `list` with two items. The first item will be the `class`, the second the `function`.
+The above code will display like this:
 
-````md
+```js
 ---
-type: code
+type: example
 ---
+class Example extends React.Component {
+constructor(props) {
+    super(props);
+    this.state = {
+    selected: "",
+    colors: [
+        "#ffffff",
+        "#0CBF94",
+        "#0C89BF00",
+        "#BF0C6D",
+        "#BF8D0C",
+        "#ff0000",
+        "#576A66",
+        "#35423A",
+        "#35423F",
+    ],
+    };
+}
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        counter: 0
-      }
-    }
-
-    render() {
-      return (
-        <div>
-          <Button
-            onClick={() => this.setState({ counter: this.state.counter + 1 })}
-          >
-            I was Clicked {this.state.counter} times
-          </Button>
-        </div>
-      )
-    }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [counter, setCounter] = useState(0)
-
+render() {
     return (
-      <div>
-        <Button onClick={() => setCounter(counter + 1)}>
-          I was Clicked {counter} times
-        </Button>
-      </div>
-    )
-  }
-
-  render(<Example />)
-  ```
-````
-
-The above code will display like this:
-
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        counter: 0
-      }
-    }
-
-    render() {
-      return (
-        <div>
-          <Button
-            onClick={() => this.setState({ counter: this.state.counter + 1 })}
-          >
-            I was Clicked {this.state.counter} times
-          </Button>
-        </div>
-      )
+    <div>
+        <ColorPreset
+        label="Choose a color"
+        colors={this.state.colors}
+        selected={this.state.selected}
+        onSelect={(selected) => this.setState({ selected })}
+        />
+    </div>
+    );
     }
-  }
-
-  render(<Example />)
-  ```
-
-- ```js
-  const Example = () => {
-    const [counter, setCounter] = useState(0)
-
-    return (
-      <div>
-        <Button onClick={() => setCounter(counter + 1)}>
-          I was Clicked {counter} times
-        </Button>
-      </div>
-    )
-  }
+}
 
-  render(<Example />)
-  ```
+render(<Example />);
+```
 
-**_Note:_** beacuse of this feature, code examples can not be displayed by `lists`
+**_Note:_** you should use `funcional React`.
 
 #### 5. comment examples
 
@@ -358,17 +262,17 @@ The other three can be postfixed after the language of the markdown code block:
 ---
 type: code
 ---
-    ```js-code
-    // code here
-    ```
+```js-code
+// code here
+```
 
-    ```js-embed
-    // code here
-    ```
+```js-embed
+// code here
+```
 
-    ```js-example
-    // code here
-    ```
+```js-example
+// code here
+```
 ````
 
 The compiler will strip the postfix and calculate the language and type from it as well.