@brilo/base-blocks 0.1.47 → 0.1.48

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

@@ -1,7 +1,6 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
-  RangeControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -10,9 +9,11 @@ import clsx from 'clsx'
 import type {CSSProperties} from 'react'
 import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
-import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_SIZE_RANGE, CONTACT_ICON_SIZES, CONTACT_ICON_TYPES} from './constants'
-import type {ContactIconSizeVariant, ContactItemAttributes, ContactItemOptions} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from '../contact-group/constants'
+import {buildContactPreviewStyle, type ContactSharedStyle} from './buildPreviewStyle'
+import {CONTACT_ICON_TYPES} from './constants'
+import type {ContactItemAttributes, ContactItemOptions} from './types'
 
 export function createContactItemEdit(options: ContactItemOptions) {
   const iconOptions = {icons: options.icons ?? [], iconsSrc: options.iconsSrc ?? ''}
@@ -26,16 +27,18 @@ export function createContactItemEdit(options: ContactItemOptions) {
     setAttributes: (a: Partial<ContactItemAttributes>) => void
     context: Record<string, unknown>
   }) {
-    const {colSpan, icon, iconSize} = attributes
+    const {colSpan, icon} = attributes
     const columns = Number(context[CONTACT_COLUMNS_CONTEXT] ?? 3)
     const span = Math.min(colSpan, columns)
 
-    const sizePreset = CONTACT_ICON_SIZES.find((s) => s.value === iconSize.variant)
-    const iconPx =
-      iconSize.variant === 'custom' ? iconSize.custom : sizePreset && 'size' in sizePreset ? sizePreset.size : CONTACT_ICON_SIZE_DEFAULT
+    const {resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildContactPreviewStyle(
+      context[CONTACT_STYLE_CONTEXT] as ContactSharedStyle | undefined,
+      resolveHex,
+    )
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(options.blockClassName ?? 'i-contact'),
+      blockClassName: clsx(options.blockClassName ?? 'i-contact', rootClassName),
       containerClassName: [options.containerClassName ?? 'i-contact__inner'],
       allowedBlocks: options.allowedBlocks,
       template: options.template,
@@ -60,29 +63,13 @@ export function createContactItemEdit(options: ContactItemOptions) {
           </PanelBody>
           <PanelBody title={__('Ikona', 'brilo-blocks')}>
             <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={CONTACT_ICON_TYPES} options={iconOptions} />
-            <ToggleGroupControl
-              isBlock
-              label={__('Velikost ikony', 'brilo-blocks')}
-              value={iconSize.variant}
-              onChange={(v) => setAttributes({iconSize: {...iconSize, variant: v as ContactIconSizeVariant}})}
-            >
-              {CONTACT_ICON_SIZES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-              ))}
-            </ToggleGroupControl>
-            {iconSize.variant === 'custom' && (
-              <RangeControl
-                label={__('Vlastní velikost (px)', 'brilo-blocks')}
-                value={iconSize.custom}
-                min={CONTACT_ICON_SIZE_RANGE.min}
-                max={CONTACT_ICON_SIZE_RANGE.max}
-                onChange={(v) => setAttributes({iconSize: {...iconSize, custom: v ?? CONTACT_ICON_SIZE_RANGE.min}})}
-              />
-            )}
           </PanelBody>
         </InspectorControls>
-        <div {...blockProps} style={{...(blockProps.style as CSSProperties), '--col-span': span} as CSSProperties}>
-          <div className="i-contact__icon-wrap" style={{'--icon-size': `${iconPx}px`} as CSSProperties}>
+        <div
+          {...blockProps}
+          style={{...(blockProps.style as CSSProperties), ...cssVars, '--col-span': span} as CSSProperties}
+        >
+          <div className={clsx('i-contact__icon-wrap', iconClassName)}>
             <ItemIconPreview icon={icon} className="i-contact__icon" setAttributes={setAttributes} options={iconOptions} />
           </div>
           <div {...innerBlocksProps} />

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

@@ -9,18 +9,67 @@
 }
 
 .i-contact {
+  --icon-background-size: 0px;
+
   grid-column: span var(--col-span, 1);
   margin-inline: 0;
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   padding: 8px;
+  border-radius: 4px;
+  align-items: var(--align-items, flex-start);
+  text-align: var(--text-align, left);
+
+  &.--direction-horizontal {
+    flex-direction: row;
+  }
+
+  &.--align-left {
+    --align-items: flex-start;
+    --text-align: left;
+  }
+
+  &.--align-center {
+    --align-items: center;
+    --text-align: center;
+  }
+
+  // Background size only reserves space when a background or outline is actually selected.
+  &.--icon-background,
+  &.--icon-bordered {
+    --icon-background-size: 88px;
+  }
+
+  &.--shadow {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  &.--shadow-md {
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
+  }
+
+  &.--border {
+    border: 1px solid var(--border-color, transparent);
+  }
+
+  &.--background-color {
+    background-color: var(--background-color, transparent);
+  }
+
+  &.--text-color {
+    color: var(--text-color);
+  }
 
   .i-contact__inner {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
+    text-align: inherit;
 
     p,
     h3,
@@ -29,14 +78,94 @@
       margin-block: 4px;
     }
   }
+}
+
+.i-contact__icon-wrap {
+  --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);
+  }
 
-  .i-contact__icon-wrap {
-    --icon-size: 32px;
+  &::before {
+    z-index: 0;
+    background-color: var(--icon-outline-color, transparent);
   }
 
-  .i-contact__icon img {
-    width: var(--icon-size);
-    height: var(--icon-size);
+  &::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);
+  }
+
+  .i-contact__icon,
+  img,
+  svg {
+    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);
+  }
+
+  &.--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/contact/contact-item/factory.tsx

@@ -3,7 +3,7 @@ import type {BlockConfiguration, BlockEditProps} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import type {Icon} from '~/types'
 import type {IconType} from '~/components/IconControl/IconControl'
-import {CONTACT_COLUMNS_CONTEXT} from '../contact-group/constants'
+import {CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT} from '../contact-group/constants'
 import {CONTACT_ICON_SIZE_DEFAULT, CONTACT_ICON_TYPES} from './constants'
 import type {ContactItemAttributes, ContactItemOptions} from './types'
 
@@ -24,7 +24,7 @@ export function createContactItemBlock<T extends ContactItemAttributes = Contact
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'id-alt',
     supports: {html: false, customClassName: false},
-    usesContext: [CONTACT_COLUMNS_CONTEXT],
+    usesContext: [CONTACT_COLUMNS_CONTEXT, CONTACT_STYLE_CONTEXT],
     attributes: {
       ...(options.attributes as any),
       colSpan: {type: 'number', default: 1},

package/src/index.ts

@@ -11,12 +11,17 @@ export {
 } from './blocks/anchor/anchor-item'
 export type {
   ContactColumns,
+  ContactDirection,
   ContactGroupAttributes,
   ContactGroupOptions,
+  ContactIconBackgroundShape,
+  ContactShadow,
+  ContactTextAlign,
 } from './blocks/contact/contact-group'
 export {
   CONTACT_COLUMNS,
   CONTACT_COLUMNS_CONTEXT,
+  CONTACT_STYLE_CONTEXT,
   contactGroupDefaults,
   createContactGroupBlock,
 } from './blocks/contact/contact-group'