Skip to content

Commit

Permalink
Feature/scaffolding improvements (#370)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@jomurgel @gregrickaby
jomurgel authored and gregrickaby committed May 7, 2018
1 parent ce979d1 commit 929d288
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 23 deletions.
48 changes: 34 additions & 14 deletions assets/sass/base/_scaffolding.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
// Scaffolding Library
//--------------------------------------------------------------

//-----------------------------------------
// IE11 Tweak
//-----------------------------------------
.page-template-template-scaffolding .primary {
float: none;
width: 100%;
}

//-----------------------------------------
// Scaffolding defaults
//-----------------------------------------
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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%;
Expand Down
24 changes: 22 additions & 2 deletions inc/scaffolding.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; ?>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
17 changes: 13 additions & 4 deletions inc/template-tags.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) {
Expand Down Expand Up @@ -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();
}

/**
Expand Down
20 changes: 20 additions & 0 deletions template-parts/scaffolding/scaffolding-forms.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
18 changes: 15 additions & 3 deletions template-parts/scaffolding/scaffolding-icons.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
),
Expand All @@ -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',
) ),
) );
?>
Expand Down
8 changes: 8 additions & 0 deletions template-parts/scaffolding/scaffolding-typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 929d288

Please sign in to comment.