@eightshift/frontend-libs-tailwind 1.0.0

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

@@ -0,0 +1,135 @@
+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 {
+	BaseControl,
+	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

@@ -0,0 +1,299 @@
+{
+	"$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"
+		},
+		"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-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "navy-800",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-navy-800 border-navy-800 focus-visible:ring-navy-500/30 hover:bg-navy-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "red-100",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-red-100 border-red-100 focus-visible:ring-red-500/30 hover:bg-red-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "red-800",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-red-800 border-red-800 focus-visible:ring-red-500/30 hover:bg-red-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "gray-100",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-gray-100 border-gray-100 focus-visible:ring-gray-500/30 hover:bg-gray-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "gray-500",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-gray-500 border-gray-500 focus-visible:ring-gray-500/30 hover:bg-gray-50"
+			},
+			{
+				"attributes": {
+					"buttonColor": "gray-800",
+					"buttonVariant": "secondary"
+				},
+				"twClasses": "text-gray-800 border-gray-800 focus-visible:ring-gray-500/30"
+			},
+			{
+				"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"
+			},
+			{
+				"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

@@ -0,0 +1,42 @@
+<?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::getTwClasses($attributes, $manifest, $additionalClass)); ?>" >
+	<?php
+	echo Helpers::render('image', Helpers::props('image', $attributes, [
+		'additionalClass' => [
+			'image' => Helpers::getTwPart('image', $manifest),
+			'picture' => Helpers::getTwPart('imagePicture', $manifest),
+		]
+	]));
+	?>
+
+	<div class="<?php echo esc_attr(Helpers::getTwPart('content-container', $manifest)); ?>">
+		<?php
+		echo Helpers::render('paragraph', Helpers::props('intro', $attributes, [
+			'additionalClass' => Helpers::getTwPart('intro', $manifest),
+		])),
+
+		Helpers::render('heading', Helpers::props('heading', $attributes)),
+
+		Helpers::render('paragraph', Helpers::props('paragraph', $attributes, [
+			'additionalClass' => Helpers::getTwPart('text', $manifest),
+		])),
+
+		Helpers::render('button', Helpers::props('button', $attributes, [
+			'additionalClass' => Helpers::getTwPart('button', $manifest),
+		]));
+		?>
+	</div>
+</div>

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

@@ -0,0 +1,39 @@
+import { props, getTwClasses, getTwPart } 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={getTwClasses(attributes, manifest, additionalClass)}>
+			<ImageEditor
+				{...props('image', attributes, {
+					additionalClass: {
+						image: getTwPart('image', manifest),
+						picture: getTwPart('imagePicture', 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={getTwPart('content-container', manifest)}>
+				<ParagraphEditor
+					{...props('intro', attributes, {
+						additionalClass: getTwPart('intro', manifest),
+					})}
+				/>
+
+				<HeadingEditor {...props('heading', attributes)} />
+
+				<ParagraphEditor {...props('paragraph', attributes, { additionalClass: getTwPart('text', manifest) })} />
+
+				<ButtonEditor {...props('button', attributes, { additionalClass: getTwPart('button', manifest) })} />
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,56 @@
+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%')}
+				itemProps={{ size: 'large' }}
+				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

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