Merge pull request #18 from cagov/homepg-design-review

Homepg design review
cagov · Jun 11, 2021 · 3196e89 · 3196e89
2 parents 9b944cb + 5b735bb
commit 3196e89
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 54 deletions.
diff --git a/blocks/card/block.js b/blocks/card/block.js
@@ -17,9 +17,7 @@
     category: 'ca-design-system',
     attributes: {
       title: {
-        type: 'array',
-        source: 'children',
-        selector: 'h3'
+        type: 'string'
       },
       url: {
         type: 'string'
@@ -28,7 +26,7 @@
     example: {
       attributes: {
         title: __('Card title', 'ca-design-system'),
-        body: __('Card body', 'ca-design-system')
+        url: __('CardUrl', 'ca-design-system')
       }
     },
     edit: function (props) {
@@ -100,9 +98,10 @@
         el('div',
           { className: 'cagov-card cagov-stack' },
           el(RichText, {
-            tagName: 'h3',
+            tagName: 'span',
             inline: true,
             withoutInteractiveFormatting: true,
+            className: 'card-text',
             placeholder: __(
               'Write card title…',
               'ca-design-system'
@@ -114,37 +113,6 @@
           })
         )
       ];
-    },
-    save: function (props) {
-      const attributes = props.attributes;
-      return el('a', {
-        href: attributes.url,
-        className: 'no-deco cagov-card'
-      },
-      el(RichText.Content, {
-        tagName: 'h3',
-        value: attributes.title
-      }),
-      el('svg', {
-        xmlns: 'http://www.w3.org/2000/svg',
-        'enable-background': 'new 0 0 24 24',
-        height: '24px',
-        viewBox: '0 0 24 24',
-        width: '24px'
-      },
-      el('g', {},
-        el('path', {
-          d: 'M0,0h24v24H0V0z',
-          fill: 'none'
-        })
-      ),
-      el('g', {},
-        el('polygon', {
-          points: '6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12'
-        })
-      )
-      )
-      );
     }
   });
 })(

diff --git a/blocks/card/plugin.php b/blocks/card/plugin.php
@@ -26,6 +26,18 @@ function ca_design_system_gutenberg_block_card() {
  *
  * Passes translations to JavaScript.
  */
+function cagov_card_dynamic_render_callback( $block_attributes, $content ) {
+	// print_r($block_attributes);
+	$title = $block_attributes["title"];
+	$url = $block_attributes["url"];
+	return <<<EOT
+		<a href="$url" class="wp-block-ca-design-system-card no-deco cagov-card">
+			<span class="card-text">$title</span>
+			<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><g><path d="M0,0h24v24H0V0z" fill="none"></path></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"></polygon></g></svg>
+		</a>
+	EOT;
+}
+
 function ca_design_system_register_card() {
 
 	if ( ! function_exists( 'register_block_type' ) ) {
@@ -58,6 +70,7 @@ function ca_design_system_register_card() {
 		'style' => 'cagov-card',
 		'editor_style' => 'cagov-card-editor',
 		'editor_script' => 'california-design-system',
+		'render_callback' => 'cagov_card_dynamic_render_callback'
 	) );
 
 }

diff --git a/blocks/card/style.css b/blocks/card/style.css
@@ -7,7 +7,7 @@
 }
 
 .cagov-card {
-  border: 1px solid;
+  border: 1px solid #ededef;
   padding: 1rem;
   border-bottom: 0.3rem solid #33705B;
   border-bottom: 0.3rem solid var(--primary-color, #33705B);
@@ -19,18 +19,22 @@
   justify-content: space-between;
 }
 
-.cagov-card h3 {
+.cagov-card .card-text {
   color: #33705B;
   /* defined here for when css vars are not supported */
   color: var(--primary-color, #33705B) !important;
   /* variable used with fallback in case it is not defined */
   /* color: #33705B !important; */
+  font-size: 1.75rem;
+  line-height: 40px;
+  padding: 0;
+  margin: 0;
 }
 .cagov-card svg {
-  min-width: 24px;
   fill: #33705B;
   fill: var(--primary-color, #33705B);
-  margin-top: 0.5em;
+  width: 1rem;
+  margin-top: .2rem;
   margin-left: 1rem;
 }
 

diff --git a/blocks/hero/style.css b/blocks/hero/style.css
@@ -1,6 +1,7 @@
-.stack * + * {
+.cagov-stack * + * {
   margin-top: 1.5rem;
 }
+.cagov-stack h2 { padding-bottom: 0; }
 .cagov-p-2 {
   padding: 2rem;
 }
@@ -17,7 +18,7 @@
 .cagov-featured-section .components-button.image-button {
   display: block;
   height: 100%;
-  margin: 0;
+  margin: 0 0 3rem 0;
   padding: 0;
 }
 .cagov-featured-image {
@@ -38,27 +39,30 @@
   background-color: var(--primary-color, #33705B);
   /* variable used with fallback in case it is not defined */
   color: white;
-  padding: 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   font-weight: bold;
   display: inline-block;
   border: none;
   text-decoration: none;
 }
-
-.cagov-hero-body-content .wp-block-button__link {
-  overflow-wrap: normal;
-  white-space: nowrap;
-}
-
 .cagov-hero-body-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
-  background-color: #33705B !important;
-  color: #fff !important;
-  padding: 1rem;
-  border-radius: .5rem !important;
+  background-color: #33705B;
+  /* defined here for when css vars are not supported */
+  background-color: var(--primary-color, #33705B);
+  /* variable used with fallback in case it is not defined */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
   font-weight: bold;
   display: inline-block;
   border: none;
+  text-decoration: underline;
+}
+
+.cagov-hero-body-content .wp-block-button__link {
+  overflow-wrap: normal;
+  white-space: nowrap;
 }
 
 /* sidebar layout */
@@ -93,6 +97,6 @@
 } 
 @media (min-width: 1200px) {
   .cagov-featured-sidebar {
-    max-width: 36%;
+    max-width: 34%;
   }
 }
diff --git a/ca-design-system-gutenberg-blocks b/ca-design-system-gutenberg-blocks
@@ -0,0 +1 @@
+ca-design-system-gutenberg-blocks