Merge pull request #226 from AmazeeLabs/feat/SLB-306--info-grid

feat(SLB-306): Info Grid

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .idea/inspectionProfiles
+.idea/git_toolbox_prj.xml
 build-storybook.log
 storybook-static
 coverage

apps/cms/package.json

@@ -24,8 +24,6 @@
     "content:import": "pnpm drush php-script web/modules/custom/test_content/import.php",
     "config:export": "pnpm drush cex -y",
     "config:import": "pnpm drush -y cim",
-    "schema:test": "pnpm jest --testMatch '<rootDir>/generated/__tests__/test-queries.js' --passWithNoTests",
-    "schema:test:update": "pnpm schema:test -u",
     "import-translations": "pnpm drush scr scripts/translations-import.php"
   },
   "peerDependencies": {

packages/drupal/gutenberg_blocks/package.json

@@ -6,6 +6,7 @@
     "dev": "vite build --watch",
     "prep": "vite build",
     "test:static": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.eslintignore\"",
+    "test:fix": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.eslintignore\" --fix",
     "gutenberg:generate": "node ./scripts/generate-gutenberg-block.js"
   },
   "dependencies": {

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

@@ -0,0 +1,63 @@
+import { InnerBlocks, InspectorControls } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { PanelBody, SelectControl } from 'wordpress__components';
+
+import {
+  iconImagePreview,
+  Icons,
+  limitedIconListOption,
+} from '../utils/icon-list';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+registerBlockType('custom/info-grid-item', {
+  title: __('Info Grid Item'),
+  icon: 'align-wide',
+  category: 'layout',
+  parent: ['custom/info-grid'],
+  attributes: {
+    icon: {
+      type: 'string',
+      default: '',
+    },
+  },
+  edit: (props) => {
+    const { setAttributes } = props;
+    const iconPreview = iconImagePreview(props.attributes.icon as string);
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Select an icon')}>
+            <SelectControl
+              value={props.attributes.icon as string}
+              options={limitedIconListOption([
+                Icons.EMAIL,
+                Icons.PHONE,
+                Icons.LIFE_RING,
+              ])}
+              onChange={(icon: string) => {
+                setAttributes({ icon });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div className={'container-wrapper'}>
+          <div className={'container-label'}>{__('Info Grid Item')}</div>
+          <div className={'info-grid-icon'} style={{ maxWidth: '50px' }}>
+            {iconPreview && (
+              <img src={iconPreview} alt={props.attributes.icon as string} />
+            )}
+          </div>
+          <InnerBlocks
+            templateLock={false}
+            allowedBlocks={['custom/heading', 'core/paragraph', 'custom/cta']}
+          />
+        </div>
+      </>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});

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

@@ -0,0 +1,40 @@
+import { InnerBlocks } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { useSelect } from 'wordpress__data';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+const MAX_BLOCKS: number = 3;
+
+registerBlockType('custom/info-grid', {
+  title: __('Info Grid'),
+  icon: 'editor-insertmore',
+  category: 'layout',
+  attributes: {},
+  edit: (props) => {
+    /* eslint-disable-next-line */
+    const { blockCount } = useSelect((select) => ({
+      blockCount: select('core/block-editor').getBlockCount(props.clientId),
+    }));
+
+    return (
+      <div className={'container-wrapper'}>
+        <div className={'container-label'}>{__('Info Grid')}</div>
+        <InnerBlocks
+          templateLock={false}
+          renderAppender={() => {
+            if (blockCount >= MAX_BLOCKS) {
+              return null;
+            } else {
+              return <InnerBlocks.DefaultBlockAppender />;
+            }
+          }}
+          allowedBlocks={['custom/info-grid-item']}
+          template={[]}
+        />
+      </div>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});

packages/drupal/gutenberg_blocks/src/index.ts

@@ -12,3 +12,5 @@ import './blocks/quote';
 import './blocks/horizontal-separator';
 import './blocks/accordion';
 import './blocks/accordion-item-text';
+import './blocks/info-grid';
+import './blocks/info-grid-item';

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

@@ -0,0 +1,130 @@
+// @ts-ignore
+const { t: __ } = Drupal;
+
+// 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 Icons.EMAIL:
+      iconFileName = 'email.svg';
+      break;
+    case Icons.PHONE:
+      iconFileName = 'phone.svg';
+      break;
+    case Icons.LIFE_RING:
+      iconFileName = 'life-ring.svg';
+      break;
+  }
+
+  if (!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),
+  );
+};