Add admonition

Configuration/PageTSconfig/Mod/Wizards/0_NewContentElement.tsconfig

@@ -24,3 +24,8 @@ mod.wizards.newContentElement.wizardItems {
         show =
     }
 }
+TCEFORM.tt_content {
+    CType {
+        keepItems := addToList(text, image)
+    }
+}

Configuration/PageTSconfig/Mod/Wizards/Admonition.tsconfig

@@ -0,0 +1,29 @@
+mod {
+    wizards.newContentElement.wizardItems.common {
+        elements {
+            admonition {
+                iconIdentifier = content-idea
+                title = Admonition
+                description = Displays a hint, note, …
+                tt_content_defValues {
+                    CType = admonition
+                    header_layout = note
+                }
+            }
+        }
+        show := addToList(admonition)
+    }
+    web_layout.tt_content.preview.admonition = EXT:ds_site/Resources/Private/Templates/Backend/ContentElements/Admonition.html
+}
+TCEFORM.tt_content {
+    CType.keepItems := addToList(admonition)
+    header_layout.types.admonition {
+        keepItems = hint, danger
+        addItems {
+            note = LLL:EXT:ds_site/Resources/Private/Language/locallang.xlf:frontend.content.admonition.header.note
+            hint = LLL:EXT:ds_site/Resources/Private/Language/locallang.xlf:frontend.content.admonition.header.hint
+            caution = LLL:EXT:ds_site/Resources/Private/Language/locallang.xlf:frontend.content.admonition.header.caution
+            danger = LLL:EXT:ds_site/Resources/Private/Language/locallang.xlf:frontend.content.admonition.header.danger
+        }
+    }
+}

Configuration/TCA/Overrides/tt_content_admonition.php

@@ -0,0 +1,56 @@
+<?php
+
+(function (string $extensionKey, string $tableName, string $contentType) {
+    $languagePath = 'LLL:EXT:' . $extensionKey . '/Resources/Private/Language/locallang_tca.xlf:' . $tableName . '.';
+
+    \TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA'][$tableName], [
+        'ctrl' => [
+            'typeicon_classes' => [
+                $contentType => 'content-idea',
+            ],
+        ],
+        'types' => [
+            $contentType => [
+                'showitem' => implode(',', [
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general',
+                    '--palette--;;general',
+                    'header_layout',
+                    'bodytext',
+                    '--div--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance',
+                    '--palette--;;frames',
+                    '--palette--;;appearanceLinks',
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:language',
+                    '--palette--;;language',
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:access',
+                    '--palette--;;hidden',
+                    '--palette--;;access',
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:categories',
+                    'categories',
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:notes',
+                    'rowDescription',
+                    '--div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended',
+                ]),
+                'columnsOverrides' => [
+                    'bodytext' => [
+                        'config' => [
+                            'enableRichtext' => true,
+                            'richtextConfiguration' => 'default',
+                        ],
+                    ],
+                ],
+            ],
+        ],
+    ]);
+
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
+        $tableName,
+        'CType',
+        [
+            $languagePath . $contentType,
+            $contentType,
+            'content-idea',
+        ],
+        'image',
+        'after'
+    );
+})('ds_site', 'tt_content', 'admonition');

Configuration/TypoScript/Setup/ContentElements/Admonition.typoscript

@@ -0,0 +1,12 @@
+tt_content.admonition =< lib.contentElement
+tt_content.admonition {
+    templateName = Admonition
+
+    variables {
+        headerLayout >
+    }
+
+    stdWrap {
+        editIcons := appendString(header_layout, bodytext)
+    }
+}

Resources/Private/Language/locallang.xlf

@@ -18,6 +18,19 @@
             <trans-unit id="backend.page.metainfo.media">
                 <source>Images (media)</source>
             </trans-unit>
+
+            <trans-unit id="frontend.content.admonition.header.note">
+                <source>Note</source>
+            </trans-unit>
+            <trans-unit id="frontend.content.admonition.header.hint">
+                <source>Hint</source>
+            </trans-unit>
+            <trans-unit id="frontend.content.admonition.header.caution">
+                <source>Caution</source>
+            </trans-unit>
+            <trans-unit id="frontend.content.admonition.header.danger">
+                <source>Danger</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Language/locallang_tca.xlf

@@ -6,6 +6,9 @@
             <trans-unit id="pages.lastUpdated">
                 <source>Published</source>
             </trans-unit>
+            <trans-unit id="tt_content.admonition">
+                <source>Admonition</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Sass/components/_admonition.scss

@@ -0,0 +1,28 @@
+aside {
+    &[class^='admonition-'] {
+        border: none;
+        border-left: solid $spacer / 4;
+        padding: $spacer;
+        margin-top: $spacer * 2;
+
+        h1, h2, h3, h4, h5, h6 {
+            padding-top: 0;
+        }
+    }
+
+    &.admonition-note {
+        border-color: $yellow;
+    }
+
+    &.admonition-hint {
+        border-color: $green;
+    }
+
+    &.admonition-caution {
+        border-color: $red-dark;
+    }
+
+    &.admonition-danger {
+        border-color: $red-dark;
+    }
+}

Resources/Private/Sass/components/_ckeditor.scss

@@ -0,0 +1,3 @@
+body.cke_editable {
+    padding-top: $spacer;
+}

Resources/Private/Sass/index.scss

@@ -13,3 +13,4 @@
 
 @import "components/codeHighlighting";
 @import "components/feedit";
+@import "components/admonition";

Resources/Private/Templates/Backend/ContentElements/Admonition.html

@@ -0,0 +1,10 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+    <a href="{f:uri.editRecord(
+        uid: uid,
+        table: 'tt_content'
+    )}">
+        <strong>{header_layout}</strong>
+        <p>{bodytext -> f:format.stripTags()}</p>
+    </a>
+</html>

Resources/Private/Templates/ContentElements/Admonition.html

@@ -0,0 +1,19 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
+    data-namespace-typo3-fluid="true">
+
+    {f:layout(name: 'Default')}
+
+    <f:section name="Header">
+        <aside class="admonition-{data.header_layout}">
+        {f:render(partial: 'Header', arguments: {
+            uid: data.uid,
+            layout: '2',
+            header: "{f:translate(id: 'frontend.content.admonition.header.{data.header_layout}', extensionName: 'DsSite')}"
+        })}
+    </f:section>
+
+    <f:section name="Content">
+        {data.bodytext -> f:format.html()}
+        </aside>
+    </f:section>
+</html>