[6.x] Add Info fieldtype

lang/en/fieldtypes.php

@@ -117,6 +117,10 @@
     'icon.config.mode' => 'Choose a dropdown or compact picker.',
     'icon.config.set' => 'Default CP icons, or a set registered with `Icons::register()`.',
     'icon.title' => 'Icon',
+    'info.config.content' => 'The information to display. Markdown is supported, including links and lists.',
+    'info.config.alert_icon' => 'Choose an icon, or leave empty to use the state\'s default icon.',
+    'info.config.state' => 'Choose the visual importance of the information.',
+    'info.title' => 'Info',
     'integer.config.max' => 'The maximum allowed value.',
     'integer.config.min' => 'The minimum allowed value.',
     'integer.config.step' => 'The interval between valid numbers.',

resources/js/bootstrap/fieldtypes.js

@@ -34,6 +34,7 @@ import GroupFieldtype from '../components/fieldtypes/GroupFieldtype.vue';
 import HiddenFieldtype from '../components/fieldtypes/HiddenFieldtype.vue';
 import HtmlFieldtype from '../components/fieldtypes/HtmlFieldtype.vue';
 import IconFieldtype from '../components/fieldtypes/IconFieldtype.vue';
+import InfoFieldtype from '../components/fieldtypes/InfoFieldtype.vue';
 import IntegerFieldtype from '../components/fieldtypes/IntegerFieldtype.vue';
 import LinkFieldtype from '../components/fieldtypes/LinkFieldtype.vue';
 import LinkIndexFieldtype from '../components/fieldtypes/LinkIndexFieldtype.vue';
@@ -108,6 +109,7 @@ export default function registerFieldtypes(app) {
     app.component('hidden-fieldtype', HiddenFieldtype);
     app.component('html-fieldtype', HtmlFieldtype);
     app.component('icon-fieldtype', IconFieldtype);
+    app.component('info-fieldtype', InfoFieldtype);
     app.component('integer-fieldtype', IntegerFieldtype);
     app.component('link-fieldtype', LinkFieldtype);
     app.component('link-fieldtype-index', LinkIndexFieldtype);

resources/js/components/fieldtypes/InfoFieldtype.vue

@@ -0,0 +1,29 @@
+<script setup>
+import Fieldtype from '@/components/fieldtypes/fieldtype';
+import { Alert } from '@/components/ui';
+import markdown from '@/util/markdown';
+import { computed } from 'vue';
+
+const props = defineProps(Fieldtype.props);
+
+const variant = computed(() => {
+    return {
+        notice: 'default',
+        tip: 'tip',
+        warning: 'warning',
+        important: 'error',
+        success: 'success',
+    }[props.config.state] ?? 'default';
+});
+
+const html = computed(() => markdown(__(props.config.content), { openLinksInNewTabs: true }));
+</script>
+
+<template>
+    <Alert :variant="variant" :icon="config.alert_icon">
+        <div
+            class="st-text-trim-start [&_a]:font-medium [&_a]:underline [&_ol]:list-decimal [&_ol]:ps-5 [&_ul]:list-disc [&_ul]:ps-5"
+            v-html="html"
+        />
+    </Alert>
+</template>

resources/js/tests/components/fieldtypes/InfoFieldtype.test.js

@@ -0,0 +1,49 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import InfoFieldtype from '@/components/fieldtypes/InfoFieldtype.vue';
+import { Icon } from '@/components/ui';
+
+window.__ = (key) => key;
+
+function mountField(config = {}) {
+    return mount(InfoFieldtype, {
+        props: {
+            value: null,
+            handle: 'info',
+            config,
+        },
+    });
+}
+
+describe.each([
+    ['notice', 'default'],
+    ['tip', 'tip'],
+    ['warning', 'warning'],
+    ['important', 'error'],
+    ['success', 'success'],
+])('%s state', (state, variant) => {
+    test(`uses the ${variant} alert variant`, () => {
+        const wrapper = mountField({ state, content: 'Something happened.' });
+
+        expect(wrapper.get('[data-ui-alert]').attributes('data-variant')).toBe(variant);
+    });
+});
+
+test('renders sanitized markdown with links and lists', () => {
+    const wrapper = mountField({
+        content: '- First item\n- [Statamic](https://statamic.com)\n\n<script>alert("nope")</script>',
+    });
+
+    expect(wrapper.findAll('li')).toHaveLength(2);
+    expect(wrapper.get('a').attributes()).toMatchObject({
+        href: 'https://statamic.com',
+        target: '_blank',
+    });
+    expect(wrapper.find('script').exists()).toBe(false);
+});
+
+test('uses a configured icon', () => {
+    const wrapper = mountField({ content: 'Hello', alert_icon: 'lightbulb-idea' });
+
+    expect(wrapper.findComponent(Icon).props('name')).toBe('lightbulb-idea');
+});

src/Fieldtypes/Info.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Statamic\Fieldtypes;
+
+use Statamic\Fields\Fieldtype;
+
+use function Statamic\trans as __;
+
+class Info extends Fieldtype
+{
+    protected $categories = ['special'];
+    protected $keywords = ['alert', 'message', 'notice', 'warning'];
+    protected $icon = 'info';
+    protected $localizable = false;
+    protected $validatable = false;
+    protected $defaultable = false;
+
+    protected function configFieldItems(): array
+    {
+        return [
+            [
+                'display' => __('Content'),
+                'fields' => [
+                    'content' => [
+                        'display' => __('Content'),
+                        'instructions' => __('statamic::fieldtypes.info.config.content'),
+                        'type' => 'textarea',
+                    ],
+                ],
+            ],
+            [
+                'display' => __('Appearance'),
+                'fields' => [
+                    'state' => [
+                        'display' => __('State'),
+                        'instructions' => __('statamic::fieldtypes.info.config.state'),
+                        'type' => 'select',
+                        'default' => 'notice',
+                        'options' => [
+                            'notice' => __('Notice'),
+                            'tip' => __('Tip'),
+                            'warning' => __('Warning'),
+                            'important' => __('Important Warning'),
+                            'success' => __('Success'),
+                        ],
+                        'width' => 50,
+                    ],
+                    'alert_icon' => [
+                        'display' => __('Icon'),
+                        'instructions' => __('statamic::fieldtypes.info.config.alert_icon'),
+                        'type' => 'icon',
+                        'set' => 'default',
+                        'mode' => 'compact',
+                        'width' => 50,
+                    ],
+                ],
+            ],
+        ];
+    }
+}

src/Providers/ExtensionServiceProvider.php

@@ -91,6 +91,7 @@ class ExtensionServiceProvider extends ServiceProvider
         'hidden' => Fieldtypes\Hidden::class,
         'html' => Fieldtypes\Html::class,
         'icon' => Fieldtypes\Icon::class,
+        'info' => Fieldtypes\Info::class,
         'integer' => Fieldtypes\Integer::class,
         'link' => Fieldtypes\Link::class,
         'list' => Fieldtypes\Lists::class,

tests/Fieldtypes/InfoTest.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace Tests\Fieldtypes;
+
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fields\FieldTransformer;
+use Statamic\Fieldtypes\Info;
+use Tests\TestCase;
+
+class InfoTest extends TestCase
+{
+    #[Test]
+    public function it_preserves_the_custom_icon_when_saving_a_blueprint()
+    {
+        $iconHandle = (new Info)->configFields()->all()->first(fn ($field) => $field->type() === 'icon')->handle();
+        $field = FieldTransformer::toVue([
+            'handle' => 'notice',
+            'field' => [
+                'type' => 'info',
+                'content' => 'Helpful information.',
+                $iconHandle => 'lightbulb-idea',
+            ],
+        ]);
+
+        $this->assertSame('info', $field['icon']);
+        $this->assertSame('lightbulb-idea', FieldTransformer::fromVue($field)['field'][$iconHandle] ?? null);
+    }
+
+    #[Test]
+    public function it_is_a_non_data_fieldtype()
+    {
+        $fieldtype = new Info;
+
+        $this->assertSame(['special'], $fieldtype->categories());
+        $this->assertFalse($fieldtype->localizable());
+        $this->assertFalse($fieldtype->validatable());
+        $this->assertFalse($fieldtype->defaultable());
+    }
+
+    #[Test]
+    public function it_has_configurable_content_state_and_icon()
+    {
+        $fields = (new Info)->configFields();
+
+        $this->assertSame('textarea', $fields->get('content')->type());
+        $this->assertSame('select', $fields->get('state')->type());
+        $this->assertSame('notice', $fields->get('state')->get('default'));
+        $this->assertSame([
+            'notice' => 'Notice',
+            'tip' => 'Tip',
+            'warning' => 'Warning',
+            'important' => 'Important Warning',
+            'success' => 'Success',
+        ], $fields->get('state')->get('options'));
+        $this->assertSame('icon', $fields->get('alert_icon')->type());
+        $this->assertSame('default', $fields->get('alert_icon')->get('set'));
+        $this->assertSame('compact', $fields->get('alert_icon')->get('mode'));
+    }
+}