@brilo/base-blocks 0.1.0

package/src/blocks/signpost/signpost-item/factory.tsx

@@ -0,0 +1,29 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createSignpostItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {SignpostItemAttributes, SignpostItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export type {SignpostItemAttributes, SignpostItemOptions}
+
+export function createSignpostItemBlock(options: SignpostItemOptions): BlockConfiguration<SignpostItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Signpost položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      img: {type: 'object', default: {id: 0, alt: ''}},
+      button: {type: 'object', default: {text: ''}},
+      url: {type: 'string', default: ''},
+      blank: {type: 'boolean', default: false},
+    },
+    edit: createSignpostItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<SignpostItemAttributes>
+}

package/src/blocks/signpost/signpost-item/icon.tsx

@@ -0,0 +1,7 @@
+import {Path, SVG} from '@wordpress/components'
+
+export const icon = (
+  <SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <Path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+  </SVG>
+)

package/src/blocks/signpost/signpost-item/index.ts

@@ -0,0 +1,10 @@
+export type {SignpostItemAttributes, SignpostItemOptions} from './types'
+export {createSignpostItemBlock} from './factory'
+
+import type {SignpostItemOptions} from './types'
+
+export const signpostItemDefaults: SignpostItemOptions = {
+  name: 'brilo/signpost-item',
+  parent: ['brilo/signpost-group'],
+  allowedBlocks: ['core/paragraph', 'core/list', 'core/heading'],
+}

package/src/blocks/signpost/signpost-item/types.ts

@@ -0,0 +1,12 @@
+import {BriloBlockType} from '~/types'
+import {ImageValue} from '~/components/ImagePicker/ImagePicker'
+
+export interface SignpostItemAttributes extends Record<string, unknown> {
+  title: string
+  img: ImageValue
+  button: {text: string}
+  url: {src: string; blank: boolean}
+  blank: boolean
+}
+
+export interface SignpostItemOptions extends BriloBlockType {}

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

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const DEFAULT_VARIANTS = [
+  {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
+  {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,64 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {OptionArray} from '~/types'
+import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
+import {DEFAULT_VARIANTS} from './constants'
+
+export function createStepGroupEdit<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(options: StepGroupOptions<TVariants>) {
+  const VARIANTS = options.variants ?? DEFAULT_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: StepGroupAttributes
+    setAttributes: (a: Partial<StepGroupAttributes>) => void
+  }) {
+    const {variant, disableIcon} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'g-step wp-block-section', `--variant-${variant}`, disableIcon && '--disable-icon'),
+      containerClassName: [options.containerClassName ?? 'g-step__container', 'u-grid-responsive', '--cols-3'],
+      containerStyle: {'--grid-max-col-count': 3},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as StepGroupAttributes['variant']})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl
+              label={__('Vypnout ikonu', 'brilo-blocks')}
+              checked={disableIcon}
+              onChange={(v) => setAttributes({disableIcon: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,19 @@
+@layer base {
+  .g-step {
+    counter-reset: step-counter;
+
+    &.--variant-vertical {
+      .g-step__container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+    }
+
+    &.--disable-icon {
+      .i-step__icon-container {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_VARIANTS} from './constants'
+import {createStepGroupEdit} from './edit'
+import type {StepGroupAttributes, StepGroupOptions} from './types'
+import {icon} from '~/blocks/step/step-group/icon'
+import {OptionArray} from '~/types'
+
+export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(
+  options: StepGroupOptions<TVariants>,
+): BlockConfiguration<StepGroupAttributes<TVariants[number]['value']>> {
+  const variants = options.variants ?? DEFAULT_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Krok skupina', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? icon,
+    supports: {html: false, customClassName: false},
+    attributes: {
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+      },
+      disableIcon: {
+        type: 'boolean',
+        default: false,
+      },
+    },
+    edit: createStepGroupEdit(options as unknown as StepGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<StepGroupAttributes<TVariants[number]['value']>>
+}

package/src/blocks/step/step-group/icon.tsx

@@ -0,0 +1,27 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 6H7V7H4V6Z" fill="black" />
+    <path d="M12 6H15V7H12V6Z" fill="black" />
+    <path
+      d="M0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 7.32843 2.32843 8 1.5 8C0.671573 8 0 7.32843 0 6.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M8 6.5C8 5.67157 8.67157 5 9.5 5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8C8.67157 8 8 7.32843 8 6.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M16 6.5C16 5.67157 16.6716 5 17.5 5C18.3284 5 19 5.67157 19 6.5C19 7.32843 18.3284 8 17.5 8C16.6716 8 16 7.32843 16 6.5Z"
+      fill="#357AB5"
+    />
+    <path d="M8 13H11V14H8V13Z" fill="black" />
+    <path
+      d="M4 13.5C4 12.6716 4.67157 12 5.5 12C6.32843 12 7 12.6716 7 13.5C7 14.3284 6.32843 15 5.5 15C4.67157 15 4 14.3284 4 13.5Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M12 13.5C12 12.6716 12.6716 12 13.5 12C14.3284 12 15 12.6716 15 13.5C15 14.3284 14.3284 15 13.5 15C12.6716 15 12 14.3284 12 13.5Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {StepGroupAttributes, StepGroupOptions} from './types'
+export {createStepGroupBlock} from './factory'
+
+import type {StepGroupOptions} from './types'
+
+export const stepGroupDefaults: StepGroupOptions = {
+  name: 'brilo/step-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/step-item'],
+  template: [
+    ['brilo/step-item', {}],
+    ['brilo/step-item', {}],
+    ['brilo/step-item', {}],
+  ],
+}

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

@@ -0,0 +1,13 @@
+import {BriloBlockType, OptionArray} from '~/types'
+import {DEFAULT_VARIANTS} from './constants'
+
+export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
+
+export interface StepGroupAttributes<TVariant extends string = StepVariant> extends Record<string, unknown> {
+  variant: TVariant
+  disableIcon: boolean
+}
+
+export interface StepGroupOptions<TVariants extends OptionArray = typeof DEFAULT_VARIANTS> extends BriloBlockType {
+  variants?: TVariants
+}

package/src/blocks/step/step-item/constants.ts

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const ICON_TYPES = [
+  {value: 'preselected', label: __('Předdefinovaná', 'brilo-blocks')},
+  {value: 'media', label: __('Z médií', 'brilo-blocks')},
+] as const

package/src/blocks/step/step-item/edit.tsx

@@ -0,0 +1,60 @@
+import {InspectorControls, RichText} from '@wordpress/block-editor'
+import {PanelBody} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {ICON_TYPES} from './constants'
+import type {StepItemAttributes, StepItemOptions} from './types'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+
+export function createStepItemEdit(options: StepItemOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: StepItemAttributes
+    setAttributes: (a: Partial<StepItemAttributes>) => void
+  }) {
+    const {title, icon} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(options.blockClassName ?? 'i-step'),
+      containerClassName: [options.containerClassName ?? 'i-step__content wp-block-inner-content'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'vertical',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-step__inner wp-block-inner">
+            <div className="i-step__icon-container">
+              <ItemIconPreview icon={icon} className="i-step__icon" setAttributes={setAttributes} options={options} />
+            </div>
+
+            <div className={clsx('i-step__body', 'grow')}>
+              <RichText
+                tagName="h3"
+                className="i-step__title u-text-editable"
+                value={title}
+                onChange={(v) => setAttributes({title: v})}
+                placeholder={__('Nadpis kroku...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic']}
+              />
+
+              <div {...innerBlocksProps} />
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/step/step-item/editor.scss

@@ -0,0 +1,18 @@
+@layer base {
+  .i-step {
+    width: min(480px, 100%);
+    counter-increment: step-counter;
+  }
+
+  .i-step__icon-container {
+    flex-shrink: 0;
+  }
+
+  .i-step__inner {
+    &::before {
+      content: counter(step-counter) ".";
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+}

package/src/blocks/step/step-item/factory.tsx

@@ -0,0 +1,27 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {ICON_TYPES} from './constants'
+import {createStepItemEdit} from './edit'
+import type {StepItemAttributes, StepItemOptions} from './types'
+import {InnerBlocks} from '@wordpress/block-editor'
+
+export function createStepItemBlock(options: StepItemOptions): BlockConfiguration<StepItemAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Krok položka', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'editor-ol',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {type: 'string', default: ''},
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+    },
+    edit: createStepItemEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<StepItemAttributes>
+}

package/src/blocks/step/step-item/index.ts

@@ -0,0 +1,11 @@
+export type {StepItemAttributes, StepItemOptions} from './types'
+export {createStepItemBlock} from './factory'
+
+import type {StepItemOptions} from './types'
+
+export const stepItemDefaults: StepItemOptions = {
+  name: 'brilo/step-item',
+  parent: ['brilo/step-group'],
+  icons: [],
+  iconsSrc: '',
+}

package/src/blocks/step/step-item/types.ts

@@ -0,0 +1,12 @@
+import {BriloBlockType, Icon} from '~/types'
+import type {IconType} from '~/components/IconControl'
+
+export interface StepItemAttributes extends Record<string, unknown> {
+  title: string
+  icon: Icon
+}
+
+export interface StepItemOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

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

@@ -0,0 +1,27 @@
+import {__} from '@wordpress/i18n'
+
+export const VARIANTS = [
+  {
+    value: 'default',
+    label: __('Výchozí', 'brilo-blocks'),
+  },
+  {
+    value: 'slider',
+    label: __('Slider', 'brilo-blocks'),
+  },
+] as const
+
+export const SIZES = [
+  {
+    value: 'sm',
+    label: __('Malé', 'brilo-blocks'),
+  },
+  {
+    value: 'md',
+    label: __('Střední', 'brilo-blocks'),
+  },
+  {
+    value: 'lg',
+    label: __('Velká', 'brilo-blocks'),
+  },
+] as const

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

@@ -0,0 +1,74 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {VARIANTS, SIZES} from './constants'
+import type {Variant, Size, TestimonialGroupAttributes, TestimonialGroupOptions} from './types'
+
+export function createTestimonialGroupEdit(options: TestimonialGroupOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: TestimonialGroupAttributes
+    setAttributes: (a: Partial<TestimonialGroupAttributes>) => void
+  }) {
+    const {size, isBlackAndWhite, variant} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-testimonial wp-block-section',
+        `--variant-${variant}`,
+        isBlackAndWhite && '--is-bw',
+      ),
+      containerClassName:
+        options.containerClassName ?? clsx(options.blockClassName ?? 'g-testimonial__inner-blocks u-grid-responsive', `--size-${size}`),
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Nastavení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Varianta', 'brilo-blocks')}
+              value={variant}
+              onChange={(v) => setAttributes({variant: v as Variant})}
+            >
+              {VARIANTS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost', 'brilo-blocks')}
+              value={size}
+              onChange={(v) => setAttributes({size: v as Size})}
+            >
+              {SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleControl
+              label={__('Zobrazovat loga černobíle', 'brilo-blocks')}
+              checked={isBlackAndWhite}
+              onChange={(v) => setAttributes({isBlackAndWhite: v})}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,38 @@
+@layer base {
+  .g-testimonial {
+    &.--is-bw {
+      .i-testimonial__image-wrap {
+        filter: grayscale(100%);
+        opacity: 0.7;
+        transition:
+          filter 0.3s ease,
+          opacity 0.3s ease;
+
+        &:hover {
+          filter: grayscale(0%);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .g-testimonial__inner-blocks {
+    &.--size-sm {
+      --grid-min-col-size: 100px;
+      --grid-gap: 16px;
+      --grid-max-col-count: 5;
+    }
+
+    &.--size-md {
+      --grid-min-col-size: 150px;
+      --grid-gap: 24px;
+      --grid-max-col-count: 4;
+    }
+
+    &.--size-lg {
+      --grid-min-col-size: 200px;
+      --grid-gap: 32px;
+      --grid-max-col-count: 3;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {VARIANTS, SIZES} from './constants'
+import {createTestimonialGroupEdit} from './edit'
+import type {TestimonialGroupAttributes, TestimonialGroupOptions} from './types'
+import {icon} from './icon'
+
+export type {TestimonialGroupAttributes, TestimonialGroupOptions}
+
+export function createTestimonialGroupBlock<TVariants extends OptionArray = typeof VARIANTS, TSizes extends OptionArray = typeof SIZES>(
+  options: TestimonialGroupOptions<TVariants, TSizes>,
+): BlockConfiguration<TestimonialGroupAttributes<TVariants[number]['value'], TSizes[number]['value']>> {
+  const variants = options.variants ?? VARIANTS
+  const sizes = options.sizes ?? SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Reference - loga', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    supports: {html: false, customClassName: false},
+    icon: options.icon ?? icon,
+    attributes: {
+      variant: {
+        type: 'string',
+        default: variants[0].value,
+        enum: variants.map((v) => v.value),
+      },
+      size: {
+        type: 'string',
+        default: sizes[1].value,
+        enum: sizes.map((s) => s.value),
+      },
+      isBlackAndWhite: {
+        type: 'boolean',
+        default: true,
+      },
+    },
+    edit: createTestimonialGroupEdit(options as unknown as TestimonialGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<TestimonialGroupAttributes<TVariants[number]['value'], TSizes[number]['value']>>
+}

package/src/blocks/testimonial/testimonial-group/icon.tsx

@@ -0,0 +1,33 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 4H9V5H4V4Z" fill="black" />
+    <path d="M10 4H16V5H10V4Z" fill="black" />
+    <path
+      d="M12 2C12 1.44772 12.4477 1 13 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H13C12.4477 3 12 2.55228 12 2Z"
+      fill="black"
+    />
+    <path d="M5 2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3H6C5.44772 3 5 2.55228 5 2Z" fill="black" />
+    <path d="M1 9C1 8.44772 1.44772 8 2 8H3C3.55228 8 4 8.44772 4 9C4 9.55228 3.55228 10 3 10H2C1.44772 10 1 9.55228 1 9Z" fill="#357AB5" />
+    <path d="M6 9C6 8.44772 6.44772 8 7 8H8C8.55228 8 9 8.44772 9 9C9 9.55228 8.55228 10 8 10H7C6.44772 10 6 9.55228 6 9Z" fill="#357AB5" />
+    <path
+      d="M11 9C11 8.44772 11.4477 8 12 8H13C13.5523 8 14 8.44772 14 9C14 9.55228 13.5523 10 13 10H12C11.4477 10 11 9.55228 11 9Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M16 9C16 8.44772 16.4477 8 17 8H18C18.5523 8 19 8.44772 19 9C19 9.55228 18.5523 10 18 10H17C16.4477 10 16 9.55228 16 9Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M3 13C3 12.4477 3.44772 12 4 12H5C5.55228 12 6 12.4477 6 13C6 13.5523 5.55228 14 5 14H4C3.44772 14 3 13.5523 3 13Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M8 13C8 12.4477 8.44772 12 9 12H11C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14H9C8.44772 14 8 13.5523 8 13Z"
+      fill="#357AB5"
+    />
+    <path
+      d="M14 13C14 12.4477 14.4477 12 15 12H16C16.5523 12 17 12.4477 17 13C17 13.5523 16.5523 14 16 14H15C14.4477 14 14 13.5523 14 13Z"
+      fill="#357AB5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {TestimonialGroupAttributes} from './types'
+export {createTestimonialGroupBlock} from './factory'
+
+import {TestimonialGroupOptions} from './types'
+
+export const testimonialGroupDefaults: TestimonialGroupOptions = {
+  name: 'brilo/testimonial-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/testimonial-item'],
+  template: [
+    ['brilo/testimonial-item', {}],
+    ['brilo/testimonial-item', {}],
+    ['brilo/testimonial-item', {}],
+  ],
+}

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

@@ -0,0 +1,19 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import {VARIANTS, SIZES} from './constants'
+
+export type Variant = (typeof VARIANTS)[number]['value']
+export type Size = (typeof SIZES)[number]['value']
+
+export interface TestimonialGroupAttributes<TVariant extends string = Variant, TSize extends string = Size>
+  extends Record<string, unknown> {
+  size: TSize
+  isBlackAndWhite: boolean
+  variant: TVariant
+}
+
+export interface TestimonialGroupOptions<TVariants extends OptionArray = typeof VARIANTS, TSizes extends OptionArray = typeof SIZES>
+  extends BriloBlockType {
+  allowedBlocks: string[]
+  variants?: TVariants
+  sizes?: TSizes
+}