indoqa-rebass-components - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

indoqa-webpack-docs.js

@@ -5,3 +5,3 @@ module.exports = {
   outputPath: './docs',
-  outputPublicPath: '/indoqa-rebass-components',
+  outputPublicPath: '/indoqa-rebass-components/',
   createIndexHtml: true,
@@ -8,0 +8,0 @@ isReactLibrary: false,

package.json

 {
   "name": "indoqa-rebass-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "./dist/indoqa-rebass-components.min.js",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -5,5 +5,6 @@ # Indoqa Rebass Components
 
-  * Div: A simple div component, useful for structuring view code without any plain html tags.
-  * List/ListItem: Ordered and unordered lists with default padding/margin settings and configurable listStyleType. 
-  * FontAwesome: FontAwesome icons with configurable color and size. 
+  * `<Anchor />` and `<AnchorLink />`: Jump to anchors on the same page.
+  * `<Div />` and `<Span />`: Simple div/span components with the benefits of padding/margin shortcuts and theme configuration.
+  * `<List> and <ListItem>`: Ordered and unordered lists with default padding/margin settings and configurable listStyleType. 
+  * `<FontAwesome />`: FontAwesome icons with configurable color and size. 
 
@@ -16,2 +17,23 @@ ## Live Demo
 
+### Anchor/AnchorLinks
+
+```javascript
+import React from 'react'
+import {Anchor. AnchorLink, Div} from 'indoqa-rebass-components'
+
+const Page = () => (
+  <Div>
+    <AnchorLink to="section2"> Jump to section 2 </AnchorLink>
+    .......
+    .......
+    .......
+    <Anchor id="section2"/>
+    Here starts section 2!
+  </Div>
+)
+
+export default Page
+```
+
+
 ### Lists
@@ -67,7 +89,7 @@
 
-const ThumbsUpBigRed = () => (
+const ThumbsUpBigRedIcon = () => (
   <FontAwesome icon="thumbs-o-up" color="red" size="30px" />
 )
 
-export default FontAwesome
+export default ThumbsUpBigRedIcon
 ```
@@ -74,0 +96,0 @@

src/playground/components/FontAwesomeExample.react.js

@@ -23,3 +23,3 @@ import React from 'react'
     <Div>
-      <Pre> A lot of different icon  ... </Pre>
+      <Pre> A lot of different icons </Pre>
       <FontAwesome icon="play" />
@@ -26,0 +26,0 @@ <Space x={1} />

src/playground/DemoPage.react.js

 import React from 'react'
+import {Divider, Heading, Space} from 'rebass'
+import Anchor from '../main/components/Anchor.react'
+import AnchorLink from '../main/components/AnchorLink.react'
 import Div from '../main/components/Div.react'
-import {Divider, Heading, Space} from 'rebass'
 import List from '../main/components/List.react'
@@ -9,19 +11,28 @@ import ListItem from '../main/components/ListItem.react'
 import ListExample from './components/ListExample.react'
+import DivSpanExample from './components/DivSpanExample.react'
 
 const DemoPage = (props, {rebass}) => (
-  <Div style={{fontFamily: rebass.fontFamily}}>
+  <Div style={{fontFamily: rebass.fontFamily}} p={1}>
     <Heading level={1}> indoqa-rebass-components examples </Heading>
     <Space y={2} />
     <List>
-      <ListItem> <a href="#lists">Lists </a> </ListItem>
-      <ListItem> <a href="#font-awesome">FontAwesome </a> </ListItem>
+      <ListItem> <AnchorLink to="lists">Lists </AnchorLink> </ListItem>
+      <ListItem> <AnchorLink to="font-awesome">FontAwesome </AnchorLink> </ListItem>
+      <ListItem> <AnchorLink to="div-span">Div/Span </AnchorLink> </ListItem>
     </List>
-    <Space y={4} />
-    <a name="lists"></a>
-    <Divider />
-    <ListExample />
-    <Space y={2} />
-    <Divider />
-    <a name="font-awesome"></a>
-    <FontAwesomeExample />
+    <Div mb={4}>
+      <Anchor id="lists" />
+      <Divider />
+      <ListExample />
+      <Divider />
+    </Div>
+    <Div mb={4}>
+      <Anchor id="font-awesome" />
+      <FontAwesomeExample />
+      <Divider />
+    </Div>
+    <Div mb={4}>
+      <Anchor id="div-span" />
+      <DivSpanExample />
+    </Div>
   </Div>
@@ -28,0 +39,0 @@ )

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3422506

increased by0.61%

Number of package files

36

increased by12.5%

Lines of code

1449

increased by6.15%

Number of lines in readme file

106

increased by26.19%

No dependency changes