Skip to content

Commit 3755fdd

Browse files
aeagleaeagle
committed
Styled properties
1 parent dba4b24 commit 3755fdd

19 files changed

+266
-182
lines changed

‎react-spaces/.storybook/main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1+
const path = require("path");
2+
13
module.exports = {
24
stories: ["../src/**/*.stories.(mdx|tsx)"],
35
addons: ["@storybook/preset-typescript", "@storybook/addon-actions", "@storybook/addon-links", "@storybook/addon-docs/preset"],
6+
webpackFinal: async (config, { configType }) => {
7+
config.module.rules.push({
8+
test: /\.scss$/,
9+
use: ["style-loader", "css-loader", "sass-loader"],
10+
include: path.resolve(__dirname, "../"),
11+
});
12+
13+
return config;
14+
},
415
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { CommonHeader } from "../Utils";
77

88
## Useful properties
99

10+
Applies to `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
11+
1012
| Property | Type | Default | Description |
1113
| --- | --- | --- | --- |
1214
| as | *string* | div | Allows control over the outputted HTML element allowing HTML 5 semantic markup to be created. |

‎react-spaces/src/components/stories/02-components/Bottom.stories.mdx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ Anchored space on the bottom edge of it's parent.
5151

5252
### Properties
5353

54-
<PropsTable>
55-
<AnchoredProps />
56-
<StandardProps />
57-
</PropsTable>
54+
<Story name="Properties">
55+
<PropsTable>
56+
<AnchoredProps />
57+
<StandardProps />
58+
</PropsTable>
59+
</Story>

‎react-spaces/src/components/stories/02-components/BottomResizable.stories.mdx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,10 @@ Anchored resizable space on the bottom edge of it's parent.
6363

6464
### Properties
6565

66-
<PropsTable>
67-
<ResizableProps />
68-
<AnchoredProps />
69-
<StandardProps />
70-
</PropsTable>
66+
<Story name="Properties">
67+
<PropsTable>
68+
<ResizableProps />
69+
<AnchoredProps />
70+
<StandardProps />
71+
</PropsTable>
72+
</Story>

‎react-spaces/src/components/stories/02-components/Centered.stories.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,4 @@ on a space.
2222
<Centered>Centered content horizontally and vertically</Centered>
2323
</ViewPort>
2424
</Story>
25-
</Preview>
26-
27-
# Properties
28-
29-
<Props of={Centered} />
25+
</Preview>

‎react-spaces/src/components/stories/02-components/CenteredVertically.stories.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,4 @@ on a space.
2222
<CenteredVertically>Centered content vertically</CenteredVertically>
2323
</ViewPort>
2424
</Story>
25-
</Preview>
26-
27-
# Properties
28-
29-
<Props of={CenteredVertically} />
25+
</Preview>

‎react-spaces/src/components/stories/02-components/Custom.stories.mdx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ViewPort } from "../../ViewPort";
44
import { Custom } from "../../Space";
55
import { AnchorType } from "../../../types";
66
import { green, description } from "../Utils";
7-
import { CommonHeader } from "../Utils";
7+
import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../Utils";
88

99
<CommonHeader />
1010

@@ -133,6 +133,42 @@ intend to change the type of the space dynamically without causing remounting of
133133
</Story>
134134
</Preview>
135135

136-
# Properties
137-
138-
<Props of={Custom} />
136+
### Properties
137+
138+
<Story name="Properties">
139+
<PropsTable>
140+
<PropsHeader>Relevant as positioned</PropsHeader>
141+
<Prop name="isPositioned" type="boolean" default="false" description="Position space based on bottom, left, right, top, width and height properties." />
142+
<Prop name="bottom" type="number | string" description="Bottom offset from viewport edge." />
143+
<Prop name="left" type="number | string" description="Left offset from viewport edge." />
144+
<Prop name="right" type="number | string" description="Right offset from viewport edge." />
145+
<Prop name="top" type="number | string" description="Top offset from viewport edge." />
146+
<Prop name="width" type="number | string" description="Width of space." />
147+
<Prop name="height" type="number | string" description="Height of space." />
148+
<PropsHeader>Relevant as anchored</PropsHeader>
149+
<Prop name="anchor" type="anchor-left, anchor-top, anchor-right, anchor-bottom" description="Anchor the space to the parents edge" />
150+
<Prop name="anchorSize" type="number | string" description="Size of space when anchored." />
151+
<PropsHeader>Relevant as resizable</PropsHeader>
152+
<Prop name="resizable" type="boolean" default="false" description="Makes the space resizable." />
153+
<Prop name="handleSize" type="number" default="5" description="Size of the resize handle in pixels." />
154+
<Prop
155+
name="overlayHandle"
156+
type="boolean"
157+
default="true"
158+
description="Determines method of placement of the resize handle. By default the handle is placed over the space. When set to false, the space resize handle sits next to the space reducing the size of the space."
159+
/>
160+
<Prop name="minimumSize" type="number" description="Constrains resizing of the space to a minimum size." />
161+
<Prop name="maximumSize" type="number" description="Constrains resizing of the space to a maximum size." />
162+
<Prop
163+
name="onResizeStart"
164+
type="() => boolean"
165+
description="Triggered when a resize starts. Returning false from the event handler cancels the resize."
166+
/>
167+
<Prop
168+
name="onResizeEnd"
169+
type="(newSize: number) => void"
170+
description="Triggered when a resize ends. The final size in pixels of the space in after the resize is passed as the first parameter."
171+
/>
172+
<StandardProps />
173+
</PropsTable>
174+
</Story>

‎react-spaces/src/components/stories/02-components/Fill.stories.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,8 @@ Space which fills all remaining space taken up by anchored spaces.
131131

132132
### Properties
133133

134-
<PropsTable>
135-
<StandardProps />
136-
</PropsTable>
134+
<Story name="Properties">
135+
<PropsTable>
136+
<StandardProps />
137+
</PropsTable>
138+
</Story>

‎react-spaces/src/components/stories/02-components/Fixed.stories.mdx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Fixed } from "../../Fixed";
44
import { Centered } from "../../Centered";
55
import { LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../Space";
66
import { red, green, blue, description } from "../Utils";
7-
import { CommonHeader } from "../Utils";
7+
import { CommonHeader, PropsTable, PropsHeader, Prop } from "../Utils";
88

99
<CommonHeader />
1010

@@ -34,6 +34,15 @@ Top-level space with a fixed height and optional width.
3434
</Story>
3535
</Preview>
3636

37-
# Properties
38-
39-
<Props of={Fixed} />
37+
### Properties
38+
39+
<Story name="Properties">
40+
<PropsTable>
41+
<PropsHeader>Fixed properties</PropsHeader>
42+
<Prop name="width" type="number | string" description="Optional width of space. When not specified the space will fill 100% of it's container." />
43+
<Prop name="height" type="number | string" description="Height of space." />
44+
<PropsHeader>Standard properties</PropsHeader>
45+
<Prop name="className" type="string" description="A class name to apply to the space element." />
46+
<Prop name="style" type="CSSProperties" description="CSS properties" />
47+
</PropsTable>
48+
</Story>

‎react-spaces/src/components/stories/02-components/Left.stories.mdx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ Anchored space on the left edge of it's parent.
5151

5252
### Properties
5353

54-
<PropsTable>
55-
<AnchoredProps />
56-
<StandardProps />
57-
</PropsTable>
54+
<Story name="Properties">
55+
<PropsTable>
56+
<AnchoredProps />
57+
<StandardProps />
58+
</PropsTable>
59+
</Story>

0 commit comments

Comments
 (0)