feat(slb-306): updated icon utils to allow creating different lists

packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx

@@ -2,7 +2,11 @@ import { InnerBlocks, InspectorControls } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
 import { PanelBody, SelectControl } from 'wordpress__components';
 
-import { iconImagePreview, iconListOptions } from '../utils/icon-list';
+import {
+  iconImagePreview,
+  limitedIconListOption,
+  Icons,
+} from '../utils/icon-list';
 
 // @ts-ignore
 const { t: __ } = Drupal;
@@ -28,7 +32,11 @@ registerBlockType('custom/info-grid-item', {
           <PanelBody title={__('Select an icon')}>
             <SelectControl
               value={props.attributes.icon as string}
-              options={iconListOptions}
+              options={limitedIconListOption([
+                Icons.EMAIL,
+                Icons.PHONE,
+                Icons.LIFE_RING,
+              ])}
               onChange={(icon: string) => {
                 setAttributes({ icon });
               }}
@@ -39,7 +47,9 @@ registerBlockType('custom/info-grid-item', {
         <div className={'container-wrapper'}>
           <div className={'container-label'}>{__('Info Grid Item')}</div>
           <div className={'info-grid-icon'} style={iconPreviewStyle}>
-            <img src={iconPreview} alt={props.attributes.icon as string} />
+            {iconPreview && (
+              <img src={iconPreview} alt={props.attributes.icon as string} />
+            )}
           </div>
           <InnerBlocks
             templateLock={false}

packages/drupal/gutenberg_blocks/src/utils/icon-list.ts

@@ -1,26 +1,130 @@
 // @ts-ignore
 const { t: __ } = Drupal;
 
-const ICON_PATH = '/modules/custom/gutenberg_blocks/images/icons/';
-
-// Icon list options
-export const iconListOptions: { label: any; value: string }[] = [
-  { label: __('Select an icon'), value: '' },
-  { label: __('Email'), value: 'EMAIL' },
-  { label: __('Telephone'), value: 'PHONE' },
-  { label: __('Life Ring'), value: 'LIFE-RING' },
-];
-
-// Icon image preview
-export const iconImagePreview = (icon: string) => {
+// HOW TO ADD A NEW ICON.
+//
+// 1. Add a new icon to the Icons enum.
+// 2. Add a new icon to the allIconListOptions function.
+// 3. Add icon image to the ICON_IMAGE_PATH.
+// 4. Add a new icon to the iconImagePreview function.
+//
+// Your new icon is now available for selection, it will be displayed everywhere all icons are used.
+// Or you can use the limitedIconListOption function to limit the available icons in a specific context.
+//
+// NOTE: search this file for "*" to find the places where you need to add your new icon.
+
+// *1. Available icons.
+export enum Icons {
+  EMAIL = 'EMAIL',
+  PHONE = 'PHONE',
+  LIFE_RING = 'LIFE-RING',
+}
+
+// Single icon type.
+export type Icon = {
+  label: any;
+  value: string;
+};
+
+// *3. Icon image path.
+const ICON_IMAGE_PATH = '/modules/custom/gutenberg_blocks/images/icons/';
+
+/**
+ * A list of all icons.
+ *
+ * @param addDefault
+ *  If you want to add a default option.
+ * @param defaultLabel
+ *  The default label.
+ * @param defaultValue
+ *  The default value.
+ */
+export const allIconListOptions = (
+  addDefault: boolean = true,
+  defaultLabel: string = 'Select an icon',
+  defaultValue: string = '',
+): Icon[] => {
+  // Empty array of icons.
+  let allIcons: Icon[] = [];
+
+  // *2. The list of all icons.
+  allIcons = [
+    {
+      label: __('Email'),
+      value: Icons.EMAIL,
+    },
+    {
+      label: __('Telephone'),
+      value: Icons.PHONE,
+    },
+    {
+      label: __('Life Ring'),
+      value: Icons.LIFE_RING,
+    },
+  ];
+
+  // If using default add to first place.
+  if (addDefault) {
+    allIcons.unshift({
+      label: __(defaultLabel),
+      value: defaultValue,
+    });
+  }
+
+  return allIcons;
+};
+
+/**
+ * Creates an icon image preview.
+ *
+ * @param icon
+ *  The icon to be displayed.
+ */
+export const iconImagePreview = (icon: string): string => {
+  let iconFileName = '';
+
   switch (icon) {
-    case 'EMAIL':
-      return ICON_PATH + 'email.svg';
-    case 'PHONE':
-      return ICON_PATH + 'phone.svg';
-    case 'LIFE-RING':
-      return ICON_PATH + 'life-ring.svg';
-    default:
-      return '';
+    case Icons.EMAIL:
+      iconFileName = 'email.svg';
+      break;
+    case Icons.PHONE:
+      iconFileName = 'phone.svg';
+      break;
+    case Icons.LIFE_RING:
+      iconFileName = 'life-ring.svg';
+      break;
   }
+
+  if (!iconFileName || iconFileName === '') {
+    return '';
+  }
+
+  return ICON_IMAGE_PATH + iconFileName;
+};
+
+/**
+ * Limited icon list option.
+ *
+ * @param icons
+ *  The list of icons to be displayed.
+ * @param addDefault
+ *  If you want to add a default option.
+ * @param defaultLabel
+ *  The default label.
+ * @param defaultValue
+ *  The default value.
+ */
+export const limitedIconListOption = (
+  icons: Icons[],
+  addDefault: boolean = true,
+  defaultLabel: string = 'Select an icon',
+  defaultValue: string = '',
+): Icon[] => {
+  if (addDefault) {
+    icons.unshift(defaultValue as Icons);
+  }
+
+  return allIconListOptions(addDefault, defaultLabel, defaultValue).filter(
+    (icon) => icons.includes(icon.value as Icons),
+  );
 };