@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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;