@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,55 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { props, getOptions, checkAttr, getOption, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImageOptions } from '../../image/components/image-options';
-import { HeadingOptions } from '../../heading/components/heading-options';
-import { ParagraphOptions } from '../../paragraph/components/paragraph-options';
-import { ButtonOptions } from '../../button/components/button-options';
-import { OptionSelect } from '@eightshift/ui-components';
-import manifest from './../manifest.json';
-
-export const CardOptions = (attributes) => {
-	const { setAttributes } = attributes;
-
-	const cardAlign = checkAttr('cardAlign', attributes, manifest);
-
-	return (
-		<>
-			<OptionSelect
-				value={cardAlign}
-				options={getOption('cardAlign', attributes, manifest)}
-				onChange={(value) => setAttributes({ [getAttrKey('cardAlign', attributes, manifest)]: value })}
-				aria-label={__('Card align', '%g_textdomain%')}
-				noItemLabel
-			/>
-
-			<div>
-				<ImageOptions
-					{...props('image', attributes)}
-					hideOptions='borderRadius'
-				/>
-
-				<ParagraphOptions
-					{...props('intro', attributes, { options: getOptions(attributes, manifest) })}
-					label={__('Intro', '%g_textdomain%')}
-					expandButtonDisabled
-				/>
-
-				<HeadingOptions
-					{...props('heading', attributes, { options: getOptions(attributes, manifest) })}
-					hideOptions='size'
-				/>
-
-				<ParagraphOptions
-					{...props('paragraph', attributes, { options: getOptions(attributes, manifest) })}
-					expandButtonDisabled
-				/>
-
-				<ButtonOptions
-					{...props('button', attributes, { options: getOptions(attributes, manifest) })}
-					label={__('Call to action', '%g_textdomain%')}
-					hideOptions='variant,color'
-				/>
-			</div>
-		</>
-	);
-};

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

@@ -1,111 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "card",
-	"title": "Card",
-	"componentClass": "card-simple",
-	"example": {
-		"attributes": {
-			"cardIntroContent": "This is intro",
-			"cardAlign": "start"
-		}
-	},
-	"attributes": {
-		"cardAlign": {
-			"type": "string",
-			"default": "start"
-		},
-
-		"cardIntroSize": {
-			"type": "string",
-			"default": "sm"
-		},
-		"cardButtonVariant": {
-			"type": "string",
-			"default": "secondary"
-		},
-		"cardHeadingSize": {
-			"type": "string",
-			"default": "md"
-		},
-		"cardHeadingTag": {
-			"type": "string",
-			"default": "p"
-		},
-		"cardParagraphSize": {
-			"type": "string",
-			"default": "sm"
-		},
-		"cardButtonContent": {
-			"type": "string",
-			"default": "Read more"
-		},
-		"cardButtonColor": {
-			"type": "string",
-			"default": "gray-500"
-		},
-		"cardButtonSize": {
-			"type": "string",
-			"default": "sm"
-		}
-	},
-	"options": {
-		"cardAlign": [
-			{
-				"label": "Start",
-				"value": "start",
-				"icon": "textAlignLeft"
-			},
-			{
-				"label": "Center",
-				"value": "center",
-				"icon": "textAlignCenter"
-			},
-			{
-				"label": "End",
-				"value": "end",
-				"icon": "textAlignRight"
-			}
-		]
-	},
-	"components": {
-		"image": "image",
-		"intro": "paragraph",
-		"heading": "heading",
-		"paragraph": "paragraph",
-		"button": "button"
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "w-full sm:max-w-80 rounded-2xl border bg-white shadow-md overflow-hidden"
-		},
-		"parts": {
-			"image": {
-				"twClasses": "w-full aspect-3/2"
-			},
-			"imagePicture": {
-				"twClasses": "w-full !block border-b border-b-gray-200 bg-gray-100"
-			},
-			"content-container": {
-				"twClasses": "p-4"
-			},
-			"intro": {
-				"twClasses": "text-gray-400 italic"
-			},
-			"text": {
-				"twClasses": "mt-2 text-gray-600"
-			},
-			"button": {
-				"twClasses": "mt-3"
-			}
-		},
-		"options": {
-			"cardAlign": {
-				"twClasses": {
-					"start": "text-start",
-					"center": "text-center",
-					"end": "text-end"
-				}
-			}
-		}
-	}
-}

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

@@ -1,52 +0,0 @@
-<?php
-
-/**
- * Template for the document head section.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$headFavicon = Helpers::checkAttr('headFavicon', $attributes, $manifest);
-$headCharset = Helpers::checkAttr('headCharset', $attributes, $manifest);
-$headName = Helpers::checkAttr('headName', $attributes, $manifest);
-
-?>
-
-<?php if (isset($headCharset)) { ?>
-  <meta charset="<?php echo esc_attr($headCharset); ?>" />
-<?php } ?>
-
-<!-- Responsive -->
-<meta content="width=device-width, initial-scale=1.0" name="viewport">
-
-<!-- Remove IE's ability to use compatibility mode -->
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-<!-- Disable phone formatting on Safari -->
-<meta name="format-detection" content="telephone=no">
-
-<!-- Speed up fetching of external assets -->
-<link rel="dns-prefetch" href="//fonts.googleapis.com">
-<link rel="dns-prefetch" href="//ajax.googleapis.com">
-<link rel="dns-prefetch" href="//www.google-analytics.com">
-
-<!-- Windows (Phone) Meta -->
-<?php if ($headName ?? '') { ?>
-  <meta name="application-name" content="<?php echo esc_attr($headName); ?>" />
-<?php } ?>
-
-<!-- Apple -->
-<?php if ($headName ?? '') { ?>
-  <meta name="apple-mobile-web-app-title" content="<?php echo esc_attr($headName); ?>">
-<?php } ?>
-
-<meta name="apple-mobile-web-app-capable" content="yes">
-
-<?php if ($headFavicon ?? '') { ?>
-  <link rel="apple-touch-startup-image" href="<?php echo esc_url($headFavicon); ?>">
-	<link rel="shortcut icon" href="<?php echo esc_url($headFavicon); ?>" />
-<?php } ?>

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

@@ -1,17 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "head",
-	"title": "Head",
-	"attributes": {
-		"headFavicon": {
-			"type": "string"
-		},
-		"headCharset": {
-			"type": "string",
-			"default": "utf-8"
-		},
-		"headName": {
-			"type": "string"
-		}
-	}
-}

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

@@ -1,26 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import manifest from './../manifest.json';
-
-export const HeadingEditor = (attributes) => {
-	const { setAttributes, additionalClass, placeholder = __('Heading', '%g_textdomain%') } = attributes;
-
-	const headingUse = checkAttr('headingUse', attributes, manifest);
-
-	if (!headingUse) {
-		return null;
-	}
-
-	const headingContent = checkAttr('headingContent', attributes, manifest);
-
-	return (
-		<RichText
-			className={tailwindClasses(attributes, manifest, additionalClass)}
-			placeholder={placeholder}
-			value={headingContent}
-			onChange={(value) => setAttributes({ [getAttrKey('headingContent', attributes, manifest)]: value })}
-			allowedFormats={[]}
-		/>
-	);
-};

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

@@ -1,62 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { getOption, checkAttr, getAttrKey, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ComponentToggle, HStack, OptionSelect } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from './../manifest.json';
-
-export const HeadingOptions = (attributes) => {
-	const { setAttributes, hideOptions, additionalControls, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const headingUse = checkAttr('headingUse', attributes, manifest);
-	const headingSize = checkAttr('headingSize', attributes, manifest);
-	const headingTag = checkAttr('headingTag', attributes, manifest);
-
-	const headingTags = [
-		{ label: __('Heading 1', '%g_textdomain%'), value: 'h1' },
-		{ label: __('Heading 2', '%g_textdomain%'), value: 'h2' },
-		{ label: __('Heading 3', '%g_textdomain%'), value: 'h3' },
-		{ label: __('Heading 4', '%g_textdomain%'), value: 'h4' },
-		{ label: __('Heading 5', '%g_textdomain%'), value: 'h5' },
-		{ label: __('Heading 6', '%g_textdomain%'), value: 'h6' },
-		{ label: __('Paragraph', '%g_textdomain%'), value: 'p' },
-	];
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.heading}
-			onChange={(value) => setAttributes({ [getAttrKey('headingUse', attributes, manifest)]: value })}
-			useComponent={headingUse}
-			{...rest}
-		>
-			<HStack>
-				<OptionSelect
-					aria-label={__('Font size', '%g_textdomain%')}
-					options={getOption('headingSize', attributes, manifest)}
-					onChange={(value) => setAttributes({ [getAttrKey('headingSize', attributes, manifest)]: value })}
-					value={headingSize}
-					hidden={hiddenOptions?.size}
-					type='menu'
-				/>
-
-				<OptionSelect
-					aria-label={__('Heading level', '%g_textdomain%')}
-					options={headingTags}
-					value={headingTag}
-					onChange={(value) => setAttributes({ [getAttrKey('headingTag', attributes, manifest)]: value })}
-					type='menu'
-					wrapperProps={{
-						triggerIcon: <span className='es-uic-font-mono uppercase'>{headingTag}</span>,
-					}}
-					hidden={hiddenOptions?.headingLevel}
-					noTriggerLabel
-					tooltip
-				/>
-
-				{additionalControls}
-			</HStack>
-		</ComponentToggle>
-	);
-};

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

@@ -1,45 +0,0 @@
-<?php
-
-/**
- * Heading component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$headingUse = Helpers::checkAttr('headingUse', $attributes, $manifest);
-
-if (!$headingUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-
-$headingContent = Helpers::checkAttr('headingContent', $attributes, $manifest);
-$headingTag = Helpers::checkAttr('headingTag', $attributes, $manifest);
-
-if (!$headingContent) {
-	return;
-}
-
-$sanitizedTitle = '';
-
-if (function_exists('idn_to_ascii') && function_exists('sanitize_title')) {
-	$sanitizedTitle = sanitize_title(idn_to_ascii($headingContent));
-} else {
-	$sanitizedTitle = sanitize_title($headingContent);
-}
-?>
-
-<<?php echo esc_attr($headingTag); ?>
-	data-slug="<?php echo esc_attr($sanitizedTitle) ?>"
-	class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>"
->
-	<?php
-		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-		echo $headingContent;
-	?>
-</<?php echo esc_attr($headingTag); ?>>

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

@@ -1,76 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "heading",
-	"title": "Heading",
-	"componentClass": "heading",
-	"example": {
-		"attributes": {
-			"headingContent": "This is heading",
-			"headingTag": "h2",
-			"headingSize": "base",
-			"headingUse": true
-		}
-	},
-	"attributes": {
-		"headingContent": {
-			"type": "string"
-		},
-		"headingTag": {
-			"type": "string",
-			"default": "h2"
-		},
-		"headingSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"headingUse": {
-			"type": "boolean",
-			"default": true
-		}
-	},
-	"options": {
-		"headingSize": [
-			{
-				"label": "24",
-				"value": "sm"
-			},
-			{
-				"label": "30",
-				"value": "base"
-			},
-			{
-				"label": "36",
-				"value": "md"
-			},
-			{
-				"label": "48",
-				"value": "lg"
-			},
-			{
-				"label": "60",
-				"value": "xl"
-			},
-			{
-				"label": "96",
-				"value": "2xl"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "font-display text-balance font-synthesis-none font-soft-50 scroll-m-20"
-		},
-		"options": {
-			"headingSize": {
-				"twClasses": {
-					"sm": "~text-lg/2xl !leading-tight",
-					"base": "~text-xl/3xl !leading-none",
-					"md": "~text-2xl/4xl !leading-none",
-					"lg": "~text-3xl/5xl !leading-none",
-					"xl": "~text-4xl/6xl !leading-none",
-					"2xl": "~text-5xl/8xl !leading-none !font-soft-25 italic"
-				}
-			}
-		}
-	}
-}

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

@@ -1,42 +0,0 @@
-import { props, checkAttr, tailwindClasses } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImageEditor } from '../../image/components/image-editor';
-import { HeadingEditor } from '../../heading/components/heading-editor';
-import { ParagraphEditor } from '../../paragraph/components/paragraph-editor';
-import { ButtonEditor } from '../../button/components/button-editor';
-import manifest from '../manifest.json';
-
-export const HeroEditor = (attributes) => {
-	const { additionalClass } = attributes;
-
-	const heroUse = checkAttr('heroUse', attributes, manifest);
-
-	if (!heroUse) {
-		return null;
-	}
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<ImageEditor
-				{...props('image', attributes, {
-					additionalClass: {
-						image: '!size-full grayscale',
-						picture: tailwindClasses('imagePicture', attributes, manifest),
-					},
-				})}
-			/>
-
-			<HeadingEditor {...props('heading', attributes)} />
-
-			<ParagraphEditor
-				{...props('paragraph', attributes, {
-					additionalClass: 'mt-4 max-w-96 text-pretty',
-				})}
-			/>
-
-			<div className='mt-6 flex gap-2'>
-				<ButtonEditor {...props('buttonMain', attributes)} />
-				<ButtonEditor {...props('buttonSecondary', attributes)} />
-			</div>
-		</div>
-	);
-};

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

@@ -1,100 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { checkAttr, getAttrKey, getOption, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { ImageOptions } from '../../image/components/image-options';
-import { HeadingOptions } from '../../heading/components/heading-options';
-import { ParagraphOptions } from '../../paragraph/components/paragraph-options';
-import { ButtonOptions } from '../../button/components/button-options';
-import { ComponentToggle, OptionSelect } from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from '../manifest.json';
-
-export const HeroOptions = (attributes) => {
-	const { setAttributes, ...rest } = attributes;
-
-	const heroUse = checkAttr('heroUse', attributes, manifest);
-	const heroColor = checkAttr('heroColor', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.image}
-			onChange={(value) => setAttributes({ [getAttrKey('heroUse', attributes, manifest)]: value })}
-			useComponent={heroUse}
-			{...rest}
-		>
-			<OptionSelect
-				icon={icons.paletteColor}
-				label={__('Theme', 'eightshift-frontend-libs')}
-				value={heroColor}
-				onChange={(value) => {
-					let mainButtonColor = 'navy-500';
-					let secondaryButtonColor = 'navy-800';
-
-					switch (value) {
-						case 'navy-dark':
-							mainButtonColor = 'navy-500';
-							secondaryButtonColor = 'navy-100';
-							break;
-						case 'red':
-							mainButtonColor = 'red-500';
-							secondaryButtonColor = 'red-800';
-							break;
-						case 'red-dark':
-							mainButtonColor = 'red-500';
-							secondaryButtonColor = 'red-100';
-							break;
-						case 'gray':
-							mainButtonColor = 'gray-500';
-							secondaryButtonColor = 'gray-800';
-							break;
-						case 'gray-dark':
-							mainButtonColor = 'gray-500';
-							secondaryButtonColor = 'gray-100';
-							break;
-						default:
-							break;
-					}
-
-					return setAttributes({
-						[getAttrKey('heroColor', attributes, manifest)]: value,
-						[getAttrKey('heroButtonMainColor', attributes, manifest)]: mainButtonColor,
-						[getAttrKey('heroButtonSecondaryColor', attributes, manifest)]: secondaryButtonColor,
-					});
-				}}
-				options={getOption('heroColor', attributes, manifest)}
-				type='menu'
-				inline
-			/>
-
-			<div>
-				<ImageOptions
-					{...props('image', attributes)}
-					hideOptions='borderRadius'
-				/>
-
-				<HeadingOptions
-					{...props('heading', attributes)}
-					hideOptions='size'
-				/>
-
-				<ParagraphOptions
-					{...props('paragraph', attributes)}
-					hideOptions='size'
-				/>
-
-				<ButtonOptions
-					{...props('buttonMain', attributes)}
-					label={__('Primary button', 'eightshift-frontend-libs')}
-					hideOptions='variant,color'
-					icon={icons.buttonFilled}
-				/>
-
-				<ButtonOptions
-					{...props('buttonSecondary', attributes)}
-					label={__('Secondary button', 'eightshift-frontend-libs')}
-					hideOptions='variant,color'
-				/>
-			</div>
-		</ComponentToggle>
-	);
-};

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

@@ -1,45 +0,0 @@
-<?php
-
-/**
- * Hero component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$heroUse = Helpers::checkAttr('heroUse', $attributes, $manifest);
-
-if (!$heroUse) {
-	return;
-}
-
-$additionalClass = $attributes['additionalClass'] ?? '';
-?>
-
-<section class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>">
-	<?php
-	echo Helpers::render('image', Helpers::props('image', $attributes, [
-		'additionalClass' => [
-			'image' => 'size-full grayscale',
-			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
-		],
-	]));
-	?>
-
-	<?php
-	echo Helpers::render('heading', Helpers::props('heading', $attributes)),
-	Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-		'additionalClass' => 'mt-4 max-w-96 text-pretty',
-	]));
-	?>
-
-	<div class="flex gap-2 mt-6">
-		<?php
-		echo Helpers::render('button', Helpers::props('buttonMain', $attributes)),
-		Helpers::render('button', Helpers::props('buttonSecondary', $attributes));
-		?>
-	</div>
-</section>