NEW Link type icon

client/src/components/LinkField/LinkField.js

@@ -164,6 +164,7 @@ const LinkField = ({
         description={data[linkID]?.description}
         versionState={data[linkID]?.versionState}
         typeTitle={type.title || ''}
+        typeIcon={type.icon || 'link'}
         onDelete={onDelete}
         onClick={() => { setEditingID(linkID); }}
         canDelete={data[linkID]?.canDelete ? true : false}

client/src/components/LinkPicker/LinkPicker.scss

@@ -44,6 +44,11 @@
   }
 }
 
+.link-picker__menu-icon {
+  vertical-align: middle;
+  padding-right: 0.7rem;
+}
+
 .link-picker__link {
   @extend %link-row;
 

client/src/components/LinkPicker/LinkPickerMenu.js

@@ -17,8 +17,11 @@ const LinkPickerMenu = ({ types, onSelect }) => {
         {i18n._t('LinkField.ADD_LINK', 'Add Link')}
       </DropdownToggle>
       <DropdownMenu>
-        {types.map(({key, title}) =>
-            <DropdownItem key={key} onClick={() => onSelect(key)}>{title}</DropdownItem>
+        {types.map(({key, title, icon}) =>
+            <DropdownItem key={key} onClick={() => onSelect(key)}>
+              <span className={`link-picker__menu-icon font-icon-${icon}`}></span>
+              {title}
+            </DropdownItem>
         )}
       </DropdownMenu>
   </Dropdown>

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -35,6 +35,7 @@ const LinkPickerTitle = ({
   description,
   versionState,
   typeTitle,
+  typeIcon,
   onDelete,
   onClick,
   canDelete
@@ -51,7 +52,7 @@ const LinkPickerTitle = ({
     ? i18n._t('LinkField.DELETE', 'Delete')
     : i18n._t('LinkField.ARCHIVE', 'Archive');
   return <div className={className}>
-    <Button className="link-picker__button font-icon-link"  color="secondary" onClick={stopPropagation(onClick)}>
+    <Button className={`link-picker__button font-icon-${typeIcon}`}  color="secondary" onClick={stopPropagation(onClick)}>
       <div className="link-picker__link-detail">
       <div className="link-picker__title">
         <span className="link-picker__title-text">{title}</span>
@@ -75,6 +76,7 @@ LinkPickerTitle.propTypes = {
   description: PropTypes.string,
   versionState: PropTypes.string,
   typeTitle: PropTypes.string.isRequired,
+  typeIcon: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   canDelete: PropTypes.bool.isRequired,

client/src/components/LinkPicker/tests/LinkPicker-test.js

@@ -5,7 +5,7 @@ import LinkPicker from '../LinkPicker';
 
 function makeProps(obj = {}) {
   return {
-    types: { phone: { key: 'phone', title: 'Phone' } },
+    types: { phone: { key: 'phone', title: 'Phone', icon: 'phone' } },
     onModalSuccess: () => {},
     onModalClosed: () => {},
     ...obj
@@ -18,6 +18,7 @@ test('LinkPickerMenu render() should display toggle if can create', () => {
   })}
   />);
   expect(container.querySelectorAll('.link-picker__menu-toggle')).toHaveLength(1);
+  expect(container.querySelectorAll('.link-picker__menu-icon.font-icon-phone')).toHaveLength(1);
   expect(container.querySelectorAll('.link-picker__cannot-create')).toHaveLength(0);
 });
 

client/src/components/LinkPicker/tests/LinkPickerTitle-test.js

@@ -11,6 +11,7 @@ function makeProps(obj = {}) {
     description: 'My description',
     versionState: 'draft',
     typeTitle: 'Phone',
+    typeIcon: 'phone',
     onDelete: () => {},
     onClick: () => {},
     ...obj
@@ -23,6 +24,7 @@ test('LinkPickerTitle render() should display clear button if can delete', () =>
   })}
   />);
   expect(container.querySelectorAll('.link-picker__delete')).toHaveLength(1);
+  expect(container.querySelectorAll('.font-icon-phone')).toHaveLength(1);
 });
 
 test('LinkPickerTitle render() should not display clear button if cannot delete', () => {

client/src/types/LinkType.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 const LinkType = PropTypes.shape({
   key: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
 });
 
 export default LinkType;

src/Form/Traits/AllowedLinkClassesTrait.php

@@ -96,6 +96,7 @@ public function getTypesProps(): string
                 'title' => $type->getMenuTitle(),
                 'handlerName' => $type->LinkTypeHandlerName(),
                 'priority' => $class::config()->get('menu_priority'),
+                'icon' => $type->getLinkIcon(),
             ];
         }
         uasort($typesList, function ($a, $b) {

src/Models/EmailLink.php

@@ -23,6 +23,11 @@ class EmailLink extends Link
      */
     private static int $menu_priority = 30;
 
+    /**
+    * Set the default icon for the Email link type
+    */
+    private static $icon = 'p-mail';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

src/Models/ExternalLink.php

@@ -22,6 +22,11 @@ class ExternalLink extends Link
      */
     private static int $menu_priority = 20;
 
+    /**
+     * Set the default icon for the External link type
+     */
+    private static $icon = 'external-link';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

src/Models/FileLink.php

@@ -24,6 +24,11 @@ class FileLink extends Link
      */
     private static int $menu_priority = 10;
 
+    /**
+     * Set the default icon for the File link type
+     */
+    private static $icon = 'image';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

src/Models/Link.php

@@ -62,6 +62,11 @@ class Link extends DataObject
      */
     private static int $menu_priority = 100;
 
+    /**
+     * Set the default icon for the link type
+     */
+    private static $icon = 'link';
+
     public function getDescription(): string
     {
         return '';
@@ -470,4 +475,9 @@ public function getMenuTitle(): string
     {
         return $this->i18n_singular_name();
     }
+
+    public function getLinkIcon(): string
+    {
+        return static::config()->get('icon');
+    }
 }

src/Models/PhoneLink.php

@@ -19,6 +19,11 @@ class PhoneLink extends Link
      * Set the priority of this link type in the CMS menu
      */
     private static int $menu_priority = 40;
+
+    /**
+     * Set the default icon for the Phone link type
+     */
+    private static $icon = 'block-phone';
 
     public function getCMSFields(): FieldList
     {

src/Models/SiteTreeLink.php

@@ -35,6 +35,11 @@ class SiteTreeLink extends Link
      */
     private static int $menu_priority = 0;
 
+    /**
+     * Set the default icon for the SiteTree link type
+     */
+    private static $icon = 'page';
+
     public function getDescription(): string
     {
         $page = $this->Page();

tests/php/Traits/AllowedLinkClassesTraitTest.php

@@ -166,7 +166,7 @@ public function sortedTypesDataProvider() : array
     /**
      * @dataProvider sortedTypesDataProvider
      */
-    public function testGetTypesProps(array $enabled, array $expected, bool $reorder): void
+    public function testGetSortedTypeProps(array $enabled, array $expected, bool $reorder): void
     {
         if ($reorder) {
             Injector::inst()->get(TestPhoneLink::class)->config()->set('menu_priority', 5);
@@ -190,4 +190,72 @@ public function testGetTypesPropsCanCreate(): void
         $this->assertTrue(array_key_exists('sitetree', $json));
         $this->assertFalse(array_key_exists('testphone', $json));
     }
+
+    public function typePropsDataProvider() : array
+    {
+        return [
+            'SiteTreeLink props' => [
+                'class' => SiteTreeLink::class,
+                'key' => 'sitetree',
+                'title' => 'Page on this site',
+                'priority' => 0,
+                'icon' => 'page',
+            ],
+            'EmailLink props' => [
+                'class' => EmailLink::class,
+                'key' => 'email',
+                'title' => 'Link to email address',
+                'priority' => 30,
+                'icon' => 'p-mail',
+            ],
+            'ExternalLink props' => [
+                'class' => ExternalLink::class,
+                'key' => 'external',
+                'title' => 'Link to external URL',
+                'priority' => 20,
+                'icon' => 'external-link',
+            ],
+            'FileLink props' => [
+                'class' => FileLink::class,
+                'key' => 'file',
+                'title' => 'Link to a file',
+                'priority' => 10,
+                'icon' => 'image',
+            ],
+            'PhoneLink props' => [
+                'class' => PhoneLink::class,
+                'key' => 'phone',
+                'title' => 'Phone number',
+                'priority' => 40,
+                'icon' => 'block-phone',
+            ],
+            'TestPhoneLink props' => [
+                'class' => TestPhoneLink::class,
+                'key' => 'testphone',
+                'title' => 'Test Phone Link',
+                'priority' => 100,
+                'icon' => 'link',
+            ],
+        ];
+    }
+
+    /**
+     * @dataProvider typePropsDataProvider
+     */
+    public function testGetTypesProps(
+        string $class,
+        string $key,
+        string $title,
+        int $priority,
+        string $icon
+    ): void
+    {
+        $linkField = LinkField::create('LinkField');
+        $linkField->setAllowedTypes([$class]);
+        $json = json_decode($linkField->getTypesProps(), true);
+        $this->assertEquals($key, $json[$key]['key']);
+        $this->assertEquals($title, $json[$key]['title']);
+        $this->assertEquals($priority, $json[$key]['priority']);
+        $this->assertEquals($icon, $json[$key]['icon']);
+    }
 }