@eightshift/frontend-libs-tailwind 1.4.8 → 2.0.0

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

@@ -1,36 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
-import { checkAttr, getAttrKey, tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconEditor } from '../../icon/components/icon-editor';
-import manifest from './../manifest.json';
-
-export const ButtonEditor = (attributes) => {
-	const { componentClass } = manifest;
-
-	const { setAttributes, additionalClass, placeholder = __('Add content', '%g_textdomain%') } = attributes;
-
-	const buttonContent = checkAttr('buttonContent', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	if (!buttonUse) {
-		return null;
-	}
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<IconEditor
-				{...props('icon', attributes, {
-					blockClass: componentClass,
-				})}
-			/>
-
-			<RichText
-				placeholder={placeholder}
-				value={buttonContent}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonContent', attributes, manifest)]: value })}
-				keepPlaceholderOnFocus
-				allowedFormats={[]}
-			/>
-		</div>
-	);
-};

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

@@ -1,134 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import {
-	getOption,
-	checkAttr,
-	getAttrKey,
-	props,
-	getOptions,
-	wpSearchRoute,
-	getHiddenOptions,
-} from '@eightshift/frontend-libs-tailwind/scripts';
-import { IconOptions } from '../../icon/components/icon-options';
-import {
-	ButtonGroup,
-	ColorPicker,
-	ComponentToggle,
-	HStack,
-	InputField,
-	LinkInput,
-	OptionSelect,
-	Spacer,
-	Toggle,
-} from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import { upperFirst } from '@eightshift/ui-components/utilities';
-import manifest from './../manifest.json';
-
-export const ButtonOptions = (attributes) => {
-	const { setAttributes, hideOptions, ...rest } = attributes;
-
-	const hiddenOptions = getHiddenOptions(hideOptions);
-
-	const buttonId = checkAttr('buttonId', attributes, manifest);
-	const buttonAriaLabel = checkAttr('buttonAriaLabel', attributes, manifest);
-	const buttonUrl = checkAttr('buttonUrl', attributes, manifest);
-	const buttonIsAnchor = checkAttr('buttonIsAnchor', attributes, manifest);
-	const buttonIsNewTab = checkAttr('buttonIsNewTab', attributes, manifest);
-	const buttonVariant = checkAttr('buttonVariant', attributes, manifest);
-	const buttonColor = checkAttr('buttonColor', attributes, manifest);
-	const buttonUse = checkAttr('buttonUse', attributes, manifest);
-
-	return (
-		<ComponentToggle
-			label={manifest.title}
-			icon={icons.buttonOutline}
-			onChange={(value) => setAttributes({ [getAttrKey('buttonUse', attributes, manifest)]: value })}
-			useComponent={buttonUse}
-			{...rest}
-		>
-			<HStack hidden={hiddenOptions?.variant && hiddenOptions?.color && hiddenOptions?.icon}>
-				<ButtonGroup hidden={hiddenOptions?.variant && hiddenOptions?.color}>
-					<OptionSelect
-						aria-label={__('Style', '%g_textdomain%')}
-						value={buttonVariant}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonVariant', attributes, manifest)]: value })}
-						options={getOption('buttonVariant', attributes, manifest)}
-						type='menu'
-						hidden={hiddenOptions?.variant}
-					/>
-
-					<ColorPicker
-						aria-label={__('Color', '%g_textdomain%')}
-						value={buttonColor}
-						onChange={(value) => setAttributes({ [getAttrKey('buttonColor', attributes, manifest)]: value })}
-						colors={getOption(`buttonColor${upperFirst(buttonVariant)}`, attributes, manifest, true)}
-						hidden={hiddenOptions?.color}
-					/>
-				</ButtonGroup>
-
-				<IconOptions
-					{...props('icon', attributes, {
-						options: getOptions(attributes, manifest),
-					})}
-					hidden={hiddenOptions?.icon}
-					hideOptions='size'
-					design='compactLabel'
-				/>
-			</HStack>
-
-			<Spacer hidden={hiddenOptions?.link} />
-
-			<LinkInput
-				icon={buttonIsAnchor ? icons.globeAnchor : icons.globe}
-				url={buttonUrl}
-				onChange={({ url, isAnchor }) => {
-					setAttributes({
-						[getAttrKey('buttonUrl', attributes, manifest)]: url,
-						[getAttrKey('buttonIsAnchor', attributes, manifest)]: isAnchor ?? false,
-					});
-				}}
-				fetchSuggestions={wpSearchRoute}
-				hidden={hiddenOptions?.link}
-			/>
-
-			<Toggle
-				icon={icons.newTab}
-				label={__('Open in new tab', '%g_textdomain%')}
-				checked={buttonIsNewTab}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonIsNewTab', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.link || hiddenOptions?.newTab}
-			/>
-
-			<Spacer hidden={hiddenOptions?.ariaLabel} />
-			<Spacer
-				icon={icons.a11y}
-				text={__('Accessibility', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-			<InputField
-				icon={icons.ariaLabel}
-				label={__('ARIA label', '%g_textdomain%')}
-				value={buttonAriaLabel}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonAriaLabel', attributes, manifest)]: value })}
-				help={__('Description of the button.', '%g_textdomain%')}
-				hidden={hiddenOptions?.ariaLabel}
-			/>
-
-			<Spacer hidden={hiddenOptions?.uniqueId} />
-			<Spacer
-				icon={icons.pointerHand}
-				text={__('Advanced', '%g_textdomain%')}
-				border
-				hidden={hiddenOptions?.uniqueId}
-			/>
-			<InputField
-				icon={icons.id}
-				label={__('Unique identifier', '%g_textdomain%')}
-				value={buttonId}
-				onChange={(value) => setAttributes({ [getAttrKey('buttonId', attributes, manifest)]: value })}
-				hidden={hiddenOptions?.uniqueId}
-			/>
-		</ComponentToggle>
-	);
-};

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

@@ -1,302 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
-	"componentName": "button",
-	"title": "Button",
-	"componentClass": "btn",
-	"example": {
-		"attributes": {
-			"buttonContent": "This is a button",
-			"buttonUrl": "https://eightshift.com/",
-			"buttonId": "custom ID"
-		}
-	},
-	"attributes": {
-		"buttonContent": {
-			"type": "string"
-		},
-		"buttonUrl": {
-			"type": "string"
-		},
-		"buttonId": {
-			"type": "string"
-		},
-		"buttonType": {
-			"type": "string"
-		},
-		"buttonColor": {
-			"type": "string",
-			"default": "navy-500"
-		},
-		"buttonVariant": {
-			"type": "string",
-			"default": "primary"
-		},
-		"buttonSize": {
-			"type": "string",
-			"default": "base"
-		},
-		"buttonIsAnchor": {
-			"type": "boolean",
-			"default": false
-		},
-		"buttonIsNewTab": {
-			"type": "boolean",
-			"default": false
-		},
-		"buttonAriaLabel": {
-			"type": "string"
-		},
-		"buttonUse": {
-			"type": "boolean",
-			"default": true
-		},
-		"buttonIconUse": {
-			"type": "boolean",
-			"default": false
-		}
-	},
-	"components": {
-		"icon": "icon"
-	},
-	"options": {
-		"buttonVariant": [
-			{
-				"label": "Primary",
-				"value": "primary",
-				"icon": "buttonFilled"
-			},
-			{
-				"label": "Secondary",
-				"value": "secondary",
-				"icon": "buttonOutline"
-			},
-			{
-				"label": "Link",
-				"value": "link",
-				"icon": "link"
-			}
-		],
-		"buttonSize": [
-			{
-				"label": "Regular",
-				"value": "base"
-			},
-			{
-				"label": "Small",
-				"value": "sm"
-			}
-		],
-		"buttonColorPrimary": [
-			"navy-100",
-			"navy-500",
-			"navy-800",
-			"red-100",
-			"red-500",
-			"red-800",
-			"gray-100",
-			"gray-500",
-			"gray-800"
-		],
-		"buttonColorSecondary": [
-			"navy-100",
-			"navy-800",
-			"red-100",
-			"red-800",
-			"gray-100",
-			"gray-500",
-			"gray-800"
-		],
-		"buttonColorLink": [
-			"black",
-			"white",
-			"red-500",
-			"navy-500"
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "font-sans transition duration-300 inline-flex items-center focus-visible:ring focus:outline-none text-sm disabled:shadow-none disabled:grayscale disabled:cursor-default disabled:opacity-85"
-		},
-		"options": {
-			"buttonVariant": {
-				"twClasses": {
-					"primary": "border shadow hover:shadow-md bg-gradient-to-br [&>svg]:size-6 gap-2",
-					"secondary": "border [&>svg]:size-6 gap-2",
-					"link": "leading-tight rounded-sm underline cursor-pointer underline-offset-1 decoration-[1.5px] [&>svg]:size-4 gap-1 hover:ring-4"
-				}
-			}
-		},
-		"combinations": [
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "base"
-				},
-				"twClasses": "~pr-3/4 ~pl-2.5/3.5 ~py-2/3 ~rounded-lg/xl"
-			},
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "sm"
-				},
-				"twClasses": "~pr-1/2 ~pl-1.5/2.5 ~py-1/1.5 ~rounded-md/lg"
-			},
-			{
-				"attributes": {
-					"buttonVariant": [
-						"primary",
-						"secondary"
-					],
-					"buttonSize": "square"
-				},
-				"twClasses": "size-14 sm:size-9 rounded-full sm:[&>svg]:size-5 justify-center"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-100 to-navy-200 text-navy-950 border-navy-200 hover:border-navy-200 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-500 to-navy-600 text-navy-50 border-navy-500 hover:border-navy-600 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-navy-700 to-navy-800 text-navy-50 border-navy-800 hover:border-navy-900 focus-visible:ring-navy-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-100 to-red-200 text-red-950 border-red-200 hover:border-red-300 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-500 to-red-600 text-red-50 border-red-500 hover:border-red-600 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-red-700 to-red-800 text-red-50 border-red-800 hover:border-red-900 focus-visible:ring-red-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-100",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-100 to-gray-200 text-gray-950 border-gray-200 hover:border-gray-300 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-500",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-500 to-gray-600 text-gray-50 border-gray-500 hover:border-gray-600 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-800",
-					"buttonVariant": "primary"
-				},
-				"twClasses": "from-gray-700 to-gray-800 text-gray-50 border-gray-800 hover:border-gray-900 focus-visible:ring-gray-500/30"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-navy-100 border-navy-100 focus-visible:ring-navy-500/30 hover:bg-navy-100 hover:text-navy-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-navy-800 border-navy-800 focus-visible:ring-navy-500/30 hover:bg-navy-800 hover:text-navy-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-red-100 border-red-100 focus-visible:ring-red-500/30 hover:bg-red-100 hover:text-red-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-red-800 border-red-800 focus-visible:ring-red-500/30 hover:bg-red-800 hover:text-red-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-100",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-100 border-gray-100 focus-visible:ring-gray-500/30 hover:bg-gray-100 hover:text-gray-950"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-500",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-500 border-gray-500 focus-visible:ring-gray-500/30 hover:bg-gray-500 hover:text-white"
-			},
-			{
-				"attributes": {
-					"buttonColor": "gray-800",
-					"buttonVariant": "secondary"
-				},
-				"twClasses": "text-gray-800 border-gray-800 focus-visible:ring-gray-500/30 hover:bg-gray-800 hover:text-gray-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "black",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-gray-950 decoration-gray-500 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100"
-			},
-			{
-				"attributes": {
-					"buttonColor": "white",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-gray-50 decoration-gray-100 hover:bg-gray-100 focus-visible:ring-gray-500/30 hover:ring-gray-100 hover:text-gray-950 hover:decoration-gray-400"
-			},
-			{
-				"attributes": {
-					"buttonColor": "red-500",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-current decoration-red-500 hover:bg-red-50 focus-visible:ring-red-500/30 hover:ring-red-50"
-			},
-			{
-				"attributes": {
-					"buttonColor": "navy-500",
-					"buttonVariant": "link"
-				},
-				"twClasses": "text-current decoration-navy-500 hover:bg-navy-50 focus-visible:ring-navy-500/30 hover:ring-navy-50"
-			}
-		]
-	}
-}

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

@@ -1,42 +0,0 @@
-<?php
-
-/**
- * Card component template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-$additionalClass = $attributes['additionalClass'] ?? '';
-?>
-
-<div class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass)); ?>" >
-	<?php
-	echo Helpers::render('image', Helpers::props('image', $attributes, [
-		'additionalClass' => [
-			'image' => Helpers::tailwindClasses('image', $attributes, $manifest),
-			'picture' => Helpers::tailwindClasses('imagePicture', $attributes, $manifest),
-		]
-	]));
-	?>
-
-	<div class="<?php echo esc_attr(Helpers::tailwindClasses('content-container', $attributes, $manifest)); ?>">
-		<?php
-		echo Helpers::render('paragraph', Helpers::props('intro', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('intro', $attributes, $manifest),
-		])),
-
-		Helpers::render('heading', Helpers::props('heading', $attributes)),
-
-		Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('text', $attributes, $manifest),
-		])),
-
-		Helpers::render('button', Helpers::props('button', $attributes, [
-			'additionalClass' => Helpers::tailwindClasses('button', $attributes, $manifest),
-		]));
-		?>
-	</div>
-</div>

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

@@ -1,43 +0,0 @@
-import { props, 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 CardEditor = (attributes) => {
-	const { additionalClass } = attributes;
-
-	return (
-		<div className={tailwindClasses(attributes, manifest, additionalClass)}>
-			<ImageEditor
-				{...props('image', attributes, {
-					additionalClass: {
-						image: tailwindClasses('image', attributes, manifest),
-						picture: tailwindClasses('imagePicture', attributes, manifest),
-						imagePlaceholder:
-							'!border-x-0 !border-t-0 !border-solid !w-full !h-auto aspect-3/2 [&_svg]:!size-12 border-b !rounded-none bg-gray-100 !border-b-gray-200',
-					},
-				})}
-			/>
-
-			<div className={tailwindClasses('content-container', attributes, manifest)}>
-				<ParagraphEditor
-					{...props('intro', attributes, {
-						additionalClass: tailwindClasses('intro', attributes, manifest),
-					})}
-				/>
-
-				<HeadingEditor {...props('heading', attributes)} />
-
-				<ParagraphEditor
-					{...props('paragraph', attributes, { additionalClass: tailwindClasses('text', attributes, manifest) })}
-				/>
-
-				<ButtonEditor
-					{...props('button', attributes, { additionalClass: tailwindClasses('button', attributes, manifest) })}
-				/>
-			</div>
-		</div>
-	);
-};

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>
-		</>
-	);
-};