@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

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

@@ -1,279 +0,0 @@
-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={manifest.allowedTypes}
-				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

@@ -1,120 +0,0 @@
-{
-	"$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": "number"
-		},
-		"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"
-			}
-		}
-	},
-	"allowedTypes": [
-		"video/mp4",
-		"video/webm"
-	]
-}

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

@@ -1,70 +0,0 @@
-<?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);
-$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::tailwindClasses('video', $attributes, $manifest)); ?>"
-	<?php echo esc_attr($additionalAttributes); ?>
-	preload="<?php echo esc_attr($videoPreload); ?>"
-	<?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

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

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

@@ -1,37 +0,0 @@
-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') ?? 'false') === 'true';
-				trigger.setAttribute('aria-expanded', !expanded);
-				target.hidden = expanded;
-			});
-		});
-	});
-});

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

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

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

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

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

@@ -1,46 +0,0 @@
-<?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::tailwindClasses('trigger', $attributes, $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::tailwindClasses('content-container', $attributes, $manifest)); ?>"
-	hidden
->
-	<?php
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo $renderContent;
-	?>
-</section>