Merge pull request #67 from infinum/release/1.4.7

1.4.7

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: [email protected]
+- 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

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

@@ -19,6 +19,7 @@
 $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 @@
 $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 ?>

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

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

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

@@ -19,6 +19,7 @@
 $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 @@
 $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

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

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

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

@@ -25,15 +25,20 @@
 $isDesktopFirst = $imageData['_desktopFirst'] ?? false;
 
 $breakpointData = Helpers::getSettingsGlobalVariablesBreakpoints();
-$breakpoints = Helpers::getTwBreakpoints();
+$breakpoints = Helpers::getTwBreakpoints($isDesktopFirst);
+
+if (!$isDesktopFirst) {
+	$breakpoints = array_reverse($breakpoints);
+}
 ?>
 
 <picture
 	<?php if (!empty($additionalClass['picture'])) { ?>
 		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 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 			continue;
 		}
 
-		$breakpointWidth = $breakpointData[$breakpoint];
+		$breakpointWidth = $breakpointData[str_replace('max-', '', $breakpoint)];
 
 		$widthMode = $isDesktopFirst ? 'max-width' : 'min-width';
 
@@ -57,7 +62,7 @@ class="<?php echo esc_attr($additionalClass['picture']); ?>"
 	<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>
 

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",