@brilo/base-blocks 0.1.43 → 0.1.45

package/src/blocks/core/basic-icon/edit.tsx

@@ -0,0 +1,170 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  PanelBody,
+  RangeControl,
+  SelectControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {buildBasicIconPreviewStyle} from './buildPreviewStyle'
+import {
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE_PRESETS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+  ICON_TYPES,
+} from './constants'
+import type {BasicIconAlignment, BasicIconAttributes, BasicIconBackgroundShape, BasicIconOptions, BasicIconSizePreset} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly BasicIconSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`basic-icon-size-${label}`}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
+
+export function createBasicIconEdit(options: BasicIconOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicIconAttributes
+    setAttributes: (a: Partial<BasicIconAttributes>) => void
+  }) {
+    const {icon, style} = attributes
+    const {paletteColors, resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildBasicIconPreviewStyle(style, resolveHex)
+
+    const blockProps = useBlockProps({className: clsx('i-basic-icon', rootClassName)})
+
+    const setIcon = (patch: Partial<BasicIconAttributes['style']['icon']>) =>
+      setAttributes({style: {...style, icon: {...style.icon, ...patch}}})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+          <PanelBody title={__('Zarovnání', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={style.align}
+              onChange={(v) => setAttributes({style: {...style, align: v as BasicIconAlignment}})}
+            >
+              {DEFAULT_ALIGNMENTS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Styl ikony', 'brilo-blocks')} initialOpen={false}>
+            <PresetSizeControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={style.icon.size}
+              presets={DEFAULT_ICON_SIZE_PRESETS}
+              min={ICON_SIZE_MIN}
+              max={ICON_SIZE_MAX}
+              onChange={(v) => setIcon({size: v})}
+            />
+            <BaseControl label={__('Barva', 'brilo-blocks')} id="basic-icon-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.color || undefined}
+                onChange={(value) => setIcon({color: value ?? ''})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Pozadí', 'brilo-blocks')} id="basic-icon-background-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.background || undefined}
+                onChange={(value) => setIcon({background: value ?? ''})}
+              />
+            </BaseControl>
+            <PresetSizeControl
+              label={__('Velikost pozadí', 'brilo-blocks')}
+              value={style.icon.backgroundSize}
+              presets={DEFAULT_ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setIcon({backgroundSize: v})}
+            />
+            {style.icon.background && (
+              <SelectControl<string>
+                label={__('Tvar pozadí', 'brilo-blocks')}
+                value={style.icon.backgroundShape}
+                options={[...DEFAULT_ICON_BACKGROUND_SHAPES]}
+                onChange={(v) => setIcon({backgroundShape: v as BasicIconBackgroundShape})}
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="basic-icon-border-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.borderColor || undefined}
+                onChange={(value) => setIcon({borderColor: value ?? ''})}
+              />
+            </BaseControl>
+            {style.icon.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={style.icon.borderWidth}
+                onChange={(v) => setIcon({borderWidth: v ?? 0})}
+                min={0}
+                max={10}
+                step={1}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <ItemIconPreview
+            icon={icon}
+            className="i-basic-icon__icon"
+            modifierClassName={iconClassName}
+            style={cssVars}
+            setAttributes={setAttributes}
+            options={options}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/core/basic-icon/editor.scss

@@ -0,0 +1,119 @@
+.i-basic-icon {
+  display: flex;
+  --icon-background-size: 0px;
+
+  // Background size only reserves space when a background or outline is actually selected.
+  &.--icon-background,
+  &.--icon-bordered {
+    --icon-background-size: 88px;
+  }
+
+  &.--align-left {
+    justify-content: flex-start;
+  }
+
+  &.--align-center {
+    justify-content: center;
+  }
+
+  &.--align-right {
+    justify-content: flex-end;
+  }
+}
+
+.i-basic-icon__icon {
+  --icon-box-size: max(var(--icon-background-size, 0px), var(--icon-size, 88px));
+
+  width: var(--icon-box-size);
+  height: var(--icon-box-size);
+  flex: 0 0 var(--icon-box-size);
+  display: grid;
+  grid-template-areas: "pile";
+  place-items: center;
+  isolation: isolate;
+
+  &::before,
+  &::after {
+    content: "";
+    grid-area: pile;
+    width: var(--icon-background-size, 0px);
+    height: var(--icon-background-size, 0px);
+    border-radius: inherit;
+    clip-path: var(--icon-background-shape, none);
+  }
+
+  &::before {
+    z-index: 0;
+    background-color: var(--icon-outline-color, transparent);
+  }
+
+  &::after {
+    z-index: 1;
+    width: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    height: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    background-color: var(--icon-background-color, transparent);
+  }
+
+  img,
+  svg,
+  span {
+    grid-area: pile;
+    position: relative;
+    z-index: 2;
+    width: var(--icon-size, 88px);
+    height: var(--icon-size, 88px);
+    object-fit: contain;
+  }
+
+  svg path {
+    fill: var(--icon-color, currentcolor);
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color, currentcolor);
+  }
+
+  &.--background-shape-circle {
+    --icon-background-shape: circle(50% at 50% 50%);
+  }
+
+  &.--background-shape-triangle {
+    --icon-background-shape: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  &.--background-shape-rhombus {
+    --icon-background-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  &.--background-shape-octagon {
+    --icon-background-shape: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  }
+
+  &.--background-shape-bevel {
+    --icon-background-shape: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+  }
+
+  &.--background-shape-rabbet {
+    --icon-background-shape: polygon(
+      0% 15%,
+      15% 15%,
+      15% 0%,
+      85% 0%,
+      85% 15%,
+      100% 15%,
+      100% 85%,
+      85% 85%,
+      85% 100%,
+      15% 100%,
+      15% 85%,
+      0% 85%
+    );
+  }
+
+  &.--background-shape-parallelogram {
+    --icon-background-shape: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+  }
+}

package/src/blocks/core/basic-icon/factory.tsx

@@ -0,0 +1,42 @@
+import type {BlockConfiguration} from '@wordpress/blocks'
+import {__} from '@wordpress/i18n'
+import {DEFAULT_ALIGNMENTS, DEFAULT_ICON_BACKGROUND_SHAPES, DEFAULT_ICON_BACKGROUND_SIZE, DEFAULT_ICON_SIZE, ICON_TYPES} from './constants'
+import {createBasicIconEdit} from './edit'
+import type {BasicIconAttributes, BasicIconOptions} from './types'
+
+export type {BasicIconAttributes, BasicIconOptions}
+
+export function createBasicIconBlock(options: BasicIconOptions): BlockConfiguration<BasicIconAttributes> {
+  return {
+    name: options.name,
+    title: options.title ?? __('Ikona', 'brilo-blocks'),
+    description: options.description,
+    category: options.category ?? 'layout',
+    ...(options.parent && {parent: options.parent}),
+    icon: options.icon ?? 'star-filled',
+    supports: {html: false, customClassName: false},
+    attributes: {
+      icon: {
+        type: 'object',
+        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
+      },
+      style: {
+        type: 'object',
+        default: {
+          align: DEFAULT_ALIGNMENTS[0].value,
+          icon: {
+            size: DEFAULT_ICON_SIZE,
+            color: '',
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+            backgroundShape: DEFAULT_ICON_BACKGROUND_SHAPES[0].value,
+            borderColor: '',
+            borderWidth: 1,
+          },
+        },
+      },
+    },
+    edit: createBasicIconEdit(options),
+    save: () => null,
+  } as unknown as BlockConfiguration<BasicIconAttributes>
+}

package/src/blocks/core/basic-icon/index.ts

@@ -0,0 +1,17 @@
+export type {
+  BasicIconAlignment,
+  BasicIconAttributes,
+  BasicIconBackgroundShape,
+  BasicIconOptions,
+  BasicIconStyle,
+} from './types'
+export {createBasicIconBlock} from './factory'
+
+import type {BasicIconOptions} from './types'
+
+export const basicIconDefaults: BasicIconOptions = {
+  name: 'brilo/basic-icon',
+  parent: ['brilo/base-section'],
+  icons: [],
+  iconsSrc: '',
+}

package/src/blocks/core/basic-icon/types.ts

@@ -0,0 +1,34 @@
+import type {IconType} from '~/components/IconControl'
+import type {BriloBlockType, Icon} from '~/types'
+import type {DEFAULT_ALIGNMENTS, DEFAULT_ICON_BACKGROUND_SHAPES} from './constants'
+
+export type BasicIconAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
+export type BasicIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface BasicIconSizePreset {
+  value: number
+  label: string
+}
+
+export interface BasicIconStyle {
+  align: BasicIconAlignment
+  icon: {
+    size: number
+    color: string
+    background: string
+    backgroundSize: number
+    backgroundShape: BasicIconBackgroundShape
+    borderColor: string
+    borderWidth: number
+  }
+}
+
+export interface BasicIconAttributes extends Record<string, unknown> {
+  icon: Icon
+  style: BasicIconStyle
+}
+
+export interface BasicIconOptions extends BriloBlockType {
+  icons: IconType[]
+  iconsSrc: string
+}

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

@@ -9,3 +9,21 @@ export const DEFAULT_ICON_VARIANTS = [
   {value: 'info', label: __('Informace', 'brilo-blocks')},
   {value: 'message', label: __('Zpráva', '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_SIZE = 24
+export const ICON_SIZE_MIN = 12
+export const ICON_SIZE_MAX = 64
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 16, label: __('XS', 'brilo-blocks')},
+  {value: 20, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 40, label: __('XL', 'brilo-blocks')},
+] as const

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

@@ -1,12 +1,61 @@
 import {InspectorControls} from '@wordpress/block-editor'
-import {PanelBody, SelectControl} from '@wordpress/components'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  PanelBody,
+  RangeControl,
+  SelectControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
-import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {
+  DEFAULT_ICON_SIZE_PRESETS,
+  DEFAULT_ICON_VARIANTS,
+  DEFAULT_SHADOWS,
+  FAQ_HEADING_LEVELS,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+} from './constants'
+import type {FaqGroupAttributes, FaqGroupOptions, FaqHeadingLevel, FaqIconVariant, FaqShadow, FaqSizePreset} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly FaqSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`faq-group-size-${label}`}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
 
 export function createFaqGroupEdit(options: FaqGroupOptions) {
   const ICON_VARIANTS = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const exclude = options.exclude ?? []
 
   return function Edit({
     attributes,
@@ -15,11 +64,13 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
     attributes: FaqGroupAttributes
     setAttributes: (a: Partial<FaqGroupAttributes>) => void
   }) {
-    const {headingLevel, iconVariant} = attributes
+    const {headingLevel, iconVariant, style, spacing} = attributes
+    const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: options.blockClassName ?? 'g-faq wp-block-section',
       containerClassName: options.containerClassName ?? 'g-faq__items',
+      containerStyle: itemSpacingStyle(spacing),
       allowedBlocks: options.allowedBlocks,
       template: options.template,
       orientation: 'vertical',
@@ -44,7 +95,73 @@ export function createFaqGroupEdit(options: FaqGroupOptions) {
               options={ICON_VARIANTS.map((v) => ({value: v.value, label: v.label}))}
               onChange={(value) => setAttributes({iconVariant: value as FaqIconVariant})}
             />
+            {!exclude.includes('colors') && style && (
+              <>
+                <PresetSizeControl
+                  label={__('Velikost', 'brilo-blocks')}
+                  value={style.icon.size}
+                  presets={ICON_SIZE_PRESETS}
+                  min={ICON_SIZE_MIN}
+                  max={ICON_SIZE_MAX}
+                  onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v}}})}
+                />
+                <BaseControl label={__('Barva', 'brilo-blocks')} id="faq-group-icon-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.color || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, color: value ?? ''}}})}
+                  />
+                </BaseControl>
+                <BaseControl label={__('Pozadí', 'brilo-blocks')} id="faq-group-icon-background-color">
+                  <ColorPalette
+                    colors={paletteColors}
+                    value={style.icon.background || undefined}
+                    onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+                  />
+                </BaseControl>
+              </>
+            )}
           </PanelBody>
+          {!exclude.includes('colors') && style && (
+            <PanelBody title={__('Styl', 'brilo-blocks')}>
+              <ToggleGroupControl
+                isBlock
+                label={__('Stín', 'brilo-blocks')}
+                value={style.shadow}
+                onChange={(v) => setAttributes({style: {...style, shadow: v as FaqShadow}})}
+              >
+                {DEFAULT_SHADOWS.map((s) => (
+                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+                ))}
+              </ToggleGroupControl>
+              <BaseControl
+                label={__('Barva okraje', 'brilo-blocks')}
+                help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+                id="faq-group-border-color"
+              >
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.borderColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="faq-group-background-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.backgroundColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, backgroundColor: value ?? ''}})}
+                />
+              </BaseControl>
+              <BaseControl label={__('Barva textu', 'brilo-blocks')} id="faq-group-text-color">
+                <ColorPalette
+                  colors={paletteColors}
+                  value={style.textColor || undefined}
+                  onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
+                />
+              </BaseControl>
+            </PanelBody>
+          )}
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
         <div {...blockProps}>
           <div {...innerBlocksProps} />

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

@@ -1,8 +1,9 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
 import type {OptionArray} from '~/types'
-import {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import {DEFAULT_ICON_SIZE, DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 import {createFaqGroupEdit} from './edit'
 import type {FaqGroupAttributes, FaqGroupOptions} from './types'
 
@@ -12,6 +13,38 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
   options: FaqGroupOptions<TIconVariants>,
 ): BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>> {
   const iconVariants = options.iconVariants ?? DEFAULT_ICON_VARIANTS
+  const exclude = options.exclude ?? []
+
+  const attributes: Record<string, unknown> = {
+    headingLevel: {
+      type: 'string',
+      default: FAQ_HEADING_LEVELS[1],
+      enum: [...FAQ_HEADING_LEVELS],
+    },
+    iconVariant: {
+      type: 'string',
+      default: iconVariants[1]?.value ?? iconVariants[0].value,
+      enum: iconVariants.map((v) => v.value),
+    },
+    ...ITEM_SPACING_ATTRIBUTE,
+  }
+
+  if (!exclude.includes('colors')) {
+    attributes.style = {
+      type: 'object',
+      default: {
+        shadow: DEFAULT_SHADOWS[0].value,
+        borderColor: '',
+        backgroundColor: '',
+        textColor: '',
+        icon: {
+          color: '',
+          background: '',
+          size: DEFAULT_ICON_SIZE,
+        },
+      },
+    }
+  }
 
   return {
     name: options.name,
@@ -21,18 +54,7 @@ export function createFaqGroupBlock<TIconVariants extends OptionArray = typeof D
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'editor-help',
     supports: {html: false, customClassName: false},
-    attributes: {
-      headingLevel: {
-        type: 'string',
-        default: FAQ_HEADING_LEVELS[1],
-        enum: [...FAQ_HEADING_LEVELS],
-      },
-      iconVariant: {
-        type: 'string',
-        default: iconVariants[1]?.value ?? iconVariants[0].value,
-        enum: iconVariants.map((v) => v.value),
-      },
-    },
+    attributes,
     edit: createFaqGroupEdit(options as unknown as FaqGroupOptions),
     save: () => <InnerBlocks.Content />,
   } as unknown as BlockConfiguration<FaqGroupAttributes<TIconVariants[number]['value']>>

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

@@ -1,4 +1,12 @@
-export type {FaqGroupAttributes, FaqGroupOptions} from './types'
+export type {
+  ExcludableFaqAttr,
+  FaqGroupAttributes,
+  FaqGroupOptions,
+  FaqHeadingLevel,
+  FaqIconVariant,
+  FaqShadow,
+  FaqSizePreset,
+} from './types'
 export {createFaqGroupBlock} from './factory'
 
 import type {FaqGroupOptions} from './types'

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

@@ -1,14 +1,36 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import type {DEFAULT_ICON_VARIANTS, FAQ_HEADING_LEVELS} from './constants'
+import type {DEFAULT_ICON_VARIANTS, DEFAULT_SHADOWS, FAQ_HEADING_LEVELS} from './constants'
 
 export type FaqHeadingLevel = (typeof FAQ_HEADING_LEVELS)[number]
 export type FaqIconVariant = (typeof DEFAULT_ICON_VARIANTS)[number]['value']
+export type FaqShadow = (typeof DEFAULT_SHADOWS)[number]['value']
+
+export type ExcludableFaqAttr = 'colors'
+
+export interface FaqSizePreset {
+  value: number
+  label: string
+}
 
 export interface FaqGroupAttributes<TIconVariant extends string = FaqIconVariant> extends Record<string, unknown> {
   headingLevel: FaqHeadingLevel
   iconVariant: TIconVariant
+  style: {
+    shadow: FaqShadow
+    borderColor: string
+    backgroundColor: string
+    textColor: string
+    icon: {
+      color: string
+      background: string
+      size: number
+    }
+  }
+  spacing?: number
 }
 
 export interface FaqGroupOptions<TIconVariants extends OptionArray = typeof DEFAULT_ICON_VARIANTS> extends BriloBlockType {
   iconVariants?: TIconVariants
+  iconSizePresets?: readonly FaqSizePreset[]
+  exclude?: ExcludableFaqAttr[]
 }