@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * Template for the document head section.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$headFavicon = Helpers::checkAttr('headFavicon', $attributes, $manifest);
+$headCharset = Helpers::checkAttr('headCharset', $attributes, $manifest);
+$headName = Helpers::checkAttr('headName', $attributes, $manifest);
+
+?>
+
+<?php if (isset($headCharset)) { ?>
+  <meta charset="<?php echo esc_attr($headCharset); ?>" />
+<?php } ?>
+
+<!-- Responsive -->
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+<!-- Remove IE's ability to use compatibility mode -->
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+<!-- Disable phone formatting on Safari -->
+<meta name="format-detection" content="telephone=no">
+
+<!-- Speed up fetching of external assets -->
+<link rel="dns-prefetch" href="//fonts.googleapis.com">
+<link rel="dns-prefetch" href="//ajax.googleapis.com">
+<link rel="dns-prefetch" href="//www.google-analytics.com">
+
+<!-- Windows (Phone) Meta -->
+<?php if ($headName ?? '') { ?>
+  <meta name="application-name" content="<?php echo esc_attr($headName); ?>" />
+<?php } ?>
+
+<!-- Apple -->
+<?php if ($headName ?? '') { ?>
+  <meta name="apple-mobile-web-app-title" content="<?php echo esc_attr($headName); ?>">
+<?php } ?>
+
+<meta name="apple-mobile-web-app-capable" content="yes">
+
+<?php if ($headFavicon ?? '') { ?>
+  <link rel="apple-touch-startup-image" href="<?php echo esc_url($headFavicon); ?>">
+	<link rel="shortcut icon" href="<?php echo esc_url($headFavicon); ?>" />
+<?php } ?>

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

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "head",
+	"title": "Head",
+	"attributes": {
+		"headFavicon": {
+			"type": "string"
+		},
+		"headCharset": {
+			"type": "string",
+			"default": "utf-8"
+		},
+		"headName": {
+			"type": "string"
+		}
+	}
+}

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

@@ -0,0 +1,30 @@
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getAttrKey, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import manifest from './../manifest.json';
+
+export const HeadingEditor = (attributes) => {
+	const {
+		setAttributes,
+		additionalClass,
+		placeholder = __('Heading', '%g_textdomain%'),
+	} = attributes;
+
+	const headingUse = checkAttr('headingUse', attributes, manifest);
+
+	if (!headingUse) {
+		return null;
+	}
+
+	const headingContent = checkAttr('headingContent', attributes, manifest);
+
+	return (
+		<RichText
+			className={getTwClasses(attributes, manifest, additionalClass)}
+			placeholder={placeholder}
+			value={headingContent}
+			onChange={(value) => setAttributes({ [getAttrKey('headingContent', attributes, manifest)]: value })}
+			allowedFormats={[]}
+		/>
+	);
+};

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

@@ -0,0 +1,62 @@
+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>,
+						tooltip: __('Heading level', '%g_textdomain%'),
+					}}
+					hidden={hiddenOptions?.headingLevel}
+					noTriggerLabel
+				/>
+
+				{additionalControls}
+			</HStack>
+		</ComponentToggle>
+	);
+};

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

@@ -0,0 +1,45 @@
+<?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::getTwClasses($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

@@ -0,0 +1,76 @@
+{
+	"$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

@@ -0,0 +1,42 @@
+import { props, checkAttr, getTwPart, getTwClasses } 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={getTwClasses(attributes, manifest, additionalClass)}>
+			<ImageEditor
+				{...props('image', attributes, {
+					additionalClass: {
+						image: '!size-full grayscale',
+						picture: getTwPart('imagePicture', 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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,45 @@
+<?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::getTwClasses($attributes, $manifest, $additionalClass)); ?>">
+	<?php
+	echo Helpers::render('image', Helpers::props('image', $attributes, [
+		'additionalClass' => [
+			'image' => 'size-full grayscale',
+			'picture' => Helpers::getTwPart('imagePicture', $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

@@ -0,0 +1,96 @@
+{
+	"$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

@@ -0,0 +1,23 @@
+import { checkAttr, getTwClasses } 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={getTwClasses(attributes, manifest, additionalClass)}
+		/>
+	);
+};

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

@@ -0,0 +1,65 @@
+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>
+	);
+};