@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

package/blocks/init/src/Blocks/components/button/assets/index.js

@@ -1,22 +0,0 @@
-import domReady from '@wordpress/dom-ready';
-
-domReady(() => {
-	const elements = document.querySelectorAll('.button[href^="#"]');
-
-	if (!elements.length) {
-		return;
-	}
-
-	elements.forEach((element) => {
-		element.addEventListener('click', (event) => {
-			event.preventDefault();
-			const target = document.querySelector(event.currentTarget.getAttribute('href'));
-
-			window.scrollTo({
-				top: target.offsetTop,
-				left: 0,
-				behavior: 'smooth',
-			});
-		});
-	});
-});

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

@@ -1,88 +0,0 @@
-<?php
-
-/**
- * Button component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$buttonUse = Helpers::checkAttr('buttonUse', $attributes, $manifest);
-
-if (!$buttonUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-$additionalAttributes = $attributes['additionalAttributes'] ?? [];
-$buttonId = Helpers::checkAttr('buttonId', $attributes, $manifest);
-$buttonType = Helpers::checkAttr('buttonType', $attributes, $manifest);
-
-$buttonUrl = Helpers::checkAttr('buttonUrl', $attributes, $manifest);
-$buttonIsNewTab = Helpers::checkAttr('buttonIsNewTab', $attributes, $manifest);
-
-$buttonContent = Helpers::checkAttr('buttonContent', $attributes, $manifest);
-
-$buttonAriaLabel = Helpers::checkAttr('buttonAriaLabel', $attributes, $manifest);
-
-$buttonIconUse = Helpers::checkAttr('buttonIconUse', $attributes, $manifest);
-
-$buttonAttrs = [];
-
-if (!$buttonIconUse && empty($buttonContent)) {
-	return;
-}
-
-if (!empty($additionalAttributes)) {
-	$buttonAttrs = $additionalAttributes;
-}
-
-if (!empty($buttonUrl)) {
-	$buttonAttrs['href'] = $buttonUrl;
-}
-
-if ($buttonIsNewTab) {
-	$buttonAttrs['target'] = '_blank';
-	$buttonAttrs['rel'] = 'noopener noreferrer';
-}
-
-if (!empty($buttonId)) {
-	$buttonAttrs['id'] = $buttonId;
-}
-
-if (!empty($buttonAriaLabel)) {
-	$buttonAttrs['aria-label'] = $buttonAriaLabel;
-}
-
-$buttonAttrs['class'] = Helpers::tailwindClasses('base', $attributes, $manifest, 'button', $additionalClass);
-
-$buttonTag = !empty($buttonUrl) ? 'a' : 'button';
-
-if (empty($buttonUrl) && !empty($buttonType)) {
-	$buttonAttrs['type'] = $buttonType;
-}
-?>
-
-<<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>
-	<?php
-	foreach ($buttonAttrs as $key => $value) {
-		if (empty($key) && empty($value)) {
-			continue;
-		}
-
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo "{$key}=" . '"' . esc_attr($value) . '"';
-	}
-	?>
->
-	<?php
-	echo Helpers::render('icon', Helpers::props('icon', $attributes));
-	?>
-
-	<?php if (!empty($buttonContent)) { ?>
-		<span><?php echo esc_html($buttonContent); ?></span>
-	<?php } ?>
-</<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>>

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

@@ -1,36 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconEditor } from '../../icon/components/icon-editor';
-import manifest from './../manifest.json';
-
-export const ButtonEditor = (attributes) => {
-	const { componentClass } = manifest;
-
-	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
-
-	const buttonContent = checkAttr('buttonContent', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	if (!buttonUse) {
-		return null;
-	}
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<IconEditor
-				{...props('icon', attributes, {
-					blockClass: componentClass,
-				})}
-			/>
-
-			<RichText
-				placeholder={placeholder}
-				value={buttonContent}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonContent', attributes, manifest)]: value })}
-				keepPlaceholderOnFocus
-				allowedFormats={[]}
-			/>
-		</div>
-	);
-};

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

@@ -1,134 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import {
-	getOption,
-	checkAttr,
-	getAttrKey,
-	props,
-	getOptions,
-	wpSearchRoute,
-	getHiddenOptions,
-} from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconOptions } from '../../icon/components/icon-options';
-import {
-	ButtonGroup,
-	ColorPicker,
-	ComponentToggle,
-	HStack,
-	InputField,
-	LinkInput,
-	OptionSelect,
-	Spacer,
-	Toggle,
-} from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { upperFirst } from '@eightshift/ui-components/utilities';
-import manifest from './../manifest.json';
-
-export const ButtonOptions = (attributes) => {
-	const { setAttributes, hideOptions, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const buttonId = checkAttr('buttonId', attributes, manifest);
-	const buttonAriaLabel = checkAttr('buttonAriaLabel', attributes, manifest);
-	const buttonUrl = checkAttr('buttonUrl', attributes, manifest);
-	const buttonIsAnchor = checkAttr('buttonIsAnchor', attributes, manifest);
-	const buttonIsNewTab = checkAttr('buttonIsNewTab', attributes, manifest);
-	const buttonVariant = checkAttr('buttonVariant', attributes, manifest);
-	const buttonColor = checkAttr('buttonColor', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.buttonOutline}
-			onChange={(value) => setAttributes({ [getAttrKey('buttonUse', attributes, manifest)]: value })}
-			useComponent={buttonUse}
-			{...rest}
-		>
-			<HStack hidden={hiddenOptions?.variant && hiddenOptions?.color && hiddenOptions?.icon}>
-				<ButtonGroup hidden={hiddenOptions?.variant && hiddenOptions?.color}>
-					<OptionSelect
-						aria-label={__('Style', '%g_textdomain%')}
-						value={buttonVariant}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonVariant', attributes, manifest)]: value })}
-						options={getOption('buttonVariant', attributes, manifest)}
-						type='menu'
-						hidden={hiddenOptions?.variant}
-					/>
-
-					<ColorPicker
-						aria-label={__('Color', '%g_textdomain%')}
-						value={buttonColor}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonColor', attributes, manifest)]: value })}
-						colors={getOption(`buttonColor${upperFirst(buttonVariant)}`, attributes, manifest, true)}
-						hidden={hiddenOptions?.color}
-					/>
-				</ButtonGroup>
-
-				<IconOptions
-					{...props('icon', attributes, {
-						options: getOptions(attributes, manifest),
-					})}
-					hidden={hiddenOptions?.icon}
-					hideOptions='size'
-					design='compactLabel'
-				/>
-			</HStack>
-
-			<Spacer hidden={hiddenOptions?.link} />
-
-			<LinkInput
-				icon={buttonIsAnchor ? icons.globeAnchor : icons.globe}
-				url={buttonUrl}
-				onChange={({ url, isAnchor }) => {
-					setAttributes({
-						[getAttrKey('buttonUrl', attributes, manifest)]: url,
-						[getAttrKey('buttonIsAnchor', attributes, manifest)]: isAnchor ?? false,
-					});
-				}}
-				fetchSuggestions={wpSearchRoute}
-				hidden={hiddenOptions?.link}
-			/>
-
-			<Toggle
-				icon={icons.newTab}
-				label={__('Open in new tab', '%g_textdomain%')}
-				checked={buttonIsNewTab}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonIsNewTab', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.link || hiddenOptions?.newTab}
-			/>
-
-			<Spacer hidden={hiddenOptions?.ariaLabel} />
-			<Spacer
-				icon={icons.a11y}
-				text={__('Accessibility', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-			<InputField
-				icon={icons.ariaLabel}
-				label={__('ARIA label', '%g_textdomain%')}
-				value={buttonAriaLabel}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonAriaLabel', attributes, manifest)]: value })}
-				help={__('Description of the button.', '%g_textdomain%')}
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-
-			<Spacer hidden={hiddenOptions?.uniqueId} />
-			<Spacer
-				icon={icons.pointerHand}
-				text={__('Advanced', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.uniqueId}
-			/>
-			<InputField
-				icon={icons.id}
-				label={__('Unique identifier', '%g_textdomain%')}
-				value={buttonId}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonId', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.uniqueId}
-			/>
-		</ComponentToggle>
-	);
-};

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

@@ -1,302 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "button",
-	"title": "Button",
-	"componentClass": "btn",
-	"example": {
-		"attributes": {
-			"buttonContent": "This is a button",
-			"buttonUrl": "https://eightshift.com/",
-			"buttonId": "custom ID"
-		}
-	},
-	"attributes": {
-		"buttonContent": {
-			"type": "string"
-		},
-		"buttonUrl": {
-			"type": "string"
-		},
-		"buttonId": {
-			"type": "string"
-		},
-		"buttonType": {
-			"type": "string"
-		},
-		"buttonColor": {
-			"type": "string",
-			"default": "navy-500"
-		},
-		"buttonVariant": {
-			"type": "string",
-			"default": "primary"
-		},
-		"buttonSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"buttonIsAnchor": {
-			"type": "boolean",
-			"default": false
-		},
-		"buttonIsNewTab": {
-			"type": "boolean",
-			"default": false
-		},
-		"buttonAriaLabel": {
-			"type": "string"
-		},
-		"buttonUse": {
-			"type": "boolean",
-			"default": true
-		},
-		"buttonIconUse": {
-			"type": "boolean",
-			"default": false
-		}
-	},
-	"components": {
-		"icon": "icon"
-	},
-	"options": {
-		"buttonVariant": [
-			{
-				"label": "Primary",
-				"value": "primary",
-				"icon": "buttonFilled"
-			},
-			{
-				"label": "Secondary",
-				"value": "secondary",
-				"icon": "buttonOutline"
-			},
-			{
-				"label": "Link",
-				"value": "link",
-				"icon": "link"
-			}
-		],
-		"buttonSize": [
-			{
-				"label": "Regular",
-				"value": "base"
-			},
-			{
-				"label": "Small",
-				"value": "sm"
-			}
-		],
-		"buttonColorPrimary": [
-			"navy-100",
-			"navy-500",
-			"navy-800",
-			"red-100",
-			"red-500",
-			"red-800",
-			"gray-100",
-			"gray-500",
-			"gray-800"
-		],
-		"buttonColorSecondary": [
-			"navy-100",
-			"navy-800",
-			"red-100",
-			"red-800",
-			"gray-100",
-			"gray-500",
-			"gray-800"
-		],
-		"buttonColorLink": [
-			"black",
-			"white",
-			"red-500",
-			"navy-500"
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "font-sans transition duration-300 inline-flex items-center focus-visible:ring focus:outline-none text-sm disabled:shadow-none disabled:grayscale disabled:cursor-default disabled:opacity-85"
-		},
-		"options": {
-			"buttonVariant": {
-				"twClasses": {
-					"primary": "border shadow hover:shadow-md bg-gradient-to-br [&>svg]:size-6 gap-2",
-					"secondary": "border [&>svg]:size-6 gap-2",
-					"link": "leading-tight rounded-sm underline cursor-pointer underline-offset-1 decoration-[1.5px] [&>svg]:size-4 gap-1 hover:ring-4"
-				}
-			}
-		},
-		"combinations": [
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "base"
-				},
-				"twClasses": "~pr-3/4 ~pl-2.5/3.5 ~py-2/3 ~rounded-lg/xl"
-			},
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "sm"
-				},
-				"twClasses": "~pr-1/2 ~pl-1.5/2.5 ~py-1/1.5 ~rounded-md/lg"
-			},
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "square"
-				},
-				"twClasses": "size-14 sm:size-9 rounded-full sm:[&>svg]:size-5 justify-center"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-100 to-navy-200 text-navy-950 border-navy-200 hover:border-navy-200 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-500 to-navy-600 text-navy-50 border-navy-500 hover:border-navy-600 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-700 to-navy-800 text-navy-50 border-navy-800 hover:border-navy-900 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-100 to-red-200 text-red-950 border-red-200 hover:border-red-300 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-500 to-red-600 text-red-50 border-red-500 hover:border-red-600 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-700 to-red-800 text-red-50 border-red-800 hover:border-red-900 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-100 to-gray-200 text-gray-950 border-gray-200 hover:border-gray-300 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-500 to-gray-600 text-gray-50 border-gray-500 hover:border-gray-600 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-700 to-gray-800 text-gray-50 border-gray-800 hover:border-gray-900 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-navy-100 border-navy-100 focus-visible:ring-navy-500/30 hover:bg-navy-100 hover:text-navy-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-navy-800 border-navy-800 focus-visible:ring-navy-500/30 hover:bg-navy-800 hover:text-navy-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-red-100 border-red-100 focus-visible:ring-red-500/30 hover:bg-red-100 hover:text-red-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-red-800 border-red-800 focus-visible:ring-red-500/30 hover:bg-red-800 hover:text-red-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-100 border-gray-100 focus-visible:ring-gray-500/30 hover:bg-gray-100 hover:text-gray-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-500",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-500 border-gray-500 focus-visible:ring-gray-500/30 hover:bg-gray-500 hover:text-white"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-800 border-gray-800 focus-visible:ring-gray-500/30 hover:bg-gray-800 hover:text-gray-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "black",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-gray-950 decoration-gray-500 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100"
-			},
-			{
-				"attributes": {
-					"buttonColor": "white",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-gray-50 decoration-gray-100 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100 hover:text-gray-950 hover:decoration-gray-400"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-500",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-current decoration-red-500 hover:bg-red-50 focus-visible:ring-red-500/30 hover:ring-red-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-500",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-current decoration-navy-500 hover:bg-navy-50 focus-visible:ring-navy-500/30 hover:ring-navy-50"
-			}
-		]
-	}
-}

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

@@ -1,42 +0,0 @@
-<?php
-
-/**
- * Card component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-$additionalClass = $attributes['additionalClass'] ?? '';
-?>
-
-<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>" >
-	<?php
-	echo Helpers::render('image', Helpers::props('image', $attributes, [
-		'additionalClass' => [
-			'image' => Helpers::tailwindClasses('image', $attributes, $manifest),
-			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
-		]
-	]));
-	?>
-
-	<div class="<?php echo esc_attr(Helpers::tailwindClasses('content-container', $attributes, $manifest)); ?>">
-		<?php
-		echo Helpers::render('paragraph', Helpers::props('intro', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('intro', $attributes, $manifest),
-		])),
-
-		Helpers::render('heading', Helpers::props('heading', $attributes)),
-
-		Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('text', $attributes, $manifest),
-		])),
-
-		Helpers::render('button', Helpers::props('button', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('button', $attributes, $manifest),
-		]));
-		?>
-	</div>
-</div>

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

@@ -1,43 +0,0 @@
-import { props, 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 CardEditor = (attributes) => {
-	const { additionalClass } = attributes;
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<ImageEditor
-				{...props('image', attributes, {
-					additionalClass: {
-						image: tailwindClasses('image', attributes, manifest),
-						picture: tailwindClasses('imagePicture', attributes, manifest),
-						imagePlaceholder:
-							'!border-x-0 !border-t-0 !border-solid !w-full !h-auto aspect-3/2 [&_svg]:!size-12 border-b !rounded-none bg-gray-100 !border-b-gray-200',
-					},
-				})}
-			/>
-
-			<div className={tailwindClasses('content-container', attributes, manifest)}>
-				<ParagraphEditor
-					{...props('intro', attributes, {
-						additionalClass: tailwindClasses('intro', attributes, manifest),
-					})}
-				/>
-
-				<HeadingEditor {...props('heading', attributes)} />
-
-				<ParagraphEditor
-					{...props('paragraph', attributes, { additionalClass: tailwindClasses('text', attributes, manifest) })}
-				/>
-
-				<ButtonEditor
-					{...props('button', attributes, { additionalClass: tailwindClasses('button', attributes, manifest) })}
-				/>
-			</div>
-		</div>
-	);
-};