Feature/dswp 55 horizontal card pattern (#37)

* Added card-with-hyperlink-list pattern

* fixed version

* fixes as per PR comment

* added horizontal card pattern

* changelog

* PR comments

* build files

CHANGELOG.md

@@ -3,7 +3,7 @@
 ## 1.4.0 December 5, 2024
 
 - Added card-with-hyperlink-list pattern
-
+- Added horizontal-card pattern
 
 ## 1.3.0 October 15, 2024
 

composer.json

@@ -41,6 +41,7 @@
             "npm run fix:js",
             "npm run fix:css",
             "npm run test",
+            "npm run build",
             "composer test"
         ],
         "phpcs": [

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '54a72f307dce81e3a752');
+<?php return array('dependencies' => array(), 'version' => '0b4ac19c218a899269ac');

functions.php

@@ -52,3 +52,16 @@ function design_system_include_block_style_variations( $dir_path ) {
 // Set the directory path and include block style variations.
 $dir_path = get_template_directory() . '/blocks/core/style-variations';
 design_system_include_block_style_variations( $dir_path );
+
+
+/**
+ * Restrict access to the locking UI to Administrators.
+ *
+ * @param array $settings Default editor settings.
+ */
+function dswp_restrict_locking_unlocking_blocks( $settings ) {
+    $settings['canLockBlocks'] = current_user_can( 'activate_plugins' );
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'dswp_restrict_locking_unlocking_blocks', 10, 2 );

patterns/dswp-horizonal-card.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Title: DSWP Horizontal Card
+ * Slug: design-system-wordpress-theme/dswp-horizontal-card
+ * Categories: text
+ *
+ * @package Design-System-WordPress-Theme
+ */
+?>
+
+<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"templateLock":"all","lock":{"move":true,"remove":true},"align":"wide","className":"dswp-large-image-text is-style-box-shadow-on-hover","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"padding":{"top":"0","bottom":"0"}},"border":{"width":"0px","style":"none"}}} -->
+<div class="wp-block-columns alignwide dswp-large-image-text is-style-box-shadow-on-hover" style="border-style:none;border-width:0px;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:0;padding-bottom:0"><!-- wp:column {"verticalAlignment":"top","width":"26%","templateLock":"all","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-column is-vertically-aligned-top" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:26%"><!-- wp:image {"aspectRatio":"1","scale":"contain"} -->
+<figure class="wp-block-image"><img alt="" style="aspect-ratio:1;object-fit:contain"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"stretch","width":"74%","style":{"spacing":{"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:var(--wp--preset--spacing--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40);flex-basis:74%"><!-- wp:spacer {"height":"1rem"} -->
+<div style="height:1rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+<h5 class="wp-block-heading" style="margin-top:0;margin-bottom:0">Neque porro quisquam</h5>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum rhoncus aliquam. Morbi at libero pellentesque, fermentum erat at, tincidunt nunc. Proin pulvinar turpis vel turpis maximus fermentum. Phasellus ut sagittis nisi, vel accumsan velit.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"0.5rem"} -->
+<div style="height:0.5rem" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}}}} -->
+<p style="padding-top:0;padding-bottom:0"><a href="https://localhost/ticorp/test2/" data-type="page" data-id="15259">Neque porro quisquan</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

src/styles/block-overrides.scss

@@ -24,7 +24,6 @@
 	}
 }
 
-
 .is-style-heading-callout {
 	position: relative;
 	margin-top: 3rem;

src/styles/index.scss

@@ -3,4 +3,4 @@
 @import "./variables"; // import your variables.scss file
 @import "@bcgov/bc-sans/css/BC_Sans.css";
 @import "./block-overrides";
-
+@import "./patterns/dswp-large-image-text"

src/styles/patterns/dswp-large-image-text.scss

@@ -0,0 +1,43 @@
+@media (max-width: $break-medium) {
+
+	.dswp-large-image-text {
+
+		img {
+			width: 100% !important;
+
+			// Apply padding only for the mobile range
+			@media (min-width: $break-mobile) {
+				padding: 4rem !important;
+			}
+		}
+	}
+}
+
+.dswp-large-image-text {
+
+	// Base styles
+	transition: box-shadow 0.3s ease-in; // Transition for the default state
+
+	&:hover {
+		transition: box-shadow 0.5s ease-out; // Transition for hover state
+		box-shadow:
+			0 1.2px 3.6px 0 rgba(0, 0, 0, 0.1),
+			0 6.4px 14.4px 0 rgba(0, 0, 0, 0.13); // New box-shadow on hover
+	}
+
+	gap: 0;
+	border-radius: 8px;
+	border: 1px solid var(--dswp-surface-color-border-default) !important;
+
+	img {
+		height: 222px;
+		border-radius: 8px 0 0 8px;
+		padding: 1rem;
+		background: var(--dswp-theme-gray-10);
+	}
+
+	:where(figure) {
+		margin: 0 0 0;
+	}
+}
+

src/styles/variables.scss

@@ -31,6 +31,8 @@
 	--dswp-icons-color-danger: var(--bcds-icons-color-danger);
 	--dswp-icons-color-success: var(--bcds-icons-color-success);
 	--dswp-icons-color-warning: var(--bcds-icons-color-warning);
+	--dswp-surface-color-border-default: var(--bcds-surface-color-border-default);
+	--dswp-theme-gray-10: var(--bcds-theme-gray-10);
 	// Layout
 	--dswp-layout-content-size: 1200px;
 	--dswp-layout-padding-none: var(--bcds-layout-padding-none);