@brilo/base-blocks 0.1.0 → 0.1.1

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

@@ -1,197 +0,0 @@
-import {InspectorControls} from '@wordpress/block-editor'
-import {
-  PanelBody,
-  SelectControl,
-  ToggleControl,
-  __experimentalToggleGroupControl as ToggleGroupControl,
-  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {
-  DEFAULT_ALIGNMENTS,
-  DEFAULT_COLUMNS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_DIRECTIONS,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
-  DEFAULT_SHADOWS,
-  HEADING_LEVELS,
-} from './constants'
-import type {
-  UspAlignment,
-  UspContentSize,
-  UspDirection,
-  UspGroupAttributes,
-  UspGroupOptions,
-  UspHeadingLevel,
-  UspHeadingStyle,
-  UspIconBackground,
-  UspIconColor,
-  UspIconSize,
-  UspShadow,
-} from './types'
-
-export function createUspGroupEdit(options: UspGroupOptions) {
-  const COLUMNS = options.columns ?? DEFAULT_COLUMNS
-  const DIRECTIONS = options.directions ?? DEFAULT_DIRECTIONS
-  const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
-  const SHADOWS = options.shadows ?? DEFAULT_SHADOWS
-  const ICON_SIZES = options.iconSizes ?? DEFAULT_ICON_SIZES
-  const ICON_COLORS = options.iconColors ?? DEFAULT_ICON_COLORS
-  const ICON_BACKGROUND = options.iconBackgrounds ?? DEFAULT_ICON_BACKGROUNDS
-  const ALIGNMENTS = options.alignments ?? DEFAULT_ALIGNMENTS
-  const CONTENT_SIZES = options.contentSizes ?? DEFAULT_CONTENT_SIZES
-
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: UspGroupAttributes
-    setAttributes: (a: Partial<UspGroupAttributes>) => void
-  }) {
-    const {columns, headingSettings, content, style} = attributes
-
-    const {blockProps, innerBlocksProps} = useGroupBlock({
-      blockClassName: clsx(
-        options.blockClassName ?? 'g-usp wp-block-section',
-        `--direction-${style.direction}`,
-        style.card && '--card',
-        style.shadow !== 'none' && `--shadow-${style.shadow}`,
-      ),
-      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`],
-      containerStyle: {'--grid-max-col-count': columns},
-      allowedBlocks: options.allowedBlocks,
-      orientation: 'horizontal',
-      template: options.template,
-      layout: {type: 'default'},
-    })
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Rozložení', 'brilo-blocks')}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Počet sloupců', 'brilo-blocks')}
-              value={String(columns)}
-              onChange={(v) => setAttributes({columns: Number(v) as UspGroupAttributes['columns']})}
-            >
-              {COLUMNS.map((c) => (
-                <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 UspDirection}})}
-            >
-              {DIRECTIONS.map((d) => (
-                <ToggleGroupControlOption key={d.value} value={d.value} label={d.label} />
-              ))}
-            </ToggleGroupControl>
-            {style.direction === 'vertical' && (
-              <ToggleGroupControl
-                isBlock
-                label={__('Zarovnání', 'brilo-blocks')}
-                value={style.align}
-                onChange={(v) => setAttributes({style: {...style, align: v as UspAlignment}})}
-              >
-                {ALIGNMENTS.map((a) => (
-                  <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
-                ))}
-              </ToggleGroupControl>
-            )}
-            <ToggleGroupControl
-              isBlock
-              label={__('Úroveň nadpisu položek', 'brilo-blocks')}
-              value={String(headingSettings.level)}
-              onChange={(v) => setAttributes({headingSettings: {...headingSettings, level: Number(v) as UspHeadingLevel}})}
-            >
-              {HEADING_LEVELS.map((l) => (
-                <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              isBlock
-              label={__('Styl nadpisu položek', 'brilo-blocks')}
-              value={headingSettings.style}
-              onChange={(v) => setAttributes({headingSettings: {...headingSettings, style: v as UspHeadingStyle}})}
-            >
-              {HEADING_STYLES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
-              ))}
-            </ToggleGroupControl>
-            <ToggleGroupControl
-              isBlock
-              label={__('Velikost textu', 'brilo-blocks')}
-              value={content.size}
-              onChange={(v) => setAttributes({content: {size: v as UspContentSize}})}
-            >
-              {CONTENT_SIZES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-              ))}
-            </ToggleGroupControl>
-          </PanelBody>
-          <PanelBody title={__('Styl', 'brilo-blocks')}>
-            <ToggleControl
-              label={__('Karta', 'brilo-blocks')}
-              checked={style.card}
-              onChange={(v) => setAttributes({style: {...style, card: v}})}
-            />
-            {style.card && (
-              <ToggleGroupControl
-                isBlock
-                label={__('Stín', 'brilo-blocks')}
-                value={style.shadow}
-                onChange={(v) => setAttributes({style: {...style, shadow: v as UspShadow}})}
-              >
-                {SHADOWS.map((s) => (
-                  <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
-                ))}
-              </ToggleGroupControl>
-            )}
-          </PanelBody>
-          <PanelBody title={__('Ikona', 'brilo-blocks')} initialOpen={false}>
-            <ToggleGroupControl
-              isBlock
-              label={__('Velikost', 'brilo-blocks')}
-              value={style.icon.size}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, size: v as UspIconSize}}})}
-            >
-              {ICON_SIZES.map((s) => (
-                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} aria-label={s.description} showTooltip />
-              ))}
-            </ToggleGroupControl>
-            <SelectControl<string>
-              label={__('Barva', 'brilo-blocks')}
-              value={style.icon.color}
-              options={[...ICON_COLORS]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, color: v as UspIconColor}}})}
-            />
-            <SelectControl<string>
-              label={__('Pozadí', 'brilo-blocks')}
-              value={style.icon.background}
-              options={[...ICON_BACKGROUND]}
-              onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, background: v as UspIconBackground}}})}
-            />
-            {style.icon.background !== 'none' && (
-              <ToggleControl
-                label={__('Ohraničení ikony', 'brilo-blocks')}
-                checked={style.icon.bordered ?? false}
-                onChange={(v) => setAttributes({style: {...style, icon: {...style.icon, bordered: v}}})}
-              />
-            )}
-          </PanelBody>
-        </InspectorControls>
-        <div {...blockProps}>
-          <div {...innerBlocksProps} />
-        </div>
-      </>
-    )
-  }
-}

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

@@ -1,24 +0,0 @@
-@layer base {
-  .g-usp {
-    padding: 8px;
-    min-height: 60px;
-
-    &.--direction-horizontal .i-usp__inner {
-      flex-direction: row;
-      align-items: flex-start;
-    }
-
-    &.--card .i-usp__inner {
-      background: #fff;
-      border-color: #d0d5dd;
-    }
-
-    &.--shadow-sm .i-usp__inner {
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-    }
-
-    &.--shadow-md .i-usp__inner {
-      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
-    }
-  }
-}

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

@@ -1,113 +0,0 @@
-import {InnerBlocks} from '@wordpress/block-editor'
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import type {NumberArray, OptionArray} from '~/types'
-import {
-  DEFAULT_ALIGNMENTS,
-  DEFAULT_COLUMNS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_DIRECTIONS,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
-  DEFAULT_SHADOWS,
-  HEADING_LEVELS,
-} from './constants'
-import {createUspGroupEdit} from './edit'
-import {icon as defaultIcon} from './icon'
-import type {UspGroupAttributes, UspGroupOptions} from './types'
-
-export type {UspGroupAttributes, UspGroupOptions}
-
-export function createUspGroupBlock<
-  TColumns extends NumberArray = typeof DEFAULT_COLUMNS,
-  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,
-  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
-  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
->(
-  options: UspGroupOptions<
-    TColumns,
-    TDirections,
-    THeadingStyles,
-    TShadows,
-    TIconSizes,
-    TIconColors,
-    TIconBackgrounds,
-    TAlignments,
-    TContentSizes
-  >,
-): BlockConfiguration<
-  UspGroupAttributes<
-    TColumns[number],
-    TDirections[number]['value'],
-    THeadingStyles[number]['value'],
-    TShadows[number]['value'],
-    TIconSizes[number]['value'],
-    TIconColors[number]['value'],
-    TIconBackgrounds[number]['value'],
-    TAlignments[number]['value'],
-    TContentSizes[number]['value']
-  >
-> {
-  const columns = options.columns ?? DEFAULT_COLUMNS
-  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 alignments = options.alignments ?? DEFAULT_ALIGNMENTS
-  const contentSizes = options.contentSizes ?? DEFAULT_CONTENT_SIZES
-
-  return {
-    name: options.name,
-    title: options.title ?? __('USP Konkurenční výhody', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? {src: defaultIcon},
-    supports: {html: false, customClassName: false},
-    attributes: {
-      columns: {
-        type: 'number',
-        default: columns[1] ?? columns[0],
-        enum: [...columns],
-      },
-      headingSettings: {
-        type: 'object',
-        default: {level: HEADING_LEVELS[0], style: headingStyles[2]?.value ?? headingStyles[0].value},
-      },
-      content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},
-      style: {
-        type: 'object',
-        default: {
-          shadow: shadows[0].value,
-          card: false,
-          direction: directions[0].value,
-          align: alignments[0].value,
-          icon: {size: iconSizes[2]?.value ?? iconSizes[0].value, color: iconColors[0].value, background: iconBackgrounds[0].value},
-        },
-      },
-    },
-    edit: createUspGroupEdit(options as unknown as UspGroupOptions),
-    save: () => <InnerBlocks.Content />,
-  } as unknown as BlockConfiguration<
-    UspGroupAttributes<
-      TColumns[number],
-      TDirections[number]['value'],
-      THeadingStyles[number]['value'],
-      TShadows[number]['value'],
-      TIconSizes[number]['value'],
-      TIconColors[number]['value'],
-      TIconBackgrounds[number]['value'],
-      TAlignments[number]['value'],
-      TContentSizes[number]['value']
-    >
-  >
-}

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

@@ -1,18 +0,0 @@
-export const icon = (
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title>USP Group</title>
-    <path d="M4 6H9V7H4V6Z" fill="black" />
-    <path d="M10 6H16V7H10V6Z" fill="black" />
-    <path
-      d="M12 4C12 3.44772 12.4477 3 13 3H14C14.5523 3 15 3.44772 15 4C15 4.55228 14.5523 5 14 5H13C12.4477 5 12 4.55228 12 4Z"
-      fill="black"
-    />
-    <path d="M5 4C5 3.44772 5.44772 3 6 3H10C10.5523 3 11 3.44772 11 4C11 4.55228 10.5523 5 10 5H6C5.44772 5 5 4.55228 5 4Z" fill="black" />
-    <rect x="1.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
-    <rect x="8.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
-    <rect x="15.5" y="10.5" width="3" height="3" rx="1.5" stroke="black" fill="none" />
-    <path d="M1 15H5V16H1V15Z" fill="black" />
-    <path d="M8 15H12V16H8V15Z" fill="black" />
-    <path d="M15 15H19V16H15V15Z" fill="black" />
-  </svg>
-)

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

@@ -1,15 +0,0 @@
-export type {UspGroupAttributes, UspGroupOptions} from './types'
-export {createUspGroupBlock} from './factory'
-
-import type {UspGroupOptions} from './types'
-
-export const uspGroupDefaults: UspGroupOptions = {
-  name: 'brilo/usp-group',
-  parent: ['brilo/base-section'],
-  allowedBlocks: ['brilo/usp-item'],
-  template: [
-    ['brilo/usp-item', {}],
-    ['brilo/usp-item', {}],
-    ['brilo/usp-item', {}],
-  ],
-}

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

@@ -1,70 +0,0 @@
-import type {BriloBlockType, NumberArray, OptionArray} from '~/types'
-import type {
-  DEFAULT_ALIGNMENTS,
-  DEFAULT_COLUMNS,
-  DEFAULT_CONTENT_SIZES,
-  DEFAULT_DIRECTIONS,
-  DEFAULT_HEADING_STYLES,
-  DEFAULT_ICON_BACKGROUNDS,
-  DEFAULT_ICON_COLORS,
-  DEFAULT_ICON_SIZES,
-  DEFAULT_SHADOWS,
-  HEADING_LEVELS,
-} from './constants'
-
-export type UspColumns = (typeof DEFAULT_COLUMNS)[number]
-export type UspDirection = (typeof DEFAULT_DIRECTIONS)[number]['value']
-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 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,
-  TAlignment extends string = UspAlignment,
-  TContentSize extends string = UspContentSize,
-> extends Record<string, unknown> {
-  columns: TColumn
-  headingSettings: {level: UspHeadingLevel; style: THeadingStyle}
-  content: {size: TContentSize}
-  style: {
-    shadow: TShadow
-    card: boolean
-    direction: TDirection
-    align: TAlignment
-    icon: {size: TIconSize; color: TIconColor; background: TIconBackground; bordered?: boolean}
-  }
-}
-
-export interface UspGroupOptions<
-  TColumns extends NumberArray = typeof DEFAULT_COLUMNS,
-  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,
-  TAlignments extends OptionArray = typeof DEFAULT_ALIGNMENTS,
-  TContentSizes extends OptionArray = typeof DEFAULT_CONTENT_SIZES,
-> extends BriloBlockType {
-  allowedBlocks: string[]
-  columns?: TColumns
-  directions?: TDirections
-  headingStyles?: THeadingStyles
-  shadows?: TShadows
-  iconSizes?: TIconSizes
-  iconColors?: TIconColors
-  iconBackgrounds?: TIconBackgrounds
-  alignments?: TAlignments
-  contentSizes?: TContentSizes
-}

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

@@ -1,7 +0,0 @@
-import {__} from '@wordpress/i18n'
-
-export const ICON_TYPES = [
-  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
-  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
-  {value: 'number', label: __('Číslo', 'brilo-blocks')},
-] as const

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

@@ -1,65 +0,0 @@
-import {InspectorControls, RichText, useBlockProps} from '@wordpress/block-editor'
-import {Modal, PanelBody, ToggleControl, TextControl} from '@wordpress/components'
-import {useState} from '@wordpress/element'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-import {IconControl} from '~/components/IconControl'
-import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
-import {ICON_TYPES} from './constants'
-import type {UspItemAttributes, UspItemOptions} from './types'
-
-export function createUspItemEdit(options: UspItemOptions) {
-  return function Edit({
-    attributes,
-    setAttributes,
-  }: {
-    attributes: UspItemAttributes
-    setAttributes: (a: Partial<UspItemAttributes>) => void
-  }) {
-    const {title, content, url, icon} = attributes
-
-    const blockProps = useBlockProps({className: 'i-usp'})
-
-    return (
-      <>
-        <InspectorControls>
-          <PanelBody title={__('Ikona', 'brilo-blocks')}>
-            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
-          </PanelBody>
-          <PanelBody title={__('Odkaz', 'brilo-blocks')} initialOpen={false}>
-            <TextControl label={__('URL', 'brilo-blocks')} value={url.src} onChange={(v) => setAttributes({url: {...url, src: v}})} />
-            <ToggleControl
-              label={__('Otevřít v nové záložce', 'brilo-blocks')}
-              checked={url.blank}
-              onChange={(v) => setAttributes({url: {...url, blank: v}})}
-            />
-          </PanelBody>
-        </InspectorControls>
-
-        <div {...blockProps}>
-          <div className="i-usp__inner wp-block-inner">
-            <ItemIconPreview icon={icon} className="i-usp__icon" setAttributes={setAttributes} options={options} />
-
-            <div className={clsx('i-usp__body', 'grow')}>
-              <RichText
-                tagName="h3"
-                className="i-usp__title u-text-editable"
-                value={title}
-                onChange={(v) => setAttributes({title: v})}
-                placeholder={__('Nadpis...', 'brilo-blocks')}
-                allowedFormats={['core/bold', 'core/italic']}
-              />
-              <RichText
-                tagName="p"
-                className="i-usp__content u-text-editable"
-                value={content}
-                onChange={(v) => setAttributes({content: v})}
-                placeholder={__('Popis...', 'brilo-blocks')}
-              />
-            </div>
-          </div>
-        </div>
-      </>
-    )
-  }
-}

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

@@ -1,17 +0,0 @@
-.i-usp {
-  width: 100%;
-  margin-inline: 0;
-}
-
-.i-usp__title {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.i-usp__content {
-  font-size: 14px;
-  color: #555;
-  margin: 0;
-  line-height: 1.5;
-}

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

@@ -1,30 +0,0 @@
-import type {BlockConfiguration} from '@wordpress/blocks'
-import {__} from '@wordpress/i18n'
-import {ICON_TYPES} from './constants'
-import {createUspItemEdit} from './edit'
-import type {UspItemAttributes, UspItemOptions} from './types'
-
-export type {UspItemAttributes, UspItemOptions}
-
-export function createUspItemBlock(options: UspItemOptions): BlockConfiguration<UspItemAttributes> {
-  return {
-    name: options.name,
-    title: options.title ?? __('USP položka', 'brilo-blocks'),
-    description: options.description,
-    category: options.category ?? 'layout',
-    ...(options.parent && {parent: options.parent}),
-    icon: options.icon ?? 'star-filled',
-    supports: {html: false, customClassName: false},
-    attributes: {
-      title: {type: 'string', default: ''},
-      content: {type: 'string', default: ''},
-      url: {type: 'object', default: {src: '', blank: false}},
-      icon: {
-        type: 'object',
-        default: {type: ICON_TYPES[0].value, src: '', media: {id: 0, alt: ''}},
-      },
-    },
-    edit: createUspItemEdit(options),
-    save: () => null,
-  } as unknown as BlockConfiguration<UspItemAttributes>
-}

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

@@ -1,11 +0,0 @@
-export type {UspItemAttributes, UspItemOptions} from './types'
-export {createUspItemBlock} from './factory'
-
-import type {UspItemOptions} from './types'
-
-export const uspItemDefaults: UspItemOptions = {
-  name: 'brilo/usp-item',
-  parent: ['brilo/usp-group'],
-  icons: [],
-  iconsSrc: '',
-}

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

@@ -1,17 +0,0 @@
-import {BriloBlockType, Icon} from '~/types'
-import type {IconType} from '~/components/IconControl'
-import type {ICON_TYPES} from './constants'
-
-export type UspIconType = (typeof ICON_TYPES)[number]['value']
-
-export interface UspItemAttributes extends Record<string, unknown> {
-  title: string
-  content: string
-  url: {src: string; blank: boolean}
-  icon: Icon
-}
-
-export interface UspItemOptions extends BriloBlockType {
-  icons: IconType[]
-  iconsSrc: string
-}

package/src/components/IconControl/IconControl.tsx

@@ -1,55 +0,0 @@
-import {useState} from '@wordpress/element'
-import {__} from '@wordpress/i18n'
-import clsx from 'clsx'
-
-export interface IconType {
-  value: string
-  label: string
-}
-
-interface IconControlProps {
-  value: string
-  label?: string
-  icons: IconType[]
-  iconsSrc: string
-  onChange: (icon: IconType) => void
-}
-
-export function IconControl({value, label, icons, iconsSrc, onChange}: IconControlProps) {
-  const getIconUrl = (name: string) => (name && name !== 'none' ? `${iconsSrc}${name}.svg` : '')
-  const [selectedIcon, setSelectedIcon] = useState<IconType>({
-    value,
-    label: label ?? '',
-  })
-
-  return (
-    <div className="icon-control flex column gap-4">
-      <div className="icon-control__hero-selected flex gap-4">
-        <div className="icon-control__hero-selected-img flex items-center justify-center">
-          {selectedIcon.value && <img src={getIconUrl(selectedIcon.value)} alt="" width={24} height={24} loading="lazy" />}
-        </div>
-        <div className="icon-control__hero-selected-body flex column gap-1">
-          <span>{__('Vybraná ikona', 'brilo-blocks')}</span>
-          <span className="icon-control__hero-selected-label">{selectedIcon.label}</span>
-        </div>
-      </div>
-      <div className="icon-control__group">
-        {icons.map((icon) => (
-          <button
-            key={icon.value}
-            type="button"
-            className={clsx('icon-control__item', 'flex', 'column', 'gap-2', 'items-center', 'justify-center', 'cursor-pointer', {
-              '--selected': selectedIcon.value === icon.value,
-            })}
-            onClick={() => {
-              onChange(icon)
-              setSelectedIcon(icon)
-            }}
-          >
-            <img src={getIconUrl(icon.value)} alt="" width={24} height={24} loading="lazy" />
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}