@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/components/load-more/assets/load-more.js

@@ -0,0 +1,147 @@
+/* global esBlocksLocalization */
+
+export class LoadMore {
+	constructor({ element }) {
+		this.element = element;
+
+		this.restUrl = esBlocksLocalization?.loadMoreRestUrl ?? '';
+
+		// Classes.
+		this.CLASS_IS_HIDDEN = 'hidden';
+
+		// Data attributes.
+		this.ATTR_PER_PAGE_OVERRIDE = 'data-load-more-per-page-override';
+		this.ATTR_INITIAL_ITEMS = 'data-load-more-initial-items';
+		this.ATTR_QUERY = 'data-load-more-query';
+		this.ATTR_TYPE = 'data-load-more-type';
+		this.ATTR_ID = 'data-load-more-id';
+		this.ATTR_PAGE = 'data-load-more-page';
+
+		// Query vars.
+		this.QUERY_VAR = 'current-page';
+
+		// Internal data.
+		this.page = this.element.getAttribute(this.ATTR_PAGE) ?? 1;
+		this.query = this.element.getAttribute(this.ATTR_QUERY);
+		this.loadFromQueryParam = false;
+	}
+
+	/**
+	 * Init all event-listeners.
+	 */
+	init() {
+		const container = document.querySelector(`#${this.element.getAttribute(this.ATTR_ID)}`);
+
+		// this.updateCurrentPageFromQuery();
+
+		// Initialize params.
+		const initialItems = this.element.getAttribute(this.ATTR_INITIAL_ITEMS);
+		const type = this.element.getAttribute(this.ATTR_TYPE);
+		const perPageOverride = this.element.getAttribute(this.ATTR_PER_PAGE_OVERRIDE);
+
+		const params = {
+			initialItems: initialItems,
+			type: type,
+			perPageOverride: perPageOverride,
+		};
+
+		// Add listener on trigger click.
+		this.element.addEventListener('click', async () => {
+			this.element.disabled = true;
+
+			// Get data.
+			const received = await this.fetchData({
+				...params,
+				query: this.query,
+				currentPage: this.page,
+			});
+
+			// Disable 'Load more' button if something went wrong.
+			if (!received || !received?.success) {
+				this.element.disabled = true;
+				return;
+			}
+
+			const { currentPage, query, maxPages, body } = received.data;
+
+			// Update local params.
+			this.query = query;
+			this.page = currentPage;
+
+			this.setCurrentPageQueryParam(currentPage);
+
+			// Add new items in a staggered manner.
+			body.split('<a').forEach((item, i) => {
+				setTimeout(() => {
+					container.insertAdjacentHTML('beforeend', `<a${item}`);
+				}, i * 150);
+			});
+
+			// Hide button if at the end, otherwise re-enable it.
+			if (currentPage >= maxPages || maxPages === 0 || currentPage === 0) {
+				this.element.classList.add(this.CLASS_IS_HIDDEN);
+			} else {
+				this.element.disabled = false;
+			}
+		});
+	}
+
+	fetchData = async (params) => {
+		// Construct URL.
+		const url = new URL(this.restUrl);
+
+		Object.entries(params).forEach(([key, value]) => {
+			url.searchParams.append(key, value);
+		});
+
+		if (this.loadFromQueryParam) {
+			this.loadFromQueryParam = false;
+			url.searchParams.set('urlLoadMoreAction', 'true');
+		}
+
+		// Fetch data.
+		const response = await fetch(url.toString(), {
+			method: 'GET',
+			mode: 'same-origin',
+			headers: {
+				Accept: 'application/json',
+			},
+			credentials: 'same-origin',
+			redirect: 'follow',
+			referrer: 'no-referrer',
+		});
+
+		if (!response.ok) {
+			return null;
+		}
+
+		return await response.json();
+	};
+
+	updateCurrentPageFromQuery = () => {
+		const url = new URL(window.location);
+
+		const param = parseInt(url.searchParams.get(this.QUERY_VAR));
+
+		if (isNaN(param) || param < 1) {
+			return;
+		}
+
+		console.log({ param });
+
+		this.page = param;
+		this.loadFromQueryParam = true;
+	};
+
+	setCurrentPageQueryParam = (page) => {
+		if (!('URLSearchParams' in window)) {
+			return;
+		}
+
+		const url = new URL(window.location);
+
+		url.searchParams.set(this.QUERY_VAR, page ?? this.page);
+
+		history.replaceState(null, '', url);
+	};
+}

package/blocks/init/src/Blocks/components/load-more/components/load-more-editor.js

@@ -0,0 +1,14 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ButtonEditor } from '../../../components/button/components/button-editor';
+
+export const LoadMoreEditor = (attributes) => {
+	const { setAttributes } = attributes;
+
+	return (
+		<ButtonEditor
+			{...props('button', attributes, {
+				setAttributes,
+			})}
+		/>
+	);
+};

package/blocks/init/src/Blocks/components/load-more/components/load-more-options.js

@@ -0,0 +1,18 @@
+import { props, getOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ButtonOptions } from '../../../components/button/components/button-options';
+import manifest from '../manifest.json';
+
+export const LoadMoreOptions = (attributes) => {
+	const { setAttributes, label, noUseToggle, controlOnly } = attributes;
+	return (
+		<ButtonOptions
+			label={label ?? manifest.title}
+			{...props('button', attributes, {
+				setAttributes: setAttributes,
+			})}
+			hideOptions='link,uniqueId'
+			noUseToggle={noUseToggle}
+			controlOnly={controlOnly}
+		/>
+	);
+};

package/blocks/init/src/Blocks/components/load-more/load-more.php

@@ -0,0 +1,47 @@
+<?php
+
+/**
+ * 'Load more' button component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+$componentName = $attributes['componentName'] ?? $manifest['componentName'];
+
+$loadMoreUse = Helpers::checkAttr('loadMoreUse', $attributes, $manifest, $componentName);
+if (!$loadMoreUse) {
+	return;
+}
+
+$componentJsClass = $manifest['componentJsClass'] ?? '';
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$loadMoreInitialItems = Helpers::checkAttr('loadMoreInitialItems', $attributes, $manifest, $componentName);
+$loadMoreQuery = Helpers::checkAttr('loadMoreQuery', $attributes, $manifest, $componentName);
+$loadMoreId = Helpers::checkAttr('loadMoreId', $attributes, $manifest, $componentName);
+$loadMoreType = Helpers::checkAttr('loadMoreType', $attributes, $manifest, $componentName);
+$loadMorePerPageOverride = Helpers::checkAttr('loadMorePerPageOverride', $attributes, $manifest, $componentName);
+$loadMorePage = Helpers::checkAttr('loadMorePage', $attributes, $manifest, $componentName);
+
+// Bailout if no query is provided.
+if (!$loadMoreQuery) {
+	return;
+}
+
+$baseAttrs = Helpers::props('button', $attributes, [
+	'additionalClass' => $componentJsClass . ' ' . $additionalClass,
+]);
+
+echo Helpers::render('button', array_merge($baseAttrs, [
+	'additionalAttributes' => [
+		'data-load-more-type' => $loadMoreType,
+		'data-load-more-id' => $loadMoreId,
+		'data-load-more-query' => $loadMoreQuery,
+		'data-load-more-initial-items' => $loadMoreInitialItems,
+		'data-load-more-per-page-override' => $loadMorePerPageOverride,
+		'data-load-more-page' => $loadMorePage,
+	],
+]));

package/blocks/init/src/Blocks/components/load-more/manifest.json

@@ -0,0 +1,39 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "load-more",
+	"title": "Load more",
+	"componentClass": "load-more",
+	"componentJsClass": "js-load-more",
+	"attributes": {
+		"loadMoreQuery": {
+			"type": "string"
+		},
+		"loadMoreType": {
+			"type": "string"
+		},
+		"loadMoreId": {
+			"type": "string"
+		},
+		"loadMoreInitialItems": {
+			"type": "string"
+		},
+		"loadMorePerPageOverride": {
+			"type": "integer"
+		},
+		"loadMorePage": {
+			"type": "integer",
+			"default": 1
+		},
+		"loadMoreUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"loadMoreButtonContent": {
+			"type": "string",
+			"default": "Load more"
+		}
+	},
+	"components": {
+		"button": "button"
+	}
+}

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

@@ -0,0 +1,27 @@
+import domReady from '@wordpress/dom-ready';
+import MicroModal from 'micromodal';
+import manifest from '../manifest.json';
+
+domReady(() => {
+	const selector = `.${manifest.componentJsClass}`;
+	const elements = document.querySelectorAll(selector);
+
+	if (elements?.length < 1) {
+		return;
+	}
+
+	elements.forEach((element) => {
+		document
+			.querySelectorAll(`[href=":open-modal-${element.id}:"],[data-micromodal-trigger="${element.id}"]`)
+			.forEach((trigger) => {
+				trigger.addEventListener('click', (event) => {
+					event.preventDefault();
+
+					MicroModal.show(element.id, {
+						disableScroll: true,
+						awaitCloseAnimation: true,
+					});
+				});
+			});
+	});
+});

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

@@ -0,0 +1,48 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "modal",
+	"title": "Modal",
+	"componentClass": "modal",
+	"componentJsClass": "js-modal",
+	"example": {
+		"attributes": {
+			"modalUse": true,
+			"modalExitButton": true,
+			"modalContent": "This is modal",
+			"modalId": "modal-id"
+		}
+	},
+	"attributes": {
+		"modalTitle": {
+			"type": "string"
+		},
+		"modalContent": {
+			"type": "string"
+		},
+		"modalId": {
+			"type": "string"
+		}
+	},
+	"nodeDependency": [
+		"micromodal"
+	],
+	"tailwind": {
+		"parts": {
+			"button": {
+				"twClasses": "size-9 flex items-center justify-center rounded-md border border-gray-500 hover:bg-gray-500 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 text-gray-600 hover:text-white transition"
+			},
+			"modalWrapper": {
+				"twClasses": "hidden open:block group"
+			},
+			"modalBackdrop": {
+				"twClasses": "fixed inset-0 wp-admin-bar-offset bg-black/50 z-30 duration-300 group-aria-hidden:animate-out group-aria-hidden:fade-out animate-in fade-in-0 flex"
+			},
+			"modalContent": {
+				"twClasses": "flex flex-col bg-white rounded-t-lg sm:rounded-lg mx-auto mt-auto sm:my-auto min-h-[40vh] w-[90vw] sm:w-full sm:max-w-[50vw] max-h-[80vh] p-6 sm:p-4 sm:pl-6 space-y-3 sm:ml-auto shadow-md animate-in slide-in-from-top-4 group-aria-hidden:animate-out group-aria-hidden:slide-out-to-top-4"
+			},
+			"modalHeader": {
+				"twClasses": "flex items-center justify-between gap-4"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * Modal component template.
+ *
+ * @package %g_namespace%.
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$componentJsClass = $manifest['componentJsClass'] ?? '';
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$modalId = Helpers::checkAttr('modalId', $attributes, $manifest);
+$modalTitle = Helpers::checkAttr('modalTitle', $attributes, $manifest);
+$modalContent = Helpers::checkAttr('modalContent', $attributes, $manifest);
+?>
+
+<div id="<?php echo esc_attr($modalId); ?>" aria-hidden="true" class="<?php echo esc_attr(Helpers::getTwPart('modalWrapper', $manifest, $componentJsClass)); ?>">
+	<div tabindex="-1" class="<?php echo esc_attr(Helpers::getTwPart('modalBackdrop', $manifest)); ?>" data-micromodal-close>
+		<div class="<?php echo esc_attr(Helpers::getTwPart('modalContent', $manifest)); ?>" role="dialog" aria-modal="true" aria-labelledby="<?php echo esc_attr($modalId); ?>-title">
+			<header class="<?php echo esc_attr(Helpers::getTwPart('modalHeader', $manifest)); ?>">
+				<?php if (!empty($modalTitle)) { ?>
+					<p id="<?php echo esc_attr($modalId); ?>-title">
+						<?php echo esc_html($modalTitle); ?>
+					</p>
+				<?php } ?>
+
+				<button class="<?php echo esc_attr(Helpers::getTwPart('button', $manifest, 'ml-auto')); ?>" aria-label="Close menu" data-micromodal-close>
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</header>
+
+			<div id="<?php echo esc_attr($modalId); ?>-content" class="grow">
+				<?php
+				// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+				echo $modalContent;
+				?>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,40 @@
+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 ParagraphEditor = (attributes) => {
+	const {
+		setAttributes,
+		placeholder = __('Add content', '%g_textdomain%'),
+		additionalClass,
+
+		onSplit,
+		mergeBlocks,
+		onReplace,
+		onRemove,
+	} = attributes;
+
+	const paragraphUse = checkAttr('paragraphUse', attributes, manifest);
+	const paragraphContent = checkAttr('paragraphContent', attributes, manifest);
+
+	if (!paragraphUse) {
+		return null;
+	}
+
+	return (
+		<RichText
+			identifier={getAttrKey('paragraphContent', attributes, manifest)}
+			className={getTwClasses(attributes, manifest, additionalClass)}
+			placeholder={placeholder}
+			value={paragraphContent}
+			onChange={(value) => setAttributes({ [getAttrKey('paragraphContent', attributes, manifest)]: value })}
+			allowedFormats={['core/bold', 'core/link', 'core/italic']}
+			onSplit={onSplit}
+			onMerge={mergeBlocks}
+			onReplace={onReplace}
+			onRemove={onRemove}
+			deleteEnter={true}
+		/>
+	);
+};

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

@@ -0,0 +1,48 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, getHiddenOptions, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ComponentToggle, HStack, OptionSelect, ToggleButton } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from './../manifest.json';
+
+export const ParagraphOptions = (attributes) => {
+	const { setAttributes, hideOptions, additionalControls, ...rest } = attributes;
+
+	const hiddenOptions = getHiddenOptions(hideOptions);
+
+	const paragraphUse = checkAttr('paragraphUse', attributes, manifest);
+	const paragraphSize = checkAttr('paragraphSize', attributes, manifest);
+	const paragraphFontWeight = checkAttr('paragraphFontWeight', attributes, manifest);
+
+	return (
+		<ComponentToggle
+			label={manifest.title}
+			icon={icons.paragraph}
+			onChange={(value) => setAttributes({ [getAttrKey('paragraphUse', attributes, manifest)]: value })}
+			useComponent={paragraphUse}
+			{...rest}
+		>
+			<HStack>
+				<OptionSelect
+					aria-label={__('Font size', '%g_textdomain%')}
+					options={getOption('paragraphSize', attributes, manifest)}
+					onChange={(value) => setAttributes({ [getAttrKey('paragraphSize', attributes, manifest)]: value })}
+					value={paragraphSize}
+					type='menu'
+					hidden={hiddenOptions.size}
+				/>
+
+				<ToggleButton
+					selected={paragraphFontWeight === '700'}
+					icon={icons.bold}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('paragraphFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
+					tooltip={__('Bold', '%g_textdomain%')}
+					hidden={hiddenOptions.weight}
+				/>
+
+				{additionalControls}
+			</HStack>
+		</ComponentToggle>
+	);
+};

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

@@ -0,0 +1,83 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "paragraph",
+	"title": "Paragraph",
+	"componentClass": "paragraph",
+	"example": {
+		"attributes": {
+			"paragraphContent": "This is paragraph",
+			"paragraphSize": "base",
+			"paragraphFontWeight": "400",
+			"paragraphUse": true
+		}
+	},
+	"attributes": {
+		"paragraphContent": {
+			"type": "string"
+		},
+		"paragraphSize": {
+			"type": "string",
+			"default": "base"
+		},
+		"paragraphFontWeight": {
+			"type": "string",
+			"default": "400"
+		},
+		"paragraphUse": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"options": {
+		"paragraphSize": [
+			{
+				"label": "24",
+				"value": "lg"
+			},
+			{
+				"label": "20",
+				"value": "md"
+			},
+			{
+				"label": "16",
+				"value": "base"
+			},
+			{
+				"label": "14",
+				"value": "sm"
+			}
+		],
+		"paragraphFontWeight": [
+			{
+				"label": "Normal",
+				"value": "400"
+			},
+			{
+				"label": "Bold",
+				"value": "700"
+			}
+		]
+	},
+	"tailwind": {
+		"tailwind": {
+			"base": {
+				"twClasses": "font-sans [&>a]:underline font-synthesis-none"
+			},
+			"options": {
+				"paragraphSize": {
+					"twClasses": {
+						"sm": "text-sm",
+						"base": "~sm/md:~text-sm/base",
+						"md": "~sm/md:~text-lg/2xl",
+						"lg": "~sm/md:~text-xl/3xl"
+					}
+				},
+				"paragraphFontWeight": {
+					"twClasses": {
+						"700": "font-bold"
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,33 @@
+<?php
+
+/**
+ * Paragraph component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$paragraphUse = Helpers::checkAttr('paragraphUse', $attributes, $manifest);
+
+if (!$paragraphUse) {
+	return;
+}
+
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$paragraphContent = Helpers::checkAttr('paragraphContent', $attributes, $manifest);
+
+if (!$paragraphContent) {
+	return;
+}
+?>
+
+<p class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass)); ?>">
+	<?php
+		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+		echo $paragraphContent;
+	?>
+</p>

package/blocks/init/src/Blocks/components/post-header/manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "post-header",
+	"title": "Post header"
+}

package/blocks/init/src/Blocks/components/post-header/post-header.php

@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * Post header component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'full') ?? '';
+?>
+
+<div class="isolate bg-gray-200 !col-span-full min-h-80 grid grid-cols-[auto_1fr_auto] md:grid-cols-subgrid grid-rows-1 mb-10">
+	<?php if (!empty($featuredImage)) { ?>
+		<img class="w-full h-80 col-span-full -z-10 object-cover row-start-1" src="<?php echo esc_attr($featuredImage); ?>" alt="" role="presentation">
+	<?php } ?>
+	<div class="~sm/md:~mx-4/12 ~sm/md:~px-4/8 ~sm/md:~py-4/6 col-start-2 row-start-1 bg-black/75 text-white border border-b-0 border-black/25 backdrop-blur-2xl backdrop-brightness-200 backdrop-saturate-150 self-end">
+		<h1 class="font-display text-balance font-synthesis-none ~text-5xl/6xl !leading-none font-soft-25 italic"><?php echo esc_html(get_the_title()); ?></h1>
+		<span class="opacity-75 text-sm"><?php echo esc_html(get_the_date()); ?></span>
+	</div>
+</div>

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

@@ -0,0 +1,53 @@
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { checkAttr, getTwPart, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { AnimatedVisibility } from '@eightshift/ui-components';
+import { JsxSvg } from '@eightshift/ui-components/icons';
+import manifest from './../manifest.json';
+
+export const QuoteEditor = (attributes) => {
+	const { additionalClass, setAttributes } = attributes;
+
+	const quoteUse = checkAttr('quoteUse', attributes, manifest);
+
+	if (!quoteUse) {
+		return null;
+	}
+
+	const quoteShowIcon = checkAttr('quoteShowIcon', attributes, manifest);
+	const quoteText = checkAttr('quoteText', attributes, manifest);
+	const quoteAuthor = checkAttr('quoteAuthor', attributes, manifest);
+
+	return (
+		<figure className={getTwPart('container', manifest, additionalClass)}>
+			<AnimatedVisibility
+				visible={quoteShowIcon}
+				noInitial
+			>
+				<JsxSvg
+					className={getTwPart('icon', manifest)}
+					svg={manifest.resources.quoteIcon}
+				/>
+			</AnimatedVisibility>
+
+			<RichText
+				tagName='blockquote'
+				className={getTwPart('quote-text', manifest)}
+				placeholder={__('Quote text', '%g_textdomain%')}
+				value={quoteText}
+				onChange={(value) => setAttributes({ [getAttrKey('quoteText', attributes, manifest)]: value })}
+				allowedFormats={[]}
+			/>
+
+			<figcaption className={getTwPart('author', manifest)}>
+				&mdash;
+				<RichText
+					placeholder={__('Quote author', '%g_textdomain%')}
+					value={quoteAuthor}
+					onChange={(value) => setAttributes({ [getAttrKey('quoteAuthor', attributes, manifest)]: value })}
+					allowedFormats={[]}
+				/>
+			</figcaption>
+		</figure>
+	);
+};