@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/table-of-contents/components/table-of-contents-options.js

@@ -0,0 +1,32 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BaseControl, Checkbox } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const TableOfContentsOptions = ({ attributes, setAttributes }) => {
+	const tableOfContentsHeadingLevels = checkAttr('tableOfContentsHeadingLevels', attributes, manifest);
+
+	return (
+		<BaseControl
+			icon={icons.headingLevelAlt}
+			label={__('Include', '%g_textdomain%')}
+		>
+			{Object.keys(tableOfContentsHeadingLevels).map((level, i, arr) => {
+				return (
+					<Checkbox
+						key={i}
+						checked={tableOfContentsHeadingLevels[level]}
+						label={level.replace('h', __('Heading', '%g_textdomain%') + ' ')}
+						onChange={(value) => {
+							const newValue = { ...tableOfContentsHeadingLevels };
+							newValue[level] = value;
+
+							setAttributes({ [getAttrKey('tableOfContentsHeadingLevels', attributes, manifest)]: newValue });
+						}}
+					/>
+				);
+			})}
+		</BaseControl>
+	);
+};

package/blocks/init/src/Blocks/custom/table-of-contents/manifest.json

@@ -0,0 +1,48 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "table-of-contents",
+	"title": "Table of contents",
+	"description": "Display the structure of the current post.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-table-of-contents"
+	},
+	"keywords": [
+		"table",
+		"of",
+		"contents",
+		"toc"
+	],
+	"example": {
+		"attributes": {
+			"tableOfContentsParagraphContent": "Contents"
+		}
+	},
+	"attributes": {
+		"tableOfContentsHeadingLevels": {
+			"type": "object",
+			"default": {
+				"h1": false,
+				"h2": true,
+				"h3": true,
+				"h4": true,
+				"h5": true,
+				"h6": true
+			}
+		},
+		"tableOfContentsDescription": {
+			"type": "string",
+			"default": "In this article"
+		}
+	},
+	"tailwind": {
+		"parts": {
+			"container": {
+				"twClasses": "pl-2 py-2 border-l border-l-gray-300"
+			},
+			"description": {
+				"twClasses": "font-display ~text-xl/2xl text-gray-500 mb-1"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/custom/table-of-contents/table-of-contents-block.js

@@ -0,0 +1,13 @@
+import { TableOfContentsEditor } from './components/table-of-contents-editor';
+import { TableOfContentsOptions } from './components/table-of-contents-options';
+import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const TableOfContents = (props) => {
+	return (
+		<GutenbergBlock
+			{...props}
+			options={TableOfContentsOptions}
+			editor={TableOfContentsEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/table-of-contents/table-of-contents.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * Table of contents block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockClass = $attributes['blockClass'] ?? '';
+$blockJsClass = $attributes['blockJsClass'] ?? '';
+
+$tocClass = Helpers::classnames([
+	Helpers::getTwPart('container', $manifest),
+	$blockJsClass,
+]);
+
+$tableOfContentsHeadingLevels = Helpers::checkAttr('tableOfContentsHeadingLevels', $attributes, $manifest);
+$tableOfContentsDescription = Helpers::checkAttr('tableOfContentsDescription', $attributes, $manifest);
+
+$headingLevelsToUse = implode(',', array_keys(array_filter($tableOfContentsHeadingLevels, fn($v) => $v)));
+?>
+
+<div class="<?php echo esc_attr($tocClass); ?>" data-levels="<?php echo esc_attr($headingLevelsToUse); ?>">
+	<p class="<?php echo esc_attr(Helpers::getTwPart('description', $manifest)); ?>">
+	<?php echo esc_attr($tableOfContentsDescription); ?>
+	</p>
+</div>

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

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

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

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

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

@@ -0,0 +1,105 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "video",
+	"title": "Video",
+	"description" : "Showcase a video from the Media library.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-video"
+	},
+	"keywords": [
+		"video",
+		"picture",
+		"img"
+	],
+	"components": {
+		"video": "video"
+	},
+	"example": {
+		"attributes": {
+			"videoAlign": "center center"
+		}
+	},
+	"attributes": {
+		"videoAlign": {
+			"type": "string",
+			"default": "center center"
+		}
+	},
+	"variables": {
+		"videoAlign": {
+			"top left": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-start",
+						"block-video-align-vertical": "flex-start"
+					}
+				}
+			],
+			"top center": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "center",
+						"block-video-align-vertical": "flex-start"
+					}
+				}
+			],
+			"top right": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-end",
+						"block-video-align-vertical": "flex-start"
+					}
+				}
+			],
+			"center left": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-start",
+						"block-video-align-vertical": "center"
+					}
+				}
+			],
+			"center center": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "center",
+						"block-video-align-vertical": "center"
+					}
+				}
+			],
+			"center right": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-end",
+						"block-video-align-vertical": "center"
+					}
+				}
+			],
+			"bottom left": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-start",
+						"block-video-align-vertical": "flex-end"
+					}
+				}
+			],
+			"bottom center": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "center",
+						"block-video-align-vertical": "flex-end"
+					}
+				}
+			],
+			"bottom right": [
+				{
+					"variable": {
+						"block-video-align-horizontal": "flex-end",
+						"block-video-align-vertical": "flex-end"
+					}
+				}
+			]
+		}
+	}
+}

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

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

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

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * Video block template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockClass = $attributes['blockClass'] ?? '';
+
+
+?>
+
+<div class="<?php echo esc_attr($blockClass); ?>" >
+	<?php
+	echo Helpers::render('video', Helpers::props('video', $attributes));
+	?>
+</div>

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

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/globalManifest.json",
+	"namespace": "eightshift-boilerplate",
+	"background": "#FFFFFF",
+	"foreground": "#0F766E",
+	"globalVariables": {
+		"breakpoints": {
+			"mobile": 27,
+			"tablet": 80,
+			"desktop": 90,
+			"large": 120
+		}
+	}
+}

package/blocks/init/src/Blocks/variations/card-simple/manifest.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/variation.json",
+	"parentName": "card",
+	"name": "card-simple",
+	"title": "Card: Simple",
+	"description" : "A simplified version of the Card.",
+	"icon": {
+		"src": "es-card-simple"
+	},
+	"attributes": {
+		"cardCardParagraphUse": false,
+		"cardCardButtonUse": false
+	},
+	"scope": [
+		"inserter"
+	]
+}

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

@@ -0,0 +1,12 @@
+import { checkAttr, getTwClasses } from '@eightshift/frontend-libs-tailwind/scripts';
+import manifest from './../manifest.json';
+
+export const WrapperEditor = ({ attributes, children }) => {
+	const wrapperUse = checkAttr('wrapperUse', attributes, manifest);
+
+	if (!wrapperUse) {
+		return children;
+	}
+
+	return <div className={getTwClasses(attributes, manifest)}>{children}</div>;
+};

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

@@ -0,0 +1,348 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, getOption } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+	BaseControl,
+	ButtonGroup,
+	ColorPicker,
+	ContainerPanel,
+	OptionSelect,
+	Spacer,
+	Responsive,
+	InputField,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import { clsx } from '@eightshift/ui-components/utilities';
+import { getResponsiveData } from '@eightshift/frontend-libs-tailwind/scripts/helpers/breakpoints';
+import { getColorOption, rotationClassName } from '../../assets/scripts/shared';
+import manifest from './../manifest.json';
+
+export const WrapperOptions = ({ attributes, setAttributes }) => {
+	const wrapperUse = checkAttr('wrapperUse', attributes, manifest);
+	const wrapperNoControls = checkAttr('wrapperNoControls', attributes, manifest);
+	const wrapperNoWidthControls = checkAttr('wrapperNoWidthControls', attributes, manifest);
+
+	const wrapperWidth = checkAttr('wrapperWidth', attributes, manifest);
+	const wrapperContentWidth = checkAttr('wrapperContentWidth', attributes, manifest);
+
+	const wrapperBackground = checkAttr('wrapperBackground', attributes, manifest);
+	const wrapperGradientDirection = checkAttr('wrapperGradientDirection', attributes, manifest);
+
+	const wrapperBorderRadius = checkAttr('wrapperBorderRadius', attributes, manifest);
+
+	const wrapperMarginTop = checkAttr('wrapperMarginTop', attributes, manifest);
+	const wrapperMarginBottom = checkAttr('wrapperMarginBottom', attributes, manifest);
+
+	const wrapperPaddingTop = checkAttr('wrapperPaddingTop', attributes, manifest);
+	const wrapperPaddingBottom = checkAttr('wrapperPaddingBottom', attributes, manifest);
+
+	const wrapperHide = checkAttr('wrapperHide', attributes, manifest);
+
+	const wrapperId = checkAttr('wrapperId', attributes, manifest);
+
+	if (wrapperNoControls) {
+		return null;
+	}
+
+	let backgroundType = 'none';
+
+	if (wrapperBackground?.startsWith('solid-')) {
+		backgroundType = 'solid';
+	} else if (wrapperBackground?.startsWith('gradient-')) {
+		backgroundType = 'gradient';
+	}
+
+	const responsiveData = getResponsiveData(true);
+
+	return (
+		<ContainerPanel
+			title={__('Wrapper', '%g_textdomain%')}
+			use={wrapperUse}
+			actions={
+				<OptionSelect
+					aria-label={__('Width', '%g_textdomain%')}
+					value={wrapperWidth}
+					onChange={(value) =>
+						setAttributes({
+							[getAttrKey('wrapperWidth', attributes, manifest)]: value,
+							[getAttrKey('wrapperUse', attributes, manifest)]: value !== 'off',
+						})
+					}
+					options={getOption('wrapperWidth', attributes, manifest)}
+					hidden={wrapperNoWidthControls}
+					type='menu'
+					wrapperProps={{
+						triggerProps: { size: 'small' },
+					}}
+					inline
+				/>
+			}
+			closable
+		>
+			<Responsive
+				value={wrapperContentWidth}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperContentWidth', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.containerWidth}
+				label={__('Width', '%g_textdomain%')}
+				options={getOption('wrapperContentWidth', attributes, manifest)}
+				hidden={wrapperNoWidthControls}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options }) => (
+					<OptionSelect
+						options={options}
+						value={currentValue}
+						onChange={(value) => handleChange(value)}
+						type='menu'
+					/>
+				)}
+			</Responsive>
+
+			<BaseControl
+				icon={icons.backgroundType}
+				label={__('Background', '%g_textdomain%')}
+				inline
+			>
+				<ButtonGroup>
+					<OptionSelect
+						options={getOption('wrapperBackground', attributes, manifest)}
+						value={backgroundType}
+						onChange={(value) => {
+							if (value === 'none') {
+								setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: undefined });
+							} else {
+								setAttributes({
+									[getAttrKey('wrapperBackground', attributes, manifest)]: Object.keys(
+										manifest.tailwind.options.wrapperBackground.twClasses,
+									).find((key) => key.startsWith(value)),
+								});
+							}
+						}}
+						aria-label={__('Background type', '%g_textdomain%')}
+						type='menu'
+						noItemIcon
+					/>
+
+					{backgroundType === 'solid' && (
+						<ColorPicker
+							colors={getColorOption('wrapperBackgroundSolid', manifest)}
+							onChange={(value) =>
+								setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: `solid-${value}` })
+							}
+							value={wrapperBackground?.replace('solid-', '')}
+							aria-label={__('Background color', '%g_textdomain%')}
+						/>
+					)}
+					{backgroundType === 'gradient' && (
+						<>
+							<OptionSelect
+								value={wrapperBackground}
+								onChange={(value) => setAttributes({ [getAttrKey('wrapperBackground', attributes, manifest)]: value })}
+								options={getOption('wrapperBackgroundGradient', attributes, manifest).map((option) => ({
+									...option,
+									icon: (
+										<div
+											className={clsx(
+												'es-uic-size-5 es-uic-rounded es-uic-border es-uic-border-gray-300 bg-gradient-to-r',
+												manifest.tailwind.options.wrapperBackground.twClasses[option.value],
+											)}
+										/>
+									),
+								}))}
+								wrapperProps={{
+									triggerIcon: (
+										<div
+											className={clsx(
+												'es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm bg-gradient-to-r',
+												manifest.tailwind.options.wrapperBackground.twClasses[wrapperBackground],
+											)}
+										/>
+									),
+								}}
+								aria-label={__('Gradient style', '%g_textdomain%')}
+								noTriggerLabel
+								type='menu'
+							/>
+							<OptionSelect
+								value={wrapperGradientDirection}
+								onChange={(value) =>
+									setAttributes({ [getAttrKey('wrapperGradientDirection', attributes, manifest)]: value })
+								}
+								options={getOption('wrapperGradientDirection', attributes, manifest)}
+								wrapperProps={{
+									triggerIcon: <div className={rotationClassName[wrapperGradientDirection]}>{icons.arrowUpCircle}</div>,
+								}}
+								aria-label={__('Gradient angle', '%g_textdomain%')}
+								noTriggerLabel
+								type='menu'
+							/>
+						</>
+					)}
+				</ButtonGroup>
+			</BaseControl>
+
+			<OptionSelect
+				icon={icons.roundedCorners}
+				label={__('Rounded corners', '%g_textdomain%')}
+				value={wrapperBorderRadius}
+				onChange={(value) => setAttributes({ [getAttrKey('wrapperBorderRadius', attributes, manifest)]: value })}
+				options={getOption('wrapperBorderRadius', attributes, manifest)}
+				aria-label={__('Rounded corners', '%g_textdomain%')}
+				type='menu'
+				inline
+			/>
+
+			<Spacer />
+			<Spacer
+				icon={icons.containerSpacingH}
+				text={__('Spacing', '%g_textdomain%')}
+				border
+			/>
+
+			<Responsive
+				value={wrapperMarginTop}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperMarginTop', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.spacingTop}
+				label={__('Top margin', '%g_textdomain%')}
+				options={getOption('wrapperSpacing', attributes, manifest)}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options }) => (
+					<OptionSelect
+						options={options}
+						value={currentValue}
+						onChange={(value) => handleChange(value)}
+						type='menu'
+					/>
+				)}
+			</Responsive>
+
+			<Responsive
+				value={wrapperMarginBottom}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperMarginBottom', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.spacingBottom}
+				label={__('Bottom margin', '%g_textdomain%')}
+				options={getOption('wrapperSpacing', attributes, manifest)}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options }) => (
+					<OptionSelect
+						options={options}
+						value={currentValue}
+						onChange={(value) => handleChange(value)}
+						type='menu'
+					/>
+				)}
+			</Responsive>
+
+			<Spacer />
+
+			<Responsive
+				value={wrapperPaddingTop}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperPaddingTop', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.spacingTopIn}
+				label={__('Top padding', '%g_textdomain%')}
+				options={getOption('wrapperSpacing', attributes, manifest)}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options }) => (
+					<OptionSelect
+						options={options}
+						value={currentValue}
+						onChange={(value) => handleChange(value)}
+						type='menu'
+					/>
+				)}
+			</Responsive>
+
+			<Responsive
+				value={wrapperPaddingBottom}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperPaddingBottom', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.spacingBottomIn}
+				label={__('Bottom padding', '%g_textdomain%')}
+				options={getOption('wrapperSpacing', attributes, manifest)}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options }) => (
+					<OptionSelect
+						options={options}
+						value={currentValue}
+						onChange={(value) => handleChange(value)}
+						type='menu'
+					/>
+				)}
+			</Responsive>
+
+			<Spacer />
+			<Spacer
+				icon={icons.moreHCircle}
+				text={__('Advanced', '%g_textdomain%')}
+				border
+			/>
+
+			<Responsive
+				value={wrapperHide}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('wrapperHide', attributes, manifest)]: value,
+					})
+				}
+				icon={icons.visibility}
+				label={__('Visibility', '%g_textdomain%')}
+				options={getOption('wrapperHide', attributes, manifest)}
+				noModeSelect
+				inline
+				{...responsiveData}
+			>
+				{({ currentValue, handleChange, options, isInlineCollapsedView }) => (
+					<OptionSelect
+						options={options}
+						value={String(currentValue)}
+						onChange={(value) => handleChange(value)}
+						noItemLabel={isInlineCollapsedView}
+						noItemIcon={!isInlineCollapsedView}
+					/>
+				)}
+			</Responsive>
+
+			<Spacer />
+
+			<InputField
+				icon={icons.id}
+				label={__('Unique identifier', '%g_textdomain%')}
+				value={wrapperId}
+				onChange={(value) => setAttributes({ [getAttrKey('wrapperId', attributes, manifest)]: value })}
+				className='es-uic-font-mono'
+			/>
+		</ContainerPanel>
+	);
+};