layabout - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

demo/index.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
-import FlexLayout from '../src/FlexLayout';
+import { FlexLayout, SpacedLayout } from '../src';
 
@@ -33,1 +33,32 @@ const Block = ({ style, children }) =>
   ));
+storiesOf('SpacedLayout', module)
+  .add('Layout default spacing', () => (
+    <SpacedLayout>
+      <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+      <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+    </SpacedLayout>
+  ))
+  .add('Layout spacing types', () => (
+    <section>
+      <SpacedLayout spacing="begin">
+        <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+        <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+      </SpacedLayout>
+      <SpacedLayout spacing="middle">
+        <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+        <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+      </SpacedLayout>
+      <SpacedLayout spacing="end">
+        <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+        <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+      </SpacedLayout>
+      <SpacedLayout spacing="between">
+        <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+        <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+      </SpacedLayout>
+      <SpacedLayout spacing="around">
+        <Block style={{ backgroundColor: 'lightblue' }}>Col 1</Block>
+        <Block style={{ backgroundColor: 'yellowgreen' }}>Col 2</Block>
+      </SpacedLayout>
+    </section>
+  ));

package.json

 {
   "name": "layabout",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Simple layout components for React",
@@ -5,0 +5,0 @@ "author": "Dan Mutton",

README.md

@@ -35,3 +35,9 @@ # Layabout
 
+`crossAxis` TO BE IMPLEMENTED
+- Describes how to align content on the cross axis.
 
+Options:
+- `String` of one of the following: `begin`, `middle`, `end`
+
+
 `gutterSpacing` TO BE IMPLEMENTED
@@ -56,4 +62,2 @@ - Spacing between content. Can be standard style units such as %, px, em.
 ### SpacedLayout
-To be implemented
-
 Lays out its children within the space available with any remaining spacing allocated according to the spacing property.
@@ -64,3 +68,3 @@
 Options:
-- `String` of one of the following: `between`, `around`, `begin`, `end`
+- `String` of one of the following: `between`, `around`, `begin`, `end`, `middle`
 
@@ -77,3 +81,10 @@ If no value is provided spacing will be allocated to `between`.
 
+`crossAxis` TO BE IMPLEMENTED
+- Describes how to align content on the cross axis.
 
+Options:
+- `String` of one of the following: `begin`, `middle`, `end`
+
+
+
 #### Example
@@ -80,0 +91,0 @@ ~~~~

src/__tests__/FlexLayout-test.js

@@ -6,7 +6,2 @@ import React from 'react';
 describe('container', () => {
-  it('renders a div for a container', () => {
-    const container = shallow(<FlexLayout />).find('div');
-    expect(container).toBePresent();
-  });
-
   describe('default behaviour', () => {
@@ -19,2 +14,6 @@ let container;
 
+    it('renders a div for a container', () => {
+      expect(container).toBePresent();
+    });
+
     it('applies a flex display', () => {
@@ -24,3 +23,3 @@ expect(container).toHaveStyle('display', 'flex');
 
-    it('aligns its content in the center', () => {
+    it('aligns its content on the cross axis in the center', () => {
       expect(container).toHaveStyle('alignItems', 'center');
@@ -27,0 +26,0 @@ });

src/index.js

 export { default as FlexLayout } from './FlexLayout';
+export { default as SpacedLayout } from './SpacedLayout';

No alert changes

Improved metrics

Total package byte prevSize

220056

increased by0.83%

Lines of code

371

increased by15.22%

Number of lines in readme file

102

increased by12.09%

Worsened metrics

Number of package files

15

decreased by-6.25%

No dependency changes