@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/accordion-item/components/accordion-item-editor.js

@@ -0,0 +1,60 @@
+import React, { useId, useState, useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import { BlockInserter, checkAttr, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { RichText, useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import manifest from '../manifest.json';
+import { JsxSvg } from '@eightshift/ui-components/icons';
+import { AnimatedVisibility } from '@eightshift/ui-components';
+
+export const AccordionItemEditor = ({ attributes, setAttributes, clientId }) => {
+	const accordionItemLabel = checkAttr('accordionItemLabel', attributes, manifest);
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(blockProps, {
+		renderAppender: () => (
+			<BlockInserter
+				clientId={clientId}
+				small
+			/>
+		),
+	});
+
+	const [expanded, setExpanded] = useState(false);
+
+	return (
+		<>
+			<div
+				aria-expanded={expanded}
+				className={getTwPart('trigger', manifest)}
+			>
+				<RichText
+					placeholder={__('Section title', '%g_textdomain%')}
+					value={accordionItemLabel}
+					onChange={(value) => setAttributes({ [getAttrKey('accordionItemLabel', attributes, manifest)]: value })}
+					allowedFormats={['core/bold']}
+					className='mr-auto w-fit'
+				/>
+
+				<button
+					onClick={(e) => setExpanded(!expanded)}
+					className={getTwPart('editor-trigger', manifest)}
+				>
+					<JsxSvg
+						svg={manifest.resources.icon}
+						className={getTwPart('editor-trigger-icon', manifest, expanded && 'rotate-45')}
+					/>
+				</button>
+			</div>
+
+			<AnimatedVisibility
+				visible={expanded}
+				noInitial
+			>
+				<div
+					{...innerBlocksProps}
+					className={getTwPart('content-container', manifest)}
+				/>
+			</AnimatedVisibility>
+		</>
+	);
+};

package/blocks/init/src/Blocks/custom/accordion-item/manifest.json

@@ -0,0 +1,69 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "accordion-item",
+	"title": "Accordion item",
+	"description" : "Single accordion panel.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-accordion"
+	},
+	"keywords": [
+		"accordion",
+		"item"
+	],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "eightshift-boilerplate/heading",
+				"attributes": {
+					"headingHeadingContent": "Lorem ipsum dolor sit amet"
+				}
+			},
+			{
+				"name": "eightshift-boilerplate/paragraph",
+				"attributes": {
+					"paragraphParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet. Aenean accumsan lacus justo, a lacinia turpis semper condimentum. "
+				}
+			}
+		]
+	},
+	"attributes": {
+		"accordionItemLabel": {
+			"type": "string"
+		},
+
+		"wrapperUse": {
+			"type": "boolean",
+			"default": false
+		},
+		"wrapperNoControls": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"hasInnerBlocks": true,
+	"resources": {
+		"icon": "<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 3v18m-9-9h18' stroke='#14142B' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' fill='none'/></svg>"
+	},
+	"parent": [
+		"eightshift-boilerplate/accordion"
+	],
+	"tailwind": {
+		"parts": {
+			"trigger": {
+				"twClasses": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition [&>svg]:size-5 [&>svg]:transition-transform [&[aria-expanded=true]>svg]:rotate-45",
+				"twClassesEditor": "flex items-center justify-between gap-2 group px-2 py-4 w-full border-t border-t-gray-400 text-sm font-medium"
+			},
+			"content-container": {
+				"twClasses": "pl-2 pr-8 pb-4 animate-in fade-in duration-500 fill-mode-forwards",
+				"twClassesEditor": "pl-2 pr-8 pb-4 *:!m-0"
+			},
+			"editor-trigger": {
+				"twClassesEditor": "focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30 transition"
+			},
+			"editor-trigger-icon": {
+				"twClassesEditor": "size-5 transition duration-300"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/button/button-block.js

@@ -0,0 +1,13 @@
+import { ButtonEditor } from './components/button-editor';
+import { ButtonOptions } from './components/button-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Button = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={ButtonOptions}
+			editor={ButtonEditor}
+		/>
+	);
+};

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

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * Button block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+echo Helpers::render('button', Helpers::props('button', $attributes));

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

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

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

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ButtonOptions as OptionsComponent } from '../../../components/button/components/button-options';
+
+export const ButtonOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('button', attributes, { setAttributes })}
+			controlOnly
+		/>
+	);
+};

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

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "button",
+	"title": "Button",
+	"description": "The most common interactive element.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-button"
+	},
+	"keywords": [
+		"button",
+		"btn",
+		"link"
+	],
+	"components": {
+		"button": "button"
+	}
+}

package/blocks/init/src/Blocks/custom/card/card-block.js

@@ -0,0 +1,13 @@
+import { CardEditor } from './components/card-editor';
+import { CardOptions } from './components/card-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Card = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={CardOptions}
+			editor={CardEditor}
+		/>
+	);
+};

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

@@ -0,0 +1,11 @@
+<?php
+
+/**
+ * Card block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+echo Helpers::render('card', Helpers::props('card', $attributes));

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

@@ -0,0 +1,12 @@
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { CardEditor as EditorComponent } from '../../../components/card/components/card-editor';
+
+export const CardEditor = ({ attributes, setAttributes }) => {
+	return (
+		<EditorComponent
+			{...props('card', attributes, {
+				setAttributes,
+			})}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/card/components/card-options.js

@@ -0,0 +1,15 @@
+import { __ } from '@wordpress/i18n';
+import { props, getOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import { CardOptions as OptionsComponent } from '../../../components/card/components/card-options';
+import manifest from './../manifest.json';
+
+export const CardOptions = ({ attributes, setAttributes }) => {
+	return (
+		<OptionsComponent
+			{...props('card', attributes, {
+				setAttributes,
+				options: getOptions(attributes, manifest),
+			})}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/card/manifest.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "card",
+	"title": "Card",
+	"description" : "A bit of text, image, and a button all wrapped up in a beautiful combination.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-card"
+	},
+	"keywords": [
+		"Service",
+		"Box",
+		"Card"
+	],
+	"components": {
+		"card": "card"
+	}
+}

package/blocks/init/src/Blocks/custom/carousel/assets/index.js

@@ -0,0 +1,46 @@
+import domReady from '@wordpress/dom-ready';
+import manifest from '../manifest.json';
+import EmblaCarousel from 'embla-carousel';
+import { addPagination } from './pagination';
+import { setUpNavigation } from './navigation';
+
+domReady(async () => {
+	const { blockJsClass } = manifest;
+
+	const selector = `.${blockJsClass}`;
+	const elements = document.querySelectorAll(selector);
+
+	if (!elements.length) {
+		return;
+	}
+
+	elements.forEach((element) => {
+		const container = element.querySelector(`${selector}-container`);
+
+		if (!container) {
+			return;
+		}
+
+		const loop = element.hasAttribute('data-loop');
+
+		const embla = EmblaCarousel(container, {
+			loop: loop,
+			skipSnaps: true,
+		});
+
+		const prevButton = element.querySelector(`${selector}-prev`);
+		const nextButton = element.querySelector(`${selector}-next`);
+
+		if (prevButton && nextButton) {
+			const removeNavigationHandlers = setUpNavigation(embla, prevButton, nextButton);
+			embla.on('destroy', removeNavigationHandlers);
+		}
+
+		const paginationContainer = element.querySelector(`${selector}-pagination`);
+
+		if (paginationContainer) {
+			const removePaginationHandlers = addPagination(embla, paginationContainer);
+			embla.on('destroy', removePaginationHandlers);
+		}
+	});
+});

package/blocks/init/src/Blocks/custom/carousel/assets/navigation.js

@@ -0,0 +1,31 @@
+// Based on Embla carousel docs.
+
+const setUpNavigationStateChange = (emblaApi, prevBtn, nextBtn) => {
+	const toggleNavigationState = () => {
+		prevBtn.disabled = !emblaApi.canScrollPrev();
+		nextBtn.disabled = !emblaApi.canScrollNext();
+	};
+
+	emblaApi.on('select', toggleNavigationState).on('init', toggleNavigationState).on('reInit', toggleNavigationState);
+
+	return () => {
+		prevBtn.removeAttribute('disabled');
+		nextBtn.removeAttribute('disabled');
+	};
+};
+
+export const setUpNavigation = (emblaApi, prevBtn, nextBtn) => {
+	const scrollPrev = () => emblaApi.scrollPrev();
+	const scrollNext = () => emblaApi.scrollNext();
+
+	prevBtn.addEventListener('click', scrollPrev, false);
+	nextBtn.addEventListener('click', scrollNext, false);
+
+	const removeNavigationStateChangeEvents = setUpNavigationStateChange(emblaApi, prevBtn, nextBtn);
+
+	return () => {
+		removeNavigationStateChangeEvents();
+		prevBtn.removeEventListener('click', scrollPrev, false);
+		nextBtn.removeEventListener('click', scrollNext, false);
+	};
+};

package/blocks/init/src/Blocks/custom/carousel/assets/pagination.js

@@ -0,0 +1,39 @@
+// Based on Embla carousel docs.
+
+export const addPagination = (emblaApi, dotsNode) => {
+	let dotNodes = [];
+
+	const addDots = () => {
+		dotsNode.innerHTML = '';
+
+		dotNodes = emblaApi.scrollSnapList().map((_, index) => {
+			const elem = document.createElement('button');
+			elem.className =
+				'size-2.5 rounded-full border border-gray-500 transition hover:scale-105 focus:outline-none focus-visible:ring focus-visible:ring-navy-500/30';
+
+			elem.addEventListener('click', () => emblaApi.scrollTo(index), false);
+			dotsNode.appendChild(elem);
+			return elem;
+		});
+	};
+
+	const toggleDotBtnsActive = () => {
+		const previous = emblaApi.previousScrollSnap();
+		const selected = emblaApi.selectedScrollSnap();
+		['border-navy-500', 'bg-navy-500', 'shadow-sm', 'shadow-navy-500/30'].forEach((className) => {
+			dotNodes[previous].classList.remove(className);
+			dotNodes[selected].classList.add(className);
+		});
+	};
+
+	emblaApi
+		.on('init', addDots)
+		.on('reInit', addDots)
+		.on('init', toggleDotBtnsActive)
+		.on('reInit', toggleDotBtnsActive)
+		.on('select', toggleDotBtnsActive);
+
+	return () => {
+		dotsNode.innerHTML = '';
+	};
+};

package/blocks/init/src/Blocks/custom/carousel/carousel-block.js

@@ -0,0 +1,21 @@
+import { useSelect } from '@wordpress/data';
+import { GutenbergBlock, overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
+import { CarouselOptions } from './components/carousel-options';
+import { CarouselEditor } from './components/carousel-editor';
+
+export const Carousel = (props) => {
+	useSelect((select) => {
+		overrideInnerBlockAttributes(select, props.clientId, {
+			wrapperUse: false,
+			wrapperNoControls: true,
+		});
+	});
+
+	return (
+		<GutenbergBlock
+			{...props}
+			options={CarouselOptions}
+			editor={CarouselEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/carousel/carousel.php

@@ -0,0 +1,61 @@
+<?php
+
+/**
+ * Carousel block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockJsClass = $manifest['blockJsClass'] ?? $attributes['blockJsClass'] ?? '';
+
+$carouselLoop = Helpers::checkAttr('carouselLoop', $attributes, $manifest);
+$carouselNavigation = Helpers::checkAttr('carouselNavigation', $attributes, $manifest);
+$carouselPagination = Helpers::checkAttr('carouselPagination', $attributes, $manifest);
+?>
+
+<div
+	class="<?php echo esc_attr($blockJsClass); ?>"
+	<?php if ($carouselLoop) { ?>
+		data-loop
+	<?php } ?>
+>
+	<?php if ($carouselNavigation || $carouselPagination) { ?>
+		<div class="hidden sm:flex items-center justify-center gap-2 mb-4">
+			<?php if ($carouselPagination) { ?>
+				<div class="<?php echo esc_attr(Helpers::classnames(["{$blockJsClass}-pagination", $carouselNavigation ? 'mr-auto' : '', 'max-sm:hidden space-x-0.5'])); ?>"></div>
+			<?php } ?>
+
+			<?php
+			if ($carouselNavigation) {
+				echo Helpers::render('button', [
+					'iconName' => 'back-arrow',
+					'buttonSize' => 'square',
+					'buttonVariant' => 'primary',
+					'buttonColor' => 'navy-800',
+					'additionalClass' => "{$blockJsClass}-prev",
+				]),
+				Helpers::render('button', [
+					'iconName' => 'forward-arrow',
+					'buttonSize' => 'square',
+					'buttonVariant' => 'primary',
+					'buttonColor' => 'navy-800',
+					'additionalClass' => "{$blockJsClass}-next",
+				]);
+			}
+			?>
+		</div>
+	<?php } ?>
+
+	<div class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, "{$blockJsClass}-container")); ?>">
+		<div class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest)); ?>">
+			<?php
+			// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+			echo $renderContent;
+			?>
+		</div>
+	</div>
+</div>

package/blocks/init/src/Blocks/custom/carousel/components/carousel-editor.js

@@ -0,0 +1,25 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { BlockInserter, getTwClasses, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import manifest from '../manifest.json';
+
+export const CarouselEditor = ({ attributes, clientId }) => {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(blockProps, {
+		renderAppender: false,
+		orientation: 'horizontal',
+	});
+
+	return (
+		<div className='flex items-center gap-2'>
+			<div className={getTwPart('container', manifest)}>
+				<div
+					{...innerBlocksProps}
+					className={getTwClasses(attributes, manifest)}
+				/>
+			</div>
+
+			<BlockInserter clientId={clientId} />
+		</div>
+	);
+};

package/blocks/init/src/Blocks/custom/carousel/components/carousel-options.js

@@ -0,0 +1,47 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
+import { OptionSelect, Spacer, Toggle } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from './../manifest.json';
+
+export const CarouselOptions = ({ attributes, setAttributes }) => {
+	const carouselLoop = checkAttr('carouselLoop', attributes, manifest);
+	const carouselNavigation = checkAttr('carouselNavigation', attributes, manifest);
+	const carouselPagination = checkAttr('carouselPagination', attributes, manifest);
+	const carouselItemGap = checkAttr('carouselItemGap', attributes, manifest);
+
+	return (
+		<>
+			<OptionSelect
+				icon={icons.gutter}
+				label={__('Item gap', '%g_textdomain%')}
+				value={carouselItemGap}
+				onChange={(value) => setAttributes({ [getAttrKey('carouselItemGap', attributes, manifest)]: value })}
+				options={getOption('carouselItemGap', attributes, manifest)}
+			/>
+
+			<Spacer />
+
+			<Toggle
+				icon={icons.loopMode}
+				label={__('Loop', '%g_textdomain%')}
+				checked={carouselLoop}
+				onChange={(value) => setAttributes({ [getAttrKey('carouselLoop', attributes, manifest)]: value })}
+			/>
+
+			<Toggle
+				icon={icons.navigationButtons}
+				label={__('Prev/next buttons', '%g_textdomain%')}
+				checked={carouselNavigation}
+				onChange={(value) => setAttributes({ [getAttrKey('carouselNavigation', attributes, manifest)]: value })}
+			/>
+
+			<Toggle
+				icon={icons.pagination}
+				label={__('Pagination', '%g_textdomain%')}
+				checked={carouselPagination}
+				onChange={(value) => setAttributes({ [getAttrKey('carouselPagination', attributes, manifest)]: value })}
+			/>
+		</>
+	);
+};