@brilo/base-blocks 0.1.47 → 0.1.49

package/build/index.js

@@ -1,6 +1,6 @@
 export { ANCHOR_ALIGNMENTS, ANCHOR_COLUMNS, anchorGroupDefaults, createAnchorGroupBlock } from './blocks/anchor/anchor-group';
 export { ANCHOR_ICON_SIZE_DEFAULT, ANCHOR_ICON_SIZE_RANGE, ANCHOR_ICON_TYPES, anchorItemDefaults, createAnchorItemBlock, createAnchorItemEdit, } from './blocks/anchor/anchor-item';
-export { CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, contactGroupDefaults, createContactGroupBlock, } from './blocks/contact/contact-group';
+export { CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT, contactGroupDefaults, createContactGroupBlock, } from './blocks/contact/contact-group';
 export { CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES, contactItemDefaults, createContactItemBlock, createContactItemEdit, } from './blocks/contact/contact-item';
 export { accordionItemDefaults, createAccordionItemBlock } from './blocks/accordion/accordion-item';
 export { accordionGroupDefaults, createAccordionGroupBlock } from './blocks/accordion/accordion-group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brilo/base-blocks",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "author": "Brilo",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

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

@@ -4,13 +4,55 @@ export const CONTACT_COLUMNS = [2, 3] as const
 
 export const CONTACT_COLUMNS_CONTEXT = 'brilo/contact-columns'
 
+export const CONTACT_STYLE_CONTEXT = 'brilo/contact-style'
+
 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_DIRECTIONS = [
+  {value: 'vertical', label: __('Vertikální', 'brilo-blocks')},
+  {value: 'horizontal', label: __('Horizontální', 'brilo-blocks')},
+] as const
+
 export const TEXT_ALIGNS = [
   {value: 'left', label: __('Vlevo', 'brilo-blocks')},
   {value: 'center', label: __('Na střed', 'brilo-blocks')},
 ] as const
+
+export const DEFAULT_ICON_SIZE = 88
+export const ICON_SIZE_MIN = 4
+export const ICON_SIZE_MAX = 128
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 8, label: __('XS', 'brilo-blocks')},
+  {value: 16, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 48, label: __('XL', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUND_SIZE = 88
+export const ICON_BACKGROUND_SIZE_MIN = 16
+export const ICON_BACKGROUND_SIZE_MAX = 240
+
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+  {value: 48, label: __('XS', 'brilo-blocks')},
+  {value: 64, label: __('SM', 'brilo-blocks')},
+  {value: 88, label: __('Výchozí', 'brilo-blocks')},
+  {value: 104, label: __('LG', 'brilo-blocks')},
+  {value: 128, label: __('XL', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUND_SHAPES = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const

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

@@ -1,20 +1,82 @@
 import {InspectorControls} 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 type {CSSProperties} from 'react'
+import {ItemSpacingPanel, itemSpacingStyle} from '~/components/ItemSpacingControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import {CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
-import type {ContactColumns, ContactGroupAttributes, ContactGroupOptions, ContactShadow, ContactTextAlign} from './types'
+import {
+  CONTACT_COLUMNS,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_ICON_SIZE_PRESETS,
+  DEFAULT_SHADOWS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+  TEXT_ALIGNS,
+} from './constants'
+import type {
+  ContactColumns,
+  ContactDirection,
+  ContactGroupAttributes,
+  ContactGroupOptions,
+  ContactIconBackgroundShape,
+  ContactShadow,
+  ContactSizePreset,
+  ContactTextAlign,
+} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly ContactSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`contact-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 createContactGroupEdit(options: ContactGroupOptions) {
   const COLUMNS = options.columns ?? CONTACT_COLUMNS
+  const DIRECTIONS = options.directions ?? DEFAULT_DIRECTIONS
+  const SHADOWS = options.shadows ?? DEFAULT_SHADOWS
+  const ICON_SIZE_PRESETS = options.iconSizePresets ?? DEFAULT_ICON_SIZE_PRESETS
+  const ICON_BACKGROUND_SIZE_PRESETS = options.iconBackgroundSizePresets ?? DEFAULT_ICON_BACKGROUND_SIZE_PRESETS
+  const ICON_BACKGROUND_SHAPES = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
 
   return function Edit({
     attributes,
@@ -23,19 +85,51 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
     attributes: ContactGroupAttributes
     setAttributes: (a: Partial<ContactGroupAttributes>) => void
   }) {
-    const {columns, style} = attributes
-    const {paletteColors} = useTenantColorPalette()
+    const {columns, groupBackgroundColor, spacing} = attributes
+    const {paletteColors, resolveHex} = useTenantColorPalette()
+
+    const savedStyle = attributes.style as Partial<ContactGroupAttributes['style']> | undefined
+    const style: ContactGroupAttributes['style'] = {
+      shadow: SHADOWS[0].value,
+      direction: DIRECTIONS[0].value,
+      textAlign: 'left',
+      borderColor: '',
+      backgroundColor: '',
+      textColor: '',
+      ...savedStyle,
+      icon: {
+        size: DEFAULT_ICON_SIZE,
+        color: '',
+        background: '',
+        backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+        backgroundShape: ICON_BACKGROUND_SHAPES[0].value,
+        borderColor: '',
+        borderWidth: 1,
+        ...savedStyle?.icon,
+      },
+    }
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'g-contact wp-block-section'),
+      blockClassName: clsx(
+        options.blockClassName ?? 'g-contact wp-block-section',
+        `--direction-${style.direction}`,
+        groupBackgroundColor && '--group-background',
+        spacing === 0 && '--connected',
+      ),
       containerClassName: [options.containerClassName ?? 'g-contact__items', `--cols-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
+      containerStyle: {'--grid-max-col-count': columns, ...itemSpacingStyle(spacing)},
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
       layout: {type: 'default'},
     })
 
+    const groupStyle = (
+      groupBackgroundColor
+        ? {...(blockProps.style as CSSProperties), '--group-background-color': resolveHex(groupBackgroundColor)}
+        : (blockProps.style as CSSProperties)
+    ) as CSSProperties
+
     return (
       <>
         <InspectorControls>
@@ -50,20 +144,52 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
                 <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 ContactDirection}})}
+            >
+              {DIRECTIONS.map((d) => (
+                <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
+              ))}
+            </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Zarovnání', 'brilo-blocks')}
+              help={__('Zarovná text i ikonu položky.', 'brilo-blocks')}
+              value={style.textAlign}
+              onChange={(v) => setAttributes({style: {...style, textAlign: v as ContactTextAlign}})}
+            >
+              {TEXT_ALIGNS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
           </PanelBody>
           <PanelBody title={__('Styl', 'brilo-blocks')}>
+            <BaseControl
+              label={__('Barva pozadí skupiny', 'brilo-blocks')}
+              help={__('Souvislé pozadí za všemi položkami. Vhodné s nulovou mezerou.', 'brilo-blocks')}
+              id="contact-group-group-background-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={groupBackgroundColor || undefined}
+                onChange={(value) => setAttributes({groupBackgroundColor: value ?? ''})}
+              />
+            </BaseControl>
             <ToggleGroupControl
               isBlock
-              label={__('Stín', 'brilo-blocks')}
+              label={__('Stín položek', 'brilo-blocks')}
               value={style.shadow}
               onChange={(v) => setAttributes({style: {...style, shadow: v as ContactShadow}})}
             >
-              {DEFAULT_SHADOWS.map((s) => (
+              {SHADOWS.map((s) => (
                 <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
               ))}
             </ToggleGroupControl>
             <BaseControl
-              label={__('Barva okraje', 'brilo-blocks')}
+              label={__('Barva okraje položek', 'brilo-blocks')}
               help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
               id="contact-group-border-color"
             >
@@ -73,7 +199,7 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
                 onChange={(value) => setAttributes({style: {...style, borderColor: value ?? ''}})}
               />
             </BaseControl>
-            <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id="contact-group-background-color">
+            <BaseControl label={__('Barva pozadí položek', 'brilo-blocks')} id="contact-group-background-color">
               <ColorPalette
                 colors={paletteColors}
                 value={style.backgroundColor || undefined}
@@ -87,19 +213,73 @@ export function createContactGroupEdit(options: ContactGroupOptions) {
                 onChange={(value) => setAttributes({style: {...style, textColor: value ?? ''}})}
               />
             </BaseControl>
-            <ToggleGroupControl
-              isBlock
-              label={__('Zarovnání textu', 'brilo-blocks')}
-              value={style.textAlign}
-              onChange={(v) => setAttributes({style: {...style, textAlign: v as ContactTextAlign}})}
+          </PanelBody>
+          <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
+            <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="contact-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="contact-group-icon-background-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.background || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, background: value ?? ''}}})}
+              />
+            </BaseControl>
+            <PresetSizeControl
+              label={__('Velikost pozadí', 'brilo-blocks')}
+              value={style.icon.backgroundSize}
+              presets={ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, backgroundSize: v}}})}
+            />
+            {style.icon.background && (
+              <SelectControl<string>
+                label={__('Tvar pozadí', 'brilo-blocks')}
+                value={style.icon.backgroundShape}
+                options={[...ICON_BACKGROUND_SHAPES]}
+                onChange={(v) =>
+                  setAttributes({style: {...style, icon: {...style.icon, backgroundShape: v as ContactIconBackgroundShape}}})
+                }
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="contact-group-icon-border-color"
             >
-              {TEXT_ALIGNS.map((a) => (
-                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
-              ))}
-            </ToggleGroupControl>
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.borderColor || undefined}
+                onChange={(value) => setAttributes({style: {...style, icon: {...style.icon, borderColor: value ?? ''}}})}
+              />
+            </BaseControl>
+            {style.icon.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={style.icon.borderWidth}
+                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, borderWidth: v ?? 0}}})}
+                min={0}
+                max={10}
+                step={1}
+              />
+            )}
           </PanelBody>
+          <ItemSpacingPanel spacing={spacing} onChange={(v) => setAttributes({spacing: v})} />
         </InspectorControls>
-        <div {...blockProps}>
+        <div {...blockProps} style={groupStyle}>
           <div {...innerBlocksProps} />
         </div>
       </>

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

@@ -6,6 +6,25 @@
       gap: 16px;
       align-items: start;
     }
+
+    &.--group-background {
+      background-color: var(--group-background-color, transparent);
+      border-radius: 4px;
+    }
+
+    // With zero spacing the items sit flush; drop their individual rounding and
+    // clip to the group so the background reads as one connected surface.
+    &.--connected {
+      overflow: hidden;
+
+      .g-contact__items {
+        gap: 0;
+      }
+
+      .i-contact {
+        border-radius: 0;
+      }
+    }
   }
 }
 

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

@@ -1,17 +1,42 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import type {NumberArray} from '~/types'
-import {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, DEFAULT_SHADOWS} from './constants'
+import {ITEM_SPACING_ATTRIBUTE} from '~/components/ItemSpacingControl'
+import type {NumberArray, OptionArray} from '~/types'
+import {
+  CONTACT_COLUMNS,
+  CONTACT_COLUMNS_CONTEXT,
+  CONTACT_STYLE_CONTEXT,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_SHADOWS,
+} from './constants'
 import {createContactGroupEdit} from './edit'
 import type {ContactGroupAttributes, ContactGroupOptions} from './types'
 
 export type {ContactGroupAttributes, ContactGroupOptions}
 
-export function createContactGroupBlock<TColumns extends NumberArray = typeof CONTACT_COLUMNS>(
-  options: ContactGroupOptions<TColumns>,
-): BlockConfiguration<ContactGroupAttributes<TColumns[number]>> {
+export function createContactGroupBlock<
+  TColumns extends NumberArray = typeof CONTACT_COLUMNS,
+  TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
+  TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
+>(
+  options: ContactGroupOptions<TColumns, TDirections, TShadows, TIconBackgroundShapes>,
+): BlockConfiguration<
+  ContactGroupAttributes<
+    TColumns[number],
+    TDirections[number]['value'],
+    TShadows[number]['value'],
+    TIconBackgroundShapes[number]['value']
+  >
+> {
   const columns = options.columns ?? CONTACT_COLUMNS
+  const directions = options.directions ?? DEFAULT_DIRECTIONS
+  const shadows = options.shadows ?? DEFAULT_SHADOWS
+  const iconBackgroundShapes = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
 
   return {
     name: options.name,
@@ -21,19 +46,47 @@ export function createContactGroupBlock<TColumns extends NumberArray = typeof CO
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'id-alt',
     supports: {html: false, customClassName: false},
-    providesContext: {[CONTACT_COLUMNS_CONTEXT]: 'columns'},
+    providesContext: {
+      [CONTACT_COLUMNS_CONTEXT]: 'columns',
+      [CONTACT_STYLE_CONTEXT]: 'style',
+    },
     attributes: {
       columns: {
         type: 'number',
         default: columns[1] ?? columns[0],
         enum: [...columns],
       },
+      groupBackgroundColor: {type: 'string', default: ''},
       style: {
         type: 'object',
-        default: {shadow: DEFAULT_SHADOWS[0].value, borderColor: '', backgroundColor: '', textColor: '', textAlign: 'left'},
+        default: {
+          shadow: shadows[0].value,
+          direction: directions[0].value,
+          textAlign: 'left',
+          borderColor: '',
+          backgroundColor: '',
+          textColor: '',
+          icon: {
+            size: DEFAULT_ICON_SIZE,
+            color: '',
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+            backgroundShape: iconBackgroundShapes[0].value,
+            borderColor: '',
+            borderWidth: 1,
+          },
+        },
       },
+      ...ITEM_SPACING_ATTRIBUTE,
     },
     edit: createContactGroupEdit(options as unknown as ContactGroupOptions),
     save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<ContactGroupAttributes<TColumns[number]>>
+  } as unknown as BlockConfiguration<
+    ContactGroupAttributes<
+      TColumns[number],
+      TDirections[number]['value'],
+      TShadows[number]['value'],
+      TIconBackgroundShapes[number]['value']
+    >
+  >
 }

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

@@ -1,6 +1,14 @@
-export type {ContactColumns, ContactGroupAttributes, ContactGroupOptions} from './types'
+export type {
+  ContactColumns,
+  ContactDirection,
+  ContactGroupAttributes,
+  ContactGroupOptions,
+  ContactIconBackgroundShape,
+  ContactShadow,
+  ContactTextAlign,
+} from './types'
 export {createContactGroupBlock} from './factory'
-export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT} from './constants'
+export {CONTACT_COLUMNS, CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from './constants'
 
 import type {ContactGroupOptions} from './types'
 

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

@@ -1,23 +1,65 @@
-import type {BriloBlockType, NumberArray} from '~/types'
-import type {CONTACT_COLUMNS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
+import type {BriloBlockType, NumberArray, OptionArray} from '~/types'
+import type {
+  CONTACT_COLUMNS,
+  DEFAULT_DIRECTIONS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_SHADOWS,
+  TEXT_ALIGNS,
+} from './constants'
 
 export type ContactColumns = (typeof CONTACT_COLUMNS)[number]
 
 export type ContactShadow = (typeof DEFAULT_SHADOWS)[number]['value']
 
+export type ContactDirection = (typeof DEFAULT_DIRECTIONS)[number]['value']
+
 export type ContactTextAlign = (typeof TEXT_ALIGNS)[number]['value']
 
-export interface ContactGroupAttributes<TColumns extends number = ContactColumns> extends Record<string, unknown> {
+export type ContactIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface ContactSizePreset {
+  value: number
+  label: string
+}
+
+export interface ContactGroupAttributes<
+  TColumns extends number = ContactColumns,
+  TDirection extends string = ContactDirection,
+  TShadow extends string = ContactShadow,
+  TIconBackgroundShape extends string = ContactIconBackgroundShape,
+> extends Record<string, unknown> {
   columns: TColumns
+  groupBackgroundColor: string
   style: {
-    shadow: ContactShadow
+    shadow: TShadow
+    direction: TDirection
+    textAlign: ContactTextAlign
     borderColor: string
     backgroundColor: string
     textColor: string
-    textAlign: ContactTextAlign
+    icon: {
+      size: number
+      color: string
+      background: string
+      backgroundSize: number
+      backgroundShape: TIconBackgroundShape
+      borderColor: string
+      borderWidth: number
+    }
   }
+  spacing?: number
 }
 
-export interface ContactGroupOptions<TColumns extends NumberArray = typeof CONTACT_COLUMNS> extends BriloBlockType {
+export interface ContactGroupOptions<
+  TColumns extends NumberArray = typeof CONTACT_COLUMNS,
+  TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
+  TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
+> extends BriloBlockType {
   columns?: TColumns
+  directions?: TDirections
+  shadows?: TShadows
+  iconSizePresets?: readonly ContactSizePreset[]
+  iconBackgroundSizePresets?: readonly ContactSizePreset[]
+  iconBackgroundShapes?: TIconBackgroundShapes
 }

package/src/blocks/contact/contact-item/buildPreviewStyle.ts

@@ -0,0 +1,69 @@
+import clsx from 'clsx'
+
+export interface ContactSharedStyle {
+  direction?: string
+  textAlign?: string
+  shadow?: string
+  borderColor?: string
+  backgroundColor?: string
+  textColor?: string
+  icon?: {
+    size?: number
+    color?: string
+    background?: string
+    backgroundSize?: number
+    backgroundShape?: string
+    borderColor?: string
+    borderWidth?: number
+  }
+}
+
+export interface ContactPreviewStyle {
+  rootClassName: string
+  iconClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildContactPreviewStyle(
+  shared?: ContactSharedStyle,
+  resolveHex: (value: string) => string = (value) => value,
+): ContactPreviewStyle {
+  if (!shared) {
+    return {rootClassName: '', iconClassName: '', cssVars: {}}
+  }
+
+  const icon = shared.icon ?? {}
+
+  const rootClassName = clsx(
+    shared.direction && `--direction-${shared.direction}`,
+    shared.textAlign && `--align-${shared.textAlign}`,
+    shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`,
+    icon.background && icon.background !== 'none' && '--icon-background',
+    icon.color && icon.color !== 'none' && '--icon-color',
+    icon.borderColor && '--icon-bordered',
+    shared.backgroundColor && '--background-color',
+    shared.borderColor && '--border',
+    shared.textColor && '--text-color',
+  )
+
+  const iconClassName = clsx(
+    icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`,
+  )
+
+  const cssVars: Record<string, string> = {}
+  if (shared.borderColor) cssVars['--border-color'] = resolveHex(shared.borderColor)
+  if (shared.backgroundColor) cssVars['--background-color'] = resolveHex(shared.backgroundColor)
+  if (shared.textColor) cssVars['--text-color'] = resolveHex(shared.textColor)
+  if (icon.background && icon.background !== 'none') cssVars['--icon-background-color'] = resolveHex(icon.background)
+  if (icon.color && icon.color !== 'none') cssVars['--icon-color'] = resolveHex(icon.color)
+  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
+  if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
+    cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
+  }
+  if (icon.borderColor) {
+    cssVars['--icon-outline-color'] = resolveHex(icon.borderColor)
+    cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`
+  }
+
+  return {rootClassName, iconClassName, cssVars}
+}