@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,280 @@
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getOption,
+	checkAttr,
+	getAttrKey,
+	FileSelector,
+	getHiddenOptions,
+	MediaPicker,
+} from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	AnimatedVisibility,
+	BaseControl,
+	Expandable,
+	InputField,
+	Notice,
+	OptionSelect,
+	Repeater,
+	RepeaterItem,
+	Spacer,
+	Toggle,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const VideoOptions = (attributes) => {
+	const { setAttributes, hideOptions } = attributes;
+
+	const hiddenOptions = getHiddenOptions(hideOptions);
+
+	const videoUrl = checkAttr('videoUrl', attributes, manifest, true);
+	const videoId = checkAttr('videoId', attributes, manifest, true);
+	const videoPosterId = checkAttr('videoPosterId', attributes, manifest);
+	const videoPosterUrl = checkAttr('videoPosterUrl', attributes, manifest);
+	const videoLoop = checkAttr('videoLoop', attributes, manifest);
+	const videoAutoplay = checkAttr('videoAutoplay', attributes, manifest);
+	const videoControls = checkAttr('videoControls', attributes, manifest);
+	const videoMuted = checkAttr('videoMuted', attributes, manifest);
+	const videoPreload = checkAttr('videoPreload', attributes, manifest);
+	const videoSubtitleTracks = checkAttr('videoSubtitleTracks', attributes, manifest);
+
+	const getTrackIcon = (kind) => {
+		switch (kind) {
+			case 'subtitles':
+				return icons.videoSubtitle;
+			case 'captions':
+				return icons.closedCaptions;
+			case 'descriptions':
+				return icons.hide;
+			case 'chapters':
+				return icons.videoChapters;
+		}
+		return icons.emptyRect;
+	};
+
+	return (
+		<>
+			<AnimatedVisibility
+				visible={videoPosterId && !videoControls}
+				noInitial
+			>
+				<Notice
+					type='warning'
+					label={__('Playback controls disabled', '%g_textdomain%')}
+					subtitle={__('Poster image might prevent users from playing the video', '%g_textdomain%')}
+				/>
+			</AnimatedVisibility>
+
+			<FileSelector
+				onChange={({ id, url, mime, mime_type }) =>
+					setAttributes({
+						[getAttrKey('videoId', attributes, manifest)]: id,
+						[getAttrKey('videoUrl', attributes, manifest)]: url,
+						[getAttrKey('videoMimeType', attributes, manifest)]: typeof mime === 'undefined' ? mime_type : mime,
+					})
+				}
+				fileId={videoId}
+				fileName={videoUrl?.slice(videoUrl?.lastIndexOf('/') + 1)}
+				allowedTypes={['video/mp4', 'video/webm']}
+				kind='video'
+			/>
+
+			<Spacer />
+
+			<Spacer
+				icon={icons.playbackOptions}
+				text={__('Playback', '%g_textdomain%')}
+				border
+			/>
+
+			<Toggle
+				icon={icons.videoControls}
+				label={__('Video controls', '%g_textdomain%')}
+				checked={videoControls}
+				onChange={(value) => setAttributes({ [getAttrKey('videoControls', attributes, manifest)]: value })}
+				hidden={hiddenOptions?.playbackControls}
+			/>
+
+			<Toggle
+				icon={icons.loopMode}
+				label={__('Loop', '%g_textdomain%')}
+				checked={videoLoop}
+				onChange={(value) => setAttributes({ [getAttrKey('videoLoop', attributes, manifest)]: value })}
+				hidden={hiddenOptions?.loop}
+			/>
+
+			<Toggle
+				icon={icons.autoplayAlt}
+				label={__('Autoplay', '%g_textdomain%')}
+				checked={videoAutoplay}
+				onChange={(value) => setAttributes({ [getAttrKey('videoAutoplay', attributes, manifest)]: value })}
+				hidden={hiddenOptions?.autoplay}
+			/>
+
+			<Toggle
+				icon={icons.muteCentered}
+				label={__('Mute', '%g_textdomain%')}
+				checked={videoMuted}
+				onChange={(value) => setAttributes({ [getAttrKey('videoMuted', attributes, manifest)]: value })}
+				hidden={hiddenOptions?.mute}
+			/>
+
+			<AnimatedVisibility
+				visible={videoAutoplay && !videoMuted && !videoControls}
+				noInitial
+			>
+				<Notice
+					type='warning'
+					label={__('Video plays automatically, with sound, and without controls', '%g_textdomain%')}
+					subtitle={__(
+						'This will bother most users and is an accessibility issue. Consider changing some of the options.',
+						'%g_textdomain%',
+					)}
+					icon={icons.a11yWarning}
+					alignIconToTitle
+				/>
+			</AnimatedVisibility>
+
+			<Spacer />
+
+			<Spacer
+				icon={icons.a11y}
+				text={__('Accessibility', '%g_textdomain%')}
+				border
+			/>
+
+			<Repeater
+				icon={icons.videoSubtitleAlt}
+				label={__('Captions', '%g_textdomain%')}
+				items={videoSubtitleTracks}
+				onChange={(value) => setAttributes({ [getAttrKey('videoSubtitleTracks', attributes, manifest)]: value })}
+			>
+				{(item) => {
+					const { trackId, trackFileName, kind, srclang, label, updateData, itemIndex: index } = item;
+
+					return (
+						<RepeaterItem
+							icon={getTrackIcon(kind)}
+							label={
+								label ? sprintf(__('Track %d', '%g_textdomain%'), index + 1) : __('New track', '%g_textdomain%')
+							}
+							subtitle={label}
+						>
+							<FileSelector
+								onChange={({ id, url }) =>
+									updateData({
+										trackId: id,
+										trackFileName: url,
+									})
+								}
+								fileId={trackId}
+								fileName={trackFileName?.slice(trackFileName?.lastIndexOf('/') + 1)}
+								allowedTypes={['text/vtt']}
+								kind='subtitle'
+							>
+								{__('Upload a VTT file containing captions, subtitles, descriptions or chapters', '%g_textdomain%')}
+							</FileSelector>
+
+							<Spacer />
+
+							<OptionSelect
+								icon={icons.optionListAlt}
+								label={__('Type', '%g_textdomain%')}
+								value={kind}
+								options={getOption('videoSubtitleTrackKind', attributes, manifest)}
+								onChange={(value) => updateData({ kind: value })}
+								vertical
+							/>
+
+							<Spacer />
+
+							<InputField
+								icon={icons.titleGeneric}
+								label={__('Label', '%g_textdomain%')}
+								help={__('Shows in the list of available tracks', '%g_textdomain%')}
+								value={label}
+								onChange={(value) => updateData({ label: value })}
+							/>
+
+							<InputField
+								icon={icons.flag}
+								label={__('Language code', '%g_textdomain%')}
+								help={
+									<>
+										{__('Should follow IETF (BCP47).', '%g_textdomain%')}
+										{kind === 'subtitles' && ' ' + __('Required.', '%g_textdomain%')}
+									</>
+								}
+								value={srclang}
+								onChange={(value) => updateData({ srclang: value })}
+							/>
+
+							<Spacer />
+
+							<div className='es-uic-space-y-1'>
+								<Spacer text={__('List of language tags', '%g_textdomain%')} />
+
+								<a
+									href='https://en.wikipedia.org/wiki/IETF_language_tag#List_of_major_primary_language_subtags'
+									target='_blank'
+									rel='external'
+									className='es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm [&>svg]:es-uic-size-4 [&>svg]:es-uic-stroke-[1.5]'
+								>
+									{__('Common languages', '%g_textdomain%')}
+									{icons.externalLink}
+								</a>
+
+								<a
+									href='https://r12a.github.io/app-subtags/'
+									target='_blank'
+									rel='external'
+									className='es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm [&>svg]:es-uic-size-4 [&>svg]:es-uic-stroke-[1.5]'
+								>
+									{__('All languages', '%g_textdomain%')}
+									{icons.externalLink}
+								</a>
+							</div>
+						</RepeaterItem>
+					);
+				}}
+			</Repeater>
+
+			<Spacer />
+
+			<Expandable
+				icon={icons.moreHCircle}
+				label={__('Advanced', '%g_textdomain%')}
+			>
+				<BaseControl
+					icon={icons.videoPosterImage}
+					label={__('Poster image', '%g_textdomain%')}
+					subtitle={__('Visible before the video is played', '%g_textdomain%')}
+					hidden={hiddenOptions?.posterImage}
+				>
+					<MediaPicker
+						onChange={({ id, url }) =>
+							setAttributes({
+								[getAttrKey('videoPosterId', attributes, manifest)]: id,
+								[getAttrKey('videoPosterUrl', attributes, manifest)]: url,
+							})
+						}
+						imageId={videoPosterId}
+						imageUrl={videoPosterUrl}
+					/>
+				</BaseControl>
+
+				<Spacer />
+
+				<OptionSelect
+					icon={icons.preload}
+					label={__('Preload', '%g_textdomain%')}
+					value={videoPreload}
+					options={getOption('videoPreload', attributes, manifest)}
+					alignment='vertical'
+					onChange={(value) => setAttributes({ [getAttrKey('videoPreload', attributes, manifest)]: value })}
+					hidden={hiddenOptions?.preload}
+				/>
+			</Expandable>
+		</>
+	);
+};

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

@@ -0,0 +1,116 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "video",
+	"title": "Video",
+	"componentClass": "video",
+	"example": {
+		"attributes": {
+			"videoUrl": [
+				{
+					"url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+					"mime": "video/mp4"
+				}
+			],
+			"videoPoster": "https://loremflickr.com/300/200",
+			"videoAccept": ".mp4,.webm",
+			"videoAllowedTypes": [
+				"video/mp4",
+				"video/webm"
+			],
+			"videoUse": true
+		}
+	},
+	"attributes": {
+		"videoUrl": {
+			"type": "string"
+		},
+		"videoId": {
+			"type": "string"
+		},
+		"videoMimeType": {
+			"type": "string"
+		},
+		"videoLoop": {
+			"type": "boolean",
+			"default": true
+		},
+		"videoAutoplay": {
+			"type": "boolean",
+			"default": true
+		},
+		"videoControls": {
+			"type": "boolean",
+			"default": false
+		},
+		"videoMuted": {
+			"type": "boolean",
+			"default": true
+		},
+		"videoPreload": {
+			"type": "string",
+			"default": "metadata"
+		},
+		"videoPosterId": {
+			"type": "string"
+		},
+		"videoPosterUrl": {
+			"type": "string"
+		},
+		"videoUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"videoSubtitleTracks": {
+			"type": "array",
+			"items": {
+				"type": "object"
+			},
+			"default": []
+		}
+	},
+	"options": {
+		"videoPreload": [
+			{
+				"label": "Video & metadata",
+				"value": "auto"
+			},
+			{
+				"label": "Metadata",
+				"value": "metadata"
+			},
+			{
+				"label": "Nothing",
+				"value": "none"
+			}
+		],
+		"videoSubtitleTrackKind": [
+			{
+				"label": "Subtitles",
+				"value": "subtitles",
+				"icon": "videoSubtitle"
+			},
+			{
+				"label": "Captions",
+				"value": "captions",
+				"icon": "closedCaptions"
+			},
+			{
+				"label": "Descriptions",
+				"value": "descriptions",
+				"icon": "hide"
+			},
+			{
+				"label": "Chapters",
+				"value": "chapters",
+				"icon": "videoChapters"
+			}
+		]
+	},
+	"tailwind":{
+		"parts": {
+			"video": {
+				"twClasses": "aspect-video w-full rounded-xl border border-gray-800 bg-gradient-to-br from-gray-800 to-black shadow-md"
+			}
+		}
+	}
+}

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

@@ -0,0 +1,72 @@
+<?php
+
+/**
+ * Video component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+$componentName = $attributes['componentName'] ?? $manifest['componentName'];
+
+$videoUse = Helpers::checkAttr('videoUse', $attributes, $manifest);
+
+if (!$videoUse) {
+	return;
+}
+
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$videoUrl = Helpers::checkAttr('videoUrl', $attributes, $manifest, true);
+
+if (empty($videoUrl)) {
+	return;
+}
+
+$videoMimeType = Helpers::checkAttr('videoMimeType', $attributes, $manifest);
+$videoPosterId = Helpers::checkAttr('videoPosterId', $attributes, $manifest);
+$videoPosterUrl = Helpers::checkAttr('videoPosterUrl', $attributes, $manifest);
+$videoLoop = Helpers::checkAttr('videoLoop', $attributes, $manifest);
+$videoAutoplay = Helpers::checkAttr('videoAutoplay', $attributes, $manifest);
+$videoControls = Helpers::checkAttr('videoControls', $attributes, $manifest);
+$videoMuted = Helpers::checkAttr('videoMuted', $attributes, $manifest);
+$videoPreload = Helpers::checkAttr('videoPreload', $attributes, $manifest);
+$videoSubtitleTracks = Helpers::checkAttr('videoSubtitleTracks', $attributes, $manifest) ?? [];
+
+$additionalAttributes = Helpers::classnames([
+	$videoLoop ? 'loop' : '',
+	$videoAutoplay ? 'autoplay playsinline' : '',
+	$videoControls ? 'controls' : '',
+	$videoMuted ? 'muted' : '',
+]);
+?>
+
+<video
+	class="<?php echo esc_attr(Helpers::getTwPart('video', $manifest)); ?>"
+	<?php echo esc_attr($additionalAttributes); ?>
+	preload="<?php echo esc_attr($videoPreload); ?>"
+	poster="<?php echo esc_attr($videoPosterUrl); ?>"
+	<?php if ($videoPosterUrl) { ?>
+		poster="<?php echo esc_attr($videoPosterUrl); ?>"
+	<?php } ?>
+>
+	<source src="<?php echo esc_url($videoUrl); ?>" type="<?php echo esc_attr($videoMimeType); ?>" />
+
+	<?php foreach ($videoSubtitleTracks as $track) {
+		if (!($track['trackFileName'] ?? '') || !($track['kind'] ?? '') || !($track['label'])) {
+			continue;
+		}
+		?>
+
+		<track
+			src="<?php echo esc_url($track['trackFileName']); ?>"
+			kind="<?php echo esc_attr($track['kind']); ?>"
+			label="<?php echo esc_attr($track['label']); ?>"
+			<?php if ($track['srclang']) { ?>
+				srclang="<?php echo esc_attr($track['srclang']); ?>"
+			<?php } ?>
+		>
+	<?php } ?>
+</video>

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

@@ -0,0 +1,15 @@
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+import { AccordionEditor } from './components/accordion-editor';
+import { AccordionOptions } from './components/accordion-options';
+import manifest from './manifest.json';
+
+export const Accordion = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={AccordionOptions}
+			editor={AccordionEditor}
+			title={manifest.title}
+		/>
+	);
+};

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

@@ -0,0 +1,28 @@
+<?php
+
+/**
+ * Accordion block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockJsClass = $attributes['blockJsClass'] ?? '';
+
+$accordionCloseAdjacent = Helpers::checkAttr('accordionCloseAdjacent', $attributes, $manifest);
+?>
+
+<div
+	class="<?php echo esc_attr($blockJsClass); ?>"
+	<?php if ($accordionCloseAdjacent) {
+		?> data-close-adjacent <?php
+	} ?>
+>
+	<?php
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	echo $renderContent;
+	?>
+</div>

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

@@ -0,0 +1,37 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(async () => {
+	const selector = '.js-block-accordion';
+	const elements = document.querySelectorAll(selector);
+
+	if (elements?.length < 1) {
+		return;
+	}
+
+	elements.forEach((element) => {
+		let activeElement;
+
+		const accordionTriggers = element.querySelectorAll('[data-accordion-header]');
+
+		const closeAdjacent = element.hasAttribute('data-close-adjacent');
+
+		accordionTriggers.forEach((trigger) => {
+			const target = trigger.nextElementSibling;
+
+			trigger.addEventListener('click', () => {
+				if (closeAdjacent) {
+					if (activeElement) {
+						activeElement.setAttribute('aria-expanded', false);
+						activeElement.nextElementSibling.hidden = true;
+					}
+
+					activeElement = trigger;
+				}
+
+				const expanded = trigger.getAttribute('aria-expanded') === 'true' ?? false;
+				trigger.setAttribute('aria-expanded', !expanded);
+				target.hidden = expanded;
+			});
+		});
+	});
+});

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

@@ -0,0 +1,17 @@
+import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export const AccordionEditor = ({ clientId }) => {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(blockProps, {
+		allowedBlocks: ['eightshift-boilerplate/accordion-item'],
+		renderAppender: () => (
+			<BlockInserter
+				clientId={clientId}
+				label
+			/>
+		),
+	});
+
+	return <div {...innerBlocksProps} className='space-y-0 *:!m-0' />;
+};

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

@@ -0,0 +1,18 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { Toggle } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const AccordionOptions = ({ attributes, setAttributes }) => {
+	const accordionCloseAdjacent = checkAttr('accordionCloseAdjacent', attributes, manifest);
+
+	return (
+		<Toggle
+			icon={icons.dropdownClose}
+			label={__('Allow only one panel to be open', '%g_textdomain%')}
+			checked={accordionCloseAdjacent}
+			onChange={(value) => setAttributes({ [getAttrKey('accordionCloseAdjacent', attributes, manifest)]: value })}
+		/>
+	);
+};

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

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "accordion",
+	"blockJsClass": "js-block-accordion",
+	"title": "Accordion",
+	"description" : "Hide and show additional content.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-accordion"
+	},
+	"keywords": [
+		"accordion"
+	],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "eightshift-boilerplate/accordion-item",
+				"attributes": {
+					"accordionItemAccordionItemTitle": "Demo accordion",
+					"accordionItemAccordionItemContent": "Demo accordion content"
+				}
+			}
+		]
+	},
+	"hasInnerBlocks": true,
+	"attributes": {
+		"accordionCloseAdjacent": {
+			"type": "boolean",
+			"default": false
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+import { useSelect } from '@wordpress/data';
+import { GutenbergBlock, overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
+import { AccordionItemEditor } from './components/accordion-item-editor';
+
+export const AccordionItem = (props) => {
+	useSelect((select) => {
+		overrideInnerBlockAttributes(select, props.clientId, {
+			wrapperNoWidthControls: true,
+			wrapperWidth: 'none',
+		});
+	});
+
+	return (
+		<GutenbergBlock
+			{...props}
+			editor={AccordionItemEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/accordion-item/accordion-item.php

@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * Accordion item block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockJsClass = $attributes['blockJsClass'] ?? '';
+
+$uniqueId = Helpers::getUnique();
+
+$panelId = "{$uniqueId}-panel";
+$triggerId = "{$uniqueId}-header";
+
+$accordionItemLabel = Helpers::checkAttr('accordionItemLabel', $attributes, $manifest);
+?>
+
+<button
+	id="<?php echo esc_attr($triggerId); ?>"
+	aria-expanded="false"
+	aria-controls="<?php echo esc_attr($panelId); ?>"
+	class="<?php echo esc_attr(Helpers::getTwPart('trigger', $manifest)); ?>"
+	data-accordion-header
+>
+	<?php
+	echo esc_attr($accordionItemLabel),
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	$manifest['resources']['icon'];
+	?>
+</button>
+<section
+	id="<?php echo esc_attr($panelId); ?>"
+	aria-labelledby="<?php echo esc_attr($triggerId); ?>"
+	class="<?php echo esc_attr(Helpers::getTwPart('content-container', $manifest)); ?>"
+	hidden
+>
+	<?php
+		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+		echo $renderContent;
+	?>
+</section>