[TASK] Improve BE Infobox ViewHelper page

.editorconfig

@@ -1,29 +1,68 @@
-# EditorConfig is awesome: https://EditorConfig.org
-#
-# Use as master: https://github.com/TYPO3-Documentation/T3DocTeam/blob/main/.editorconfig
+# EditorConfig is awesome: http://EditorConfig.org
 
 # top-most EditorConfig file
 root = true
 
-[{*.rst,*.rst.txt}]
+# Unix-style newlines with a newline ending every file
+[*]
 charset = utf-8
 end_of_line = lf
+indent_style = space
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
-indent_style = space
+
+# TS/JS-Files
+[*.{ts,js,mjs}]
+indent_size = 2
+
+# JSON-Files
+[*.json]
+indent_style = tab
+
+# ReST-Files
+[*.{rst,rst.txt}]
 indent_size = 4
 max_line_length = 80
 
-# MD-Files
+# Markdown-Files
 [*.md]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = space
-indent_size = 4
 max_line_length = 80
 
+# YAML-Files
+[*.{yaml,yml}]
+indent_size = 2
+
+# NEON-Files
+[*.neon]
+indent_size = 2
+indent_style = tab
+
+# stylelint
+[.stylelintrc]
+indent_size = 2
+
+# package.json
+[package.json]
+indent_size = 2
+
+# TypoScript
+[*.{typoscript,tsconfig}]
+indent_size = 2
+
+# XLF-Files
+[*.xlf]
+indent_style = tab
+
+# SQL-Files
+[*.sql]
+indent_style = tab
+indent_size = 2
+
+# .htaccess
+[{_.htaccess,.htaccess}]
+indent_style = tab
+
 [Makefile]
 # Use tabs for indentation (Makefiles require tabs)
 indent_style = tab

Documentation/Global/Be/Infobox.rst

@@ -7,14 +7,22 @@
 Be.infobox ViewHelper `<f:be.infobox>`
 ======================================
 
+..  figure:: /Images/BeInfoboxWithHTML.png
+    :alt: A screenshot demonstrating a complex infobox with HTML content
+
+    See example `Infobox with HTML content, icon and links <https://docs.typo3.org/permalink/t3viewhelper:typo3-fluid-be-infobox-example-html>`_
+
 ..  typo3:viewhelper:: be.infobox
     :source: ../../Global.json
-    :display: tags,description,gitHubLink,arguments
+    :display: tags,description,gitHubLink
+    :noindex:
+
+..  contents:: Table of contents
 
 ..  _typo3-fluid-be-infobox-states:
 
-States
-======
+Severity states of the Be.infobox ViewHelper
+============================================
 
 The Infobox provides different context-sensitive states that
 can be used to provide an additional visual feedback to the
@@ -24,27 +32,91 @@ user to underline the meaning of the information.
 Possible values are in range from ``-2`` to ``2``. Please choose a
 meaningful value from the following list.
 
-``-2``
-   Notices (Default)
-``-1``
-   Information
-``0``
-   Positive feedback
-``1``
-   Warnings
-``2``
-   Error
+..  tabs::
+
+    ..  group-tab:: Screenshot
+
+        ..  figure:: /Images/BeInfobox.png
+            :alt: A screenshot demonstrating all possible infobox colors and states.
+
+            A demonstration of all possible states
+
+    ..  group-tab:: Numeral values
+
+        ``-2``
+           Notices (Default)
+        ``-1``
+           Information
+        ``0``
+           Positive feedback
+        ``1``
+           Warnings
+        ``2``
+           Error
+
+    ..  group-tab:: Code example
+
+        It is considered best practice to use the states from
+        :php:`\TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper` together with the
+        `Constant ViewHelper <f:constant> <https://docs.typo3.org/permalink/t3viewhelper:typo3fluid-fluid-constant>`_:
+
+        ..  literalinclude:: _Infobox/_States.html
+            :caption: EXT:my_extension/Resources/Private/Backend/Templates/MyModule.html
 
 ..  _typo3-fluid-be-infobox-example:
 
 Examples
 ========
 
-Simple::
+Info box of level notice with a static title and a static text:
+
+..  code-block:: html
+    :caption: EXT:my_extension/Resources/Private/Backend/Templates/MyModule.html
+
+    <f:be.infobox title="Message title">your box content</f:be.infobox>
 
-   <f:be.infobox title="Message title">your box content</f:be.infobox>
+Warning box with disabled icon:
 
-All options::
+..  code-block:: html
+    :caption: EXT:my_extension/Resources/Private/Backend/Templates/MyModule.html
 
-   <f:be.infobox title="Message title" message="your box content" state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_NOTICE')}" iconName="check" disableIcon="true" />
+    <f:be.infobox
+        title="Message title"
+        message="your box content"
+        state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_WARNING')}"
+        disableIcon="true"
+    />
 
+Success box with custom icon:
+
+..  code-block:: html
+    :caption: EXT:my_extension/Resources/Private/Backend/Templates/MyModule.html
+
+    <f:be.infobox
+        title="Message title"
+        message="your box content"
+        state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_OK')}"
+        iconName="check"
+    />
+
+
+..  _typo3-fluid-be-infobox-example-html:
+
+Infobox with HTML content, icon and links
+-----------------------------------------
+
+You can find this example in the TYPO3 backend module
+:guilabel:`System > DB Check > Manage Reference Index` if
+:composer:`typo3/cms-lowlevel` is installed.
+
+..  literalinclude:: _Infobox/_ReferenceIndex.html
+    :caption: EXT:lowlevel/Resources/Private/Templates/ReferenceIndex.html
+
+..  _typo3-fluid-be-infobox-arguments:
+
+Arguments
+=========
+
+..  typo3:viewhelper:: be.infobox
+    :source: ../../Global.json
+    :display: arguments-only

Documentation/Global/Be/_Infobox/_ReferenceIndex.html

@@ -0,0 +1,18 @@
+<f:be.infobox
+    title="{f:translate(key:'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:checkScript_headline')}"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_INFO')}"
+>
+    <p>{f:translate(key:'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:checkScript')}</p>
+    <p>
+        {f:translate(key:'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:checkScript_check_description')}<br>
+        <code>php {binaryPath} referenceindex:update -c</code>
+    </p>
+    <p>
+        {f:translate(key:'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:checkScript_update_description')}<br>
+        <code>php {binaryPath} referenceindex:update</code>
+    </p>
+    <p>
+        {f:translate(key:'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:checkScript_moreDetails')}
+        <a href="{ReadmeLink}" target="_blank">{ReadmeLocation}</a>
+    </p>
+</f:be.infobox>

Documentation/Global/Be/_Infobox/_States.html

@@ -0,0 +1,25 @@
+<f:be.infobox
+    title="Some Info"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_NOTICE')}"
+/>
+<f:be.infobox
+    title="Some Notice"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_INFO')}"
+/>
+<f:be.infobox
+    title="Some sucess message"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_OK')}"
+/>
+<f:be.infobox
+    title="Some Warning"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_WARNING')}"
+/>
+<f:be.infobox
+    title="Some Error"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_ERROR')}"
+/>

Documentation/Global/Be/_Infobox/_Warning.html

@@ -0,0 +1,25 @@
+<f:be.infobox
+    title="Some Info"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_NOTICE')}"
+/>
+<f:be.infobox
+    title="Some Notice"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_INFO')}"
+/>
+<f:be.infobox
+    title="Some sucess message"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_OK')}"
+/>
+<f:be.infobox
+    title="Some Warning"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_WARNING')}"
+/>
+<f:be.infobox
+    title="Some Error"
+    message="The message"
+    state="{f:constant(name: 'TYPO3\CMS\Fluid\ViewHelpers\Be\InfoboxViewHelper::STATE_ERROR')}"
+/>