@project-r/styleguide - npm Package Compare versions

Comparing version 0.2.7 to 0.2.8

lib/components/Button/index.js

@@ -66,5 +66,7 @@ 'use strict';
 });
+var blockStyle = (0, _glamor.css)({
+  display: 'block',
+  width: '100%'
+});
 var bigStyle = (0, _glamor.css)({
-  display: 'block',
-  width: '100%',
   fontSize: 22,
@@ -81,2 +83,3 @@ height: 80,
       big = _ref.big,
+      block = _ref.block,
       disabled = _ref.disabled,
@@ -86,3 +89,3 @@ sim = _ref.simulate;
   var simulations = sim ? (0, _glamor.simulate)(sim) : {};
-  var style = (0, _glamor.merge)(fieldStyle, primary && primaryStyle, big && bigStyle);
+  var style = (0, _glamor.merge)(fieldStyle, primary && primaryStyle, block && blockStyle, big && bigStyle);
 
@@ -89,0 +92,0 @@ return _react2.default.createElement(

lib/theme/mediaQueries.js

@@ -1,6 +0,9 @@
-'use strict';
+"use strict";
 
 exports.__esModule = true;
-var onlyS = exports.onlyS = '@media only screen and (max-width: 767px)';
-var mUp = exports.mUp = '@media only screen and (min-width: 768px)';
-var lUp = exports.lUp = '@media only screen and (min-width: 1025px)';
+var mBreakPoint = exports.mBreakPoint = 768;
+var lBreakPoint = exports.lBreakPoint = 1025;
+
+var onlyS = exports.onlyS = "@media only screen and (max-width: " + (mBreakPoint - 1) + "px)";
+var mUp = exports.mUp = "@media only screen and (min-width: " + mBreakPoint + "px)";
+var lUp = exports.lUp = "@media only screen and (min-width: " + lBreakPoint + "px)";

package.json

 {
   "name": "@project-r/styleguide",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "dependencies": {
@@ -5,0 +5,0 @@ "react-autocomplete": "^1.4.1"

src/components/Button/docs.md

@@ -69,1 +69,15 @@ ##  Primär
 
+## Block
+
+
+```react
+<Button block>
+  Volle Breite
+</Button>
+```
+
+```react
+<Button block big>
+  Päng, Päng!
+</Button>
+```

src/components/Button/index.js

@@ -50,5 +50,7 @@ import React from 'react'
 })
+const blockStyle = css({
+  display: 'block',
+  width: '100%'
+})
 const bigStyle = css({
-  display: 'block',
-  width: '100%',
   fontSize: 22,
@@ -59,5 +61,10 @@ height: 80,
 
-const Button = ({onClick, type, children, primary, big, disabled, simulate: sim}) => {
+const Button = ({onClick, type, children, primary, big, block, disabled, simulate: sim}) => {
   const simulations = sim ? simulate(sim) : {}
-  const style = merge(fieldStyle, primary && primaryStyle, big && bigStyle)
+  const style = merge(
+    fieldStyle,
+    primary && primaryStyle,
+    block && blockStyle,
+    big && bigStyle
+  )
 
@@ -64,0 +71,0 @@ return (

src/theme/mediaQueries.js

@@ -1,3 +0,6 @@
-export const onlyS = '@media only screen and (max-width: 767px)'
-export const mUp = '@media only screen and (min-width: 768px)'
-export const lUp = '@media only screen and (min-width: 1025px)'
+export const mBreakPoint = 768
+export const lBreakPoint = 1025
+
+export const onlyS = `@media only screen and (max-width: ${mBreakPoint - 1}px)`
+export const mUp = `@media only screen and (min-width: ${mBreakPoint}px)`
+export const lUp = `@media only screen and (min-width: ${lBreakPoint}px)`

No alert changes

Improved metrics

Total package byte prevSize

9442328

increased by0.01%

Lines of code

1866

increased by0.76%

No dependency changes