@project-r/styleguide - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

package.json

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

src/components/Grid/docs.md

@@ -6,3 +6,5 @@ ## Containers
 ```react
-<Container>…</Container>
+<Container style={{backgroundColor: 'red'}}>
+  <div style={{backgroundColor: 'darkgreen', height: 20}} />
+</Container>
 ```
@@ -12,11 +14,11 @@
 
-Je nach verfügbarer Fläche nutzen wir ein zwei oder sechs Spalten Grid.
+Je nach verfügbarer Fläche nutzen wir ein zwei oder 18 Spalten Grid.
 
 ### Props
 
-- `s` Span width for small sizes. Fractions of 2, e.g. `1/2`
-- `m` Span width for medium up. Fractions of 6, e.g. `5/6`
+- `s` Spaltenbreite für kleine Displays. Brüche von 2, z.B. `1/2`
+- `m` Spaltenbreite ab mittel grossem Display. Brüche von 18, z.B. `5/18`
 
 ```hint
-`<Span>` must be nested in `<Grid>`
+`<Span>`s müssen in einem `<Grid>` sein
 ```
@@ -26,5 +28,31 @@
 <Grid>
-  <Span s='1/2' m='2/6'>Foo</Span>
-  <Span s='1/2' m='4/6'>Bar</Span>
+  <Span s='1/2' m='6/18'>Foo</Span>
+  <Span s='1/2' m='12/18'>Bar</Span>
 </Grid>
-```
+```
+
+### Offset
+
+```react
+<Grid>
+  <Span m='1/18' />
+  <Span m='10/18'>
+    Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
+  </Span>
+</Grid>
+```
+
+### Pull Right
+
+```react
+<Grid>
+  <Span s='2/2' m='5/18' style={{float: 'right'}}>
+    Ein rechter Sidebar,<br />
+    der zuerst kommt auf Mobile.
+  </Span>
+  <Span s='2/2' m='1/18' />
+  <Span s='2/2' m='10/18'>
+    Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte! Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern?
+  </Span>
+</Grid>
+```

src/components/Grid/index.js

@@ -5,3 +5,3 @@ import React, {PropTypes} from 'react'
 
-export const GUTTER = 20
+export const GUTTER = 42
 export const CONTENT_PADDING = 20
@@ -49,16 +49,29 @@
     paddingLeft: `${GUTTER / 2}px`,
-    paddingRight: `${GUTTER / 2}px`
+    paddingRight: `${GUTTER / 2}px`,
+    minHeight: 1
   }),
   s1of2: css({[onlyS]: {width: '50%'}}),
   s2of2: css({[onlyS]: {width: '100%'}}),
-  m1of6: css({[mUp]: {width: `${100 / 6 * 1}%`}}),
-  m2of6: css({[mUp]: {width: `${100 / 6 * 2}%`}}),
-  m3of6: css({[mUp]: {width: `${100 / 6 * 3}%`}}),
-  m4of6: css({[mUp]: {width: `${100 / 6 * 4}%`}}),
-  m5of6: css({[mUp]: {width: `${100 / 6 * 5}%`}}),
-  m6of6: css({[mUp]: {width: `${100 / 6 * 6}%`}})
+  m1of18: css({[mUp]: {width: `${100 / 18 * 1}%`}}),
+  m2of18: css({[mUp]: {width: `${100 / 18 * 2}%`}}),
+  m3of18: css({[mUp]: {width: `${100 / 18 * 3}%`}}),
+  m4of18: css({[mUp]: {width: `${100 / 18 * 4}%`}}),
+  m5of18: css({[mUp]: {width: `${100 / 18 * 5}%`}}),
+  m6of18: css({[mUp]: {width: `${100 / 18 * 6}%`}}),
+  m7of18: css({[mUp]: {width: `${100 / 18 * 7}%`}}),
+  m8of18: css({[mUp]: {width: `${100 / 18 * 8}%`}}),
+  m9of18: css({[mUp]: {width: `${100 / 18 * 9}%`}}),
+  m10of18: css({[mUp]: {width: `${100 / 18 * 10}%`}}),
+  m11of18: css({[mUp]: {width: `${100 / 18 * 11}%`}}),
+  m12of18: css({[mUp]: {width: `${100 / 18 * 12}%`}}),
+  m13of18: css({[mUp]: {width: `${100 / 18 * 13}%`}}),
+  m14of18: css({[mUp]: {width: `${100 / 18 * 14}%`}}),
+  m15of18: css({[mUp]: {width: `${100 / 18 * 15}%`}}),
+  m16of18: css({[mUp]: {width: `${100 / 18 * 16}%`}}),
+  m17of18: css({[mUp]: {width: `${100 / 18 * 17}%`}}),
+  m18of18: css({[mUp]: {width: `${100 / 18 * 18}%`}})
 }
 
-export const Container = ({children}) => (
-  <div {...styles.container}>
+export const Container = ({children, ...props}) => (
+  <div {...props} {...styles.container}>
     {children}
@@ -73,4 +86,4 @@ </div>
 
-export const NarrowContainer = ({children}) => (
-  <div {...styles.narrowContainer}>
+export const NarrowContainer = ({children, ...props}) => (
+  <div {...props} {...styles.narrowContainer}>
     {children}
@@ -84,4 +97,4 @@ </div>
 
-export const MediumContainer = ({children}) => (
-  <div {...styles.mediumContainer}>
+export const MediumContainer = ({children, ...props}) => (
+  <div {...props} {...styles.mediumContainer}>
     {children}
@@ -107,5 +120,5 @@ </div>
 
-export const Span = ({children, s, m}) => {
+export const Span = ({children, style, s, m}) => {
   return (
-    <div {...styles.span}
+    <div style={style} {...styles.span}
       {...styles[`s${fractionToClassName(s)}`]}
@@ -121,3 +134,11 @@ {...styles[`m${fractionToClassName(m)}`]}>
   s: PropTypes.oneOf(['1/2', '2/2']),
-  m: PropTypes.oneOf(['1/6', '2/6', '3/6', '4/6', '5/6', '6/6'])
+  m: PropTypes.oneOf([
+    '1/18', '2/18', '3/18', '4/18', '5/18', '6/18', '7/18', '8/18', '9/18',
+    '10/18', '11/18', '12/18', '13/18', '14/18', '15/18', '16/18', '17/18', '18/18'
+  ])
 }
+
+Span.defaultProps = {
+  s: '2/2',
+  m: '6/6'
+}

src/components/Typography/docs.md

@@ -13,8 +13,6 @@ ## Überschriften
 
-```react|responsive
-<div>
-    <Lead>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
-    </Lead>
-</div>
+```react
+<Lead>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
+</Lead>
 ```
@@ -21,0 +19,0 @@

src/components/Typography/styles.js

@@ -18,4 +18,5 @@ import * as colors from '../../theme/colors'
   fontFamily: 'sans-serif',
-  fontSize: 46,
-  lineHeight: '60px'
+  fontSize: 52,
+  lineHeight: '56px',
+  margin: '0 0 20px 0'
 }
@@ -26,4 +27,5 @@
   fontFamily: 'sans-serif',
-  fontSize: 30,
-  lineHeight: '39px'
+  fontSize: 24,
+  lineHeight: '26px',
+  margin: '0 0 20px 0'
 }
@@ -34,8 +36,5 @@
   fontFamily: 'Rubis-Regular, serif',
-  fontSize: 26,
-  lineHeight: '40px',
-  [mUp]: {
-    fontSize: 35,
-    lineHeight: '43px',
-  }
+  fontSize: 25,
+  lineHeight: '33px',
+  margin: '0 0 20px 0'
 }
@@ -48,5 +47,6 @@
   lineHeight: '25px',
+  margin: '0 0 20px 0',
   [mUp]: {
-    fontSize: 26,
-    lineHeight: '40px'
+    fontSize: 21,
+    lineHeight: '32px'
   }
@@ -57,5 +57,5 @@ }
   color: colors.text,
-  fontSize: 26,
-  lineHeight: '40px',
-  fontFamily: 'Rubis-Regular'
+  fontSize: 21,
+  lineHeight: '32px',
+  fontFamily: 'Rubis-Regular, serif'
 }
@@ -62,0 +62,0 @@ export const quoteText = {

src/index.js

@@ -18,3 +18,3 @@ import React from 'react';
       {name: 'Klein', width: 320, height: 480},
-      {name: 'Gross', width: 650, height: 480}
+      {name: 'Gross', width: 800, height: 480}
     ]}
@@ -21,0 +21,0 @@ pages={[

src/theme/mediaQueries.js

@@ -1,2 +0,3 @@
-export const onlyS = '@media only screen and (max-width: 640px)'
-export const mUp = '@media only screen and (min-width: 641px)'
+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)'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9439450

increased by0.02%

Lines of code

1829

increased by1.16%

No dependency changes