@brilo/base-blocks 0.1.0

package/src/blocks/form/form-field/factory.tsx

@@ -0,0 +1,32 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {FIELD_COLUMNS_DEFAULT} from './constants'
+import {createFormFieldEdit} from './edit'
+import type {FormFieldAttributes, FormFieldOptions} from './types'
+
+export type {FormFieldAttributes, FormFieldOptions}
+
+export function createFormFieldBlock(options: FormFieldOptions): BlockConfiguration<FormFieldAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Pole formuláře', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'forms',
+    supports: {html: false, customClassName: false, reusable: false},
+    attributes: {
+      type: {type: 'string', default: 'text'},
+      columns: {type: 'number', default: FIELD_COLUMNS_DEFAULT},
+      label: {type: 'string', default: ''},
+      name: {type: 'string', default: ''},
+      placeholder: {type: 'string', default: ''},
+      required: {type: 'boolean', default: false},
+      options: {type: 'array', default: []},
+      defaultValue: {type: 'string', default: ''},
+      value: {type: 'string', default: ''},
+    },
+    edit: createFormFieldEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<FormFieldAttributes>
+}

package/src/blocks/form/form-field/index.ts

@@ -0,0 +1,10 @@
+export type {FormFieldAttributes, FormFieldOptions, FormFieldType} from './types'
+export {createFormFieldBlock} from './factory'
+export {FIELD_TYPES, FIELD_COLUMNS_RANGE, FIELD_COLUMNS_DEFAULT} from './constants'
+
+import type {FormFieldOptions} from './types'
+
+export const formFieldDefaults: FormFieldOptions = {
+  name: 'brilo/form-field',
+  parent: ['brilo/form-group'],
+}

package/src/blocks/form/form-field/types.ts

@@ -0,0 +1,18 @@
+import {FIELD_TYPE_VALUES} from './constants'
+import type {BriloBlockType} from '~/types'
+
+export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
+
+export interface FormFieldAttributes extends Record<string, unknown> {
+  type: FormFieldType
+  columns: number
+  label: string
+  name: string
+  placeholder: string
+  required: boolean
+  options: string[]
+  defaultValue: string
+  value: string
+}
+
+export interface FormFieldOptions extends BriloBlockType {}

package/src/blocks/form/form-group/constants.ts

@@ -0,0 +1,16 @@
+import {__} from '@wordpress/i18n'
+
+export const PROCESSING_MODES = [
+  {value: 'internal', label: __('Interní', 'brilo-blocks')},
+  {value: 'external', label: __('Externí', 'brilo-blocks')},
+] as const
+
+export const EXTERNAL_METHODS = [
+  {value: 'POST', label: 'POST'},
+  {value: 'GET', label: 'GET'},
+] as const
+
+export const INTERNAL_SUBMIT_BEHAVIORS = [
+  {value: 'stay', label: __('Zůstat na stránce', 'brilo-blocks')},
+  {value: 'redirect', label: __('Přesměrovat na děkovnou stránku', 'brilo-blocks')},
+] as const

package/src/blocks/form/form-group/edit.tsx

@@ -0,0 +1,190 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {FormTokenField, Notice, PanelBody, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
+import {useDispatch} from '@wordpress/data'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useEffect} from 'react'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES} from './constants'
+import type {ExternalMethod, FormGroupAttributes, FormGroupOptions, InternalSubmitBehavior, ProcessingMode} from './types'
+
+const ALLOWED_BLOCKS = ['brilo/form-field']
+
+export function createFormGroupEdit(options: FormGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+    clientId,
+  }: {
+    attributes: FormGroupAttributes
+    setAttributes: (a: Partial<FormGroupAttributes>) => void
+    clientId: string
+  }) {
+    const {lockPostSaving, unlockPostSaving} = useDispatch('core/editor') as unknown as {
+      lockPostSaving: (lockName: string) => void
+      unlockPostSaving: (lockName: string) => void
+    }
+
+    const processingMode = attributes.processingMode ?? 'internal'
+    const isInternal = processingMode === 'internal'
+    const isExternal = processingMode === 'external'
+    const recipients = Array.isArray(attributes.senders) ? attributes.senders : []
+    const isRecipientsMissing = isInternal && recipients.length === 0
+    const isExternalUrlMissing = isExternal && (attributes.externalUrl ?? '').trim() === ''
+
+    useEffect(() => {
+      const lockName = `brilo-form-group-${clientId}`
+
+      if (isRecipientsMissing || isExternalUrlMissing) {
+        lockPostSaving(lockName)
+      } else {
+        unlockPostSaving(lockName)
+      }
+
+      return () => unlockPostSaving(lockName)
+    }, [clientId, isRecipientsMissing, isExternalUrlMissing, lockPostSaving, unlockPostSaving])
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-form wp-block-section'),
+      containerClassName: [options.containerClassName ?? 'g-form__fields'],
+      allowedBlocks: options.allowedBlocks ?? ALLOWED_BLOCKS,
+      template: options.template,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Formulář', 'brilo-blocks')}>
+            <TextControl
+              label={__('Název formuláře (volitelné)', 'brilo-blocks')}
+              value={attributes.formName ?? ''}
+              placeholder={__('Např. Kontaktní formulář', 'brilo-blocks')}
+              onChange={(formName) => setAttributes({formName})}
+            />
+
+            <SelectControl
+              label={__('Zpracování', 'brilo-blocks')}
+              value={processingMode}
+              options={PROCESSING_MODES.map((m) => ({label: m.label, value: m.value}))}
+              onChange={(mode) => setAttributes({processingMode: mode as ProcessingMode})}
+            />
+
+            {isExternal && (
+              <>
+                <SelectControl
+                  label={__('Metoda odeslání', 'brilo-blocks')}
+                  value={attributes.externalMethod ?? 'POST'}
+                  options={EXTERNAL_METHODS.map((m) => ({label: m.label, value: m.value}))}
+                  onChange={(externalMethod) => setAttributes({externalMethod: externalMethod as ExternalMethod})}
+                />
+
+                <TextControl
+                  label={__('Externí URL', 'brilo-blocks')}
+                  value={attributes.externalUrl ?? ''}
+                  onChange={(externalUrl) => setAttributes({externalUrl})}
+                />
+
+                {isExternalUrlMissing && (
+                  <Notice status="warning" isDismissible={false}>
+                    {__('Pole „Externí URL“ je povinné pro externí zpracování.', 'brilo-blocks')}
+                  </Notice>
+                )}
+              </>
+            )}
+
+            {isInternal && (
+              <>
+                <FormTokenField
+                  label={__('Komu (příjemci)', 'brilo-blocks')}
+                  value={recipients}
+                  __next40pxDefaultSize
+                  onChange={(senders) =>
+                    setAttributes({
+                      senders: (senders ?? [])
+                        .map((item) => (typeof item === 'string' ? item.trim() : ''))
+                        .filter((item): item is string => item.length > 0),
+                    })
+                  }
+                />
+
+                {isRecipientsMissing && (
+                  <Notice status="warning" isDismissible={false}>
+                    {__('Pole „Komu (příjemci)“ je povinné. Vyplňte alespoň jeden e-mail příjemce.', 'brilo-blocks')}
+                  </Notice>
+                )}
+
+                <TextControl
+                  label={__('Od koho (From email)', 'brilo-blocks')}
+                  value={attributes.fromEmail ?? ''}
+                  onChange={(fromEmail) => setAttributes({fromEmail})}
+                />
+
+                <TextControl
+                  label={__('Předmět emailu', 'brilo-blocks')}
+                  value={attributes.subject ?? ''}
+                  placeholder={__('Potvrzení odeslaného formuláře', 'brilo-blocks')}
+                  onChange={(subject) => setAttributes({subject})}
+                />
+
+                <SelectControl
+                  label={__('Po odeslání', 'brilo-blocks')}
+                  value={attributes.internalSubmitBehavior ?? 'stay'}
+                  options={INTERNAL_SUBMIT_BEHAVIORS.map((b) => ({label: b.label, value: b.value}))}
+                  onChange={(internalSubmitBehavior) =>
+                    setAttributes({internalSubmitBehavior: internalSubmitBehavior as InternalSubmitBehavior})
+                  }
+                />
+
+                {(attributes.internalSubmitBehavior ?? 'stay') === 'redirect' && (
+                  <TextControl
+                    label={__('URL děkovné stránky', 'brilo-blocks')}
+                    value={attributes.internalRedirectUrl ?? ''}
+                    onChange={(internalRedirectUrl) => setAttributes({internalRedirectUrl})}
+                  />
+                )}
+
+                <TextControl
+                  label={__('Úspěšná zpráva', 'brilo-blocks')}
+                  value={attributes.successMessage ?? ''}
+                  onChange={(successMessage) => setAttributes({successMessage})}
+                />
+              </>
+            )}
+
+            <TextControl
+              label={__('Titulek tlačítka odeslání', 'brilo-blocks')}
+              value={attributes.submit?.label ?? 'Odeslat'}
+              onChange={(label) => setAttributes({submit: {label}})}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+
+          <div className="g-form__gdpr">
+            <div className="g-form__gdpr-header">
+              <strong>{__('GDPR obsah', 'brilo-blocks')}</strong>
+              <ToggleControl
+                label={__('S checkboxem?', 'brilo-blocks')}
+                checked={attributes.gdpr?.checkbox ?? true}
+                onChange={(checkbox) => setAttributes({gdpr: {content: attributes.gdpr?.content ?? '', checkbox}})}
+              />
+            </div>
+
+            <RichText
+              className="g-form__gdpr-content"
+              tagName="div"
+              value={attributes.gdpr?.content ?? ''}
+              allowedFormats={['core/bold', 'core/link']}
+              onChange={(content) => setAttributes({gdpr: {content, checkbox: attributes.gdpr?.checkbox ?? true}})}
+              placeholder={__('Text GDPR souhlasu…', 'brilo-blocks')}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/form/form-group/editor.scss

@@ -0,0 +1,41 @@
+.g-form {
+  width: 100%;
+
+  &__fields {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 16px;
+    padding: 16px;
+    padding-bottom: 56px;
+    outline: 1px dashed #ddd;
+
+    > * {
+      max-width: 100%;
+    }
+  }
+
+  &__gdpr {
+    margin-top: 16px;
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  &__gdpr-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  &__gdpr-content {
+    min-height: 56px;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+  }
+}

package/src/blocks/form/form-group/factory.tsx

@@ -0,0 +1,35 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createFormGroupEdit} from './edit'
+import type {FormGroupAttributes, FormGroupOptions} from './types'
+
+export type {FormGroupAttributes, FormGroupOptions}
+
+export function createFormGroupBlock(options: FormGroupOptions): BlockConfiguration<FormGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Formulář', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'feedback',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      formName: {type: 'string', default: ''},
+      processingMode: {type: 'string', default: 'internal'},
+      externalMethod: {type: 'string', default: 'POST'},
+      externalUrl: {type: 'string', default: ''},
+      internalSubmitBehavior: {type: 'string', default: 'stay'},
+      internalRedirectUrl: {type: 'string', default: ''},
+      fromEmail: {type: 'string', default: ''},
+      senders: {type: 'array', default: []},
+      subject: {type: 'string', default: ''},
+      submit: {type: 'object', default: {label: 'Odeslat'}},
+      gdpr: {type: 'object', default: {content: '', checkbox: true}},
+      successMessage: {type: 'string', default: 'Formulář byl úspěšně odeslán.'},
+    },
+    edit: createFormGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<FormGroupAttributes>
+}

package/src/blocks/form/form-group/index.ts

@@ -0,0 +1,18 @@
+export type {
+  ExternalMethod,
+  FormGroupAttributes,
+  FormGroupOptions,
+  InternalSubmitBehavior,
+  ProcessingMode,
+} from './types'
+export {createFormGroupBlock} from './factory'
+export {EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES} from './constants'
+
+import type {FormGroupOptions} from './types'
+
+export const formGroupDefaults: FormGroupOptions = {
+  name: 'brilo/form-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/form-field'],
+  template: [['brilo/form-field', {type: 'text'}]],
+}

package/src/blocks/form/form-group/types.ts

@@ -0,0 +1,22 @@
+import type {BriloBlockType} from '~/types'
+
+export type ProcessingMode = 'internal' | 'external'
+export type ExternalMethod = 'POST' | 'GET'
+export type InternalSubmitBehavior = 'stay' | 'redirect'
+
+export interface FormGroupAttributes extends Record<string, unknown> {
+  formName: string
+  processingMode: ProcessingMode
+  externalMethod: ExternalMethod
+  externalUrl: string
+  internalSubmitBehavior: InternalSubmitBehavior
+  internalRedirectUrl: string
+  fromEmail: string
+  senders: string[]
+  subject: string
+  submit: {label: string}
+  gdpr: {content: string; checkbox: boolean}
+  successMessage: string
+}
+
+export interface FormGroupOptions extends BriloBlockType {}

package/src/blocks/groups/banner-group/constants.ts

@@ -0,0 +1,15 @@
+import {__} from '@wordpress/i18n'
+import {HEADING_STYLES} from '~/constants'
+
+export const DEFAULT_HEADING_STYLES = HEADING_STYLES
+
+export const DEFAULT_VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'full-width',
+    label: __('Na plnou šířku', 'brilo-blocks'),
+  },
+] as const

package/src/blocks/groups/banner-group/edit.tsx

@@ -0,0 +1,122 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ColorPalette,
+  ToggleControl,
+  BaseControl,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {ImagePickerBody, ImagePickerControl} from '~/components/ImagePicker'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
+import {HEADING_LEVELS} from '~/constants'
+import type {BannerGroupAttributes, BannerGroupOptions, HeadingLevels, HeadingStyles, Variants} from './types'
+import clsx from 'clsx'
+
+export function createBannerGroupEdit(options: BannerGroupOptions) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BannerGroupAttributes
+    setAttributes: (a: Partial<BannerGroupAttributes>) => void
+  }) {
+    const {header, img, description, variant, hasBackgroundColor, backgroundColor, textColor} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: [options.blockClassName ?? 'g-banner wp-block-section', `--variant-${variant}`],
+      containerClassName: options.containerClassName ?? 'g-banner__inner-blocks',
+      allowedBlocks: options.allowedBlocks,
+      template: options.template,
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Vzhled', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(value) => setAttributes({variant: value as Variants})}
+              isBlock
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Úroveň nadpisu', 'brilo-blocks')}
+              value={String(header.heading.level)}
+              onChange={(value) =>
+                setAttributes({header: {...header, heading: {...header.heading, level: Number(value) as HeadingLevels}}})
+              }
+              isBlock
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              label={__('Styl nadpisu', 'brilo-blocks')}
+              value={header.heading.style}
+              onChange={(value) => setAttributes({header: {...header, heading: {...header.heading, style: value as HeadingStyles}}})}
+              isBlock
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s} value={s} label={s} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          <PanelBody title={__('Obrázek v pozadí', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+
+          <PanelBody title={__('Vzhled', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Použít barvu pozadí', 'brilo-blocks')}
+              checked={hasBackgroundColor}
+              onChange={(value) => setAttributes({hasBackgroundColor: value})}
+            />
+            {hasBackgroundColor && (
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')}>
+                <ColorPalette value={backgroundColor} onChange={(value) => setAttributes({backgroundColor: value})} enableAlpha={true} />
+              </BaseControl>
+            )}
+            <BaseControl label={__('Barva textu', 'brilo-blocks')}>
+              <ColorPalette value={textColor} onChange={(value) => setAttributes({textColor: value})} />
+            </BaseControl>
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div className="g-banner__content">
+            <RichText
+              tagName={`h${header.heading.level}` as HeadingStyles}
+              className={clsx('g-banner__heading', `--heading-style-${header.heading.style}`, 'u-text-editable')}
+              value={header.heading.title}
+              onChange={(value: string) => setAttributes({header: {...header, heading: {...header.heading, title: value}}})}
+              placeholder={__('Nadpis...', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic']}
+            />
+            <RichText
+              tagName="div"
+              className="g-banner__description u-text-editable"
+              value={description}
+              onChange={(value: string) => setAttributes({description: value})}
+              placeholder={__('Popis...', 'brilo-blocks')}
+            />
+          </div>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/groups/banner-group/editor.scss

@@ -0,0 +1,18 @@
+.g-banner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.g-banner__content {
+  flex-grow: 1;
+}
+
+.g-banner__inner-blocks {
+  flex-shrink: 0;
+
+  .g-button-group {
+    padding: 16px;
+  }
+}

package/src/blocks/groups/banner-group/factory.tsx

@@ -0,0 +1,64 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray, StringArray} from '~/types'
+import {DEFAULT_VARIANTS, DEFAULT_HEADING_STYLES} from './constants'
+import {createBannerGroupEdit} from './edit'
+import type {BannerGroupAttributes, BannerGroupOptions} from './types'
+import {HEADING_LEVELS} from '~/constants'
+import {icon as defaultIcon} from './icon'
+
+export type {BannerGroupAttributes, BannerGroupOptions}
+
+export function createBannerGroupBlock<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
+>(
+  options: BannerGroupOptions<TVariants, THeadingStyles>,
+): BlockConfiguration<BannerGroupAttributes<TVariants[number]['value'], THeadingStyles[number]>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Banner', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    icon: options.icon ?? defaultIcon,
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1] ?? headingStyles[0]},
+        },
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          alt: '',
+        },
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      hasBackgroundColor: {type: 'boolean', default: false},
+      backgroundColor: {type: 'string', default: ''},
+      textColor: {type: 'string', default: ''},
+    },
+    edit: createBannerGroupEdit(options as unknown as BannerGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<BannerGroupAttributes<TVariants[number]['value'], THeadingStyles[number]>>
+}

package/src/blocks/groups/banner-group/icon.tsx

@@ -0,0 +1,13 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="5.5" width="19" height="8" stroke="black" fill="none" />
+    <path d="M2 8H8V9H2V8Z" fill="black" />
+    <path d="M2 10H9V11H2V10Z" fill="black" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5 8C10.6716 8 10 8.67157 10 9.5C10 10.3284 10.6716 11 11.5 11H16.5C17.3284 11 18 10.3284 18 9.5C18 8.67157 17.3284 8 16.5 8H11.5ZM16 9H12V10H16V9Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

package/src/blocks/groups/banner-group/index.ts

@@ -0,0 +1,11 @@
+import {BannerGroupOptions} from '~/blocks/groups/banner-group/types'
+
+export type {BannerGroupAttributes, BannerGroupOptions} from './factory'
+export {createBannerGroupBlock} from './factory'
+
+export const bannerGroupDefaults: BannerGroupOptions = {
+  name: 'brilo/banner-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/button-group'],
+  template: [['brilo/button-group', {}]],
+}

package/src/blocks/groups/banner-group/types.ts

@@ -0,0 +1,30 @@
+import type {BriloBlockType, Media, OptionArray, StringArray} from '~/types'
+import {DEFAULT_HEADING_STYLES, DEFAULT_VARIANTS} from './constants'
+import {HEADING_LEVELS} from '~/constants'
+
+export type Variants = (typeof DEFAULT_VARIANTS)[number]['value']
+export type HeadingLevels = (typeof HEADING_LEVELS)[number]
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]
+
+export interface BannerGroupAttributes<TVariant extends string = Variants, THeadingStyle extends string = HeadingStyles>
+  extends Record<string, unknown> {
+  title: string
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+  }
+  img: Media
+  hasBackgroundColor: boolean
+  backgroundColor: string
+  textColor: string
+  description: string
+  variant: TVariant
+}
+
+export interface BannerGroupOptions<
+  TVariants extends OptionArray = typeof DEFAULT_VARIANTS,
+  THeadingStyles extends StringArray = typeof DEFAULT_HEADING_STYLES,
+> extends BriloBlockType {
+  variants?: TVariants
+  headingStyles?: THeadingStyles
+  headingLevels?: HeadingLevels
+}