@eightshift/frontend-libs-tailwind 1.4.6 → 1.4.7

package/CHANGELOG.md

@@ -6,6 +6,16 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 ---
 
+## [1.4.7]
+
+### Changed
+- Fixed Image component "image" part tailwind class output if not set.
+- Fix Image component responsive output Co-authored-by: goran.alkovic@infinum.com
+- Add "Auto" width to wrapperContent and set is as defaults
+- Add a buttonType attribute to Button component
+- Implement a11y for Icon component either by setting aria-hidden to true (default) or using the existing iconName label from manifest options key
+- Updated dependencies.
+
 ## [1.4.6]
 
 ### Changed
@@ -159,6 +169,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release.
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
+[1.4.7]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.6...1.4.7
 [1.4.6]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.5...1.4.6
 [1.4.5]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.4...1.4.5
 [1.4.4]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.3...1.4.4

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

@@ -19,6 +19,7 @@ if (!$buttonUse) {
 $additionalClass = $attributes['additionalClass'] ?? '';
 $additionalAttributes = $attributes['additionalAttributes'] ?? [];
 $buttonId = Helpers::checkAttr('buttonId', $attributes, $manifest);
+$buttonType = Helpers::checkAttr('buttonType', $attributes, $manifest);
 
 $buttonUrl = Helpers::checkAttr('buttonUrl', $attributes, $manifest);
 $buttonIsNewTab = Helpers::checkAttr('buttonIsNewTab', $attributes, $manifest);
@@ -59,6 +60,10 @@ if (!empty($buttonAriaLabel)) {
 $buttonAttrs['class'] = Helpers::tailwindClasses('base', $attributes, $manifest, 'button', $additionalClass);
 
 $buttonTag = !empty($buttonUrl) ? 'a' : 'button';
+
+if (empty($buttonUrl) && !empty($buttonType)) {
+	$buttonAttrs['type'] = $buttonType;
+}
 ?>
 
 <<?php echo $buttonTag; // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped ?>

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

@@ -20,6 +20,9 @@
 		"buttonId": {
 			"type": "string"
 		},
+		"buttonType": {
+			"type": "string"
+		},
 		"buttonColor": {
 			"type": "string",
 			"default": "navy-500"

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

@@ -19,6 +19,7 @@ if (!$iconUse) {
 $additionalClass = $attributes['additionalClass'] ?? '';
 
 $iconName = Helpers::checkAttr('iconName', $attributes, $manifest);
+$iconAriaHidden = Helpers::checkAttr('iconAriaHidden', $attributes, $manifest);
 
 if (!isset($manifest['icons'][$iconName])) {
 	return;
@@ -29,7 +30,23 @@ $icon = $manifest['icons'][$iconName];
 $className = Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass);
 
 if (!empty($className)) {
-	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);
+	$icon = str_replace('<svg ', '<svg class="' . esc_attr($className) . '" ', $icon);
+}
+
+if ($iconAriaHidden) {
+	$icon = str_replace('<svg ', '<svg aria-hidden="true" ', $icon);
+} else {
+	$iconTitle = '';
+	$iconOption = array_filter($manifest['options']['iconName'], fn($option) => $option['value'] === $iconName);
+
+	if (!empty($iconOption)) {
+		$iconTitle = reset($iconOption)['label'];
+	}
+
+	if (!empty($iconTitle)) {
+		$titleTag = '<title>' . esc_html($iconTitle) . '</title>';
+		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
+	}
 }
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped

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

@@ -21,6 +21,10 @@
 		"iconUse": {
 			"type": "boolean",
 			"default": true
+		},
+		"iconAriaHidden": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"options": {

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

@@ -25,7 +25,11 @@ $imageAlt = get_post_meta($imageData['_default']['id'], '_wp_attachment_image_al
 $isDesktopFirst = $imageData['_desktopFirst'] ?? false;
 
 $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints();
+$breakpoints = Helpers::getTwBreakpoints($isDesktopFirst);
+
+if (!$isDesktopFirst) {
+	$breakpoints = array_reverse($breakpoints);
+}
 ?>
 
 <picture
@@ -33,7 +37,8 @@ $breakpoints = Helpers::getTwBreakpoints();
 		class="<?php echo esc_attr($additionalClass['picture']); ?>"
 	<?php } ?>
 >
-	<?php foreach ($breakpoints as $breakpoint) { ?>
+	<?php
+	foreach ($breakpoints as $breakpoint) { ?>
 		<?php
 		if (!isset($imageData[$breakpoint])) {
 			continue;
@@ -45,7 +50,7 @@ $breakpoints = Helpers::getTwBreakpoints();
 			continue;
 		}
 
-		$breakpointWidth = $breakpointData[$breakpoint];
+		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
 
 		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
 
@@ -57,7 +62,7 @@ $breakpoints = Helpers::getTwBreakpoints();
 	<img
 		src="<?php echo esc_url($imageData['_default']['url'] ?? ''); ?>"
 		alt="<?php echo esc_attr($imageAlt); ?>"
-		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? $additionalClass)); ?>"
+		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass['image'] ?? '')); ?>"
 	/>
 </picture>
 

package/blocks/init/src/Blocks/wrapper/manifest.json

@@ -90,7 +90,7 @@
 		"wrapperContentWidth": {
 			"type": "object",
 			"default": {
-				"_default": "full",
+				"_default": "auto",
 				"_desktopFirst": true
 			}
 		},
@@ -289,6 +289,11 @@
 			}
 		],
 		"wrapperContentWidth": [
+			{
+				"label": "Auto",
+				"value": "auto",
+				"separator": "below"
+			},
 			{
 				"label": "Full",
 				"value": "full",
@@ -439,6 +444,7 @@
 			"wrapperContentWidth": {
 				"responsive": true,
 				"twClasses": {
+					"auto": "w-auto",
 					"full": "w-full",
 					"half": "w-1/2",
 					"one-third": "w-1/3",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/frontend-libs-tailwind",
-	"version": "1.4.6",
+	"version": "1.4.7",
 	"description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
 	"author": {
 		"name": "Eightshift team",
@@ -34,35 +34,35 @@
 	"homepage": "https://github.com/infinum/eightshift-frontend-libs-tailwind#readme",
 	"license": "MIT",
 	"dependencies": {
-		"@eightshift/ui-components": "^1.8.0",
-		"@stylistic/eslint-plugin-js": "^2.11.0",
+		"@eightshift/ui-components": "^1.9.1",
+		"@stylistic/eslint-plugin-js": "^2.12.1",
 		"@stylistic/stylelint-plugin": "^3.1.1",
-		"@swc/core": "^1.9.3",
-		"@wordpress/api-fetch": "^7.13.0",
-		"@wordpress/block-editor": "^14.8.0",
+		"@swc/core": "^1.10.1",
+		"@wordpress/api-fetch": "^7.14.0",
+		"@wordpress/block-editor": "^14.9.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "^5.9.0",
-		"@wordpress/dom-ready": "^4.13.0",
-		"@wordpress/server-side-render": "^5.13.0",
-		"browserslist": "^4.24.2",
+		"@wordpress/dom-ready": "^4.14.0",
+		"@wordpress/server-side-render": "^5.14.0",
+		"browserslist": "^4.24.3",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.0",
-		"eslint": "^9.15.0",
+		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
-		"globals": "^15.12.0",
+		"globals": "^15.13.0",
 		"husky": "^9.1.7",
 		"lightningcss": "^1.28.2",
 		"mini-css-extract-plugin": "^2.9.2",
 		"postcss": "^8.4.49",
 		"postcss-loader": "^8.1.1",
-		"prettier": "^3.4.1",
+		"prettier": "^3.4.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
-		"sonner": "^1.7.0",
-		"stylelint": "^16.11.0",
+		"sonner": "^1.7.1",
+		"stylelint": "^16.12.0",
 		"stylelint-config-standard": "^36.0.1",
 		"swc-loader": "^0.2.6",
-		"terser-webpack-plugin": "^5.3.10",
-		"webpack": "^5.96.1",
+		"terser-webpack-plugin": "^5.3.11",
+		"webpack": "^5.97.1",
 		"webpack-cli": "^5.1.4",
 		"webpack-manifest-plugin": "^5.0.0",
 		"webpack-merge": "^6.0.1"
@@ -70,11 +70,11 @@
 	"devDependencies": {
 		"embla-carousel": "^8.5.1",
 		"fluid-tailwind": "^1.0.4",
-		"lint-staged": "^15.2.10",
+		"lint-staged": "^15.2.11",
 		"micromodal": "^0.4.10",
-		"ol": "^10.2.1",
-		"ol-mapbox-style": "^12.3.5",
-		"tailwindcss": "^3.4.15",
+		"ol": "^10.3.1",
+		"ol-mapbox-style": "^12.4.0",
+		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"sideEffects": false,