Feature/dswp 59 pattern vertical card (#41)

* Added dswp-vertical-card pattern

* removed compoer test and fixed pattern.

* updated pattern

* updated pattern

* PR suggestion

CHANGELOG.md

@@ -7,7 +7,8 @@
 - Added icon-with-excerpt pattern
 - Added dswp-horizontal-card-large-img-left pattern
 - Added dswp-horizontal-card-large-img-right pattern
-
+- Added dswp-vertical-card pattern
+- 
 ## 1.3.0 October 15, 2024
 
 - Integrate reusable unit tests from WordPress utils ([DESCW-2664](https://apps.itsm.gov.bc.ca/jira/browse/DESCW-2664))

composer.json

@@ -41,8 +41,7 @@
             "npm run fix:js",
             "npm run fix:css",
             "npm run test",
-            "npm run build",
-            "composer test"
+            "npm run build"
         ],
         "phpcs": [
             "Bcgov\\Script\\Standards::phpcs"

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '88c293c1c722021720f4');
+<?php return array('dependencies' => array(), 'version' => '38a19e16779f3369c1d9');

patterns/dswp-vertical-card.php

@@ -0,0 +1,133 @@
+<?php
+/**
+ * Title: DSWP Vertical Card
+ * Slug: design-system-wordpress-theme/dswp-vertical-card
+ * Categories: columns
+ *
+ * @package Design-System-WordPress-Theme
+ */
+?>
+<!-- wp:group {"className":"alignfull","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull"><!-- wp:group {"layout":{"type":"default"}} -->
+    <div class="wp-block-group"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|40","left":"0"},"padding":{"right":"0","left":"0"}}},"className":"dswp-vertical-cards"} -->
+        <div class="wp-block-columns alignwide dswp-vertical-cards" style="padding-right:0;padding-left:0"><!-- wp:column {"width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"0rem","right":"0rem"}},"border":{"width":"0px","style":"none"}},"layout":{"type":"default"}} -->
+            <div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:var(--wp--preset--spacing--10);padding-right:0rem;padding-bottom:var(--wp--preset--spacing--10);padding-left:0rem"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}},"border":{"radius":"0px","color":"#d9d9d9","width":"1px"}},"className":"dswp-vertical-card","layout":{"type":"constrained","contentSize":"111px","justifyContent":"left","wideSize":""}} -->
+                <div class="wp-block-group alignfull dswp-vertical-card has-border-color" style="border-color:#d9d9d9;border-width:1px;border-radius:0px;padding-right:0;padding-left:0"><!-- wp:image {"align":"full","id":15402,"sizeSlug":"full","linkDestination":"none","className":"size-full"} -->
+                    <figure class="wp-block-image alignfull size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt="" /></figure>
+                    <!-- /wp:image -->
+
+                    <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+                    <div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"left","level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"var:preset|spacing|50","bottom":"0"}}},"textColor":"typography-primary-color","className":"wp-block-heading is-style-default","fontSize":"xx-large"} -->
+                        <h5 class="wp-block-heading has-text-align-left is-style-default has-typography-primary-color-color has-text-color has-link-color has-xx-large-font-size" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;padding-top:0;padding-bottom:0">Neque porro quisquam</h5>
+                        <!-- /wp:heading -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40","left":"0","right":"0"},"padding":{"right":"0","left":"0"}},"typography":{"lineHeight":"1.8"}}} -->
+                        <p style="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0;padding-right:0;padding-left:0;line-height:1.8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie a mi eu dictum. Sed eget dictum massa.</p>
+                        <!-- /wp:paragraph -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+                        <p style="margin-top:0;margin-bottom:0"><a href="#example" data-type="page" data-id="15259">Neque porro quisquam</a></p>
+                        <!-- /wp:paragraph -->
+                    </div>
+                    <!-- /wp:group -->
+
+                    <!-- wp:spacer {"height":"27px"} -->
+                    <div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
+                    <!-- /wp:spacer -->
+                </div>
+                <!-- /wp:group -->
+            </div>
+            <!-- /wp:column -->
+
+            <!-- wp:column {"width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"0rem","right":"0rem"}},"border":{"width":"0px","style":"none"}},"layout":{"type":"default"}} -->
+            <div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:var(--wp--preset--spacing--10);padding-right:0rem;padding-bottom:var(--wp--preset--spacing--10);padding-left:0rem"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}},"border":{"radius":"0px","color":"#d9d9d9","width":"1px"}},"className":"dswp-vertical-card","layout":{"type":"constrained","contentSize":"111px","justifyContent":"left","wideSize":""}} -->
+                <div class="wp-block-group alignfull dswp-vertical-card has-border-color" style="border-color:#d9d9d9;border-width:1px;border-radius:0px;padding-right:0;padding-left:0"><!-- wp:image {"align":"full","id":15402,"sizeSlug":"full","linkDestination":"none","className":"size-full"} -->
+                    <figure class="wp-block-image alignfull size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt="" /></figure>
+                    <!-- /wp:image -->
+
+                    <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+                    <div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"left","level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"var:preset|spacing|50","bottom":"0"}}},"textColor":"typography-primary-color","className":"wp-block-heading is-style-default","fontSize":"xx-large"} -->
+                        <h5 class="wp-block-heading has-text-align-left is-style-default has-typography-primary-color-color has-text-color has-link-color has-xx-large-font-size" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;padding-top:0;padding-bottom:0">Neque porro quisquam</h5>
+                        <!-- /wp:heading -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40","left":"0","right":"0"},"padding":{"right":"0","left":"0"}},"typography":{"lineHeight":"1.8"}}} -->
+                        <p style="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0;padding-right:0;padding-left:0;line-height:1.8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie a mi eu dictum. Sed eget dictum massa.</p>
+                        <!-- /wp:paragraph -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+                        <p style="margin-top:0;margin-bottom:0"><a href="#example" data-type="page" data-id="15259">Neque porro quisquam</a></p>
+                        <!-- /wp:paragraph -->
+                    </div>
+                    <!-- /wp:group -->
+
+                    <!-- wp:spacer {"height":"27px"} -->
+                    <div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
+                    <!-- /wp:spacer -->
+                </div>
+                <!-- /wp:group -->
+            </div>
+            <!-- /wp:column -->
+
+            <!-- wp:column {"width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"0rem","right":"0rem"}},"border":{"width":"0px","style":"none"}},"layout":{"type":"default"}} -->
+            <div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:var(--wp--preset--spacing--10);padding-right:0rem;padding-bottom:var(--wp--preset--spacing--10);padding-left:0rem"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}},"border":{"radius":"0px","color":"#d9d9d9","width":"1px"}},"className":"dswp-vertical-card","layout":{"type":"constrained","contentSize":"111px","justifyContent":"left","wideSize":""}} -->
+                <div class="wp-block-group alignfull dswp-vertical-card has-border-color" style="border-color:#d9d9d9;border-width:1px;border-radius:0px;padding-right:0;padding-left:0"><!-- wp:image {"align":"full","id":15402,"sizeSlug":"full","linkDestination":"none","className":"size-full"} -->
+                    <figure class="wp-block-image alignfull size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt="" /></figure>
+                    <!-- /wp:image -->
+
+                    <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+                    <div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"left","level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"var:preset|spacing|50","bottom":"0"}}},"textColor":"typography-primary-color","className":"wp-block-heading is-style-default","fontSize":"xx-large"} -->
+                        <h5 class="wp-block-heading has-text-align-left is-style-default has-typography-primary-color-color has-text-color has-link-color has-xx-large-font-size" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;padding-top:0;padding-bottom:0">Neque porro quisquam</h5>
+                        <!-- /wp:heading -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40","left":"0","right":"0"},"padding":{"right":"0","left":"0"}},"typography":{"lineHeight":"1.8"}}} -->
+                        <p style="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0;padding-right:0;padding-left:0;line-height:1.8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie a mi eu dictum. Sed eget dictum massa.</p>
+                        <!-- /wp:paragraph -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+                        <p style="margin-top:0;margin-bottom:0"><a href="#example" data-type="page" data-id="15259">Neque porro quisquam</a></p>
+                        <!-- /wp:paragraph -->
+                    </div>
+                    <!-- /wp:group -->
+
+                    <!-- wp:spacer {"height":"27px"} -->
+                    <div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
+                    <!-- /wp:spacer -->
+                </div>
+                <!-- /wp:group -->
+            </div>
+            <!-- /wp:column -->
+
+            <!-- wp:column {"width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"0rem","right":"0rem"}},"border":{"width":"0px","style":"none"}},"layout":{"type":"default"}} -->
+            <div class="wp-block-column" style="border-style:none;border-width:0px;padding-top:var(--wp--preset--spacing--10);padding-right:0rem;padding-bottom:var(--wp--preset--spacing--10);padding-left:0rem"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}},"border":{"radius":"0px","color":"#d9d9d9","width":"1px"}},"className":"dswp-vertical-card","layout":{"type":"constrained","contentSize":"111px","justifyContent":"left","wideSize":""}} -->
+                <div class="wp-block-group alignfull dswp-vertical-card has-border-color" style="border-color:#d9d9d9;border-width:1px;border-radius:0px;padding-right:0;padding-left:0"><!-- wp:image {"align":"full","id":15402,"sizeSlug":"full","linkDestination":"none","className":"size-full"} -->
+                    <figure class="wp-block-image alignfull size-full"><img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/square-256.png' ); ?>" alt="" /></figure>
+                    <!-- /wp:image -->
+
+                    <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
+                    <div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:heading {"textAlign":"left","level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|typography-primary-color"}}},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"var:preset|spacing|50","bottom":"0"}}},"textColor":"typography-primary-color","className":"wp-block-heading is-style-default","fontSize":"xx-large"} -->
+                        <h5 class="wp-block-heading has-text-align-left is-style-default has-typography-primary-color-color has-text-color has-link-color has-xx-large-font-size" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0;padding-top:0;padding-bottom:0">Neque porro quisquam</h5>
+                        <!-- /wp:heading -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|40","left":"0","right":"0"},"padding":{"right":"0","left":"0"}},"typography":{"lineHeight":"1.8"}}} -->
+                        <p style="margin-top:var(--wp--preset--spacing--20);margin-right:0;margin-bottom:var(--wp--preset--spacing--40);margin-left:0;padding-right:0;padding-left:0;line-height:1.8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie a mi eu dictum. Sed eget dictum massa.</p>
+                        <!-- /wp:paragraph -->
+
+                        <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
+                        <p style="margin-top:0;margin-bottom:0"><a href="#example" data-type="page" data-id="15259">Neque porro quisquam</a></p>
+                        <!-- /wp:paragraph -->
+                    </div>
+                    <!-- /wp:group -->
+
+                    <!-- wp:spacer {"height":"27px"} -->
+                    <div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
+                    <!-- /wp:spacer -->
+                </div>
+                <!-- /wp:group -->
+            </div>
+            <!-- /wp:column -->
+        </div>
+        <!-- /wp:columns -->
+    </div>
+    <!-- /wp:group -->
+</div>
+<!-- /wp:group -->

src/styles/index.scss

@@ -6,3 +6,4 @@
 @import "./patterns/dswp-large-image-text";
 @import "./patterns/dswp-icon-with-excerpt";
 @import "./patterns/dswp-horizontal-card-large-img";
+@import "./patterns/dswp-vertical-card";