@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/custom/column/manifest.json

@@ -0,0 +1,625 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
+	"blockName": "column",
+	"title": "Column",
+	"description": "A single column.",
+	"category": "eightshift",
+	"icon": {
+		"src": "es-column"
+	},
+	"keywords": [
+		"column"
+	],
+	"parent": [
+		"eightshift-boilerplate/columns"
+	],
+	"example": {
+		"attributes": {
+			"wrapperNoControls": true,
+			"columnWidthLarge": 4
+		},
+		"innerBlocks": [
+			{
+				"name": "eightshift-boilerplate/card",
+				"attributes": {
+					"cardCardImageUrl": "https://loremflickr.com/800/800",
+					"cardCardIntroContent": "Intro",
+					"cardCardIntroSize": "small",
+					"cardCardIntroColor": "light",
+					"cardCardHeadingContent": "Heading",
+					"cardCardParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet.",
+					"cardCardButtonUse": false
+				}
+			}
+		]
+	},
+	"hasInnerBlocks": true,
+	"attributes": {
+		"wrapperNoControls": {
+			"type": "boolean",
+			"default": true
+		},
+		"wrapperUse": {
+			"type": "boolean",
+			"default": false
+		},
+		"columnOffset": {
+			"type": "object",
+			"default": {
+				"_default": "1",
+				"_desktopFirst": true
+			}
+		},
+		"columnWidth": {
+			"type": "object",
+			"default": {
+				"_default": "1",
+				"_desktopFirst": true
+			}
+		},
+		"columnRowSpan": {
+			"type": "object",
+			"default": {
+				"_default": "1",
+				"_desktopFirst": true
+			}
+		},
+		"columnOverflow": {
+			"type": "object",
+			"default": {
+				"_default": "visible",
+				"_desktopFirst": true
+			}
+		},
+		"columnHide": {
+			"type": "object",
+			"default": {
+				"_default": false,
+				"_desktopFirst": true
+			}
+		},
+		"columnVerticalAlign": {
+			"type": "object",
+			"default": {
+				"_default": "stretch",
+				"_desktopFirst": true
+			}
+		},
+		"columnHorizontalAlign": {
+			"type": "object",
+			"default": {
+				"_default": "stretch",
+				"_desktopFirst": true
+			}
+		},
+		"columnPaddingLeft": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"columnPaddingRight": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"columnPaddingTop": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"columnPaddingBottom": {
+			"type": "object",
+			"default": {
+				"_default": "none",
+				"_desktopFirst": true
+			}
+		},
+		"columnBackground": {
+			"type": "string",
+			"default": "none"
+		},
+		"columnGradientDirection": {
+			"type": "string",
+			"default": "to-r"
+		},
+		"columnBorderRadius": {
+			"type": "string",
+			"default": "none"
+		},
+		"columnShadow": {
+			"type": "string",
+			"default": "none"
+		},
+		"columnBorder": {
+			"type": "string",
+			"default": "none"
+		}
+	},
+	"options": {
+		"columnVerticalAlign": [
+			{
+				"label": "Stretch",
+				"value": "stretch",
+				"icon": "verticalAlignStretch"
+			},
+			{
+				"label": "Start",
+				"value": "start",
+				"icon": "verticalAlignTop"
+			},
+			{
+				"label": "Center",
+				"value": "center",
+				"icon": "verticalAlignCenter"
+			},
+			{
+				"label": "End",
+				"value": "end",
+				"icon": "verticalAlignBottom"
+			}
+		],
+		"columnHorizontalAlign": [
+			{
+				"label": "Stretch",
+				"value": "stretch",
+				"icon": "horizontalAlignStretch"
+			},
+			{
+				"label": "Start",
+				"value": "start",
+				"icon": "horizontalAlignLeft"
+			},
+			{
+				"label": "Center",
+				"value": "center",
+				"icon": "horizontalAlignCenter"
+			},
+			{
+				"label": "End",
+				"value": "end",
+				"icon": "horizontalAlignRight"
+			}
+		],
+		"columnHide": [
+			{
+				"label": "Visible",
+				"value": "false",
+				"icon": "visible"
+			},
+			{
+				"label": "Hidden",
+				"value": "true",
+				"icon": "hide"
+			}
+		],
+		"columnSpacing": [
+			{
+				"label": "0",
+				"value": "none"
+			},
+			{
+				"label": "4",
+				"value": "xs"
+			},
+			{
+				"label": "8",
+				"value": "sm"
+			},
+			{
+				"label": "16",
+				"value": "md"
+			},
+			{
+				"label": "32",
+				"value": "lg"
+			},
+			{
+				"label": "40",
+				"value": "xl"
+			},
+			{
+				"label": "56",
+				"value": "2xl"
+			}
+		],
+		"columnBackground": [
+			{
+				"value": "none",
+				"label": "None",
+				"icon": "none"
+			},
+			{
+				"value": "solid",
+				"label": "Color",
+				"icon": "color"
+			},
+			{
+				"value": "gradient",
+				"label": "Gradient",
+				"icon": "gradient"
+			}
+		],
+		"columnBackgroundSolid": [
+			"red-50",
+			"red-500",
+			"red-950",
+			"navy-50",
+			"navy-500",
+			"navy-950",
+			"gray-50",
+			"gray-500",
+			"gray-950",
+			"black",
+			"white"
+		],
+		"columnBackgroundGradient": [
+			{
+				"label": "Light gray",
+				"value": "gradient-light-gray"
+			},
+			{
+				"label": "Dark gray",
+				"value": "gradient-dark-gray"
+			},
+			{
+				"label": "Light navy",
+				"value": "gradient-light-navy"
+			},
+			{
+				"label": "Dark navy",
+				"value": "gradient-dark-navy"
+			},
+			{
+				"label": "Light red",
+				"value": "gradient-light-red"
+			},
+			{
+				"label": "Dark red",
+				"value": "gradient-dark-red"
+			},
+			{
+				"label": "Navy to red (light)",
+				"value": "gradient-navy-red-light"
+			},
+			{
+				"label": "Navy to red (dark)",
+				"value": "gradient-navy-red-dark"
+			}
+		],
+		"columnGradientDirection": [
+			{
+				"label": "To top",
+				"value": "to-t"
+			},
+			{
+				"label": "To top-right",
+				"value": "to-tr"
+			},
+			{
+				"label": "To right",
+				"value": "to-r"
+			},
+			{
+				"label": "To bottom-right",
+				"value": "to-br"
+			},
+			{
+				"label": "To bottom",
+				"value": "to-b"
+			},
+			{
+				"label": "To bottom-left",
+				"value": "to-bl"
+			},
+			{
+				"label": "To left",
+				"value": "to-l"
+			},
+			{
+				"label": "To top-left",
+				"value": "to-tl"
+			}
+		],
+		"columnBorderRadius": [
+			{
+				"label": "0",
+				"value": "none",
+				"separator": "below"
+			},
+			{
+				"label": "4",
+				"value": "sm"
+			},
+			{
+				"label": "6",
+				"value": "md"
+			},
+			{
+				"label": "8",
+				"value": "lg"
+			},
+			{
+				"label": "12",
+				"value": "xl"
+			},
+			{
+				"label": "16",
+				"value": "2xl"
+			}
+		],
+		"columnShadow": [
+			{
+				"label": "None",
+				"value": "none",
+				"separator": "below"
+			},
+			{
+				"label": "Small",
+				"value": "sm"
+			},
+			{
+				"label": "Medium",
+				"value": "md"
+			},
+			{
+				"label": "Large",
+				"value": "lg"
+			},
+			{
+				"label": "Huge",
+				"value": "xl"
+			}
+		],
+		"columnBorder": [
+			"red-100",
+			"red-500",
+			"red-900",
+			"navy-100",
+			"navy-500",
+			"navy-900",
+			"gray-100",
+			"gray-500",
+			"gray-900",
+			"black",
+			"white"
+		],
+		"columnOverflow": [
+			{
+				"label": "Visible",
+				"value": "visible",
+				"subtitle": "Default",
+				"separator": "below"
+			},
+			{
+				"label": "Scroll",
+				"value": "scroll",
+				"separator": "below"
+			},
+			{
+				"label": "Hidden",
+				"value": "hidden"
+			},
+			{
+				"label": "Clip",
+				"value": "clip"
+			}
+		]
+	},
+	"tailwind": {
+		"base": {
+			"twClasses": "flex flex-col"
+		},
+		"options": {
+			"columnOffset": {
+				"responsive": true,
+				"twClasses": {
+					"1": "col-start-1",
+					"2": "col-start-2",
+					"3": "col-start-3",
+					"4": "col-start-4",
+					"5": "col-start-5",
+					"6": "col-start-6",
+					"7": "col-start-7",
+					"8": "col-start-8",
+					"9": "col-start-9",
+					"10": "col-start-10",
+					"11": "col-start-11",
+					"12": "col-start-12"
+				}
+			},
+			"columnWidth": {
+				"responsive": true,
+				"twClasses": {
+					"1": "col-end-span-1",
+					"2": "col-end-span-2",
+					"3": "col-end-span-3",
+					"4": "col-end-span-4",
+					"5": "col-end-span-5",
+					"6": "col-end-span-6",
+					"7": "col-end-span-7",
+					"8": "col-end-span-8",
+					"9": "col-end-span-9",
+					"10": "col-end-span-10",
+					"11": "col-end-span-11",
+					"12": "col-end-span-12"
+				}
+			},
+			"columnRowSpan": {
+				"responsive": true,
+				"twClasses": {
+					"1": "row-end-span-1",
+					"2": "row-end-span-2",
+					"3": "row-end-span-3",
+					"4": "row-end-span-4",
+					"5": "row-end-span-5",
+					"6": "row-end-span-6",
+					"7": "row-end-span-7",
+					"8": "row-end-span-8",
+					"9": "row-end-span-9",
+					"10": "row-end-span-10",
+					"11": "row-end-span-11",
+					"12": "row-end-span-12"
+				}
+			},
+			"columnHide": {
+				"responsive": true,
+				"twClasses": {
+					"true": "hidden",
+					"false": "flex"
+				},
+				"twClassesEditor": {
+					"true": "opacity-25",
+					"false": "opacity-100"
+				}
+			},
+			"columnVerticalAlign": {
+				"responsive": true,
+				"twClasses": {
+					"stretch": "justify-stretch h-full [&>*:only-child]:h-full",
+					"start": "justify-start",
+					"center": "justify-center",
+					"end": "justify-end"
+				}
+			},
+			"columnHorizontalAlign": {
+				"responsive": true,
+				"twClasses": {
+					"stretch": "items-stretch w-full [&>*:only-child]:w-full",
+					"start": "items-start",
+					"center": "items-center",
+					"end": "items-end"
+				}
+			},
+			"columnPaddingLeft": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pl-0",
+					"xs": "pl-1",
+					"sm": "pl-2",
+					"md": "pl-4",
+					"lg": "pl-8",
+					"xl": "pl-10",
+					"2xl": "pl-14"
+				}
+			},
+			"columnPaddingRight": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pr-0",
+					"xs": "pr-1",
+					"sm": "pr-2",
+					"md": "pr-4",
+					"lg": "pr-8",
+					"xl": "pr-10",
+					"2xl": "pr-14"
+				}
+			},
+			"columnPaddingTop": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pt-0",
+					"xs": "pt-1",
+					"sm": "pt-2",
+					"md": "pt-4",
+					"lg": "pt-8",
+					"xl": "pt-10",
+					"2xl": "pt-14"
+				}
+			},
+			"columnPaddingBottom": {
+				"responsive": true,
+				"twClasses": {
+					"none": "pb-0",
+					"xs": "pb-1",
+					"sm": "pb-2",
+					"md": "pb-4",
+					"lg": "pb-8",
+					"xl": "pb-10",
+					"2xl": "pb-14"
+				}
+			},
+			"columnBackground": {
+				"twClasses": {
+					"solid-red-50": "bg-red-50",
+					"solid-red-500": "bg-red-500",
+					"solid-red-950": "bg-red-950",
+					"solid-navy-50": "bg-navy-50",
+					"solid-navy-500": "bg-navy-500",
+					"solid-navy-950": "bg-navy-950",
+					"solid-gray-50": "bg-gray-50",
+					"solid-gray-500": "bg-gray-500",
+					"solid-gray-950": "bg-gray-950",
+					"solid-black": "bg-black",
+					"solid-white": "bg-white",
+					"gradient-light-gray": "from-gray-50 to-gray-100",
+					"gradient-dark-gray": "from-gray-800 to-gray-950",
+					"gradient-light-navy": "from-navy-50 to-navy-100",
+					"gradient-dark-navy": "from-navy-800 to-navy-950",
+					"gradient-light-red": "from-red-50 to-red-100",
+					"gradient-dark-red": "from-red-800 to-red-950",
+					"gradient-navy-red-light": "from-red-200 to-navy-300",
+					"gradient-navy-red-dark": "from-red-700 to-navy-800"
+				}
+			},
+			"columnGradientDirection": {
+				"twClasses": {
+					"to-t": "bg-gradient-to-r",
+					"to-tr": "bg-gradient-to-tr",
+					"to-r": "bg-gradient-to-r",
+					"to-br": "bg-gradient-to-br",
+					"to-b": "bg-gradient-to-b",
+					"to-bl": "bg-gradient-to-bl",
+					"to-l": "bg-gradient-to-l",
+					"to-tl": "bg-gradient-to-tl"
+				}
+			},
+			"columnBorderRadius": {
+				"twClasses": {
+					"sm": "rounded",
+					"md": "rounded-md",
+					"lg": "rounded-lg",
+					"xl": "rounded-xl",
+					"2xl": "rounded-2xl"
+				}
+			},
+			"columnShadow": {
+				"twClasses": {
+					"sm": "shadow",
+					"md": "shadow-md",
+					"lg": "shadow-lg",
+					"xl": "shadow-xl"
+				}
+			},
+			"columnBorder": {
+				"twClasses": {
+					"red-100": "border border-red-100",
+					"red-500": "border border-red-500",
+					"red-900": "border border-red-900",
+					"navy-100": "border border-navy-100",
+					"navy-500": "border border-navy-500",
+					"navy-900": "border border-navy-900",
+					"gray-100": "border border-gray-100",
+					"gray-500": "border border-gray-500",
+					"gray-900": "border border-gray-900",
+					"black": "border border-black",
+					"white": "border border-white"
+				}
+			},
+			"columnOverflow": {
+				"responsive": true,
+				"twClasses": {
+					"visible": "overflow-visible",
+					"hidden": "overflow-hidden",
+					"scroll": "overflow-scroll",
+					"clip": "overflow-clip"
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,20 @@
+import { useSelect } from '@wordpress/data';
+import { ColumnsOptions } from './components/columns-options';
+import { ColumnsEditor } from './components/columns-editor';
+import { GutenbergBlock, overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts';
+
+export const Columns = (props) => {
+	useSelect((select) => {
+		overrideInnerBlockAttributes(select, props.clientId, {
+			columnsConfig: props.attributes.columnsNumOfColumns,
+		});
+	});
+
+	return (
+		<GutenbergBlock
+			{...props}
+			options={ColumnsOptions}
+			editor={ColumnsEditor}
+		/>
+	);
+};

package/blocks/init/src/Blocks/custom/columns/columns.php

@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Columns block template..
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$blockClass = Helpers::getTwClasses($attributes, $manifest);
+?>
+
+<div class="<?php echo esc_attr($blockClass); ?>" >
+	<?php
+	// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+	echo $renderContent;
+	?>
+</div>