@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

package/blocks/init/src/Blocks/components/heading/components/heading-options.js

@@ -1,62 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ComponentToggle, HStack, OptionSelect } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-export const HeadingOptions = (attributes) => {
-	const { setAttributes, hideOptions, additionalControls, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const headingUse = checkAttr('headingUse', attributes, manifest);
-	const headingSize = checkAttr('headingSize', attributes, manifest);
-	const headingTag = checkAttr('headingTag', attributes, manifest);
-
-	const headingTags = [
-		{ label: __('Heading 1', '%g_textdomain%'), value: 'h1' },
-		{ label: __('Heading 2', '%g_textdomain%'), value: 'h2' },
-		{ label: __('Heading 3', '%g_textdomain%'), value: 'h3' },
-		{ label: __('Heading 4', '%g_textdomain%'), value: 'h4' },
-		{ label: __('Heading 5', '%g_textdomain%'), value: 'h5' },
-		{ label: __('Heading 6', '%g_textdomain%'), value: 'h6' },
-		{ label: __('Paragraph', '%g_textdomain%'), value: 'p' },
-	];
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.heading}
-			onChange={(value) => setAttributes({ [getAttrKey('headingUse', attributes, manifest)]: value })}
-			useComponent={headingUse}
-			{...rest}
-		>
-			<HStack>
-				<OptionSelect
-					aria-label={__('Font size', '%g_textdomain%')}
-					options={getOption('headingSize', attributes, manifest)}
-					onChange={(value) => setAttributes({ [getAttrKey('headingSize', attributes, manifest)]: value })}
-					value={headingSize}
-					hidden={hiddenOptions?.size}
-					type='menu'
-				/>
-
-				<OptionSelect
-					aria-label={__('Heading level', '%g_textdomain%')}
-					options={headingTags}
-					value={headingTag}
-					onChange={(value) => setAttributes({ [getAttrKey('headingTag', attributes, manifest)]: value })}
-					type='menu'
-					wrapperProps={{
-						triggerIcon: <span className='es-uic-font-mono uppercase'>{headingTag}</span>,
-					}}
-					hidden={hiddenOptions?.headingLevel}
-					noTriggerLabel
-					tooltip
-				/>
-
-				{additionalControls}
-			</HStack>
-		</ComponentToggle>
-	);
-};

package/blocks/init/src/Blocks/components/heading/heading.php

@@ -1,45 +0,0 @@
-<?php
-
-/**
- * Heading component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$headingUse = Helpers::checkAttr('headingUse', $attributes, $manifest);
-
-if (!$headingUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-
-$headingContent = Helpers::checkAttr('headingContent', $attributes, $manifest);
-$headingTag = Helpers::checkAttr('headingTag', $attributes, $manifest);
-
-if (!$headingContent) {
-	return;
-}
-
-$sanitizedTitle = '';
-
-if (function_exists('idn_to_ascii') && function_exists('sanitize_title')) {
-	$sanitizedTitle = sanitize_title(idn_to_ascii($headingContent));
-} else {
-	$sanitizedTitle = sanitize_title($headingContent);
-}
-?>
-
-<<?php echo esc_attr($headingTag); ?>
-	data-slug="<?php echo esc_attr($sanitizedTitle) ?>"
-	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>"
->
-	<?php
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo $headingContent;
-	?>
-</<?php echo esc_attr($headingTag); ?>>

package/blocks/init/src/Blocks/components/heading/manifest.json

@@ -1,76 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "heading",
-	"title": "Heading",
-	"componentClass": "heading",
-	"example": {
-		"attributes": {
-			"headingContent": "This is heading",
-			"headingTag": "h2",
-			"headingSize": "base",
-			"headingUse": true
-		}
-	},
-	"attributes": {
-		"headingContent": {
-			"type": "string"
-		},
-		"headingTag": {
-			"type": "string",
-			"default": "h2"
-		},
-		"headingSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"headingUse": {
-			"type": "boolean",
-			"default": true
-		}
-	},
-	"options": {
-		"headingSize": [
-			{
-				"label": "24",
-				"value": "sm"
-			},
-			{
-				"label": "30",
-				"value": "base"
-			},
-			{
-				"label": "36",
-				"value": "md"
-			},
-			{
-				"label": "48",
-				"value": "lg"
-			},
-			{
-				"label": "60",
-				"value": "xl"
-			},
-			{
-				"label": "96",
-				"value": "2xl"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "font-display text-balance font-synthesis-none font-soft-50 scroll-m-20"
-		},
-		"options": {
-			"headingSize": {
-				"twClasses": {
-					"sm": "~text-lg/2xl !leading-tight",
-					"base": "~text-xl/3xl !leading-none",
-					"md": "~text-2xl/4xl !leading-none",
-					"lg": "~text-3xl/5xl !leading-none",
-					"xl": "~text-4xl/6xl !leading-none",
-					"2xl": "~text-5xl/8xl !leading-none !font-soft-25 italic"
-				}
-			}
-		}
-	}
-}

package/blocks/init/src/Blocks/components/hero/components/hero-editor.js

@@ -1,42 +0,0 @@
-import { props, checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImageEditor } from '../../image/components/image-editor';
-import { HeadingEditor } from '../../heading/components/heading-editor';
-import { ParagraphEditor } from '../../paragraph/components/paragraph-editor';
-import { ButtonEditor } from '../../button/components/button-editor';
-import manifest from '../manifest.json';
-
-export const HeroEditor = (attributes) => {
-	const { additionalClass } = attributes;
-
-	const heroUse = checkAttr('heroUse', attributes, manifest);
-
-	if (!heroUse) {
-		return null;
-	}
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<ImageEditor
-				{...props('image', attributes, {
-					additionalClass: {
-						image: '!size-full grayscale',
-						picture: tailwindClasses('imagePicture', attributes, manifest),
-					},
-				})}
-			/>
-
-			<HeadingEditor {...props('heading', attributes)} />
-
-			<ParagraphEditor
-				{...props('paragraph', attributes, {
-					additionalClass: 'mt-4 max-w-96 text-pretty',
-				})}
-			/>
-
-			<div className='mt-6 flex gap-2'>
-				<ButtonEditor {...props('buttonMain', attributes)} />
-				<ButtonEditor {...props('buttonSecondary', attributes)} />
-			</div>
-		</div>
-	);
-};

package/blocks/init/src/Blocks/components/hero/components/hero-options.js

@@ -1,100 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getOption, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImageOptions } from '../../image/components/image-options';
-import { HeadingOptions } from '../../heading/components/heading-options';
-import { ParagraphOptions } from '../../paragraph/components/paragraph-options';
-import { ButtonOptions } from '../../button/components/button-options';
-import { ComponentToggle, OptionSelect } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from '../manifest.json';
-
-export const HeroOptions = (attributes) => {
-	const { setAttributes, ...rest } = attributes;
-
-	const heroUse = checkAttr('heroUse', attributes, manifest);
-	const heroColor = checkAttr('heroColor', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.image}
-			onChange={(value) => setAttributes({ [getAttrKey('heroUse', attributes, manifest)]: value })}
-			useComponent={heroUse}
-			{...rest}
-		>
-			<OptionSelect
-				icon={icons.paletteColor}
-				label={__('Theme', 'eightshift-frontend-libs')}
-				value={heroColor}
-				onChange={(value) => {
-					let mainButtonColor = 'navy-500';
-					let secondaryButtonColor = 'navy-800';
-
-					switch (value) {
-						case 'navy-dark':
-							mainButtonColor = 'navy-500';
-							secondaryButtonColor = 'navy-100';
-							break;
-						case 'red':
-							mainButtonColor = 'red-500';
-							secondaryButtonColor = 'red-800';
-							break;
-						case 'red-dark':
-							mainButtonColor = 'red-500';
-							secondaryButtonColor = 'red-100';
-							break;
-						case 'gray':
-							mainButtonColor = 'gray-500';
-							secondaryButtonColor = 'gray-800';
-							break;
-						case 'gray-dark':
-							mainButtonColor = 'gray-500';
-							secondaryButtonColor = 'gray-100';
-							break;
-						default:
-							break;
-					}
-
-					return setAttributes({
-						[getAttrKey('heroColor', attributes, manifest)]: value,
-						[getAttrKey('heroButtonMainColor', attributes, manifest)]: mainButtonColor,
-						[getAttrKey('heroButtonSecondaryColor', attributes, manifest)]: secondaryButtonColor,
-					});
-				}}
-				options={getOption('heroColor', attributes, manifest)}
-				type='menu'
-				inline
-			/>
-
-			<div>
-				<ImageOptions
-					{...props('image', attributes)}
-					hideOptions='borderRadius'
-				/>
-
-				<HeadingOptions
-					{...props('heading', attributes)}
-					hideOptions='size'
-				/>
-
-				<ParagraphOptions
-					{...props('paragraph', attributes)}
-					hideOptions='size'
-				/>
-
-				<ButtonOptions
-					{...props('buttonMain', attributes)}
-					label={__('Primary button', 'eightshift-frontend-libs')}
-					hideOptions='variant,color'
-					icon={icons.buttonFilled}
-				/>
-
-				<ButtonOptions
-					{...props('buttonSecondary', attributes)}
-					label={__('Secondary button', 'eightshift-frontend-libs')}
-					hideOptions='variant,color'
-				/>
-			</div>
-		</ComponentToggle>
-	);
-};

package/blocks/init/src/Blocks/components/hero/hero.php

@@ -1,45 +0,0 @@
-<?php
-
-/**
- * Hero component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$heroUse = Helpers::checkAttr('heroUse', $attributes, $manifest);
-
-if (!$heroUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-?>
-
-<section class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>">
-	<?php
-	echo Helpers::render('image', Helpers::props('image', $attributes, [
-		'additionalClass' => [
-			'image' => 'size-full grayscale',
-			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
-		],
-	]));
-	?>
-
-	<?php
-	echo Helpers::render('heading', Helpers::props('heading', $attributes)),
-	Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-		'additionalClass' => 'mt-4 max-w-96 text-pretty',
-	]));
-	?>
-
-	<div class="flex gap-2 mt-6">
-		<?php
-		echo Helpers::render('button', Helpers::props('buttonMain', $attributes)),
-		Helpers::render('button', Helpers::props('buttonSecondary', $attributes));
-		?>
-	</div>
-</section>

package/blocks/init/src/Blocks/components/hero/manifest.json

@@ -1,96 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "hero",
-	"title": "Hero",
-	"componentClass": "hero",
-	"example": {
-		"attributes": {
-			"heroContentPosition": "center center",
-			"heroUse": true
-		}
-	},
-	"attributes": {
-		"heroUse": {
-			"type": "boolean",
-			"default": true
-		},
-		"heroColor": {
-			"type": "string",
-			"default": "navy"
-		},
-
-		"heroHeadingSize": {
-			"type": "string",
-			"default": "2xl"
-		},
-		"heroParagraphSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"heroButtonMainVariant": {
-			"type": "string",
-			"default": "primary"
-		},
-		"heroButtonSecondaryVariant": {
-			"type": "string",
-			"default": "secondary"
-		}
-	},
-	"components": {
-		"image": "image",
-		"heading": "heading",
-		"paragraph": "paragraph",
-		"buttonMain": "button",
-		"buttonSecondary": "button"
-	},
-	"options": {
-		"heroColor": [
-			{
-				"label": "Navy",
-				"value": "navy"
-			},
-			{
-				"label": "Navy (dark)",
-				"value": "navy-dark"
-			},
-			{
-				"label": "Red",
-				"value": "red"
-			},
-			{
-				"label": "Red (dark)",
-				"value": "red-dark"
-			},
-			{
-				"label": "Gray",
-				"value": "gray"
-			},
-			{
-				"label": "Gray (dark)",
-				"value": "gray-dark"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "relative min-h-[40vh] sm:min-h-[50vh] md:min-h-[60vh] isolate flex flex-col items-center justify-center bg-gradient-to-br text-center rounded-xl ~my-4/8 overflow-hidden shadow-lg p-4"
-		},
-		"parts": {
-			"imagePicture": {
-				"twClasses": "absolute inset-0 -z-10 mix-blend-color-burn opacity-50 blur-[2px]"
-			}
-		},
-		"options": {
-			"heroColor": {
-				"twClasses": {
-					"navy": "from-white to-navy-50 shadow-navy-600/15 text-navy-950",
-					"red": "from-white to-red-50 shadow-red-600/15 text-red-950",
-					"gray": "from-white to-gray-50 shadow-gray-600/15 text-gray-950",
-					"navy-dark": "from-navy-950 to-navy-800 shadow-navy-600/15 text-navy-100",
-					"red-dark": "from-red-950 to-red-800 shadow-red-600/15 text-red-100",
-					"gray-dark": "from-gray-950 to-gray-800 shadow-gray-600/15 text-gray-100"
-				}
-			}
-		}
-	}
-}

package/blocks/init/src/Blocks/components/icon/components/icon-editor.js

@@ -1,23 +0,0 @@
-import { checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import { JsxSvg } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-export const IconEditor = (attributes) => {
-	const { icons: manifestIcons } = manifest;
-
-	const { additionalClass } = attributes;
-
-	const iconUse = checkAttr('iconUse', attributes, manifest);
-	const iconName = checkAttr('iconName', attributes, manifest);
-
-	if (!iconUse || !manifestIcons?.[iconName]) {
-		return null;
-	}
-
-	return (
-		<JsxSvg
-			svg={manifestIcons[iconName]}
-			className={tailwindClasses(attributes, manifest, additionalClass)}
-		/>
-	);
-};

package/blocks/init/src/Blocks/components/icon/components/icon-options.js

@@ -1,65 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getHiddenOptions, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
-import { RSOption, RSSingleValue, ComponentToggle, Select, RichLabel } from '@eightshift/ui-components';
-import { icons, JsxSvg } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-const { icons: manifestIcons } = manifest;
-
-const IconPickerOption = (props) => (
-	<RSOption {...props}>
-		<RichLabel
-			icon={<JsxSvg svg={manifestIcons[props.value]} />}
-			label={props.label}
-		/>
-	</RSOption>
-);
-
-const IconPickerValueDisplay = ({ children, ...props }) => (
-	<RSSingleValue {...props}>
-		<RichLabel
-			icon={<JsxSvg svg={manifestIcons[props.data.value]} />}
-			label={children}
-		/>
-	</RSSingleValue>
-);
-
-export const IconOptions = (attributes) => {
-	const { setAttributes, hideOptions, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const iconName = checkAttr('iconName', attributes, manifest);
-	const iconSize = checkAttr('iconSize', attributes, manifest);
-	const iconUse = checkAttr('iconUse', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.iconGeneric}
-			onChange={(value) => setAttributes({ [getAttrKey('iconUse', attributes, manifest)]: value })}
-			useComponent={iconUse}
-			{...rest}
-		>
-			<Select
-				value={iconName}
-				options={getOption('iconName', attributes, manifest)}
-				placeholder={__('Select an icon', '%g_textdomain%')}
-				customMenuOption={IconPickerOption}
-				customValueDisplay={IconPickerValueDisplay}
-				onChange={(value) => setAttributes({ [getAttrKey('iconName', attributes, manifest)]: value })}
-				simpleValue
-				hidden={hiddenOptions?.iconName}
-			/>
-
-			<Select
-				value={iconSize}
-				options={getOption('iconSize', attributes, manifest)}
-				onChange={(value) => setAttributes({ [getAttrKey('iconSize', attributes, manifest)]: value })}
-				simpleValue
-				noSearch
-				hidden={hiddenOptions?.size}
-			/>
-		</ComponentToggle>
-	);
-};

package/blocks/init/src/Blocks/components/icon/icon.php

@@ -1,53 +0,0 @@
-<?php
-
-/**
- * Icon component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$iconUse = Helpers::checkAttr('iconUse', $attributes, $manifest);
-
-if (!$iconUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-
-$iconName = Helpers::checkAttr('iconName', $attributes, $manifest);
-$iconAriaHidden = Helpers::checkAttr('iconAriaHidden', $attributes, $manifest);
-
-if (!isset($manifest['icons'][$iconName])) {
-	return;
-}
-
-$icon = $manifest['icons'][$iconName];
-
-$className = Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass);
-
-if (!empty($className)) {
-	$icon = str_replace('<svg ', '<svg class="' . esc_attr($className) . '" ', $icon);
-}
-
-if ($iconAriaHidden) {
-	$icon = str_replace('<svg ', '<svg aria-hidden="true" ', $icon);
-} else {
-	$iconTitle = '';
-	$iconOption = array_filter($manifest['options']['iconName'], fn($option) => $option['value'] === $iconName);
-
-	if (!empty($iconOption)) {
-		$iconTitle = reset($iconOption)['label'];
-	}
-
-	if (!empty($iconTitle)) {
-		$titleTag = '<title>' . esc_html($iconTitle) . '</title>';
-		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
-	}
-}
-
-// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-echo $icon;