@brilo/base-blocks 0.1.50 → 0.1.53

package/src/components/SurfaceStyleControl/index.tsx

@@ -0,0 +1,114 @@
+import {
+  BaseControl,
+  ColorPalette,
+  PanelBody,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+
+/**
+ * Shadow presets shared by every "surface" block (accordion, faq, ...). The
+ * `DEFAULT_` prefix marks it as tenant-overridable — pass your own array as
+ * `options.shadows` and the factory/edit resolve it with `??`.
+ */
+export const DEFAULT_SURFACE_SHADOWS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'sm', label: __('Malý', 'brilo-blocks')},
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+] as const
+
+export type SurfaceShadow = (typeof DEFAULT_SURFACE_SHADOWS)[number]['value']
+
+export interface SurfaceShadowOption {
+  value: string
+  label: string
+}
+
+/**
+ * The shadow + colour quartet that group blocks hand down to their items. Kept
+ * as one named type so the shape lives in a single place across TS, PHP and twig.
+ */
+export interface SurfaceStyle<TShadow extends string = SurfaceShadow> {
+  shadow: TShadow
+  borderColor: string
+  backgroundColor: string
+  textColor: string
+}
+
+/** Attribute default for a `style` object holding a {@link SurfaceStyle}. */
+export function surfaceStyleAttribute(shadows: readonly SurfaceShadowOption[] = DEFAULT_SURFACE_SHADOWS) {
+  return {
+    type: 'object',
+    default: {
+      shadow: shadows[0]?.value ?? 'none',
+      borderColor: '',
+      backgroundColor: '',
+      textColor: '',
+    },
+  } as const
+}
+
+/**
+ * Inspector panel for {@link SurfaceStyle}. `idPrefix` keeps the `BaseControl`
+ * ids unique per block (`faq-group`, `accordion-group`, ...).
+ */
+export function SurfaceStylePanel<TStyle extends SurfaceStyle<string>>({
+  style,
+  onChange,
+  idPrefix,
+  shadows = DEFAULT_SURFACE_SHADOWS,
+  title = __('Styl', 'brilo-blocks'),
+  children,
+}: {
+  style: TStyle
+  onChange: (style: TStyle) => void
+  idPrefix: string
+  shadows?: readonly SurfaceShadowOption[]
+  title?: string
+  children?: React.ReactNode
+}) {
+  const {paletteColors} = useTenantColorPalette()
+
+  return (
+    <PanelBody title={title}>
+      <ToggleGroupControl
+        isBlock
+        label={__('Stín', 'brilo-blocks')}
+        value={style.shadow}
+        onChange={(value) => onChange({...style, shadow: value as TStyle['shadow']})}
+      >
+        {shadows.map((shadow) => (
+          <ToggleGroupControlOption key={shadow.value} value={shadow.value} label={shadow.label} />
+        ))}
+      </ToggleGroupControl>
+      <BaseControl
+        label={__('Barva okraje', 'brilo-blocks')}
+        help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+        id={`${idPrefix}-border-color`}
+      >
+        <ColorPalette
+          colors={paletteColors}
+          value={style.borderColor || undefined}
+          onChange={(value) => onChange({...style, borderColor: value ?? ''})}
+        />
+      </BaseControl>
+      <BaseControl label={__('Barva pozadí', 'brilo-blocks')} id={`${idPrefix}-background-color`}>
+        <ColorPalette
+          colors={paletteColors}
+          value={style.backgroundColor || undefined}
+          onChange={(value) => onChange({...style, backgroundColor: value ?? ''})}
+        />
+      </BaseControl>
+      <BaseControl label={__('Barva textu', 'brilo-blocks')} id={`${idPrefix}-text-color`}>
+        <ColorPalette
+          colors={paletteColors}
+          value={style.textColor || undefined}
+          onChange={(value) => onChange({...style, textColor: value ?? ''})}
+        />
+      </BaseControl>
+      {children}
+    </PanelBody>
+  )
+}

package/src/index.ts

@@ -41,8 +41,14 @@ export {
 } from './blocks/contact/contact-item'
 export type {AccordionItemAttributes, AccordionItemOptions} from './blocks/accordion/accordion-item'
 export {accordionItemDefaults, createAccordionItemBlock} from './blocks/accordion/accordion-item'
-export type {AccordionGroupAttributes, AccordionGroupOptions, AccordionHeadingLevel} from './blocks/accordion/accordion-group'
-export {accordionGroupDefaults, createAccordionGroupBlock} from './blocks/accordion/accordion-group'
+export type {
+  AccordionGroupAttributes,
+  AccordionGroupOptions,
+  AccordionHeadingLevel,
+  AccordionShadow,
+  ExcludableAccordionAttr,
+} from './blocks/accordion/accordion-group'
+export {ACCORDION_HEADING_LEVELS, accordionGroupDefaults, createAccordionGroupBlock} from './blocks/accordion/accordion-group'
 export type {FaqItemAttributes, FaqItemOptions} from './blocks/faq/faq-item'
 export {createFaqItemBlock, faqItemDefaults} from './blocks/faq/faq-item'
 export type {FaqGroupAttributes, FaqGroupOptions} from './blocks/faq/faq-group'
@@ -129,6 +135,8 @@ export {
   SPACING_POSITIONS,
   SPACING_SIZES,
 } from './blocks/sections/base-section'
+export type {SurfaceShadow, SurfaceShadowOption, SurfaceStyle} from './components/SurfaceStyleControl'
+export {DEFAULT_SURFACE_SHADOWS, SurfaceStylePanel, surfaceStyleAttribute} from './components/SurfaceStyleControl'
 export type {IconType} from './components/IconControl'
 export {IconControl} from './components/IconControl'
 export * from './components/ItemIconControl'
@@ -241,7 +249,7 @@ export type {PostContentAttributes, PostContentOptions} from './blocks/post/post
 export {createPostContentBlock, postContentDefaults} from './blocks/post/post-content'
 export type {ShareAttributes, ShareOptions} from './blocks/share/share'
 export {createShareBlock, shareDefaults} from './blocks/share/share'
-export type {BoxAttributes, BoxBorderRadius, BoxOptions, BoxSpacing} from './blocks/layout/box'
+export type {BoxAttributes, BoxOptions, BoxSpacing, BoxSpacingSide} from './blocks/layout/box'
 export {createBoxBlock, boxDefaults} from './blocks/layout/box'
 export type {PriceplanGroupAttributes, PriceplanGroupOptions} from './blocks/priceplan/priceplan-group'
 export {createPriceplanGroupBlock, priceplanGroupDefaults} from './blocks/priceplan/priceplan-group'