@brilo/base-blocks 0.1.16 → 0.1.18

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
 }