@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,65 @@
+import {
+	checkAttr,
+	getBreakpointData,
+	getBreakpointNames,
+	getTwClasses,
+	getTwPart,
+} from '@eightshift/frontend-libs-tailwind/scripts';
+import { ImagePlaceholder } from '@eightshift/ui-components';
+import manifest from './../manifest.json';
+
+export const ImageEditor = (attributes) => {
+	const { additionalClass } = attributes;
+
+	const imageUse = checkAttr('imageUse', attributes, manifest);
+	const imageData = checkAttr('imageData', attributes, manifest);
+
+	if (!imageUse || typeof imageData?.['_default'] === 'undefined') {
+		return null;
+	}
+
+	const isDesktopFirst = imageData['_desktopFirst'] ?? false;
+
+	const breakpointNames = getBreakpointNames();
+	const breakpointData = getBreakpointData();
+
+	return (
+		<>
+			{imageData?.['_default']?.url && (
+				<picture className={additionalClass?.picture ?? ''}>
+					{breakpointNames.map((breakpointName) => {
+						if (!imageData?.[breakpointName]?.url) {
+							return null;
+						}
+
+						const breakpointWidth = breakpointData?.[breakpointName];
+
+						if (!breakpointWidth) {
+							return null;
+						}
+
+						return (
+							<source
+								key={breakpointName}
+								srcSet={imageData?.[breakpointName]?.url}
+								media={`(${isDesktopFirst ? 'max-width' : 'min-width'}: ${breakpointWidth}em)`}
+							/>
+						);
+					})}
+					<img
+						className={getTwClasses(attributes, manifest, additionalClass?.image ?? additionalClass)}
+						src={imageData?.['_default'].url}
+					/>
+				</picture>
+			)}
+
+			{!imageData?.['_default']?.url && (
+				<ImagePlaceholder
+					style='simple'
+					size='large'
+					className={additionalClass?.imagePlaceholder}
+				/>
+			)}
+		</>
+	);
+};

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

@@ -0,0 +1,111 @@
+import { __ } from '@wordpress/i18n';
+import {
+	checkAttr,
+	getAttrKey,
+	MediaPicker,
+	generateOptionsFromValue,
+	getOption,
+	getHiddenOptions,
+	getResponsiveData,
+} from '@eightshift/frontend-libs-tailwind/scripts';
+import manifest from './../manifest.json';
+import { ComponentToggle, OptionSelect, Responsive, Spacer, Toggle } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { truncateMiddle } from '@eightshift/ui-components/utilities';
+
+export const ImageOptions = (attributes) => {
+	const { setAttributes, hideOptions, additionalControls, ...rest } = attributes;
+
+	const hiddenOptions = getHiddenOptions(hideOptions);
+
+	const imageUse = checkAttr('imageUse', attributes, manifest);
+	const imageRoundedCorners = checkAttr('imageRoundedCorners', attributes, manifest);
+	const imageAspectRatio = checkAttr('imageAspectRatio', attributes, manifest);
+	const imageSize = checkAttr('imageSize', attributes, manifest);
+
+	const imageData = checkAttr('imageData', attributes, manifest);
+
+	const responsiveData = getResponsiveData(true);
+
+	return (
+		<ComponentToggle
+			label={manifest.title}
+			icon={icons.image}
+			onChange={(value) => setAttributes({ [getAttrKey('imageUse', attributes, manifest)]: value })}
+			useComponent={imageUse}
+			{...rest}
+		>
+			<Responsive
+				value={imageData}
+				onChange={(value) => setAttributes({ [getAttrKey('imageData', attributes, manifest)]: value })}
+				icon={icons.imageFile}
+				label={__('Image', 'eightshift-ui-components')}
+				options={generateOptionsFromValue(imageData, (v) =>
+					truncateMiddle(
+						v?.url?.replace(window.location.origin, '')?.replace(/\/wp-content\/uploads\/\d{4}\/\d{2}\//g, '') ??
+							__('Not set', '%g_textdomain%'),
+						15,
+					),
+				)}
+				hidden={hiddenOptions?.imagePicker}
+				{...responsiveData}
+			>
+				{({ breakpoint, currentValue, handleChange }) => (
+					<MediaPicker
+						onChange={({ id, url }) => handleChange({ id: id, url: url })}
+						imageId={currentValue?.id}
+						imageUrl={currentValue?.url}
+						noDelete={breakpoint !== '_default'}
+					/>
+				)}
+			</Responsive>
+
+			<Spacer hidden={hiddenOptions?.borderRadius} />
+
+			<OptionSelect
+				icon={icons.roundedCorners}
+				label={__('Rounded corners', '%g_textdomain%')}
+				options={getOption('imageRoundedCorners', attributes, manifest)}
+				value={imageRoundedCorners}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('imageRoundedCorners', attributes, manifest)]: value,
+					})
+				}
+				type='menu'
+				hidden={hiddenOptions?.borderRadius}
+				inline
+			/>
+
+			<Spacer hidden={hiddenOptions?.aspectRatio || hiddenOptions?.stretch} />
+
+			<OptionSelect
+				icon={icons.aspectRatio}
+				label={__('Aspect ratio', '%g_textdomain%')}
+				options={getOption('imageAspectRatio', attributes, manifest)}
+				value={imageAspectRatio}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('imageAspectRatio', attributes, manifest)]: value,
+					})
+				}
+				type='menu'
+				hidden={hiddenOptions?.aspectRatio}
+				inline
+			/>
+
+			<Toggle
+				icon={icons.expandXl}
+				label={__('Stretch', '%g_textdomain%')}
+				checked={imageSize === 'stretch'}
+				onChange={(value) =>
+					setAttributes({ [getAttrKey('imageSize', attributes, manifest)]: value ? 'stretch' : 'default' })
+				}
+				hidden={hiddenOptions?.stretch}
+			/>
+
+			<Spacer hidden={!additionalControls} />
+			{additionalControls}
+		</ComponentToggle>
+	);
+};

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

@@ -0,0 +1,62 @@
+<?php
+
+/**
+ * Image component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$globalManifest = Helpers::getSettings();
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$imageUse = Helpers::checkAttr('imageUse', $attributes, $manifest) ?? false;
+$imageData = Helpers::checkAttr('imageData', $attributes, $manifest);
+
+if (!$imageUse || empty($imageData['_default']['url'])) {
+	return;
+}
+
+$imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_alt', true) ?? '';
+
+$isMobileFirst = $imageData['_desktopFirst'] ?? false;
+
+$breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
+$breakpoints = Helpers::getTwBreakpoints($isMobileFirst);
+?>
+
+<picture
+	<?php if (!empty($additionalClass['picture'])) { ?>
+		class="<?php echo esc_attr($additionalClass['picture']); ?>"
+	<?php } ?>
+>
+	<?php foreach ($breakpoints as $breakpoint) { ?>
+		<?php
+		if (!isset($imageData[$breakpoint])) {
+			continue;
+		}
+
+		$value = $imageData[$breakpoint]['url'] ?? '';
+
+		if (empty($value)) {
+			continue;
+		}
+
+		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
+
+		$widthMode = $isMobileFirst ? 'min-width' : 'max-width';
+
+		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+		echo '<source srcset="' . esc_url($value) . '" media="(' . $widthMode . ': ' . $breakpointWidth . 'rem)" />';
+		?>
+	<?php } ?>
+
+	<img
+		src="<?php echo esc_url($imageData['_default']['url'] ?? ''); ?>"
+		alt="<?php echo esc_attr($imageAlt); ?>"
+		class="<?php echo esc_attr(Helpers::getTwClasses($attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
+	/>
+</picture>

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

@@ -0,0 +1,125 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "image",
+	"title": "Image",
+	"componentClass": "image",
+	"example": {
+		"attributes": {
+			"imageData": {
+				"_desktopFirst": false,
+				"_default": {
+					"id": "1",
+					"url": "https://loremflickr.com/1000/800"
+				}
+			},
+			"imageUse": true
+		}
+	},
+	"attributes": {
+		"imageData": {
+			"type": "object",
+			"default": {
+				"_desktopFirst": false,
+				"_default": {
+					"id": "",
+					"url": ""
+				}
+			}
+		},
+		"imageUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"imageRoundedCorners": {
+			"type": "string",
+			"default": "none"
+		},
+		"imageAspectRatio": {
+			"type": "string",
+			"default": "auto"
+		},
+		"imageSize": {
+			"type": "string",
+			"default": "default"
+		}
+	},
+	"options": {
+		"imageRoundedCorners": [
+			{
+				"label": "0",
+				"value": "none"
+			},
+			{
+				"label": "4",
+				"value": "small"
+			},
+			{
+				"label": "8",
+				"value": "medium"
+			},
+			{
+				"label": "16",
+				"value": "large"
+			},
+			{
+				"label": "Full",
+				"value": "full"
+			}
+		],
+		"imageAspectRatio": [
+			{
+				"label": "Auto",
+				"value": "auto"
+			},
+			{
+				"label": "Square",
+				"value": "square"
+			},
+			{
+				"label": "3/2",
+				"value": "three-two"
+			},
+			{
+				"label": "5/4",
+				"value": "five-four"
+			},
+			{
+				"label": "16/9",
+				"value": "sixteen-nine"
+			},
+			{
+				"label": "21/9",
+				"value": "twentyone-nine"
+			}
+		]
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "object-cover"
+		},
+		"options": {
+			"imageRoundedCorners": {
+				"twClasses": {
+					"small": "rounded",
+					"medium": "rounded-lg",
+					"large": "rounded-2xl",
+					"full": "rounded-full"
+				}
+			},
+			"imageAspectRatio": {
+				"twClasses": {
+					"square": "aspect-square",
+					"three-two": "aspect-3/2",
+					"five-four": "aspect-5/4",
+					"sixteen-nine": "aspect-video",
+					"twentyone-nine": "aspect-21/9"
+				}
+			},
+			"imageSize": {
+				"twClasses": {
+					"stretch": "size-full"
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,30 @@
+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 ListEditor = (attributes) => {
+	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
+
+	const listUse = checkAttr('listUse', attributes, manifest);
+
+	if (!listUse) {
+		return null;
+	}
+
+	const listContent = checkAttr('listContent', attributes, manifest);
+	const listType = checkAttr('listType', attributes, manifest);
+
+	return (
+		<div className={getTwClasses(attributes, manifest, additionalClass)}>
+			<RichText
+				tagName={listType}
+				multiline='li'
+				placeholder={placeholder}
+				value={listContent}
+				onChange={(value) => setAttributes({ [getAttrKey('listContent', attributes, manifest)]: value })}
+				allowedFormats={['core/bold', 'core/link']}
+			/>
+		</div>
+	);
+};

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

@@ -0,0 +1,62 @@
+import { __ } from '@wordpress/i18n';
+import { getOption, getAttrKey, checkAttr, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ComponentToggle, OptionSelect, HStack, ToggleButton } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const ListOptions = (attributes) => {
+	const { setAttributes, additionalControls, hideOptions, ...rest } = attributes;
+
+	const hiddenOptions = getHiddenOptions(hideOptions);
+
+	const listUse = checkAttr('listUse', attributes, manifest);
+	const listSize = checkAttr('listSize', attributes, manifest);
+	const listFontWeight = checkAttr('listFontWeight', attributes, manifest);
+	const listStyle = checkAttr('listStyle', attributes, manifest);
+
+	return (
+		<ComponentToggle
+			label={manifest.title}
+			icon={icons.listUnordered}
+			onChange={(value) => setAttributes({ [getAttrKey('listUse', attributes, manifest)]: value })}
+			useComponent={listUse}
+			{...rest}
+		>
+			<HStack>
+				<OptionSelect
+					options={getOption('listSize', attributes, manifest)}
+					onChange={(value) => setAttributes({ [getAttrKey('listSize', attributes, manifest)]: value })}
+					value={listSize}
+					aria-label={__('Font size', '%g_textdomain%')}
+					hidden={hiddenOptions.size}
+					type='menu'
+				/>
+
+				<ToggleButton
+					selected={listFontWeight === '700'}
+					icon={icons.bold}
+					onChange={(value) =>
+						setAttributes({ [getAttrKey('listFontWeight', attributes, manifest)]: value ? '700' : '400' })
+					}
+					tooltip={__('Bold', '%g_textdomain%')}
+					hidden={hiddenOptions.weight}
+				/>
+
+				<OptionSelect
+					value={listStyle}
+					onChange={(value) =>
+						setAttributes({
+							[getAttrKey('listStyle', attributes, manifest)]: value,
+							[getAttrKey('listType', attributes, manifest)]: value === 'decimal' ? 'ol' : 'ul',
+						})
+					}
+					aria-label={__('List style', '%g_textdomain%')}
+					options={getOption('listStyle', attributes, manifest)}
+					noItemLabel
+				/>
+			</HStack>
+
+			{additionalControls}
+		</ComponentToggle>
+	);
+};

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

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

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

@@ -0,0 +1,127 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "list",
+	"title": "List",
+	"componentClass": "list",
+	"example": {
+		"attributes": {
+			"listContent": "<li>List item 1</li><li>List item 2</li><li>List item 3</li>",
+			"listType": "ul",
+			"listSize": "default",
+			"listColor": "primary500",
+			"listUse": true
+		}
+	},
+	"attributes": {
+		"listContent": {
+			"type": "string"
+		},
+		"listType": {
+			"type": "string",
+			"default": "ul"
+		},
+		"listStyle": {
+			"type": "string",
+			"default": "disc"
+		},
+		"listSize": {
+			"type": "string",
+			"default": "base"
+		},
+		"listFontWeight": {
+			"type": "string",
+			"default": "400"
+		},
+		"listUse": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"options": {
+		"listSize": [
+			{
+				"label": "24",
+				"value": "lg"
+			},
+			{
+				"label": "20",
+				"value": "md"
+			},
+			{
+				"label": "16",
+				"value": "base"
+			},
+			{
+				"label": "14",
+				"value": "sm"
+			}
+		],
+		"listFontWeight": [
+			{
+				"label": "Normal",
+				"value": "400"
+			},
+			{
+				"label": "Bold",
+				"value": "700"
+			}
+		],
+		"listStyle": [
+			{
+				"label": "No list markers",
+				"value": "none",
+				"icon": "emptyCircle"
+			},
+			{
+				"label": "Numeric list",
+				"value": "decimal",
+				"icon": "listOrdered"
+			},
+			{
+				"label": "Bulleted list",
+				"value": "disc",
+				"icon": "listUnordered"
+			},
+			{
+				"label": "Checkmark list",
+				"value": "checks",
+				"icon": "optionList"
+			}
+		]
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "font-sans [&>a]:underline font-synthesis-none",
+			"twClassesEditor": "font-sans [&>a]:underline font-synthesis-none"
+		},
+		"options": {
+			"listSize": {
+				"twClasses": {
+					"sm": "text-sm",
+					"base": "~sm/md:~text-sm/base",
+					"md": "~sm/md:~text-lg/2xl",
+					"lg": "~sm/md:~text-xl/3xl"
+				}
+			},
+			"listFontWeight": {
+				"twClasses": {
+					"700": "font-bold"
+				}
+			},
+			"listStyle": {
+				"twClasses": {
+					"none": "list-none",
+					"disc": "list-disc ml-[1.125em]",
+					"decimal": "list-decimal ml-[1.125em]",
+					"checks": "list-['✓_'] ml-[1em]"
+				},
+				"twClassesEditor": {
+					"none": "*:list-none",
+					"disc": "*:list-disc *:ml-[1.125em]",
+					"decimal": "*:list-decimal *:ml-[1.125em]",
+					"checks": "*:list-['✓_'] *:ml-[1em]"
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,19 @@
+import domReady from '@wordpress/dom-ready';
+import manifest from './../manifest.json';
+
+domReady(async () => {
+	const selectors = `.${manifest.componentJsClass}`;
+	const elements = document.querySelectorAll(selectors);
+
+	if (!elements.length) {
+		return;
+	}
+
+	const { LoadMore } = await import('./load-more');
+
+	elements.forEach((element) => {
+		new LoadMore({
+			element,
+		}).init();
+	});
+});