From 929d288064c1d4d746606f7a0e023174a494c59d Mon Sep 17 00:00:00 2001
From: jomurgel <jomurgel@users.noreply.github.com>
Date: Mon, 7 May 2018 09:53:04 -0600
Subject: [PATCH] Feature/scaffolding improvements (#370)

* fix styles issues in scaffolding

* fixes heading hierarchy

* adds attributes to svg and title/desc to wp_kses_allowed html for scaffolding as well as select/option to scaffolding allowed html

* adds function to output buffer display svg function

* adds input and select to default scaffolding forms

* adds addtional usage options to svg demo

* adds paragraph to default typography scaffolding

* swap function names
---
 assets/sass/base/_scaffolding.scss            | 48 +++++++++++++------
 inc/scaffolding.php                           | 24 +++++++++-
 inc/template-tags.php                         | 17 +++++--
 .../scaffolding/scaffolding-forms.php         | 20 ++++++++
 .../scaffolding/scaffolding-icons.php         | 18 +++++--
 .../scaffolding/scaffolding-typography.php    |  8 ++++
 6 files changed, 112 insertions(+), 23 deletions(-)

diff --git a/assets/sass/base/_scaffolding.scss b/assets/sass/base/_scaffolding.scss
index 01d0e069d..bb9f9255f 100644
--- a/assets/sass/base/_scaffolding.scss
+++ b/assets/sass/base/_scaffolding.scss
@@ -2,6 +2,14 @@
 // Scaffolding Library
 //--------------------------------------------------------------
 
+//-----------------------------------------
+// IE11 Tweak
+//-----------------------------------------
+.page-template-template-scaffolding .primary {
+	float: none;
+	width: 100%;
+}
+
 //-----------------------------------------
 // Scaffolding defaults
 //-----------------------------------------
@@ -10,7 +18,7 @@
 
 	// The section <header>
 	&-header {
-		border-bottom: rem(1) solid gray;
+		border-bottom: rem(1) solid $color-alto;
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: $gutter;
@@ -40,16 +48,16 @@
 
 		// The <pre> container.
 		pre {
-			background-color: white;
-			border: rem(1) solid lightgray;
-			color: gray;
+			background-color: $color-white;
+			border: rem(1) solid $color-alto;
+			color: $color-silver-chalice;
 			margin: 0 0 $gutter;
 			padding: $gutter;
 		} // pre
 
 		// The <code> container.
 		code {
-			background-color: lightgray;
+			background-color: $color-alto;
 			font-size: rem(13);
 			padding: rem(5);
 		} // code
@@ -72,32 +80,44 @@
 .swatch-container {
 	@include clearfix;
 
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
 	position: relative;
 
 	// Each swatch.
 	.swatch {
-		@include size(100% rem(125));
-		@include span-columns(3);
-
-		border: 1px solid black;
+		border: 1px solid $color-alto;
 		border-radius: rem(5);
+		flex: 0 1 23.875%;
+		height: rem(125);
 		margin-bottom: $gutter;
+		margin-right: 1.5%;
 		position: relative;
 		text-align: center;
 
+		&:nth-child(4n) {
+			margin-right: 0;
+		}
+
 		// The swatch <header>
 		& header {
-			color: black;
-			padding-top: rem(25);
+			align-content: center;
+			color: $color-alto;
+			display: flex;
+			flex-direction: column;
+			height: calc(100% - 39px);
+			justify-content: center;
 		} // header
 
 		// The swatch <footer>
 		& footer {
 			@include position(absolute, null null 0 null);
 
-			background-color: white;
-			border-bottom-left-radius: rem(5);
-			border-bottom-right-radius: rem(5);
+			background-color: $color-white;
+			border-top: 1px solid $color-alto;
+			border-bottom-left-radius: rem(4);
+			border-bottom-right-radius: rem(4);
 			font-size: rem(12);
 			padding: rem(10);
 			width: 100%;
diff --git a/inc/scaffolding.php b/inc/scaffolding.php
index a1b99c20f..cd6576cba 100644
--- a/inc/scaffolding.php
+++ b/inc/scaffolding.php
@@ -38,7 +38,7 @@ function _s_display_scaffolding_section( $args = array() ) {
 
 		<?php if ( $args['title'] ) : ?>
 		<header class="scaffolding-document-header">
-			<h2 class="scaffolding-document-title"><?php echo esc_html( $args['title'] ); ?></h2>
+			<h3 class="scaffolding-document-title"><?php echo esc_html( $args['title'] ); ?></h3>
 			<button type="button" class="scaffolding-button"><?php esc_html_e( 'Details', '_s' ); ?></button>
 		</header><!-- .scaffolding-document-header -->
 		<?php endif; ?>
@@ -111,10 +111,30 @@ function _s_scaffolding_allowed_html() {
 			'id'          => true,
 			'role'        => true,
 			'title'       => true,
+			'fill'        => true,
+			'height'      => true,
+			'width'       => true,
+			'use'         => true,
+			'path'        => true,
 		),
 		'use'   => array(
 			'xlink:href' => true,
 		),
+		'title' => array(
+			'id' => true,
+		),
+		'desc'  => array(
+			'id' => true,
+		),
+		'select' => array(
+			'class'    => true,
+		),
+		'option' => array(
+			'option'   => true,
+			'value'    => true,
+			'selected' => true,
+			'disabled' => true,
+		),
 		'input' => array(
 			'type'        => true,
 			'name'        => true,
@@ -150,7 +170,7 @@ function _s_display_global_scaffolding_section( $args = array() ) {
 
 	<div class="scaffolding-document <?php echo esc_attr( $class ); ?>">
 		<header class="scaffolding-document-header">
-			<h2 class="scaffolding-document-title"><?php echo esc_html( $args['title'] ); ?></h2>
+			<h3 class="scaffolding-document-title"><?php echo esc_html( $args['title'] ); ?></h3>
 		</header>
 
 		<div class="scaffolding-document-content">
diff --git a/inc/template-tags.php b/inc/template-tags.php
index 99488212b..b3e8faf0c 100755
--- a/inc/template-tags.php
+++ b/inc/template-tags.php
@@ -83,12 +83,21 @@ function _s_entry_footer() {
 endif;
 
 /**
- * Display SVG markup.
+ * Display SVG Markup.
+ *
+ * @param array $args The parameters needed to get the SVG.
+ */
+function _s_display_svg( $args = array() ) {
+	echo _s_get_svg( $args ); // WPCS XSS Ok.
+}
+
+/**
+ * Return SVG markup.
  *
  * @param array $args The parameters needed to display the SVG.
  * @return string
  */
-function _s_display_svg( $args = array() ) {
+function _s_get_svg( $args = array() ) {
 
 	// Make sure $args are an array.
 	if ( empty( $args ) ) {
@@ -176,8 +185,8 @@ class="icon icon-<?php echo esc_attr( $args['icon'] ); ?>"
 	</svg>
 
 	<?php
-	// Get the buffer and echo.
-	echo ob_get_clean(); // WPCS XSS OK.
+	// Get the buffer and return.
+	return ob_get_clean();
 }
 
 /**
diff --git a/template-parts/scaffolding/scaffolding-forms.php b/template-parts/scaffolding/scaffolding-forms.php
index 7cef8f15c..de859f504 100644
--- a/template-parts/scaffolding/scaffolding-forms.php
+++ b/template-parts/scaffolding/scaffolding-forms.php
@@ -21,4 +21,24 @@
 			'output'      => get_search_form( $echo ),
 		) );
 	?>
+
+	<?php
+	// Input.
+	_s_display_scaffolding_section( array(
+		'title'       => 'Input',
+		'description' => 'Display a normal input.',
+		'usage'       => '<input type="text">',
+		'output'      => '<input type="text">',
+	) );
+	?>
+
+		<?php
+	// Default Select.
+	_s_display_scaffolding_section( array(
+		'title'       => 'Default Select',
+		'description' => 'Display default select.',
+		'usage'       => '<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>',
+		'output'      => '<select><option value="option1">Option 1</option><option value="option2">Option 2</option></select>',
+	) );
+	?>
 </section>
diff --git a/template-parts/scaffolding/scaffolding-icons.php b/template-parts/scaffolding/scaffolding-icons.php
index 9381419f9..311263020 100644
--- a/template-parts/scaffolding/scaffolding-icons.php
+++ b/template-parts/scaffolding/scaffolding-icons.php
@@ -16,7 +16,14 @@
 	_s_display_scaffolding_section( array(
 		'title'       => 'SVG',
 		'description' => 'Display inline SVGs.',
-		'usage'       => '<?php _s_display_svg( array( \'icon\' => \'facebook-square\' ) ); ?>',
+		'usage'       => '<?php _s_display_svg( array(
+			\'icon\'   => \'facebook-square\',
+			\'title\'  => \'Facebook Icon\',
+			\'desc\'   => \'Facebook social icon svg\',
+			\'height\' => \'50\',
+			\'width\'  => \'50\',
+			\'fill\'   => \'#20739a\',
+		) ); ?>',
 		'parameters'  => array(
 			'$args' => '(required) Configuration arguments.',
 		),
@@ -28,8 +35,13 @@
 			'height' => '(optional) The height of the icon. Default: none',
 			'width'  => '(optional) The width of the icon. Default: none',
 		),
-		'output'      => _s_display_svg( array(
-			'icon' => 'facebook-square',
+		'output'      => _s_get_svg( array(
+			'icon'   => 'facebook-square',
+			'title'  => 'Facebook Icon',
+			'desc'   => 'Facebook social icon svg',
+			'height' => '50',
+			'width'  => '50',
+			'fill'   => '#20739a',
 		) ),
 	) );
 	?>
diff --git a/template-parts/scaffolding/scaffolding-typography.php b/template-parts/scaffolding/scaffolding-typography.php
index 53d1f7dc6..397f63a5a 100644
--- a/template-parts/scaffolding/scaffolding-typography.php
+++ b/template-parts/scaffolding/scaffolding-typography.php
@@ -59,5 +59,13 @@
 		'usage'       => '<h6>This is a headline</h6> or <div class="h6">This is a headline</div>',
 		'output'      => '<h6>This is a headline six</h6>',
 	) );
+
+	// Body.
+	_s_display_scaffolding_section( array(
+		'title'       => 'Paragraph',
+		'description' => 'Display a paragraph',
+		'usage'       => '<p>Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>',
+		'output'      => '<p>Elementum faucibus vehicula id neque magnis scelerisque quam conubia torquent, auctor nisl quis aliquet venenatis sem sagittis morbi eu, fermentum ipsum congue ultrices non dui lectus pulvinar. Sapien etiam convallis urna suscipit euismod pharetra tellus himenaeos, dignissim consectetur cum suspendisse sem ornare eros enim egestas, cubilia venenatis mauris vivamus elit fringilla duis.</p>',
+	) );
 	?>
 </section>