@eightshift/frontend-libs-tailwind 1.4.8 → 2.0.0

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

@@ -1,146 +0,0 @@
-/* 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;
-		}
-
-		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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-<?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::tailwindClasses('modalWrapper', $attributes, $manifest, $componentJsClass)); ?>">
-	<div tabindex="-1" class="<?php echo esc_attr(Helpers::tailwindClasses('modalBackdrop', $attributes, $manifest)); ?>" data-micromodal-close>
-		<div class="<?php echo esc_attr(Helpers::tailwindClasses('modalContent', $attributes, $manifest)); ?>" role="dialog" aria-modal="true" aria-labelledby="<?php echo esc_attr($modalId); ?>-title">
-			<header class="<?php echo esc_attr(Helpers::tailwindClasses('modalHeader', $attributes, $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::tailwindClasses('button', $attributes, $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

@@ -1,38 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from './../manifest.json';
-
-export const ParagraphEditor = (attributes) => {
-	const {
-		setAttributes,
-		placeholder = __('Add content', '%g_textdomain%'),
-		additionalClass,
-
-		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={tailwindClasses(attributes, manifest, additionalClass)}
-			placeholder={placeholder}
-			value={paragraphContent}
-			onChange={(value) => setAttributes({ [getAttrKey('paragraphContent', attributes, manifest)]: value })}
-			allowedFormats={['core/bold', 'core/link', 'core/italic']}
-			onMerge={mergeBlocks}
-			onReplace={onReplace}
-			onRemove={onRemove}
-			deleteEnter
-		/>
-	);
-};

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

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

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

@@ -1,33 +0,0 @@
-<?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::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>">
-	<?php
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo $paragraphContent;
-	?>
-</p>

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

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

@@ -1,24 +0,0 @@
-<?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-110 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

@@ -1,53 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, tailwindClasses, 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={tailwindClasses('container', attributes, manifest, additionalClass)}>
-			<AnimatedVisibility
-				visible={quoteShowIcon}
-				noInitial
-			>
-				<JsxSvg
-					className={tailwindClasses('icon', attributes, manifest)}
-					svg={manifest.resources.quoteIcon}
-				/>
-			</AnimatedVisibility>
-
-			<RichText
-				tagName='blockquote'
-				className={tailwindClasses('quote-text', attributes, manifest)}
-				placeholder={__('Quote text', '%g_textdomain%')}
-				value={quoteText}
-				onChange={(value) => setAttributes({ [getAttrKey('quoteText', attributes, manifest)]: value })}
-				allowedFormats={[]}
-			/>
-
-			<figcaption className={tailwindClasses('author', attributes, manifest)}>
-				&mdash;
-				<RichText
-					placeholder={__('Quote author', '%g_textdomain%')}
-					value={quoteAuthor}
-					onChange={(value) => setAttributes({ [getAttrKey('quoteAuthor', attributes, manifest)]: value })}
-					allowedFormats={[]}
-				/>
-			</figcaption>
-		</figure>
-	);
-};