Web: Components: added stories for EmptyScreenContainer, FieldContainer, FileInput, Grid
This commit is contained in:
Artem Tarasov
parent
84062c6d28
commit
2aabae6644
@ -16,6 +16,10 @@ module.exports = {
|
||||
"../drop-down/*.stories.@(js|mdx)",
|
||||
"../drop-down-item/*.stories.@(js|mdx)",
|
||||
"../email-input/*.stories.@(js|mdx)",
|
||||
"../empty-screen-container/*.stories.@(js|mdx)",
|
||||
"../field-container/*.stories.@(js|mdx)",
|
||||
"../file-input/*.stories.@(js|mdx)",
|
||||
"../grid/*.stories.@(js|mdx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
|
||||
@ -1,42 +1,72 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import { withKnobs, text } from "@storybook/addon-knobs/react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import EmptyScreenContainer from ".";
|
||||
import EmptyScreenContainer from "./";
|
||||
import Link from "../link";
|
||||
import CrossIcon from "../../../../../public/images/cross.react.svg"
|
||||
storiesOf("Components| EmptyScreenContainer", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => (
|
||||
import CrossIcon from "../../../public/images/cross.react.svg";
|
||||
|
||||
export default {
|
||||
title: "Components/EmptyScreenContainer",
|
||||
component: EmptyScreenContainer,
|
||||
argTypes: { onClick: { action: "Reset filter clicked" } },
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Used to display empty screen page
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ----------------- | :------------: | :------: | :----: | :-----: | --------------------------------------- |
|
||||
| buttons | element | - | - | - | Content of EmptyContentButtonsContainer |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| descriptionText | string | - | - | - | Description text |
|
||||
| headerText | string | - | - | - | Header text |
|
||||
| subheadingText | string | - | - | - | Subheading text |
|
||||
| id | string | - | - | - | Accepts id |
|
||||
| imageAlt | string | - | - | - | Alternative image text |
|
||||
| imageSrc | string | - | - | - | Image url source |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import EmptyScreenContainer from "@appserver/components/empty-screen-container";
|
||||
|
||||
<EmptyScreenContainer
|
||||
imageSrc="empty_screen_filter.png"
|
||||
imageAlt="Empty Screen Filter image"
|
||||
headerText="No results matching your search could be found"
|
||||
subheading="No files to be displayed in this section"
|
||||
descriptionText="No results matching your search could be found"
|
||||
buttons={<a href="/">Go to home</a>}
|
||||
/>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<EmptyScreenContainer
|
||||
imageSrc={text("imageSrc", "empty_screen_filter.png")}
|
||||
imageAlt={text("imageAlt", "Empty Screen Filter image")}
|
||||
headerText={text(
|
||||
"headerText",
|
||||
"No results matching your search could be found"
|
||||
)}
|
||||
subheadingText={text(
|
||||
"subheaderText",
|
||||
"No files to be displayed in this section"
|
||||
)}
|
||||
descriptionText={text(
|
||||
"descriptionText",
|
||||
"No people matching your filter can be displayed in this section. Please select other filter options or clear filter to view all the people in this section."
|
||||
)}
|
||||
{...args}
|
||||
buttons={
|
||||
<>
|
||||
<CrossIcon size="small" style={{ marginRight: "4px" }} />
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
onClick={(e) => action("Reset filter clicked")(e)}
|
||||
>
|
||||
<Link type="action" isHovered={true} onClick={(e) => args.onClick(e)}>
|
||||
Reset filter
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
));
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
|
||||
Default.args = {
|
||||
imageSrc: "empty_screen_filter.png",
|
||||
imageAlt: "Empty Screen Filter image",
|
||||
headerText: "No results matching your search could be found",
|
||||
subheadingText: "No files to be displayed in this section",
|
||||
descriptionText:
|
||||
"No people matching your filter can be displayed in this section. Please select other filter options or clear filter to view all the people in this section.",
|
||||
};
|
||||
|
||||
@ -1,4 +1,91 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import FieldContainer from ".";
|
||||
import TextInput from "../text-input";
|
||||
|
||||
export default {
|
||||
title: "Components/FieldContainer",
|
||||
component: FieldContainer,
|
||||
argTypes: {
|
||||
errorColor: { control: "color" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `Responsive form field container
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------------------- | :---------------: | :------: | :----: | :-------: | ------------------------------------------------ |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| errorColor | string | - | - |  #C96C27 | Error text color |
|
||||
| errorMessageWidth | string | - | - | 320px | Error text width |
|
||||
| errorMessage | string | - | - | - | Error message text |
|
||||
| hasError | bool | - | - | false | Indicates that the field is incorrect |
|
||||
| helpButtonHeaderContent | string | - | - | - | Tooltip header content (tooltip opened in aside) |
|
||||
| id | string | - | - | - | Accepts id |
|
||||
| isRequired | bool | - | - | false | Indicates that the field is required to fill |
|
||||
| isVertical | bool | - | - | false | Vertical or horizontal alignment |
|
||||
| labelText | string | - | - | - | Field label text |
|
||||
| labelVisible | bool | - | - | true | Sets visibility of field label section |
|
||||
| maxLabelWidth | string | - | - | 110px | Max label width in horizontal alignment |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
| tooltipContent | object, string | - | - | - | Tooltip content |
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import FieldContainer from "@appserver/components/field-container";
|
||||
|
||||
<FieldContainer labelText="Name:">
|
||||
<TextInput value="" onChange={(e) => console.log(e.target.value)} />
|
||||
</FieldContainer>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<FieldContainer {...args}>
|
||||
<TextInput
|
||||
value={value}
|
||||
hasError={args.hasError}
|
||||
className="field-input"
|
||||
onChange={(e) => {
|
||||
setValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</FieldContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
isVertical: false,
|
||||
isRequired: false,
|
||||
hasError: false,
|
||||
labelVisible: true,
|
||||
labelText: "Name:",
|
||||
maxLabelWidth: "110px",
|
||||
tooltipContent: "Paste you tooltip content here",
|
||||
helpButtonHeaderContent: "Tooltip header",
|
||||
place: "top",
|
||||
errorMessage:
|
||||
"Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
|
||||
errorColor: "#C96C27",
|
||||
errorMessageWidth: "293px",
|
||||
};
|
||||
Default.parameters = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ marginTop: 100, marginLeft: 50 }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
/*
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { StringValue } from "react-values";
|
||||
@ -58,3 +145,4 @@ storiesOf("Components|FieldContainer", module)
|
||||
)}
|
||||
</StringValue>
|
||||
));
|
||||
*/
|
||||
|
||||
@ -1,49 +1,80 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { text, boolean, withKnobs, select } from "@storybook/addon-knobs/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import FileInput from ".";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import FileInput from "./";
|
||||
|
||||
const sizeInput = ["base", "middle", "big", "huge", "large"];
|
||||
export default {
|
||||
title: "Components/FileInput",
|
||||
component: FileInput,
|
||||
argTypes: {
|
||||
onInput: { action: "onInput" },
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `File entry field
|
||||
|
||||
storiesOf("Components|Input", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("file input", () => {
|
||||
const placeholder = text("placeholder", "Input file");
|
||||
const size = select("size", sizeInput, "base");
|
||||
const scale = boolean("scale", false);
|
||||
const isDisabled = boolean("isDisabled", false);
|
||||
const id = text("id", "fileInputId");
|
||||
const name = text("name", "demoFileInputName");
|
||||
const hasError = boolean("hasError", false);
|
||||
const hasWarning = boolean("hasWarning", false);
|
||||
const accept = text("accept", ".doc, .docx");
|
||||
### Properties
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<FileInput
|
||||
id={id}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
size={size}
|
||||
scale={scale}
|
||||
isDisabled={isDisabled}
|
||||
hasError={hasError}
|
||||
hasWarning={hasWarning}
|
||||
accept={accept}
|
||||
onInput={(file) => {
|
||||
action("onInput")(file);
|
||||
console.log(
|
||||
`name: ${file.name}`,
|
||||
`lastModified: ${file.lastModifiedDate}`,
|
||||
`size: ${file.size}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------- | :------------: | :------: | :--------------------------------------: | :-----: | ---------------------------------------------------------------------------------- |
|
||||
| className | string | - | - | - | Accepts class |
|
||||
| hasError | bool | - | - | false | Indicates the input field has an error |
|
||||
| hasWarning | bool | - | - | false | Indicates the input field has a warning |
|
||||
| id | string | - | - | - | Used as HTML 'id' property |
|
||||
| isDisabled | bool | - | - | false | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
|
||||
| name | string | - | - | - | Used as HTML 'name' property |
|
||||
| onInput | func | - | - | - | Called when a file is selected |
|
||||
| placeholder | string | - | - | - | Placeholder text for the input |
|
||||
| scale | bool | - | - | false | Indicates the input field has scale |
|
||||
| size | string | - | base, middle, big, huge, large | base | Supported size of the input fields. |
|
||||
| style | obj, array | - | - | - | Accepts css style |
|
||||
| accept | string | - | - | - | Specifies files visible for upload |
|
||||
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import FileInput from "@appserver/components/file-input";
|
||||
<FileInput
|
||||
placeholder="Input file"
|
||||
accept=".doc, .docx"
|
||||
onInput={(file) => {
|
||||
console.log(
|
||||
file,
|
||||
"name: ", file.name},
|
||||
"lastModified: ", file.lastModifiedDate},
|
||||
"size: ", file.size}
|
||||
);
|
||||
});
|
||||
}}
|
||||
/>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<FileInput
|
||||
{...args}
|
||||
onInput={(file) => {
|
||||
args.onInput(
|
||||
`File: ${file},
|
||||
name: ${file.name},
|
||||
lastModified: ${file.lastModifiedDate},
|
||||
size: ${file.size}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
placeholder: "Input file",
|
||||
size: "base",
|
||||
scale: false,
|
||||
isDisabled: false,
|
||||
id: "file-input-id",
|
||||
name: "demoFileInputName",
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
accept: ".doc, .docx",
|
||||
};
|
||||
|
||||
@ -1,4 +1,229 @@
|
||||
import React from "react";
|
||||
|
||||
import Grid from "./";
|
||||
import Box from "../box";
|
||||
import Text from "../text";
|
||||
|
||||
export default {
|
||||
title: "Components/Grid",
|
||||
component: Grid,
|
||||
subcomponents: { Box },
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns.
|
||||
|
||||
### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| :--------------: | :-----------------------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| alignContent | string | - | - | - | sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis |
|
||||
| alignItems | string | - | - | - | sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. |
|
||||
| alignSelf | string | - | - | - | overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. |
|
||||
| areasProp | array | - | [["header","header"],["navbar","main"]], [{ name: "header", start: [0, 0], end: [1, 0] }, { name: "navbar", start: [0, 1], end: [0, 1] }, { name: "main", start: [1, 1], end: [1, 1] }] | - | specifies named grid areas. Takes value as array of string arrays that specify named grid areas. Or objects array, that contains names and coordinates of areas. |
|
||||
| columnsProp | string,array,object | - | "25%", ["200px", ["100px","1fr"], "auto"], { count: 3, size: "100px" } | - | defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size. Specifying an object allows you to specify the number of repetitions and the size of the column. Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. |
|
||||
| gridArea | string | - | - | - | is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. |
|
||||
| gridColumnGap | string | - | - | - | sets the size of the gap (gutter) between an element's columns. |
|
||||
| gridGap | string | - | - | - | sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. |
|
||||
| gridRowGap | string | - | - | - | sets the size of the gap (gutter) between an element's grid rows. |
|
||||
| heightProp | string | - | - | 100% | defines the height of the border of the element area. |
|
||||
| justifyContent | string | - | - | - | defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. |
|
||||
| justifyItems | string | - | - | - | defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. |
|
||||
| justifySelf | string | - | - | - | sets the way a box is justified inside its alignment container along the appropriate axis. |
|
||||
| marginProp | string | - | - | - | sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. |
|
||||
| paddingProp | string | - | - | - | sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left |
|
||||
| rowsProp | string,array | - | "50px", ["100px", ["100px","1fr"], "auto"] | - | defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes. The row size can be specified as an array of minimum and maximum heights. |
|
||||
| widthProp | string | - | - | 100% | defines the width of the border of the element area. |
|
||||
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `import Grid from "@appserver/components/grid";
|
||||
|
||||
<Grid {...args} {...gridProps}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>200px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const gridProps = {
|
||||
marginProp: "0 0 20px 0",
|
||||
};
|
||||
|
||||
const boxProps = {
|
||||
paddingProp: "10px",
|
||||
displayProp: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return (
|
||||
<Grid {...args} {...gridProps}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>200px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
const TemplateColumns = (args) => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
{...args}
|
||||
{...gridProps}
|
||||
columnsProp={["200px", ["100px", "1fr"], "auto"]}
|
||||
>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>200px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...args} {...gridProps} columnsProp="25%">
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>25%</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...args} {...gridProps} columnsProp={{ count: 3, size: "100px" }}>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
{...args}
|
||||
{...gridProps}
|
||||
columnsProp={{ count: 3, size: ["100px", "1fr"] }}
|
||||
>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TemplateRows = (args) => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
{...args}
|
||||
{...gridProps}
|
||||
rowsProp={["100px", ["100px", "1fr"], "auto"]}
|
||||
>
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>100px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>minmax(100px,1fr)</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>auto</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid {...args} {...gridProps} rowsProp="50px">
|
||||
<Box {...boxProps} backgroundProp="#F4991A">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F2EAD3">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} backgroundProp="#F9F5F0">
|
||||
<Text>50px</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TemplateLayout = (args) => {
|
||||
return (
|
||||
<Grid
|
||||
{...args}
|
||||
widthProp="100vw"
|
||||
heightProp="100vh"
|
||||
gridGap="10px"
|
||||
rowsProp={["auto", "1fr", "auto"]}
|
||||
columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
|
||||
areasProp={[
|
||||
{ name: "header", start: [0, 0], end: [2, 0] },
|
||||
{ name: "navbar", start: [0, 1], end: [0, 1] },
|
||||
{ name: "main", start: [1, 1], end: [1, 1] },
|
||||
{ name: "sidebar", start: [2, 1], end: [2, 1] },
|
||||
{ name: "footer", start: [0, 2], end: [2, 2] },
|
||||
]}
|
||||
>
|
||||
<Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
|
||||
<Text>header</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
|
||||
<Text>navbar</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
|
||||
<Text>main</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
|
||||
<Text>sidebar</Text>
|
||||
</Box>
|
||||
<Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
|
||||
<Text>footer</Text>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
columnsProp: ["200px", ["100px", "1fr"], "auto"],
|
||||
};
|
||||
export const Columns = TemplateColumns.bind({});
|
||||
export const Rows = TemplateRows.bind({});
|
||||
export const Layout = TemplateLayout.bind({});
|
||||
/*
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
@ -129,3 +354,4 @@ storiesOf("Components|Grid", module)
|
||||
</Box>
|
||||
</Grid>
|
||||
));
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user