Feature/dswp 55 horizontal card pattern

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
 

dist/index-rtl.css

@@ -277,16 +277,17 @@
   --dswp-typography-color-primary: var(--bcds-typography-color-primary);
   --dswp-surface-color-primary-button-default: var(--bcds-surface-color-primary-button-default);
   --dswp-surface-color-primary-button-hover: var(--bcds-surface-color-primary-button-hover);
-  --dswp-surface-color-secondary-button-default:var(--bcds-surface-color-secondary-button-default);
+  --dswp-surface-color-secondary-button-default: var(--bcds-surface-color-secondary-button-default);
   --dswp-surface-color-secondary-button-hover: var(--bcds-surface-color-secondary-button-hover);
   --dswp-banner-background-dark: #292929;
-  --dswp-surface-color-border-dark:var(--bcds-surface-color-border-dark);
+  --dswp-surface-color-border-dark: var(--bcds-surface-color-border-dark);
   --dswp-font-dark: #201f1e;
   --dswp-theme-primary-gold: var(--bcds-theme-primary-gold);
   --dswp-icons-color-info: var(--bcds-icons-color-info);
   --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-layout-content-size: 1200px;
   --dswp-layout-padding-none: var(--bcds-layout-padding-none);
   --dswp-layout-margin-xlarge: var(--bcds-layout-margin-xlarge);
@@ -340,6 +341,36 @@
 .dswp-text-image-flipped-block-custom-layout .wp-block-columns {
   justify-content: space-between;
 }
+
+@media (max-width: 782px) {
+  .dswp-large-image-text img {
+    width: 100% !important;
+  }
+}
+@media (min-width: 480px) and (max-width: 782px) {
+  .dswp-large-image-text img {
+    padding: 4rem !important;
+  }
+}
+.dswp-large-image-text {
+  transition: box-shadow 0.3s ease-in;
+  gap: 0;
+  border-radius: 8px;
+  border: 1px solid var(--dswp-surface-color-border-default) !important;
+}
+.dswp-large-image-text:hover {
+  transition: box-shadow 0.5s ease-out;
+  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);
+}
+.dswp-large-image-text img {
+  height: 222px;
+  border-radius: 0 8px 8px 0;
+  padding: 1rem;
+  background: #faf9f8;
+}
+.dswp-large-image-text :where(figure) {
+  margin: 0 0 0;
+}
 /*!************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/@bcgov/bc-sans/css/BCSans.css ***!
   \************************************************************************************************************************************************************************************************/

dist/index.asset.php

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

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 example_theme_restrict_locking_ui( $settings ) {
+    $settings['canLockBlocks'] = current_user_can( 'activate_plugins' );
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'example_theme_restrict_locking_ui', 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 {"style":{"typography":{"fontSize":"16px"}}} -->
+<p style="font-size:16px">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,49 @@
+@media (max-width: $break-medium) {
+
+	.dswp-large-image-text {
+
+		img {
+			width: 100% !important;
+		}
+	}
+
+}
+
+@media (min-width: $break-mobile) and (max-width: $break-medium) {
+
+	.dswp-large-image-text {
+
+		img {
+			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: #faf9f8;
+	}
+
+	:where(figure) {
+		margin: 0 0 0;
+	}
+}
+

src/styles/variables.scss

@@ -31,6 +31,7 @@
 	--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);
 	// Layout
 	--dswp-layout-content-size: 1200px;
 	--dswp-layout-padding-none: var(--bcds-layout-padding-none);