@brilo/base-blocks 0.1.41 → 0.1.43

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

@@ -7,6 +7,19 @@
   margin-top: 0;
 }
 
+.i-hero__overline {
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: #555;
+  background-color: #f0f0f0;
+  border-radius: 100px;
+  padding: 3px 10px;
+  margin-bottom: 8px;
+}
+
 .i-hero__overlay {
   position: absolute;
   padding: 2rem;

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

@@ -21,6 +21,7 @@ export function createHeroItemBlock(options: HeroItemOptions): BlockConfiguratio
     attributes: {
       title: {type: 'string', default: ''},
       titleColor: {type: 'string', default: ''},
+      overline: {type: 'object', default: {title: '', color: '', background: ''}},
       img: {
         type: 'object',
         default: {id: 0, url: '', alt: ''},

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

@@ -1,5 +1,5 @@
-import {BriloBlockType, Media, OptionArray} from '~/types'
-import {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
+import type {BriloBlockType, Media, OptionArray} from '~/types'
+import type {CONTENT_POSITIONS, HEADING_LEVELS} from './constants'
 
 export type ContentPosition = (typeof CONTENT_POSITIONS)[number]['value']
 export type HeadingLevel = (typeof HEADING_LEVELS)[number]
@@ -11,6 +11,7 @@ export type HeroItemUrl = {
 
 export type HeroSliderItem = {
   title: string
+  overline: {title: string; color?: string; background?: string}
   img: Media
   headingLevel: number
   contentPosition: ContentPosition
@@ -27,6 +28,7 @@ export type HeroItemFocalPoint = {
 export interface HeroItemAttributes extends Record<string, unknown> {
   title: string
   titleColor: string
+  overline: {title: string; color?: string; background?: string}
   img: Media
   headingLevel: number
   contentPosition: ContentPosition

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

@@ -1,4 +1,4 @@
-import {type BlockConfiguration} from '@wordpress/blocks'
+import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {createLinkItemEdit} from './edit'
 import {icon as defaultIcon} from './icon'

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

@@ -1,6 +1,6 @@
-import {BriloBlockType, Media, type OptionArray, type StringArray} from '~/types'
-import {DEFAULT_HEADING_STYLES, MAP_TYPES} from './constants'
-import {HEADING_LEVELS} from '~/constants'
+import type {BriloBlockType, Media, OptionArray, StringArray} from '~/types'
+import type {DEFAULT_HEADING_STYLES, MAP_TYPES} from './constants'
+import type {HEADING_LEVELS} from '~/constants'
 
 export type MapType = (typeof MAP_TYPES)[number]['value']
 

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

@@ -1,6 +1,6 @@
 import type {BriloBlockType, Icon, StringArray} from '~/types'
 import type {IconType} from '~/components/IconControl'
-import {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
+import type {DEFAULT_HEADING_STYLES, NEWSLETTER_LEVELS} from './constants'
 
 export type HeadingLevels = (typeof NEWSLETTER_LEVELS)[number]
 export type HeadingStyles = (typeof DEFAULT_HEADING_STYLES)[number]

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

@@ -1,4 +1,4 @@
-import {BriloBlockType} from '~/types'
+import type {BriloBlockType} from '~/types'
 
 export interface PersonGroupAttributes extends Record<string, unknown> {
   columns: number

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

@@ -1,4 +1 @@
 import {__} from '@wordpress/i18n'
-
-// No item-specific constants yet, but file is required by anatomy
-export {}

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

@@ -1,5 +1,5 @@
-import {BriloBlockType} from '~/types'
-import {ImageValue} from '~/components/ImagePicker/ImagePicker'
+import type {BriloBlockType} from '~/types'
+import type {ImageValue} from '~/components/ImagePicker/ImagePicker'
 
 export interface PersonItemAttributes extends Record<string, unknown> {
   title: string

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

@@ -0,0 +1 @@
+export const PRICEPLAN_GROUP_DEFAULTS = {} as const

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

@@ -0,0 +1,21 @@
+import {useGroupBlock} from '~/hooks/useGroupBlock'
+import type {PriceplanGroupOptions} from './types'
+
+export function createPriceplanGroupEdit(options: PriceplanGroupOptions) {
+  return function Edit() {
+    const {blockProps, innerBlocksProps} = useGroupBlock({
+      blockClassName: options.blockClassName ?? 'g-priceplan wp-block-section',
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive-blocks-list --cols-3'],
+      allowedBlocks: options.allowedBlocks,
+      orientation: 'horizontal',
+      template: options.template,
+      layout: {type: 'default'},
+    })
+
+    return (
+      <div {...blockProps}>
+        <div {...innerBlocksProps} />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,3 @@
+.g-priceplan {
+  padding: 8px;
+}

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

@@ -0,0 +1,23 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {createPriceplanGroupEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PriceplanGroupAttributes, PriceplanGroupOptions} from './types'
+
+export type {PriceplanGroupAttributes, PriceplanGroupOptions}
+
+export function createPriceplanGroupBlock(options: PriceplanGroupOptions): BlockConfiguration<PriceplanGroupAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Ceník skupina', 'brilo-blocks'),
+    description: options.description ?? __('Skupina ceníkových karet (max 3 položky)', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {},
+    edit: createPriceplanGroupEdit(options),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<PriceplanGroupAttributes>
+}

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

@@ -0,0 +1,36 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Priceplan Group</title>
+    <path d="M4 4H8V5H4V4Z" fill="currentColor" />
+    <path d="M9 4H16V5H9V4Z" fill="currentColor" />
+    <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="currentColor"
+    />
+    <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="currentColor"
+    />
+    <rect x="13.5" y="8.5" width="6" height="10" stroke="currentColor" fill="none" />
+    <path
+      d="M15 11.5C15 10.6716 15.6716 10 16.5 10C17.3284 10 18 10.6716 18 11.5C18 12.3284 17.3284 13 16.5 13C15.6716 13 15 12.3284 15 11.5Z"
+      fill="#357AB5"
+    />
+    <rect x="0.5" y="8.5" width="6" height="10" stroke="currentColor" fill="none" />
+    <path
+      d="M2 11.5C2 10.6716 2.67157 10 3.5 10C4.32843 10 5 10.6716 5 11.5C5 12.3284 4.32843 13 3.5 13C2.67157 13 2 12.3284 2 11.5Z"
+      fill="#357AB5"
+    />
+    <path d="M2 14H5V15H2V14Z" fill="currentColor" />
+    <path d="M2 16H5V17H2V16Z" fill="currentColor" />
+    <rect x="6.5" y="7.5" width="7" height="12" stroke="currentColor" fill="none" />
+    <path
+      d="M8 11C8 9.89543 8.89543 9 10 9C11.1046 9 12 9.89543 12 11C12 12.1046 11.1046 13 10 13C8.89543 13 8 12.1046 8 11Z"
+      fill="#357AB5"
+    />
+    <path d="M8 14H12V15H8V14Z" fill="currentColor" />
+    <path d="M8 16H12V17H8V16Z" fill="currentColor" />
+    <path d="M15 14H18V15H15V14Z" fill="currentColor" />
+    <path d="M15 16H18V17H15V16Z" fill="currentColor" />
+  </svg>
+)

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

@@ -0,0 +1,15 @@
+import type {PriceplanGroupOptions} from './types'
+
+export type {PriceplanGroupAttributes, PriceplanGroupOptions} from './types'
+export {createPriceplanGroupBlock} from './factory'
+
+export const priceplanGroupDefaults: PriceplanGroupOptions = {
+  name: 'brilo/priceplan-group',
+  parent: ['brilo/base-section'],
+  allowedBlocks: ['brilo/priceplan-item'],
+  template: [
+    ['brilo/priceplan-item', {}],
+    ['brilo/priceplan-item', {}],
+    ['brilo/priceplan-item', {}],
+  ],
+}

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

@@ -0,0 +1,7 @@
+import type {BriloBlockType} from '~/types'
+
+export interface PriceplanGroupAttributes extends Record<string, unknown> {}
+
+export interface PriceplanGroupOptions extends BriloBlockType {
+  allowedBlocks?: string[]
+}

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

@@ -0,0 +1,11 @@
+import {__} from '@wordpress/i18n'
+
+export const ALIGNMENTS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+] as const
+
+export const CHIP_VARIANTS = [
+  {value: 'primary', label: __('Primární', 'brilo-blocks')},
+  {value: 'secondary', label: __('Sekundární', 'brilo-blocks')},
+] as const

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

@@ -0,0 +1,158 @@
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {
+  PanelBody,
+  TextControl,
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ImagePickerBody, ImagePickerControl, useMediaUrl} from '~/components/ImagePicker'
+import {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+import type {PriceplanAlignment, PriceplanChipVariant, PriceplanItemAttributes, PriceplanItemOptions} from './types'
+
+export function createPriceplanItemEdit(options: PriceplanItemOptions) {
+  const ALIGNMENTS_OPTIONS = options.alignments ?? ALIGNMENTS
+  const CHIP_VARIANTS_OPTIONS = options.chipVariants ?? CHIP_VARIANTS
+
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: PriceplanItemAttributes
+    setAttributes: (a: Partial<PriceplanItemAttributes>) => void
+  }) {
+    const {title, description, alignment, img, price, highlighted, chip, footer} = attributes
+    const chipIconUrl = useMediaUrl(chip?.icon?.id)
+
+    const blockProps = useBlockProps({
+      className: clsx('i-priceplan', `--align-${alignment}`, highlighted && '--highlighted'),
+    })
+
+    const innerBlocksProps = useInnerBlocksProps(
+      {className: 'i-priceplan__inner'},
+      {
+        allowedBlocks: options.allowedBlocks,
+        template: options.template,
+      },
+    )
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Karta', 'brilo-blocks')}>
+            <ToggleControl
+              label={__('Zvýrazněná karta', 'brilo-blocks')}
+              checked={highlighted}
+              onChange={(value) => setAttributes({highlighted: value})}
+            />
+            <ToggleGroupControl
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={alignment}
+              onChange={(value) => setAttributes({alignment: value as PriceplanAlignment})}
+              isBlock
+            >
+              {ALIGNMENTS_OPTIONS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')} initialOpen={false}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+          <PanelBody title={__('Chip / badge', 'brilo-blocks')} initialOpen={false}>
+            <TextControl
+              label={__('Text chipu', 'brilo-blocks')}
+              value={chip?.title ?? ''}
+              onChange={(value) => setAttributes({chip: {...chip, title: value}})}
+              placeholder={__('např. Doporučujeme', 'brilo-blocks')}
+            />
+            <ToggleGroupControl
+              label={__('Varianta chipu', 'brilo-blocks')}
+              value={chip?.variant ?? 'primary'}
+              onChange={(value) => setAttributes({chip: {...chip, variant: value as PriceplanChipVariant}})}
+              isBlock
+            >
+              {CHIP_VARIANTS_OPTIONS.map((v) => (
+                <ToggleGroupControlOption key={v.value} value={v.value} label={v.label} />
+              ))}
+            </ToggleGroupControl>
+            <ImagePickerControl
+              value={chip?.icon ?? {id: 0, alt: ''}}
+              onChange={(val) => setAttributes({chip: {...chip, icon: val}})}
+              labels={{
+                select: __('Vybrat ikonu chipu', 'brilo-blocks'),
+                change: __('Změnit ikonu', 'brilo-blocks'),
+                remove: __('Odebrat ikonu', 'brilo-blocks'),
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="i-priceplan__wrap">
+            {chip?.title && (
+              <div className={clsx('i-priceplan__chip', `--chip-${chip.variant}`)}>
+                {!!chip.icon?.id && chipIconUrl && <img src={chipIconUrl} alt={chip.icon?.alt ?? ''} className="i-priceplan__chip-icon" />}
+                <span>{chip.title}</span>
+              </div>
+            )}
+
+            <div className="i-priceplan__header">
+              <RichText
+                tagName="h3"
+                className="i-priceplan__title u-text-editable"
+                value={title}
+                onChange={(value) => setAttributes({title: value})}
+                placeholder={__('Název balíčku...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic', 'brilo-blocks/text-color']}
+              />
+              <RichText
+                tagName="p"
+                className="i-priceplan__description u-text-editable"
+                value={description}
+                onChange={(value) => setAttributes({description: value})}
+                placeholder={__('Popis balíčku...', 'brilo-blocks')}
+              />
+            </div>
+
+            <div className="i-priceplan__image">
+              <ImagePickerBody value={img} onChange={(val) => setAttributes({img: val})} />
+            </div>
+
+            <div className="i-priceplan__price">
+              <RichText
+                tagName="p"
+                className="i-priceplan__price-value u-text-editable"
+                value={price?.value ?? ''}
+                onChange={(value) => setAttributes({price: {...price, value}})}
+                placeholder={__('od 0 Kč', 'brilo-blocks')}
+                allowedFormats={[]}
+              />
+              <RichText
+                tagName="p"
+                className="i-priceplan__price-footer u-text-editable"
+                value={price?.footer ?? ''}
+                onChange={(value) => setAttributes({price: {...price, footer: value}})}
+                placeholder={__('s DPH · po odečtení dotace...', 'brilo-blocks')}
+                allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+              />
+            </div>
+
+            <div {...innerBlocksProps} />
+
+            <RichText
+              tagName="p"
+              className="i-priceplan__footer u-text-editable"
+              value={footer}
+              onChange={(value) => setAttributes({footer: value})}
+              placeholder={__('Poznámka (volitelné)...', 'brilo-blocks')}
+              allowedFormats={['core/bold', 'core/italic', 'core/link', 'brilo-blocks/text-color']}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+}

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

@@ -0,0 +1,131 @@
+.i-priceplan {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+  position: relative;
+
+  &.--highlighted {
+    border-color: #333;
+    border-width: 2px;
+  }
+
+  &.--align-center {
+    text-align: center;
+
+    .i-priceplan__wrap > .i-priceplan__chip {
+      align-self: center;
+    }
+  }
+}
+
+.i-priceplan__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.i-priceplan__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  align-self: flex-start;
+
+  &.--chip-primary {
+    background: #f60;
+    color: #fff;
+  }
+
+  &.--chip-secondary {
+    background: #eee;
+    color: #333;
+  }
+}
+
+.i-priceplan__chip-icon {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+
+.i-priceplan__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.i-priceplan__title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.i-priceplan__description {
+  font-size: 13px;
+  color: #666;
+  margin: 0;
+}
+
+.i-priceplan__image {
+  width: 100%;
+
+  .c-image-picker-body__preview img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    display: block;
+    border-radius: 4px;
+  }
+
+  .c-image-picker-body__placeholder {
+    aspect-ratio: 16/9;
+    min-height: unset;
+    border-radius: 4px;
+  }
+}
+
+.i-priceplan__price {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.i-priceplan__price-value {
+  font-size: 22px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.i-priceplan__price-footer {
+  font-size: 12px;
+  color: #888;
+  margin: 0;
+}
+
+.i-priceplan__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  > * {
+    margin-block: 0 !important;
+  }
+}
+
+.i-priceplan__wrap .g-button-group__inner {
+  flex-direction: column;
+}
+
+.i-priceplan__footer {
+  font-size: 12px;
+  color: #888;
+  margin: 0;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+}

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

@@ -0,0 +1,80 @@
+import {InnerBlocks} from '@wordpress/block-editor'
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import type {OptionArray} from '~/types'
+import {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+import {createPriceplanItemEdit} from './edit'
+import {icon as defaultIcon} from './icon'
+import type {PriceplanItemAttributes, PriceplanItemOptions} from './types'
+
+export type {PriceplanItemAttributes, PriceplanItemOptions}
+
+export function createPriceplanItemBlock<
+  TAlignments extends OptionArray = typeof ALIGNMENTS,
+  TChipVariants extends OptionArray = typeof CHIP_VARIANTS,
+>(
+  options: PriceplanItemOptions<TAlignments, TChipVariants>,
+): BlockConfiguration<PriceplanItemAttributes<TAlignments[number]['value'], TChipVariants[number]['value']>> {
+  const alignments = options.alignments ?? ALIGNMENTS
+  const chipVariants = options.chipVariants ?? CHIP_VARIANTS
+
+  return {
+    name: options.name,
+    title: options.title ?? __('Ceník položka', 'brilo-blocks'),
+    description: options.description ?? __('Ceníková karta s cenou, seznamem funkcí a tlačítkem', 'brilo-blocks'),
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? {src: defaultIcon},
+    supports: {html: false, customClassName: false},
+    attributes: {
+      title: {
+        type: 'string',
+        default: '',
+      },
+      description: {
+        type: 'string',
+        default: '',
+      },
+      alignment: {
+        type: 'string',
+        default: alignments[0].value,
+        enum: alignments.map((a) => a.value),
+      },
+      price: {
+        type: 'object',
+        default: {
+          value: '',
+          footer: '',
+        },
+      },
+      highlighted: {
+        type: 'boolean',
+        default: false,
+      },
+      chip: {
+        type: 'object',
+        default: {
+          title: '',
+          variant: chipVariants[0].value,
+          icon: {
+            id: 0,
+            alt: '',
+          },
+        },
+      },
+      img: {
+        type: 'object',
+        default: {
+          id: 0,
+          alt: '',
+        },
+      },
+      footer: {
+        type: 'string',
+        default: '',
+      },
+    },
+    edit: createPriceplanItemEdit(options as unknown as PriceplanItemOptions),
+    save: () => <InnerBlocks.Content />,
+  } as unknown as BlockConfiguration<PriceplanItemAttributes<TAlignments[number]['value'], TChipVariants[number]['value']>>
+}

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

@@ -0,0 +1,9 @@
+export const icon = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Priceplan Item</title>
+    <rect x="3" y="2" width="14" height="16" rx="1.5" stroke="currentColor" strokeWidth="1.5" fill="none" />
+    <path d="M6 6H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M6 9H11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M6 13H14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)

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

@@ -0,0 +1,16 @@
+import type {PriceplanItemOptions} from './types'
+
+export type {PriceplanItemAttributes, PriceplanItemOptions} from './types'
+export {createPriceplanItemBlock} from './factory'
+
+export const priceplanItemDefaults: PriceplanItemOptions = {
+  name: 'brilo/priceplan-item',
+  parent: ['brilo/priceplan-group'],
+  allowedBlocks: ['brilo/priceplan-list-item', 'brilo/button-group'],
+  template: [
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/priceplan-list-item', {}],
+    ['brilo/button-group', {}],
+  ],
+}

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

@@ -0,0 +1,34 @@
+import type {ImageValue} from '~/components/ImagePicker'
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {ALIGNMENTS, CHIP_VARIANTS} from './constants'
+
+export type PriceplanAlignment = (typeof ALIGNMENTS)[number]['value']
+export type PriceplanChipVariant = (typeof CHIP_VARIANTS)[number]['value']
+
+export interface PriceplanItemAttributes<TAlignment extends string = PriceplanAlignment, TChipVariant extends string = PriceplanChipVariant>
+  extends Record<string, unknown> {
+  title: string
+  description: string
+  alignment: TAlignment
+  img: ImageValue
+  price: {
+    value: string
+    footer: string
+  }
+  highlighted: boolean
+  chip: {
+    title: string
+    variant: TChipVariant
+    icon: ImageValue
+  }
+  footer: string
+}
+
+export interface PriceplanItemOptions<
+  TAlignments extends OptionArray = typeof ALIGNMENTS,
+  TChipVariants extends OptionArray = typeof CHIP_VARIANTS,
+> extends BriloBlockType {
+  allowedBlocks?: string[]
+  alignments?: TAlignments
+  chipVariants?: TChipVariants
+}

package/src/blocks/priceplan/priceplan-list-item/constants.ts

@@ -0,0 +1,6 @@
+import {__} from '@wordpress/i18n'
+
+export const LIST_VARIANTS = [
+  {value: 'included', label: __('Zahrnuto', 'brilo-blocks')},
+  {value: 'excluded', label: __('Nezahrnuto', 'brilo-blocks')},
+] as const