From 4eb67b8e680a85b1dae3fadf51ff2cfe99a4c2b6 Mon Sep 17 00:00:00 2001
From: Reda Lemeden <reda@thoughtbot.com>
Date: Sun, 20 Jul 2014 02:18:46 +0000
Subject: [PATCH] Add display mixin

- Closes #100
---
 app/assets/stylesheets/_neat.scss         |  1 +
 app/assets/stylesheets/grid/_display.scss | 28 +++++++++++++++++++++++
 app/assets/stylesheets/grid/_row.scss     |  6 ++++-
 spec/neat/display_spec.rb                 | 19 +++++++++++++++
 spec/neat/media_spec.rb                   |  2 +-
 test/display.scss                         | 15 ++++++++++++
 6 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/grid/_display.scss
 create mode 100644 spec/neat/display_spec.rb
 create mode 100644 test/display.scss

diff --git a/app/assets/stylesheets/_neat.scss b/app/assets/stylesheets/_neat.scss
index d48ef297..7fb82bf0 100644
--- a/app/assets/stylesheets/_neat.scss
+++ b/app/assets/stylesheets/_neat.scss
@@ -19,3 +19,4 @@
 @import "grid/media";
 @import "grid/to-deprecate";
 @import "grid/visual-grid";
+@import "grid/display";
diff --git a/app/assets/stylesheets/grid/_display.scss b/app/assets/stylesheets/grid/_display.scss
new file mode 100644
index 00000000..23624b55
--- /dev/null
+++ b/app/assets/stylesheets/grid/_display.scss
@@ -0,0 +1,28 @@
+/**
+ * Changes the display property used by other mixins called in the code block argument.
+ *
+ * @param {String} $display (block) - Display value to be used within the block. Can be `table` or `block`.
+ *
+ * @example scss
+ *   @include display(table) {
+ *    .display-table {
+ *      @include span-columns(6);
+ *     }
+ *   }
+ *
+ * @example css
+ *   // CSS
+ *   .display-table {
+ *      display: table-cell;
+ *      ...
+ *   }
+ */
+
+@mixin display($display: block) {
+  $scope-display: $container-display-table;
+  $container-display-table: if($display == table, true, false) !global;
+
+  @content;
+
+  $container-display-table: $scope-display !global;
+}
diff --git a/app/assets/stylesheets/grid/_row.scss b/app/assets/stylesheets/grid/_row.scss
index f615a9fc..6569f427 100644
--- a/app/assets/stylesheets/grid/_row.scss
+++ b/app/assets/stylesheets/grid/_row.scss
@@ -1,6 +1,10 @@
-@mixin row($display: block, $direction: $default-layout-direction) {
+@mixin row($display: default, $direction: $default-layout-direction) {
   $layout-direction: $direction !global;
 
+  @if $display != default {
+    @warn "The $display argument will be deprecated in future versions in favor of the display(){...} mixin."
+  }
+
   @if $display == table {
     display: table;
     @include fill-parent;
diff --git a/spec/neat/display_spec.rb b/spec/neat/display_spec.rb
new file mode 100644
index 00000000..69bb2aca
--- /dev/null
+++ b/spec/neat/display_spec.rb
@@ -0,0 +1,19 @@
+require 'spec_helper'
+
+describe "@include display() {...}" do
+  before(:all) do
+    ParserSupport.parse_file("display")
+  end
+
+  context "with argument (table)" do
+    it "changes display value to table" do
+      expect('.display-table-block').to have_rule('display: table-cell')
+    end
+  end
+
+  context "whith nested call and argument (block)" do
+    it "changes display value to block" do
+      expect('.display-nested-block').to have_rule('display: block')
+    end
+  end
+end
diff --git a/spec/neat/media_spec.rb b/spec/neat/media_spec.rb
index 62f74bbd..6ab44b5a 100644
--- a/spec/neat/media_spec.rb
+++ b/spec/neat/media_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe "@include media()" do
+describe "@include media() {...}" do
   before(:all) do
     ParserSupport.parse_file("media")
   end
diff --git a/test/display.scss b/test/display.scss
new file mode 100644
index 00000000..1f47238c
--- /dev/null
+++ b/test/display.scss
@@ -0,0 +1,15 @@
+@import 'setup';
+
+@include display(table) {
+  .display-table-block {
+    @include span-columns(6);
+  }
+}
+
+@include display(table) {
+  @include display(block) {
+    .display-nested-block {
+      @include span-columns(6);
+    }
+  }
+}