rebass - npm Package Compare versions

Comparing version 1.0.0-1 to 1.0.0-2

.github/CONTRIBUTING.md

@@ -8,24 +8,20 @@
 
-- Use [feross/standard](https://github.com/feross/standard) code style
 - Test before submitting pull requests - `npm test`
 
-## Component style
+## Codebase Overview
 
-- Follow code style based on src components
-- All components should use the Base component as the root, unless it is an extension of another component
-- Component props should be extracted using destructuring, and other props should be passed to the root Base component
-- Components should pass `baseStyle` to the Base component and `style` should be reserved for the end user
-- All functionality in a component should be tested
-- All components should have propTypes set for all custom props
-- All components and propTypes should be documented to allow for react-docgen parsing
-- All components must be stateless functional components
-- Delegate client-size JS to higher-order container components
-- Prefer not to use external dependencies
+Folders:
+- `/src` source code
+- `/tests` tests, including snapshots
+- `/stories` stories for React Storybook
+- `/docs` source for the documentation/demo site
 
-## Component className
+### Source Code
 
-- The root className should match the component name
-- Stateful classNames should be camelCased - e.g. `isInvalid`
-- Child element and modifier classNames should be separated with an underscore - e.g. `Heading_alt`
-- End-user should not be able to set className on a component
+All exports are handled in `src/index.js`.
+The component styles and configuration is in `src/components.js`, which is passed to `src/create-library.js` to export the components.
+The `src/create-component.js` function tags a component configuration object and returns a React styled component, adding two higher order components in the process.
 
+### Tests
+
+Tests are written using Ava. Please ensure to test any new code added, and update snapshots when relevant.

dist/components.js

@@ -795,4 +795,18 @@ 'use strict';
   }
+}, {
+  name: 'Sticky',
+  tag: 'div',
+  props: {},
+  style: function style(props) {
+    return '\n      position: -webkit-sticky;\n      position: sticky;\n      top: ' + (props.top ? 0 : null) + ';\n      right: ' + (props.right ? 0 : null) + ';\n      bottom: ' + (props.bottom ? 0 : null) + ';\n      left: ' + (props.left ? 0 : null) + ';\n      z-index: ' + props.z + ';\n    ';
+  },
+  propTypes: {
+    top: _propTypes.bool,
+    right: _propTypes.bool,
+    bottom: _propTypes.bool,
+    left: _propTypes.bool,
+    z: _propTypes.number
+  }
 }];
 
 exports.default = components;

dist/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Fixed = exports.Absolute = exports.Relative = exports.DotButton = exports.TabItem = exports.Tabs = 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.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.Sticky = exports.Fixed = exports.Absolute = exports.Relative = exports.DotButton = exports.TabItem = exports.Tabs = 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.ButtonCircle = exports.ButtonOutline = exports.Button = exports.util = exports.createComponent = exports.createLibrary = exports.Tag = exports.theme = exports.hoc = exports.Provider = exports.Box = exports.Flex = undefined;
 
@@ -147,3 +147,4 @@ var _gridStyled = require('grid-styled');
     Absolute = library.Absolute,
-    Fixed = library.Fixed;
+    Fixed = library.Fixed,
+    Sticky = library.Sticky;
 exports.Button = Button;
@@ -194,2 +195,3 @@ exports.ButtonOutline = ButtonOutline;
 exports.Fixed = Fixed;
+exports.Sticky = Sticky;
 exports.default = Rebass;

dist/Tag.js

@@ -23,3 +23,3 @@ 'use strict';
 
-    if (isEl) delete next.is;
+    if (isEl) next.is = null;
 
@@ -26,0 +26,0 @@ return _react2.default.createElement(Comp, next);

package.json

 {
   "name": "rebass",
-  "version": "1.0.0-1",
-  "description": "Stateless React UI component library",
+  "version": "1.0.0-2",
+  "description": "Functional React UI component library, built with styled-components",
   "main": "dist/index.js",
@@ -9,2 +9,3 @@ "scripts": {
     "start": "start-storybook -p 8000 -c stories",
+    "storybook": "build-storybook -c stories -o docs/stories",
     "test": "nyc ava"
@@ -25,3 +26,3 @@ },
   "dependencies": {
-    "grid-styled": "^2.0.0-7",
+    "grid-styled": "^2.0.0-8",
     "palx": "^1.0.2",
@@ -28,0 +29,0 @@ "prop-types": "^15.5.10",

README.md

 # Rebass
 
-Stateless React UI component library, built with [styled-components](https://www.styled-components.com)
+Functional React UI component library, built with [styled-components](https://www.styled-components.com)
 
@@ -10,3 +10,3 @@ [![Build Status](https://travis-ci.org/jxnblk/rebass.svg?branch=master)](https://travis-ci.org/jxnblk/rebass)
 ```sh
-npm i rebass@next
+npm i rebass
 ```
@@ -113,3 +113,3 @@
 
-// The shorthand `f` prop can be used instead of `width`
+// The shorthand `f` prop can be used instead of `fontSize`
 <Text f={3} />
@@ -284,2 +284,3 @@ ```
 - [Fixed](http://jxnblk.com/rebass/#Fixed)
+- [Sticky](http://jxnblk.com/rebass/#Sticky)
 
@@ -301,3 +302,3 @@
 - `bold` (boolean) font-weight: theme.weights[1]
-- `caps` (boolean) text-transform: uppecase; letter-spacing: .2em
+- `caps` (boolean) text-transform: uppercase; letter-spacing: .2em
 
@@ -304,0 +305,0 @@ ### `<Border />`

src/components.js

@@ -789,2 +789,23 @@ import {
     }
+  },
+  {
+    name: 'Sticky',
+    tag: 'div',
+    props: {},
+    style: props => (`
+      position: -webkit-sticky;
+      position: sticky;
+      top: ${props.top ? 0 : null};
+      right: ${props.right ? 0 : null};
+      bottom: ${props.bottom ? 0 : null};
+      left: ${props.left ? 0 : null};
+      z-index: ${props.z};
+    `),
+    propTypes: {
+      top: bool,
+      right: bool,
+      bottom: bool,
+      left: bool,
+      z: number
+    }
   }
@@ -791,0 +812,0 @@ ]

src/index.js

@@ -66,4 +66,5 @@ import { Flex, Box } from 'grid-styled'
   Fixed,
+  Sticky,
 } = library
 
 export default Rebass

src/Tag.js

@@ -10,3 +10,3 @@ import React from 'react'
 
-    if (isEl) delete next.is
+    if (isEl) next.is = null
 
@@ -13,0 +13,0 @@ return <Comp {...next} />

No alert changes

Improved metrics

Total package byte prevSize

68418

increased by1.08%

Lines of code

2337

increased by1.65%

Number of lines in readme file

417

increased by0.24%

Dependency changes

• Updatedgrid-styled@^2.0.0-8