@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,38 +0,0 @@
-import { __, sprintf } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import { clsx } from '@eightshift/ui-components/utilities';
-import manifest from '../manifest.json';
-
-export const TableOfContentsEditor = ({ attributes, setAttributes }) => {
-	const tableOfContentsDescription = checkAttr('tableOfContentsDescription', attributes, manifest);
-	const tableOfContentsHeadingLevels = checkAttr('tableOfContentsHeadingLevels', attributes, manifest);
-
-	return (
-		<div className={tailwindClasses('container', attributes, manifest)}>
-			<RichText
-				placeholder={manifest.attributes.tableOfContentsDescription.default}
-				value={tableOfContentsDescription}
-				onChange={(value) => setAttributes({ [getAttrKey('tableOfContentsDescription', attributes, manifest)]: value })}
-				allowedFormats={[]}
-				className={tailwindClasses('description', attributes, manifest)}
-			/>
-
-			{Object.entries(tableOfContentsHeadingLevels).map(([tag, enabled = false]) => (
-				<DemoTocItem
-					level={parseInt(tag.replace('h', ''))}
-					disabled={!enabled}
-				/>
-			))}
-		</div>
-	);
-};
-
-const DemoTocItem = ({ level, disabled }) => (
-	<div class={clsx('group block select-none py-0.5 focus:outline-none', disabled && 'pointer-events-none opacity-25')}>
-		{level > 1 && <span class='mr-1.5 tracking-tighter text-gray-300'>{'–'.repeat(level - 1)}</span>}
-		<span class='group-focus-visible:text-navy-50px-0.5 group-hover:bg-navy-100 group-hover:text-navy-950 group-hover:ring-navy-100 group-focus-visible:bg-navy-950 group-focus-visible:ring-navy-950 rounded text-sm transition group-hover:ring-4 group-focus-visible:ring-4'>
-			{sprintf(__('Heading %d', '%g_textdomain%'), level)}
-		</span>
-	</div>
-);

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

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

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

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

@@ -1,31 +0,0 @@
-<?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::tailwindClasses('container', $attributes, $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::tailwindClasses('description', $attributes, $manifest)); ?>">
-	<?php echo esc_attr($tableOfContentsDescription); ?>
-	</p>
-</div>

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/globalManifest.json",
-	"namespace": "eightshift-boilerplate",
-	"background": "#FFFFFF",
-	"foreground": "#0F766E",
-	"globalVariables": {
-		"breakpoints": {
-			"sm": 40,
-			"md": 80,
-			"lg": 90,
-			"xl": 120
-		},
-		"breakpointData": {
-			"sm": {
-				"icon": "screenMobile",
-				"label": "Mobile"
-			},
-			"md": {
-				"icon": "screenTablet",
-				"label": "Tablet"
-			},
-			"lg": {
-				"icon": "screenDesktop",
-				"label": "Desktop"
-			},
-			"xl": {
-				"icon": "screenLarge",
-				"label": "Large"
-			}
-		}
-	}
-}

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

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

@@ -1,12 +0,0 @@
-import { checkAttr, tailwindClasses } 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={tailwindClasses(attributes, manifest)}>{children}</div>;
-};

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

@@ -1,364 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getHiddenOptions, 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);
-
-	const wrapperDisabledOptions = checkAttr('wrapperDisabledOptions', attributes, manifest);
-
-	const hiddenOptions = getHiddenOptions(wrapperDisabledOptions);
-
-	if (wrapperNoControls || wrapperDisabledOptions === 'all') {
-		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 || hiddenOptions?.width}
-				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%')}
-				hidden={hiddenOptions?.background}
-				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'
-						hidden={hiddenOptions?.backgroundType}
-						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%')}
-							hidden={hiddenOptions?.backgroundType}
-						/>
-					)}
-					{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%')}
-								hidden={hiddenOptions?.backgroundType}
-								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%')}
-								hidden={hiddenOptions?.backgroundType}
-								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'
-				hidden={hiddenOptions?.roundedCorners}
-				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)}
-				hidden={hiddenOptions?.marginTop}
-				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)}
-				hidden={hiddenOptions?.marginBottom}
-				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)}
-				hidden={hiddenOptions?.paddingTop}
-				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)}
-				hidden={hiddenOptions?.paddingBottom}
-				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)}
-				hidden={hiddenOptions?.hide}
-				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'
-				hidden={hiddenOptions?.id}
-			/>
-		</ContainerPanel>
-	);
-};