@brilo/base-blocks 0.1.15 → 0.1.17

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

@@ -8,9 +8,9 @@ import {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE,
+  DEFAULT_ICON_SIZE,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
 } from './constants'
@@ -25,32 +25,18 @@ export function createUspGroupBlock<
   TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
-  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
-  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
-  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
   TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
 >(
-  options: UspGroupOptions<
-    TColumns,
-    TDirections,
-    THeadingStyles,
-    TShadows,
-    TIconSizes,
-    TIconColors,
-    TIconBackgrounds,
-    TAlignments,
-    TContentSizes
-  >,
+  options: UspGroupOptions<TColumns, TDirections, THeadingStyles, TShadows, TIconBackgroundShapes, TAlignments, TContentSizes>,
 ): BlockConfiguration<
   UspGroupAttributes<
     TColumns[number],
     TDirections[number]['value'],
     THeadingStyles[number]['value'],
     TShadows[number]['value'],
-    TIconSizes[number]['value'],
-    TIconColors[number]['value'],
-    TIconBackgrounds[number]['value'],
+    TIconBackgroundShapes[number]['value'],
     TAlignments[number]['value'],
     TContentSizes[number]['value']
   >
@@ -59,9 +45,7 @@ export function createUspGroupBlock<
   const directions = options.directions ?? DEFAULT_DIRECTIONS
   const headingStyles = options.headingStyles ?? DEFAULT_HEADING_STYLES
   const shadows = options.shadows ?? DEFAULT_SHADOWS
-  const iconSizes = options.iconSizes ?? DEFAULT_ICON_SIZES
-  const iconColors = options.iconColors ?? DEFAULT_ICON_COLORS
-  const iconBackgrounds = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
+  const iconBackgroundShapes = options.iconBackgroundShapes ?? DEFAULT_ICON_BACKGROUND_SHAPES
   const alignments = options.alignments ?? DEFAULT_ALIGNMENTS
   const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
 
@@ -73,6 +57,7 @@ export function createUspGroupBlock<
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? {src: defaultIcon},
     supports: {html: false, customClassName: false},
+    providesContext: {'brilo/usp-style': 'style'},
     attributes: {
       columns: {
         type: 'number',
@@ -91,10 +76,19 @@ export function createUspGroupBlock<
           card: false,
           direction: directions[0].value,
           align: alignments[0].value,
+          textAlign: '',
           borderColor: '',
           backgroundColor: '',
           textColor: '',
-          icon: {size: iconSizes[2]?.value ?? iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value},
+          icon: {
+            size: DEFAULT_ICON_SIZE,
+            color: '',
+            background: '',
+            backgroundSize: DEFAULT_ICON_BACKGROUND_SIZE,
+            backgroundShape: iconBackgroundShapes[0].value,
+            borderColor: '',
+            borderWidth: 1,
+          },
         },
       },
     },
@@ -106,9 +100,7 @@ export function createUspGroupBlock<
       TDirections[number]['value'],
       THeadingStyles[number]['value'],
       TShadows[number]['value'],
-      TIconSizes[number]['value'],
-      TIconColors[number]['value'],
-      TIconBackgrounds[number]['value'],
+      TIconBackgroundShapes[number]['value'],
       TAlignments[number]['value'],
       TContentSizes[number]['value']
     >

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

@@ -5,9 +5,7 @@ import type {
   DEFAULT_CONTENT_SIZES,
   DEFAULT_DIRECTIONS,
   DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
   DEFAULT_SHADOWS,
   HEADING_LEVELS,
 } from './constants'
@@ -18,19 +16,20 @@ export type UspHeadingLevel = (typeof HEADING_LEVELS)[number]
 export type UspHeadingStyle = (typeof DEFAULT_HEADING_STYLES)[number]['value']
 export type UspShadow = (typeof DEFAULT_SHADOWS)[number]['value']
 export type UspAlignment = (typeof DEFAULT_ALIGNMENTS)[number]['value']
-export type UspIconSize = (typeof DEFAULT_ICON_SIZES)[number]['value']
-export type UspIconColor = (typeof DEFAULT_ICON_COLORS)[number]['value']
-export type UspIconBackground = (typeof DEFAULT_ICON_BACKGROUNDS)[number]['value']
 export type UspContentSize = (typeof DEFAULT_CONTENT_SIZES)[number]['value']
+export type UspIconBackgroundShape = (typeof DEFAULT_ICON_BACKGROUND_SHAPES)[number]['value']
+
+export interface UspSizePreset {
+  value: number
+  label: string
+}
 
 export interface UspGroupAttributes<
   TColumn extends number = UspColumns,
   TDirection extends string = UspDirection,
   THeadingStyle extends string = UspHeadingStyle,
   TShadow extends string = UspShadow,
-  TIconSize extends string = UspIconSize,
-  TIconColor extends string = UspIconColor,
-  TIconBackground extends string = UspIconBackground,
+  TIconBackgroundShape extends string = UspIconBackgroundShape,
   TAlignment extends string = UspAlignment,
   TContentSize extends string = UspContentSize,
 > extends Record<string, unknown> {
@@ -42,10 +41,19 @@ export interface UspGroupAttributes<
     card: boolean
     direction: TDirection
     align: TAlignment
+    textAlign: string
     borderColor: string
     backgroundColor: string
     textColor: string
-    icon: {size: TIconSize; color: TIconColor; background: TIconBackground; bordered?: boolean}
+    icon: {
+      size: number
+      color: string
+      background: string
+      backgroundSize: number
+      backgroundShape: TIconBackgroundShape
+      borderColor: string
+      borderWidth: number
+    }
   }
 }
 
@@ -54,9 +62,7 @@ export interface UspGroupOptions<
   TDirections extends OptionArray = typeof DEFAULT_DIRECTIONS,
   THeadingStyles extends OptionArray = typeof DEFAULT_HEADING_STYLES,
   TShadows extends OptionArray = typeof DEFAULT_SHADOWS,
-  TIconSizes extends OptionArray = typeof DEFAULT_ICON_SIZES,
-  TIconColors extends OptionArray = typeof DEFAULT_ICON_COLORS,
-  TIconBackgrounds extends OptionArray = typeof DEFAULT_ICON_BACKGROUNDS,
+  TIconBackgroundShapes extends OptionArray = typeof DEFAULT_ICON_BACKGROUND_SHAPES,
   TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
   TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
 > extends BriloBlockType {
@@ -65,9 +71,9 @@ export interface UspGroupOptions<
   directions?: TDirections
   headingStyles?: THeadingStyles
   shadows?: TShadows
-  iconSizes?: TIconSizes
-  iconColors?: TIconColors
-  iconBackgrounds?: TIconBackgrounds
+  iconSizePresets?: readonly UspSizePreset[]
+  iconBackgroundSizePresets?: readonly UspSizePreset[]
+  iconBackgroundShapes?: TIconBackgroundShapes
   alignments?: TAlignments
   contentSizes?: TContentSizes
 }

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

@@ -0,0 +1,66 @@
+import clsx from 'clsx'
+
+export interface UspSharedStyle {
+  direction?: string
+  align?: 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 UspPreviewStyle {
+  rootClassName: string
+  iconClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildUspPreviewStyle(shared?: UspSharedStyle, resolveHex: (value: string) => string = (value) => value): UspPreviewStyle {
+  if (!shared) {
+    return {rootClassName: '', iconClassName: '', cssVars: {}}
+  }
+
+  const icon = shared.icon ?? {}
+
+  const rootClassName = clsx(
+    shared.direction && `--direction-${shared.direction}`,
+    shared.align && `--align-${shared.align}`,
+    shared.textAlign && `--body-align-${shared.textAlign}`,
+    shared.shadow && shared.shadow !== 'none' && `--shadow --shadow-${shared.shadow}`,
+    icon.background && '--icon-background',
+    icon.color && '--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) cssVars['--icon-background-color'] = resolveHex(icon.background)
+  if (icon.color) cssVars['--icon-color'] = resolveHex(icon.color)
+  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
+  if (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}
+}

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

@@ -3,6 +3,8 @@ import {PanelBody, ToggleControl, TextControl} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {buildUspPreviewStyle, type UspSharedStyle} from './buildPreviewStyle'
 import {ICON_TYPES} from './constants'
 import type {UspItemAttributes, UspItemOptions} from './types'
 
@@ -10,13 +12,17 @@ export function createUspItemEdit(options: UspItemOptions) {
   return function Edit({
     attributes,
     setAttributes,
+    context,
   }: {
     attributes: UspItemAttributes
     setAttributes: (a: Partial<UspItemAttributes>) => void
+    context?: {'brilo/usp-style'?: UspSharedStyle}
   }) {
     const {title, content, url, icon} = attributes
+    const {resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildUspPreviewStyle(context?.['brilo/usp-style'], resolveHex)
 
-    const blockProps = useBlockProps({className: 'i-usp'})
+    const blockProps = useBlockProps({className: clsx('i-usp', rootClassName), style: cssVars})
 
     return (
       <>
@@ -36,7 +42,14 @@ export function createUspItemEdit(options: UspItemOptions) {
 
         <div {...blockProps}>
           <div className="i-usp__inner wp-block-inner">
-            <ItemIconPreview icon={icon} className="i-usp__icon" setAttributes={setAttributes} options={options} />
+            <ItemIconPreview
+              icon={icon}
+              className="i-usp__icon"
+              modifierClassName={iconClassName}
+              style={cssVars}
+              setAttributes={setAttributes}
+              options={options}
+            />
 
             <div className={clsx('i-usp__body', 'grow')}>
               <RichText

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

@@ -1,6 +1,48 @@
 .i-usp {
   width: 100%;
   margin-inline: 0;
+  text-align: var(--text-align, left);
+  border-radius: 4px;
+
+  &.--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-usp__inner {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .i-usp.--direction-horizontal & {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .i-usp.--align-center & {
+    align-items: center;
+  }
+}
+
+.i-usp__body {
+  text-align: var(--body-text-align, inherit);
 }
 
 .i-usp__title {
@@ -11,7 +53,104 @@
 
 .i-usp__content {
   font-size: 14px;
-  color: #555;
+  color: var(--text-color);
   margin: 0;
   line-height: 1.5;
 }
+
+.i-usp__icon {
+  --icon-box-size: max(var(--icon-background-size, 88px), 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, 88px);
+    height: var(--icon-background-size, 88px);
+    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, 88px) - var(--icon-outline-width, 0px) * 2);
+    height: calc(var(--icon-background-size, 88px) - 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/usp/usp-item/factory.tsx

@@ -15,6 +15,7 @@ export function createUspItemBlock(options: UspItemOptions): BlockConfiguration<
     ...(options.parent && {parent: options.parent}),
     icon: options.icon ?? 'star-filled',
     supports: {html: false, customClassName: false},
+    usesContext: ['brilo/usp-style'],
     attributes: {
       title: {type: 'string', default: ''},
       content: {type: 'string', default: ''},

package/src/components/ItemIconControl/ItemIconPreview.tsx

@@ -4,7 +4,7 @@ import {useMediaUrl} from '~/components/ImagePicker'
 import type {ItemIconPreviewProps} from './types'
 import {ItemIconModal} from './ItemIconModal'
 
-export function ItemIconPreview({icon, className, options, setAttributes}: ItemIconPreviewProps) {
+export function ItemIconPreview({icon, className, modifierClassName, style, options, setAttributes}: ItemIconPreviewProps) {
   const [isModalOpen, setModalOpen] = useState(false)
   const mediaIconUrl = useMediaUrl(icon.media?.id ?? 0)
   const preselectedIconUrl = icon.type === 'preselected' && icon.src ? `${options.iconsSrc}${icon.src}.svg` : ''
@@ -13,7 +13,7 @@ export function ItemIconPreview({icon, className, options, setAttributes}: ItemI
     if (icon.type === 'preselected') {
       if (preselectedIconUrl) {
         return (
-          <div className={clsx('i-item-icon', className)}>
+          <div className={clsx('i-item-icon', className, modifierClassName)} style={style}>
             <img
               src={preselectedIconUrl}
               alt=""
@@ -43,7 +43,7 @@ export function ItemIconPreview({icon, className, options, setAttributes}: ItemI
     if (icon.type === 'media') {
       if (icon.media?.id && mediaIconUrl) {
         return (
-          <div className={clsx('i-item-icon', className)}>
+          <div className={clsx('i-item-icon', className, modifierClassName)} style={style}>
             <img src={mediaIconUrl} alt={icon.media.alt} className={clsx(className ? `${className}-img` : null, 'i-item-icon__img')} />
           </div>
         )
@@ -58,7 +58,7 @@ export function ItemIconPreview({icon, className, options, setAttributes}: ItemI
     if (icon.type === 'number') {
       if (icon.src) {
         return (
-          <div className={clsx('i-item-icon', className)}>
+          <div className={clsx('i-item-icon', className, modifierClassName)} style={style}>
             <span className={clsx(className ? `${className}-number` : 'i-item-icon__number')}>{icon.src}</span>
           </div>
         )

package/src/components/ItemIconControl/types.d.ts

@@ -17,6 +17,8 @@ export interface ItemIconControlProps {
 export interface ItemIconPreviewProps {
   icon: Icon
   className?: string
+  modifierClassName?: string
+  style?: Record<string, string>
   options: ItemIconOptions
   setAttributes: (attributes: {icon: Icon}) => void
 }