Added layer story

Author: aeagle

react-spaces/src/components/stories/00-docs/02-UsefulProperties.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
-import { CommonHeader } from "../Utils";
+import { CommonHeader, PropsTable, StandardProps } from "../Utils";
 
 <CommonHeader />
 
@@ -9,12 +9,6 @@ import { CommonHeader } from "../Utils";
 
 Applies to `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
 
-| Property  | Type | Default | Description |
-| --- | --- | --- | --- |
-| as | *string* | div | Allows control over the outputted HTML element allowing HTML 5 semantic markup to be created. |
-| centerContent | *CenterType.Vertical* or *CenterType.HorizontalVertical* or *"vertical"* or *"horizontalVertical"* | | Apply centering to children. |
-| className | *string* | | A class name to apply to the space element. |
-| id | *string* or *number* | *Randomly generated `id`* | By default a space outputs an element with a randomly generated `id`. You can specify your own `id`. It is preferable to specify an `id` on a space that is being added and removed based on state changes. |
-| scrollable | *boolean* | false | Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if the content overflows. |
-| trackSize | *boolean* | false | Tells the space to report it's size when it changes size to the `<Info />` component. With this turned off the space will only report the initial size. |
-| zIndex | *number* | 0 | A number representing which layer the space sits within. If not specified the space is place in layer 0. Higher numbers appear in front of lower numbers. This is intended to be an alternative to using `<Layer />` as a wrapper and preferable for spaces moving between different layers to avoid remounting of child components. |
+<PropsTable>
+	<StandardProps />
+</PropsTable>

react-spaces/src/components/stories/00-docs/03-UsefulEvents.stories.mdx

@@ -7,9 +7,7 @@ import { CommonHeader } from "../Utils";
 
 ## Useful events
 
-### Space specific events
-
-#### onResizeStart
+### onResizeStart
 
 Applies to `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`
 
@@ -29,7 +27,7 @@ const Example = () => {
 }
 ```
 
-#### onResizeEnd
+### onResizeEnd
 
 Applies to `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`
 
@@ -52,7 +50,7 @@ const Example = () => {
 }
 ```
 
-### Passthrough events
+### Element events
 
 Applies to `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
 

react-spaces/src/components/stories/00-docs/04-ChangeHistory.stories.mdx

@@ -7,9 +7,10 @@ import { CommonHeader } from "../Utils";
 
 ## Change history
 
-### 0.1.23
+### 0.1.23 - 0.1.24
 
 - Fixed generation of head styles height and z-index which were missing a semi-colon.
+- Fixed NPM readme
 
 ### 0.1.22
 

react-spaces/src/components/stories/02-components/Layer.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { withKnobs } from "@storybook/addon-knobs";
+import { ViewPort } from "../../ViewPort";
+import { Layer } from "../../Layer";
+import { Centered } from "../../Centered";
+import { Positioned } from "../../Space";
+import { blue, red } from "../Utils";
+import { CommonHeader, description, PropsTable, Prop } from "../Utils";
+
+<CommonHeader />
+
+<Meta title="Components|Layer" component={Layer} />
+
+## Layer
+
+Groups child spaces and places them all at a certain `zIndex`.
+
+<Preview>
+	<Story name="Default">
+		<ViewPort>
+			<Layer zIndex={1}>
+				<Positioned style={blue} left={100} top={100} width={200} height={200}>
+					{description("Positioned in layer with zIndex 1")}
+				</Positioned>
+				<Positioned style={blue} left={350} top={100} width={200} height={200}>
+					{description("Positioned in layer with zIndex 1")}
+				</Positioned>
+			</Layer>
+			<Layer zIndex={2}>
+				<Positioned style={red} left={200} top={250} width={200} height={200}>
+					{description("Positioned in layer with zIndex 2")}
+				</Positioned>
+				<Positioned style={red} left={450} top={250} width={200} height={200}>
+					{description("Positioned in layer with zIndex 2")}
+				</Positioned>
+			</Layer>
+		</ViewPort>
+	</Story>
+</Preview>
+
+### Properties
+
+<Story name="Properties">
+	<PropsTable>
+		<Prop name="zIndex" type="number" description="zIndex to apply to all child spaces." />
+	</PropsTable>
+</Story>

react-spaces/src/components/stories/Utils.tsx

@@ -188,9 +188,9 @@ export const DemoUI = () => {
 	);
 };
 
-export const blue: CSSProperties = { backgroundColor: "#e0eeee" };
-export const red: CSSProperties = { backgroundColor: "#eee0e0" };
-export const green: CSSProperties = { backgroundColor: "#e0eee0" };
+export const blue: CSSProperties = { backgroundColor: "#e0eeee", opacity: 0.7 };
+export const red: CSSProperties = { backgroundColor: "#eee0e0", opacity: 0.7 };
+export const green: CSSProperties = { backgroundColor: "#e0eee0", opacity: 0.7 };
 
 export const description = (props: string, additional?: React.ReactNode) => (
 	<Info>