From 9ee6a30d5f16c3fa074984d177358fd2d74c4074 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 13 Mar 2018 13:50:44 -0400
Subject: [PATCH] Add center and padding options to container plugin

---
 __tests__/containerPlugin.test.js | 162 ++++++++++++++++++++++++++++++
 defaultConfig.stub.js             |   5 +-
 src/plugins/container.js          |  10 +-
 3 files changed, 173 insertions(+), 4 deletions(-)
 create mode 100644 __tests__/containerPlugin.test.js

diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js
new file mode 100644
index 000000000..ef7ac669f
--- /dev/null
+++ b/__tests__/containerPlugin.test.js
@@ -0,0 +1,162 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+import processPlugins from '../src/util/processPlugins'
+import container from '../src/plugins/container'
+
+function css(nodes) {
+  return postcss.root({ nodes }).toString()
+}
+
+function processPluginsWithValidConfig(config) {
+  return processPlugins(
+    _.defaultsDeep(config, {
+      screens: {
+        sm: '576px',
+        md: '768px',
+        lg: '992px',
+        xl: '1200px',
+      },
+      options: {
+        prefix: '',
+        important: false,
+        separator: ':',
+      },
+    })
+  )
+}
+
+test('options are not required', () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [container()],
+  })
+
+  expect(css(components)).toMatchCss(`
+    .container { width: 100% }
+    @media (min-width: 576px) {
+      .container { max-width: 576px }
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 768px }
+    }
+    @media (min-width: 992px) {
+      .container { max-width: 992px }
+    }
+    @media (min-width: 1200px) {
+      .container { max-width: 1200px }
+    }
+  `)
+})
+
+test('screens can be specified explicitly', () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [
+      container({
+        screens: {
+          sm: '400px',
+          lg: '500px',
+        },
+      }),
+    ],
+  })
+
+  expect(css(components)).toMatchCss(`
+    .container { width: 100% }
+    @media (min-width: 400px) {
+      .container { max-width: 400px }
+    }
+    @media (min-width: 500px) {
+      .container { max-width: 500px }
+    }
+  `)
+})
+
+test('the container can be centered by default', () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [
+      container({
+        center: true,
+      }),
+    ],
+  })
+
+  expect(css(components)).toMatchCss(`
+    .container {
+      width: 100%;
+      margin-right: auto;
+      margin-left: auto
+    }
+    @media (min-width: 576px) {
+      .container { max-width: 576px }
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 768px }
+    }
+    @media (min-width: 992px) {
+      .container { max-width: 992px }
+    }
+    @media (min-width: 1200px) {
+      .container { max-width: 1200px }
+    }
+  `)
+})
+
+test('horizontal padding can be included by default', () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [
+      container({
+        padding: '2rem',
+      }),
+    ],
+  })
+
+  expect(css(components)).toMatchCss(`
+    .container {
+      width: 100%;
+      padding-right: 2rem;
+      padding-left: 2rem
+    }
+    @media (min-width: 576px) {
+      .container { max-width: 576px }
+    }
+    @media (min-width: 768px) {
+      .container { max-width: 768px }
+    }
+    @media (min-width: 992px) {
+      .container { max-width: 992px }
+    }
+    @media (min-width: 1200px) {
+      .container { max-width: 1200px }
+    }
+  `)
+})
+
+test('setting all options at once', () => {
+  const [components] = processPluginsWithValidConfig({
+    plugins: [
+      container({
+        screens: {
+          sm: '400px',
+          lg: '500px',
+        },
+        center: true,
+        padding: '2rem',
+      }),
+    ],
+  })
+
+  expect(css(components)).toMatchCss(`
+    .container {
+      width: 100%;
+      margin-right: auto;
+      margin-left: auto;
+      padding-right: 2rem;
+      padding-left: 2rem
+    }
+    @media (min-width: 400px) {
+      .container { max-width: 400px }
+    }
+    @media (min-width: 500px) {
+      .container { max-width: 500px }
+    }
+  `)
+})
diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js
index d83d7e6bc..b2cf9fc6e 100644
--- a/defaultConfig.stub.js
+++ b/defaultConfig.stub.js
@@ -899,7 +899,10 @@ module.exports = {
   */
 
   plugins: [
-    require('./plugins/container')(),
+    require('./plugins/container')({
+      // center: true,
+      // padding: '1rem',
+    }),
   ],
 
 
diff --git a/src/plugins/container.js b/src/plugins/container.js
index 8caad7b56..235888725 100644
--- a/src/plugins/container.js
+++ b/src/plugins/container.js
@@ -40,9 +40,13 @@ module.exports = function(options) {
 
     addComponents([
       {
-        '.container': {
-          width: '100%',
-        },
+        '.container': Object.assign(
+          { width: '100%' },
+          _.get(options, 'center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
+          _.has(options, 'padding')
+            ? { paddingRight: options.padding, paddingLeft: options.padding }
+            : {}
+        ),
       },
       ...atRules,
     ])