@brilo/base-blocks 0.1.1 → 0.1.3

package/src/blocks/text-and-form/text-and-form-text-column/editor.scss

@@ -0,0 +1,29 @@
+@layer base {
+  .g-text-and-form__text {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    width: 100%;
+  }
+
+  .g-text-and-form__overline {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #888;
+  }
+
+  .g-text-and-form__heading {
+    margin: 0;
+    font-weight: 700;
+    font-size: var(--heading-size, 24px);
+  }
+
+  .g-text-and-form__inner-blocks {
+    margin-top: 8px;
+    min-height: 40px;
+  }
+}

package/src/blocks/text-and-form/text-and-form-text-column/factory.tsx

@@ -0,0 +1,41 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
+import {createTextAndFormTextColumnEdit} from './edit'
+import type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+
+export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions}
+
+export function createTextAndFormTextColumnBlock<
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+>(
+  options: TextAndFormTextColumnOptions<THeadingStyles, TContentSizes>,
+): BlockConfiguration<TextAndFormTextColumnAttributes<THeadingStyles[number]['value'], TContentSizes[number]['value']>> {
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Textový sloupec', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'text',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      header: {
+        type: 'object',
+        default: {
+          heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
+          overline: {title: ''},
+        },
+      },
+      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
+    },
+    edit: createTextAndFormTextColumnEdit(options as unknown as TextAndFormTextColumnOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<TextAndFormTextColumnAttributes<THeadingStyles[number]['value'], TContentSizes[number]['value']>>
+}

package/src/blocks/text-and-form/text-and-form-text-column/index.ts

@@ -0,0 +1,18 @@
+export type {TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+export {createTextAndFormTextColumnBlock} from './factory'
+
+import type {TextAndFormTextColumnOptions} from './types'
+
+export const textAndFormTextColumnDefaults: TextAndFormTextColumnOptions = {
+  name: 'brilo/text-and-form-text-column',
+  parent: ['brilo/text-and-form-group'],
+  allowedBlocks: [
+    'brilo/basic-button',
+    'brilo/basic-heading',
+    'brilo/basic-overline',
+    'brilo/button-group',
+    'core/heading',
+    'core/list',
+    'core/paragraph',
+  ],
+}

package/src/blocks/text-and-form/text-and-form-text-column/types.ts

@@ -0,0 +1,23 @@
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
+
+export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]['value']
+export type HeadingLevels = (typeof HEADING_LEVELS)[number]
+export type ContentSizes = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+
+export interface TextAndFormTextColumnAttributes<THeadingStyle extends string = HeadingStyles, TContentSize extends string = ContentSizes>
+  extends Record<string, unknown> {
+  header: {
+    heading: {title: string; level: HeadingLevels; style: THeadingStyle}
+    overline: {title: string}
+  }
+  content: {size: TContentSize}
+}
+
+export interface TextAndFormTextColumnOptions<
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+> extends BriloBlockType {
+  headingStyles?: THeadingStyles
+  contentSizes?: TContentSizes
+}

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

@@ -0,0 +1,54 @@
+import {__} from '@wordpress/i18n'
+
+export {CONTENT_SIZES as DEFAULT_CONTENT_SIZES} from '~/constants'
+
+export const DEFAULT_COLUMNS = [2, 3, 4, 5, 6] as const
+
+export const DEFAULT_DIRECTIONS = [
+  {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
+  {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
+] as const
+
+export const HEADING_LEVELS = [2, 3] as const
+
+export const DEFAULT_HEADING_STYLES = [
+  {value: 'h1', label: 'L', description: __('48px', 'brilo-blocks')},
+  {value: 'h2', label: 'M', description: __('32px', 'brilo-blocks')},
+  {value: 'h3', label: 'S', description: __('24px', 'brilo-blocks')},
+  {value: 'h4', label: 'XS', description: __('20px', 'brilo-blocks')},
+  {value: 'h5', label: 'XXS', description: __('16px', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZES = [
+  {value: 'xs', label: __('Extra Malá', 'brilo-blocks'), description: __('48px', 'brilo-blocks')},
+  {value: 'sm', label: __('Malá', 'brilo-blocks'), description: __('64px', 'brilo-blocks')},
+  {value: 'default', label: __('Výchozí', 'brilo-blocks'), description: __('88px', 'brilo-blocks')},
+  {value: 'lg', label: __('Velká', 'brilo-blocks'), description: __('104px', 'brilo-blocks')},
+  {value: 'xl', label: __('Extra Velká', 'brilo-blocks'), description: __('128px', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_COLORS = [
+  {value: 'none', label: __('Žádná', 'brilo-blocks')},
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+  {value: 'conversion', label: __('Konverzní', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUNDS = [
+  {value: 'none', label: __('Žádné', 'brilo-blocks')},
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+  {value: 'neutral', label: __('Neutrální', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ALIGNMENTS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,197 @@
+import {InspectorControls} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  SelectControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import {
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_COLUMNS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_ICON_BACKGROUNDS,
+  DEFAULT_ICON_COLORS,
+  DEFAULT_ICON_SIZES,
+  DEFAULT_SHADOWS,
+  HEADING_LEVELS,
+} from './constants'
+import type {
+  UspAlignment,
+  UspContentSize,
+  UspDirection,
+  UspGroupAttributes,
+  UspGroupOptions,
+  UspHeadingLevel,
+  UspHeadingStyle,
+  UspIconBackground,
+  UspIconColor,
+  UspIconSize,
+  UspShadow,
+} from './types'
+
+export function createUspGroupEdit(options: UspGroupOptions) {
+  const COLUMNS = options.columns ?? DEFAULT_COLUMNS
+  const DIRECTIONS = options.directions ?? DEFAULT_DIRECTIONS
+  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const SHADOWS = options.shadows ?? DEFAULT_SHADOWS
+  const ICON_SIZES = options.iconSizes ?? DEFAULT_ICON_SIZES
+  const ICON_COLORS = options.iconColors ?? DEFAULT_ICON_COLORS
+  const ICON_BACKGROUND = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const ALIGNMENTS = options.alignments ?? DEFAULT_ALIGNMENTS
+  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: UspGroupAttributes
+    setAttributes: (a: Partial<UspGroupAttributes>) => void
+  }) {
+    const {columns, headingSettings, content, style} = attributes
+
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-usp wp-block-section',
+        `--direction-${style.direction}`,
+        style.card && '--card',
+        style.shadow !== 'none' && `--shadow-${style.shadow}`,
+      ),
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
+      containerStyle: {'--grid-max-col-count': columns},
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Počet sloupců', 'brilo-blocks')}
+              value={String(columns)}
+              onChange={(v) => setAttributes({columns: Number(v) as UspGroupAttributes['columns']})}
+            >
+              {COLUMNS.map((c) => (
+                <ToggleGroupControlOption key={c} value={String(c)} label={String(c)} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Směr', 'brilo-blocks')}
+              value={style.direction}
+              onChange={(v) => setAttributes({style: {...style, direction: v as UspDirection}})}
+            >
+              {DIRECTIONS.map((d) => (
+                <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+              ))}
+            </ToggleGroupControl>
+            {style.direction === 'vertical' && (
+              <ToggleGroupControl
+                isBlock
+                label={__('Zarovnání', 'brilo-blocks')}
+                value={style.align}
+                onChange={(v) => setAttributes({style: {...style, align: v as UspAlignment}})}
+              >
+                {ALIGNMENTS.map((a) => (
+                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+                ))}
+              </ToggleGroupControl>
+            )}
+            <ToggleGroupControl
+              isBlock
+              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
+              value={String(headingSettings.level)}
+              onChange={(v) => setAttributes({headingSettings: {...headingSettings, level: Number(v) as UspHeadingLevel}})}
+            >
+              {HEADING_LEVELS.map((l) => (
+                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Styl nadpisu položek', 'brilo-blocks')}
+              value={headingSettings.style}
+              onChange={(v) => setAttributes({headingSettings: {...headingSettings, style: v as UspHeadingStyle}})}
+            >
+              {HEADING_STYLES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost textu', 'brilo-blocks')}
+              value={content.size}
+              onChange={(v) => setAttributes({content: {size: v as UspContentSize}})}
+            >
+              {CONTENT_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Styl', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Karta', 'brilo-blocks')}
+              checked={style.card}
+              onChange={(v) => setAttributes({style: {...style, card: v}})}
+            />
+            {style.card && (
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as UspShadow}})}
+              >
+                {SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+            )}
+          </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Velikost', 'brilo-blocks')}
+              value={style.icon.size}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v as UspIconSize}}})}
+            >
+              {ICON_SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
+              ))}
+            </ToggleGroupControl>
+            <SelectControl<string>
+              label={__('Barva', 'brilo-blocks')}
+              value={style.icon.color}
+              options={[...ICON_COLORS]}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, color: v as UspIconColor}}})}
+            />
+            <SelectControl<string>
+              label={__('Pozadí', 'brilo-blocks')}
+              value={style.icon.background}
+              options={[...ICON_BACKGROUND]}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, background: v as UspIconBackground}}})}
+            />
+            {style.icon.background !== 'none' && (
+              <ToggleControl
+                label={__('Ohraničení ikony', 'brilo-blocks')}
+                checked={style.icon.bordered ?? false}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, bordered: v}}})}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+        <div {...blockProps}>
+          <div {...innerBlocksProps} />
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,24 @@
+@layer base {
+  .g-usp {
+    padding: 8px;
+    min-height: 60px;
+
+    &.--direction-horizontal .i-usp__inner {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    &.--card .i-usp__inner {
+      background: #fff;
+      border-color: #d0d5dd;
+    }
+
+    &.--shadow-sm .i-usp__inner {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    }
+
+    &.--shadow-md .i-usp__inner {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {NumberArray, OptionArray} from '~/types'
+import {
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_COLUMNS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_ICON_BACKGROUNDS,
+  DEFAULT_ICON_COLORS,
+  DEFAULT_ICON_SIZES,
+  DEFAULT_SHADOWS,
+  HEADING_LEVELS,
+} from './constants'
+import {createUspGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {UspGroupAttributes, UspGroupOptions} from './types'
+
+export type {UspGroupAttributes, UspGroupOptions}
+
+export function createUspGroupBlock<
+  TColumns extends NumberArray = typeof DEFAULT_COLUMNS,
+  TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
+  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
+  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
+  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+>(
+  options: UspGroupOptions<
+    TColumns,
+    TDirections,
+    THeadingStyles,
+    TShadows,
+    TIconSizes,
+    TIconColors,
+    TIconBackgrounds,
+    TAlignments,
+    TContentSizes
+  >,
+): BlockConfiguration<
+  UspGroupAttributes<
+    TColumns[number],
+    TDirections[number]['value'],
+    THeadingStyles[number]['value'],
+    TShadows[number]['value'],
+    TIconSizes[number]['value'],
+    TIconColors[number]['value'],
+    TIconBackgrounds[number]['value'],
+    TAlignments[number]['value'],
+    TContentSizes[number]['value']
+  >
+> {
+  const columns = options.columns ?? DEFAULT_COLUMNS
+  const directions = options.directions ?? DEFAULT_DIRECTIONS
+  const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
+  const shadows = options.shadows ?? DEFAULT_SHADOWS
+  const iconSizes = options.iconSizes ?? DEFAULT_ICON_SIZES
+  const iconColors = options.iconColors ?? DEFAULT_ICON_COLORS
+  const iconBackgrounds = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
+  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
+
+  return {
+    name: options.name,
+    title: options.title ?? __('USP Konkurenční výhody', '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: {
+      columns: {
+        type: 'number',
+        default: columns[1] ?? columns[0],
+        enum: [...columns],
+      },
+      headingSettings: {
+        type: 'object',
+        default: {level: HEADING_LEVELS[0], style: headingStyles[2]?.value ?? headingStyles[0].value},
+      },
+      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
+      style: {
+        type: 'object',
+        default: {
+          shadow: shadows[0].value,
+          card: false,
+          direction: directions[0].value,
+          align: alignments[0].value,
+          icon: {size: iconSizes[2]?.value ?? iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value},
+        },
+      },
+    },
+    edit: createUspGroupEdit(options as unknown as UspGroupOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<
+    UspGroupAttributes<
+      TColumns[number],
+      TDirections[number]['value'],
+      THeadingStyles[number]['value'],
+      TShadows[number]['value'],
+      TIconSizes[number]['value'],
+      TIconColors[number]['value'],
+      TIconBackgrounds[number]['value'],
+      TAlignments[number]['value'],
+      TContentSizes[number]['value']
+    >
+  >
+}

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

@@ -0,0 +1,18 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>USP Group</title>
+    <path d="M4 6H9V7H4V6Z" fill="black" />
+    <path d="M10 6H16V7H10V6Z" fill="black" />
+    <path
+      d="M12 4C12 3.44772 12.4477 3 13 3H14C14.5523 3 15 3.44772 15 4C15 4.55228 14.5523 5 14 5H13C12.4477 5 12 4.55228 12 4Z"
+      fill="black"
+    />
+    <path d="M5 4C5 3.44772 5.44772 3 6 3H10C10.5523 3 11 3.44772 11 4C11 4.55228 10.5523 5 10 5H6C5.44772 5 5 4.55228 5 4Z" fill="black" />
+    <rect x="1.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
+    <rect x="8.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
+    <rect x="15.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
+    <path d="M1 15H5V16H1V15Z" fill="black" />
+    <path d="M8 15H12V16H8V15Z" fill="black" />
+    <path d="M15 15H19V16H15V15Z" fill="black" />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+export type {UspGroupAttributes, UspGroupOptions} from './types'
+export {createUspGroupBlock} from './factory'
+
+import type {UspGroupOptions} from './types'
+
+export const uspGroupDefaults: UspGroupOptions = {
+  name: 'brilo/usp-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/usp-item'],
+  template: [
+    ['brilo/usp-item', {}],
+    ['brilo/usp-item', {}],
+    ['brilo/usp-item', {}],
+  ],
+}

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

@@ -0,0 +1,70 @@
+import type {BriloBlockType, NumberArray, OptionArray} from '~/types'
+import type {
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_COLUMNS,
+  DEFAULT_CONTENT_SIZES,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_HEADING_STYLES,
+  DEFAULT_ICON_BACKGROUNDS,
+  DEFAULT_ICON_COLORS,
+  DEFAULT_ICON_SIZES,
+  DEFAULT_SHADOWS,
+  HEADING_LEVELS,
+} from './constants'
+
+export type UspColumns = (typeof DEFAULT_COLUMNS)[number]
+export type UspDirection = (typeof DEFAULT_DIRECTIONS)[number]['value']
+export type UspHeadingLevel = (typeof HEADING_LEVELS)[number]
+export type UspHeadingStyle = (typeof DEFAULT_HEADING_STYLES)[number]['value']
+export type UspShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+export type UspAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+export type UspIconSize = (typeof DEFAULT_ICON_SIZES)[number]['value']
+export type UspIconColor = (typeof DEFAULT_ICON_COLORS)[number]['value']
+export type UspIconBackground = (typeof DEFAULT_ICON_BACKGROUNDS)[number]['value']
+export type UspContentSize = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+
+export interface UspGroupAttributes<
+  TColumn extends number = UspColumns,
+  TDirection extends string = UspDirection,
+  THeadingStyle extends string = UspHeadingStyle,
+  TShadow extends string = UspShadow,
+  TIconSize extends string = UspIconSize,
+  TIconColor extends string = UspIconColor,
+  TIconBackground extends string = UspIconBackground,
+  TAlignment extends string = UspAlignment,
+  TContentSize extends string = UspContentSize,
+> extends Record<string, unknown> {
+  columns: TColumn
+  headingSettings: {level: UspHeadingLevel; style: THeadingStyle}
+  content: {size: TContentSize}
+  style: {
+    shadow: TShadow
+    card: boolean
+    direction: TDirection
+    align: TAlignment
+    icon: {size: TIconSize; color: TIconColor; background: TIconBackground; bordered?: boolean}
+  }
+}
+
+export interface UspGroupOptions<
+  TColumns extends NumberArray = typeof DEFAULT_COLUMNS,
+  TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
+  THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
+  TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
+  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
+  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
+  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
+  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
+> extends BriloBlockType {
+  allowedBlocks: string[]
+  columns?: TColumns
+  directions?: TDirections
+  headingStyles?: THeadingStyles
+  shadows?: TShadows
+  iconSizes?: TIconSizes
+  iconColors?: TIconColors
+  iconBackgrounds?: TIconBackgrounds
+  alignments?: TAlignments
+  contentSizes?: TContentSizes
+}

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

@@ -0,0 +1,7 @@
+import {__} from '@wordpress/i18n'
+
+export const ICON_TYPES = [
+  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
+  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
+  {value: 'number', label: __('Číslo', 'brilo-blocks')},
+] as const