Merge pull request #24 from hex-digital/develop

Release v2.1.0
hex-digital · Dec 28, 2020 · 2143eb0 · 2143eb0
2 parents 5aa23bb + c4380b3
commit 2143eb0
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 5 deletions.
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
@@ -16,6 +16,9 @@ module.exports = {
         ...theme('space'),
       },
     }),
+    debug: {
+      accessibility: false,
+    },
     frame: {
       ratios: {
         '1:1': '1:1',

diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,7 @@ const addSkipLinkComponent = require('./objects/skip-link');
 
 const addActiveBreakpointUtility = require('./utilities/active-breakpoint');
 const addIntrinsicCenterUtility = require('./utilities/intrinsic-center');
+const addDebugUtility = require('./utilities/debug');
 
 module.exports = plugin(function (params) {
   addClusterComponent(params);
@@ -21,4 +22,5 @@ module.exports = plugin(function (params) {
 
   addActiveBreakpointUtility(params);
   addIntrinsicCenterUtility(params);
+  addDebugUtility(params);
 }, defaultConfig);
diff --git a/src/objects/wrapper.js b/src/objects/wrapper.js
@@ -78,9 +78,11 @@ module.exports = function ({ addComponents, config, theme, variants, e }) {
         ...generatePaddingFor(0),
 
         '&__wide': {
-          marginLeft: 'calc(-75vw / 2 + 100% / 2)',
-          marginRight: 'calc(-75vw / 2 + 100% / 2)',
-          maxWidth: 'none',
+          maxWidth: '100vw',
+          '@screen xl': {
+            marginLeft: 'calc(-90vw / 2 + 100% / 2)',
+            marginRight: 'calc(-90vw / 2 + 100% / 2)',
+          },
         },
         '&__bleed': {
           marginLeft: 'calc(-100vw / 2 + 100% / 2)',

diff --git a/src/utilities/active-breakpoint.js b/src/utilities/active-breakpoint.js
@@ -1,6 +1,6 @@
 const { pluginDisabled } = require('../utilities');
 
-module.exports = function ({ addComponents, config, theme, e }) {
+module.exports = function ({ addUtilities, config, theme, e }) {
   if (process.env.NODE_ENV === 'production') return;
   if (pluginDisabled('activeBreakpoint', config)) return;
 
@@ -48,5 +48,5 @@ module.exports = function ({ addComponents, config, theme, e }) {
       };
     });
 
-  addComponents(components);
+  addUtilities(components);
 };
diff --git a/src/utilities/debug.js b/src/utilities/debug.js
diff --git a/test/src/index.html b/test/src/index.html
@@ -27,6 +27,8 @@ <h1 class="u-text-blue-500 u-mb-4">Lorem Ipsum</h1>
         eleifend, tempus est eu, facilisis turpis. Duis quis sagittis libero. Donec vitae eros ac turpis mattis
         vulputate.</p>
     </div>
+    <div class="u-p-12 u-bg-indigo-300 u-wrapper__wide">This is a wide wrapper</div>
+    <div class="u-p-12 u-bg-blue-300 u-wrapper__bleed">This is a bleed wrapper</div>
   </div>
 </div>
 </body>