rebass - npm Package Compare versions

Comparing version 1.0.0-8 to 1.0.0

dist/components.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var _grid = require('./grid');
+
 var _DonutBase = require('./DonutBase');
@@ -22,2 +24,6 @@
 
+var _SelectBase = require('./SelectBase');
+
+var _SelectBase2 = _interopRequireDefault(_SelectBase);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,4 +43,6 @@
     m: 0,
-    px: 3,
-    py: 2,
+    pl: 3,
+    pr: 3,
+    pt: 2,
+    pb: 2,
     color: 'white'
@@ -44,6 +52,7 @@ },
     return {
-      display: 'inline-block',
       fontFamily: 'inherit',
       fontWeight: bold(props),
-      lineHeight: 1.25,
+      lineHeight: 16 / 14,
+      display: 'inline-block',
+      verticalAlign: 'middle',
       textAlign: 'center',
@@ -99,3 +108,4 @@ textDecoration: 'none',
   props: {
-    px: 3
+    pl: 3,
+    pr: 3
   },
@@ -145,3 +155,5 @@ style: function style(props) {
     return {
-      display: 'inline-block',
+      display: 'inline-flex',
+      alignItems: 'center',
+      alignSelf: 'stretch',
       fontWeight: bold(props),
@@ -284,2 +296,18 @@ textDecoration: 'none',
   style: {}
+}, {
+  name: 'Measure',
+  type: 'div',
+  props: {},
+  style: {
+    maxWidth: '32em'
+  }
+}, {
+  name: 'Truncate',
+  type: 'Text',
+  props: {},
+  style: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  }
 },
@@ -314,5 +342,7 @@
       fontSize: 'inherit',
-      borderWidth: (0, _util.px)(1),
-      borderStyle: 'solid',
-      borderColor: (0, _util.color)(props)('gray2'),
+      lineHeight: 'inherit',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      border: 0,
+      boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('gray2'),
       borderRadius: (0, _util.px)(props.theme.radius),
@@ -322,3 +352,3 @@ appearance: 'none',
         outline: 'none',
-        borderColor: (0, _util.color)(props)('blue')
+        boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('blue')
       },
@@ -332,5 +362,4 @@ '&:disabled': {
   name: 'Select',
-  type: 'select',
+  type: _SelectBase2.default,
   props: {
-    p: 1,
     m: 0,
@@ -343,15 +372,15 @@ w: 1,
     return {
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      height: 32,
-      borderWidth: (0, _util.px)(1),
-      borderStyle: 'solid',
-      borderColor: (0, _util.color)(props)('gray2'),
-      borderRadius: (0, _util.px)(props.theme.radius),
-      '&:focus': {
-        outline: 'none',
-        borderColor: (0, _util.color)(props)('blue')
-      },
-      '&:disabled': {
-        opacity: 1 / 4
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      select: {
+        padding: (0, _util.px)((0, _util.idx)('space.1', props.theme)),
+        boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('gray2'),
+        borderRadius: (0, _util.px)(props.theme.radius),
+
+        '&:focus': {
+          boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('blue')
+        },
+        '&:disabled': {
+          opacity: 1 / 4
+        }
       }
@@ -374,5 +403,4 @@ };
       fontSize: 'inherit',
-      borderWidth: (0, _util.px)(1),
-      borderStyle: 'solid',
-      borderColor: (0, _util.color)(props)('gray2'),
+      border: 0,
+      boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('gray2'),
       borderRadius: (0, _util.px)(props.theme.radius),
@@ -382,3 +410,3 @@ appearance: 'none',
         outline: 'none',
-        borderColor: (0, _util.color)(props)('blue')
+        boxShadow: 'inset 0 0 0 1px ' + (0, _util.color)(props)('blue')
       },
@@ -415,4 +443,6 @@ '&:disabled': {
     w: 1,
-    my: 2,
-    mx: 0,
+    mt: 2,
+    mb: 2,
+    ml: 0,
+    mr: 0,
     type: 'range'
@@ -472,2 +502,3 @@ },
     // ratio: 3/4 // How does styled-components handle this??
+    // Fix this once non-whitelisted styled-components is out
   },
@@ -495,3 +526,4 @@ style: function style(props) {
     px: 3,
-    mx: 'auto'
+    ml: 'auto',
+    mr: 'auto'
   },
@@ -511,3 +543,4 @@ style: function style(props) {
   props: {
-    my: 2
+    mt: 2,
+    mb: 2
   },
@@ -665,4 +698,6 @@ style: {
   props: {
-    px: 3,
-    py: 2,
+    pl: 3,
+    pr: 3,
+    pt: 2,
+    pb: 2,
     color: 'white',
@@ -673,2 +708,5 @@ bg: 'blue'
     return {
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: (0, _util.px)(48),
       fontWeight: bold(props)
@@ -700,3 +738,4 @@ };
   props: {
-    px: 2,
+    pl: 2,
+    pr: 2,
     color: 'white',
@@ -707,2 +746,3 @@ bg: 'gray9'
     display: 'flex',
+    minHeight: (0, _util.px)(48),
     alignItems: 'center'
@@ -716,3 +756,4 @@ }
     p: 1,
-    mx: 1,
+    ml: 1,
+    mr: 1,
     color: 'white',
@@ -782,3 +823,4 @@ bg: 'blue'
     mr: 3,
-    py: 2
+    pt: 2,
+    pb: 2
   },
@@ -1050,4 +1092,4 @@ style: function style(props) {
       display: 'inline-flex',
-      width: (0, _util.px)(32),
-      height: (0, _util.px)(20),
+      width: (0, _util.px)(40),
+      height: (0, _util.px)(24),
       borderRadius: (0, _util.px)(9999),
@@ -1059,6 +1101,7 @@ backgroundColor: props.checked ? (0, _util.color)(props)(props.color) : 'transparent',
       transitionTimingFunction: 'ease-out',
+      userSelect: 'none',
       '&::after': {
         content: '" "',
-        width: (0, _util.px)(12),
-        height: (0, _util.px)(12),
+        width: (0, _util.px)(16),
+        height: (0, _util.px)(16),
         margin: (0, _util.px)(4),
@@ -1069,3 +1112,3 @@ borderRadius: (0, _util.px)(9999),
         transitionTimingFunction: 'ease-out',
-        transform: props.checked ? 'translateX(12px)' : 'translateX(0)',
+        transform: props.checked ? 'translateX(16px)' : 'translateX(0)',
         backgroundColor: props.checked ? (0, _util.color)(props)('white') : (0, _util.color)(props)(props.color)
@@ -1096,5 +1139,3 @@ }
     color: 'yellow',
-    children: function children(props) {
-      return props.checked ? '★' : '☆';
-    }
+    children: '★'
   },
@@ -1106,2 +1147,3 @@ style: function style(props) {
       height: '1em',
+      color: props.checked ? (0, _util.color)(props)(props.color) : (0, _util.darken)(1 / 8),
       '&::after': {
@@ -1115,2 +1157,3 @@ display: props.half ? 'block' : 'none',
         height: '1em',
+        color: (0, _util.color)(props)(props.color),
         clip: 'rect(0, .45em, 1em, 0)'
@@ -1173,4 +1216,20 @@ }
   style: {}
+}, {
+  name: 'Row',
+  type: _grid.Flex,
+  props: {
+    mx: -3
+  },
+  style: {}
+}, {
+  name: 'Column',
+  type: _grid.Box,
+  props: {
+    px: 3,
+    mb: 4,
+    flex: '1 1 auto'
+  },
+  style: {}
 }];
 
 exports.default = components;

dist/hoc.js

@@ -58,2 +58,3 @@ 'use strict';
 
+    // Clean this up after styled-components removes whitelisting
     var Comp = (0, _styledComponents2.default)(Base).attrs(props)([], style);
@@ -60,0 +61,0 @@

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Donut = exports.Embed = exports.Star = exports.Arrow = exports.Switch = exports.Tooltip = exports.CarouselSlide = exports.ScrollCarousel = exports.Carousel = exports.Overlay = exports.Drawer = exports.Sticky = exports.Fixed = exports.Absolute = exports.Relative = exports.Close = exports.DotButton = exports.TabItem = exports.Tabs = exports.Circle = exports.Badge = exports.Toolbar = exports.Group = exports.Message = exports.Progress = exports.PanelFooter = exports.PanelHeader = exports.Panel = exports.Banner = exports.Card = exports.Media = exports.Border = exports.Divider = exports.Container = exports.BackgroundImage = exports.Avatar = exports.Image = exports.Slider = exports.Radio = exports.Checkbox = exports.Textarea = exports.Select = exports.Input = exports.Label = exports.Blockquote = exports.Samp = exports.Code = exports.Pre = exports.Lead = exports.Small = exports.Text = exports.Subhead = exports.Heading = exports.BlockLink = exports.NavLink = exports.Link = exports.ButtonTransparent = exports.ButtonCircle = exports.ButtonOutline = exports.Button = exports.util = exports.createComponent = exports.createLibrary = exports.tag = exports.theme = exports.hoc = exports.Provider = exports.Box = exports.Flex = undefined;
+exports.Column = exports.Row = exports.Donut = exports.Embed = exports.Star = exports.Arrow = exports.Switch = exports.Tooltip = exports.CarouselSlide = exports.ScrollCarousel = exports.Carousel = exports.Overlay = exports.Drawer = exports.Sticky = exports.Fixed = exports.Absolute = exports.Relative = exports.Close = exports.DotButton = exports.TabItem = exports.Tabs = exports.Circle = exports.Badge = exports.Toolbar = exports.Group = exports.Message = exports.Progress = exports.PanelFooter = exports.PanelHeader = exports.Panel = exports.Banner = exports.Card = exports.Media = exports.Border = exports.Divider = exports.Container = exports.BackgroundImage = exports.Avatar = exports.Image = exports.Slider = exports.Radio = exports.Checkbox = exports.Textarea = exports.Select2 = exports.Select = exports.Input = exports.Label = exports.Truncate = exports.Measure = exports.Blockquote = exports.Samp = exports.Code = exports.Pre = exports.Lead = exports.Small = exports.Text = exports.Subhead = exports.Heading = exports.BlockLink = exports.NavLink = exports.Link = exports.ButtonTransparent = exports.ButtonCircle = exports.ButtonOutline = exports.Button = exports.util = exports.createComponent = exports.createLibrary = exports.tag = exports.radius = exports.colors = exports.weights = exports.fontSizes = exports.monospace = exports.font = exports.space = exports.breakpoints = exports.theme = exports.hoc = exports.Provider = exports.Box = exports.Flex = undefined;
 
@@ -50,2 +50,50 @@ var _grid = require('./grid');
 });
+Object.defineProperty(exports, 'breakpoints', {
+  enumerable: true,
+  get: function get() {
+    return _theme.breakpoints;
+  }
+});
+Object.defineProperty(exports, 'space', {
+  enumerable: true,
+  get: function get() {
+    return _theme.space;
+  }
+});
+Object.defineProperty(exports, 'font', {
+  enumerable: true,
+  get: function get() {
+    return _theme.font;
+  }
+});
+Object.defineProperty(exports, 'monospace', {
+  enumerable: true,
+  get: function get() {
+    return _theme.monospace;
+  }
+});
+Object.defineProperty(exports, 'fontSizes', {
+  enumerable: true,
+  get: function get() {
+    return _theme.fontSizes;
+  }
+});
+Object.defineProperty(exports, 'weights', {
+  enumerable: true,
+  get: function get() {
+    return _theme.weights;
+  }
+});
+Object.defineProperty(exports, 'colors', {
+  enumerable: true,
+  get: function get() {
+    return _theme.colors;
+  }
+});
+Object.defineProperty(exports, 'radius', {
+  enumerable: true,
+  get: function get() {
+    return _theme.radius;
+  }
+});
 
@@ -121,5 +169,8 @@ var _tag = require('./tag');
     Blockquote = library.Blockquote,
+    Measure = library.Measure,
+    Truncate = library.Truncate,
     Label = library.Label,
     Input = library.Input,
     Select = library.Select,
+    Select2 = library.Select2,
     Textarea = library.Textarea,
@@ -165,3 +216,5 @@ Checkbox = library.Checkbox,
     Embed = library.Embed,
-    Donut = library.Donut;
+    Donut = library.Donut,
+    Row = library.Row,
+    Column = library.Column;
 exports.Button = Button;
@@ -183,5 +236,8 @@ exports.ButtonOutline = ButtonOutline;
 exports.Blockquote = Blockquote;
+exports.Measure = Measure;
+exports.Truncate = Truncate;
 exports.Label = Label;
 exports.Input = Input;
 exports.Select = Select;
+exports.Select2 = Select2;
 exports.Textarea = Textarea;
@@ -228,2 +284,4 @@ exports.Checkbox = Checkbox;
 exports.Donut = Donut;
+exports.Row = Row;
+exports.Column = Column;
 exports.default = Rebass;

package.json

 {
   "name": "rebass",
-  "version": "1.0.0-8",
+  "version": "1.0.0",
   "description": "Functional React UI component library, built with styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/components.js

@@ -22,3 +22,5 @@ import React from 'react'
 } from './util'
+import { Flex, Box } from './grid'
 import DonutBase from './DonutBase'
+import SelectBase from './SelectBase'
 
@@ -35,11 +37,14 @@ const bold = props => idx('weights.1', props.theme)
       m: 0,
-      px: 3,
-      py: 2,
+      pl: 3,
+      pr: 3,
+      pt: 2,
+      pb: 2,
       color: 'white',
     },
     style: props => ({
-      display: 'inline-block',
       fontFamily: 'inherit',
       fontWeight: bold(props),
-      lineHeight: 1.25,
+      lineHeight: 16 / 14,
+      display: 'inline-block',
+      verticalAlign: 'middle',
       textAlign: 'center',
@@ -94,3 +99,4 @@ textDecoration: 'none',
     props: {
-      px: 3
+      pl: 3,
+      pr: 3
     },
@@ -135,6 +141,8 @@ style: props => ({
       f: 1,
-      p: 2
+      p: 2,
     },
     style: props => ({
-      display: 'inline-block',
+      display: 'inline-flex',
+      alignItems: 'center',
+      alignSelf: 'stretch',
       fontWeight: bold(props),
@@ -280,2 +288,20 @@ textDecoration: 'none',
   },
+  {
+    name: 'Measure',
+    type: 'div',
+    props: {},
+    style: {
+      maxWidth: '32em'
+    }
+  },
+  {
+    name: 'Truncate',
+    type: 'Text',
+    props: {},
+    style: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  },
 
@@ -309,5 +335,7 @@ // Forms
       fontSize: 'inherit',
-      borderWidth: px(1),
-      borderStyle: 'solid',
-      borderColor: color(props)('gray2'),
+      lineHeight: 'inherit',
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      border: 0,
+      boxShadow: `inset 0 0 0 1px ${color(props)('gray2')}`,
       borderRadius: px(props.theme.radius),
@@ -317,3 +345,3 @@ appearance: 'none',
         outline: 'none',
-        borderColor: color(props)('blue')
+        boxShadow: `inset 0 0 0 1px ${color(props)('blue')}`,
       },
@@ -327,5 +355,4 @@ '&:disabled': {
     name: 'Select',
-    type: 'select',
+    type: SelectBase,
     props: {
-      p: 1,
       m: 0,
@@ -337,16 +364,16 @@ w: 1,
     style: props => ({
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      height: 32,
-      borderWidth: px(1),
-      borderStyle: 'solid',
-      borderColor: color(props)('gray2'),
-      borderRadius: px(props.theme.radius),
-      '&:focus': {
-        outline: 'none',
-        borderColor: color(props)('blue'),
-      },
-      '&:disabled': {
-        opacity: 1/4
-      },
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      select: {
+        padding: px(idx('space.1', props.theme)),
+        boxShadow: `inset 0 0 0 1px ${color(props)('gray2')}`,
+        borderRadius: px(props.theme.radius),
+
+        '&:focus': {
+          boxShadow: `inset 0 0 0 1px ${color(props)('blue')}`,
+        },
+        '&:disabled': {
+          opacity: 1/4
+        }
+      }
     })
@@ -367,5 +394,4 @@ },
       fontSize: 'inherit',
-      borderWidth: px(1),
-      borderStyle: 'solid',
-      borderColor: color(props)('gray2'),
+      border: 0,
+      boxShadow: `inset 0 0 0 1px ${color(props)('gray2')}`,
       borderRadius: px(props.theme.radius),
@@ -375,3 +401,3 @@ appearance: 'none',
         outline: 'none',
-        borderColor: color(props)('blue'),
+        boxShadow: `inset 0 0 0 1px ${color(props)('blue')}`,
       },
@@ -406,4 +432,6 @@ '&:disabled': {
       w: 1,
-      my: 2,
-      mx: 0,
+      mt: 2,
+      mb: 2,
+      ml: 0,
+      mr: 0,
       type: 'range'
@@ -465,2 +493,3 @@ },
       // ratio: 3/4 // How does styled-components handle this??
+      // Fix this once non-whitelisted styled-components is out
     },
@@ -486,3 +515,4 @@ style: props => ({
       px: 3,
-      mx: 'auto'
+      ml: 'auto',
+      mr: 'auto'
     },
@@ -501,3 +531,4 @@ style: props => ({
     props: {
-      my: 2
+      mt: 2,
+      mb: 2
     },
@@ -650,4 +681,6 @@ style: {
     props: {
-      px: 3,
-      py: 2,
+      pl: 3,
+      pr: 3,
+      pt: 2,
+      pb: 2,
       color: 'white',
@@ -657,2 +690,5 @@ bg: 'blue'
     style: props => ({
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: px(48),
       fontWeight: bold(props)
@@ -686,3 +722,4 @@ })
     props: {
-      px: 2,
+      pl: 2,
+      pr: 2,
       color: 'white',
@@ -693,2 +730,3 @@ bg: 'gray9'
       display: 'flex',
+      minHeight: px(48),
       alignItems: 'center'
@@ -704,3 +742,4 @@ }
       p: 1,
-      mx: 1,
+      ml: 1,
+      mr: 1,
       color: 'white',
@@ -767,3 +806,4 @@ bg: 'blue'
       mr: 3,
-      py: 2,
+      pt: 2,
+      pb: 2,
     },
@@ -1044,4 +1084,4 @@ style: props => ({
       display: 'inline-flex',
-      width: px(32),
-      height: px(20),
+      width: px(40),
+      height: px(24),
       borderRadius: px(9999),
@@ -1053,6 +1093,7 @@ backgroundColor: props.checked ? color(props)(props.color) : 'transparent',
       transitionTimingFunction: 'ease-out',
+      userSelect: 'none',
       '&::after': {
         content: '" "',
-        width: px(12),
-        height: px(12),
+        width: px(16),
+        height: px(16),
         margin: px(4),
@@ -1063,3 +1104,3 @@ borderRadius: px(9999),
         transitionTimingFunction: 'ease-out',
-        transform: props.checked ? `translateX(12px)` : `translateX(0)`,
+        transform: props.checked ? `translateX(16px)` : `translateX(0)`,
         backgroundColor: props.checked ? color(props)('white') : color(props)(props.color),
@@ -1091,3 +1132,3 @@ }
       color: 'yellow',
-      children: props => props.checked ? '★' : '☆'
+      children: '★'
     },
@@ -1098,2 +1139,3 @@ style: props => ({
       height: '1em',
+      color: props.checked ? color(props)(props.color) : darken(1/8),
       '&::after': {
@@ -1107,2 +1149,3 @@ display: props.half ? 'block' : 'none',
         height: '1em',
+        color: color(props)(props.color),
         clip: 'rect(0, .45em, 1em, 0)'
@@ -1167,4 +1210,23 @@ }
   },
+
+  {
+    name: 'Row',
+    type: Flex,
+    props: {
+      mx: -3,
+    },
+    style: {}
+  },
+  {
+    name: 'Column',
+    type: Box,
+    props: {
+      px: 3,
+      mb: 4,
+      flex: '1 1 auto'
+    },
+    style: {}
+  },
 ]
 
 export default components

src/hoc.js

@@ -60,2 +60,3 @@ import React from 'react'
 
+  // Clean this up after styled-components removes whitelisting
   const Comp = styled(Base)
@@ -62,0 +63,0 @@ .attrs(props)

src/index.js

@@ -15,3 +15,13 @@ import components from './components'
 export { default as hoc } from './hoc'
-export { default as theme } from './theme'
+export {
+  default as theme,
+  breakpoints,
+  space,
+  font,
+  monospace,
+  fontSizes,
+  weights,
+  colors,
+  radius
+} from './theme'
 export { default as tag } from './tag'
@@ -39,5 +49,8 @@ export { default as createLibrary } from './create-library'
   Blockquote,
+  Measure,
+  Truncate,
   Label,
   Input,
   Select,
+  Select2,
   Textarea,
@@ -84,4 +97,6 @@ Checkbox,
   Donut,
+  Row,
+  Column,
 } = library
 
 export default Rebass

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93420

increased by8.32%

Number of package files

33

increased by6.45%

Lines of code

3409

increased by9.12%

Number of low quality alerts

0

decreased by-100%

No dependency changes