@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.1

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

@@ -1,625 +0,0 @@
-{
-	"$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"
-				},
-				"twClassesEditorOnly": {
-					"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-t",
-					"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

@@ -1,20 +0,0 @@
-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

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