@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

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

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={[]}
-		/>
-	);
-};