Web: COmponents: added story for RowContent
This commit is contained in:
Artem Tarasov
parent
b6f0888987
commit
273d279202
@ -41,6 +41,7 @@ module.exports = {
|
||||
"../request-loader/*.stories.@(js|mdx)",
|
||||
"../row/*.stories.@(js|mdx)",
|
||||
"../row-container/*.stories.@(js|mdx)",
|
||||
"../row-content/*.stories.@(js|mdx)",
|
||||
],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
|
||||
@ -8,11 +8,6 @@ import InputBlock from "../input-block";
|
||||
title="Components/PasswordInput"
|
||||
component={PasswordInput}
|
||||
subcomponents={{ InputBlock }}
|
||||
parameters={{
|
||||
source: {
|
||||
//code: stories.basic,
|
||||
},
|
||||
}}
|
||||
argTypes={{
|
||||
onChange: { action: "onChange" },
|
||||
onValidateInput: { action: "onValidateInput" },
|
||||
|
||||
@ -113,12 +113,18 @@ const RowContent = (props) => {
|
||||
};
|
||||
|
||||
RowContent.propTypes = {
|
||||
/** Components displayed inside RowContent */
|
||||
children: PropTypes.node.isRequired,
|
||||
/** Accepts class */
|
||||
className: PropTypes.string,
|
||||
/** If you do not need SideElements */
|
||||
disableSideInfo: PropTypes.bool,
|
||||
/** Accepts id */
|
||||
id: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
/** Need for change side information color */
|
||||
sideColor: PropTypes.string,
|
||||
/** Accepts css style */
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
isMobile: PropTypes.bool,
|
||||
|
||||
@ -1,287 +1,188 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { BooleanValue } from "react-values";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import RowContent from ".";
|
||||
import React, { useState } from "react";
|
||||
import RowContent from "./";
|
||||
import Link from "../link";
|
||||
import Checkbox from "../checkbox";
|
||||
import SendClockIcon from "../../../../../public/images/send.clock.react.svg";
|
||||
import CatalogSpamIcon from "../../../../../public/images/catalog.spam.react.svg";
|
||||
storiesOf("Components|RowContent", module)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => {
|
||||
return (
|
||||
<Section>
|
||||
<h3>Base demo</h3>
|
||||
<div style={{ height: "16px" }}></div>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
<>
|
||||
<SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
||||
<CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
type="page"
|
||||
title="0 000 0000000"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo
|
||||
</Link>
|
||||
<>
|
||||
<CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<></>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo
|
||||
</Link>
|
||||
<Link
|
||||
type="page"
|
||||
title="0 000 0000000"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo Demo
|
||||
</Link>
|
||||
<></>
|
||||
<></>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo Demo
|
||||
</Link>
|
||||
<Link
|
||||
type="page"
|
||||
title="0 000 0000000"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo Demo Demo
|
||||
</Link>
|
||||
<>
|
||||
<SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo Demo Demo
|
||||
</Link>
|
||||
<Link
|
||||
type="page"
|
||||
title="0 000 0000000"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo.demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo.demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<div style={{ height: "36px" }}></div>
|
||||
<h3>Custom elements</h3>
|
||||
<div style={{ height: "16px" }}></div>
|
||||
<RowContent disableSideInfo={true}>
|
||||
<Link
|
||||
type="page"
|
||||
title="John Doe"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
John Doe
|
||||
</Link>
|
||||
<></>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="1"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="2"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="3"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="4"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="5"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="6"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
<BooleanValue>
|
||||
{({ value, toggle }) => (
|
||||
<Checkbox
|
||||
id="7"
|
||||
name="sample"
|
||||
isChecked={value}
|
||||
onChange={(e) => {
|
||||
toggle(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</BooleanValue>
|
||||
</RowContent>
|
||||
</Section>
|
||||
);
|
||||
});
|
||||
import SendClockIcon from "../public/static/images/send.clock.react.svg";
|
||||
import CatalogSpamIcon from "../public/static/images/catalog.spam.react.svg";
|
||||
|
||||
const Template = (args) => {
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<h3>Base demo</h3>
|
||||
<div style={{ height: "16px" }}></div>
|
||||
<RowContent {...args}>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
<>
|
||||
<SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
||||
<CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo
|
||||
</Link>
|
||||
<Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo
|
||||
</Link>
|
||||
<>
|
||||
<CatalogSpamIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<></>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo
|
||||
</Link>
|
||||
<Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo Demo
|
||||
</Link>
|
||||
<></>
|
||||
<></>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo Demo
|
||||
</Link>
|
||||
<Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<RowContent>
|
||||
<Link
|
||||
type="page"
|
||||
title="Demo Demo Demo Demo"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
Demo Demo Demo Demo
|
||||
</Link>
|
||||
<>
|
||||
<SendClockIcon size="small" isfill={true} color="#3B72A7" />
|
||||
</>
|
||||
<Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="action"
|
||||
title="Demo Demo Demo Demo"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
Demo Demo Demo Demo
|
||||
</Link>
|
||||
<Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
||||
0 000 0000000
|
||||
</Link>
|
||||
<Link
|
||||
containerWidth="160px"
|
||||
type="page"
|
||||
title="demo.demo.demo.demo@demo.com"
|
||||
fontSize="12px"
|
||||
color="#A3A9AE"
|
||||
>
|
||||
demo.demo.demo.demo@demo.com
|
||||
</Link>
|
||||
</RowContent>
|
||||
<div style={{ height: "36px" }}></div>
|
||||
<h3>Custom elements</h3>
|
||||
<div style={{ height: "16px" }}></div>
|
||||
<RowContent disableSideInfo={true}>
|
||||
<Link
|
||||
type="page"
|
||||
title="John Doe"
|
||||
isBold={true}
|
||||
fontSize="15px"
|
||||
color="#333333"
|
||||
>
|
||||
John Doe
|
||||
</Link>
|
||||
<></>
|
||||
<Checkbox
|
||||
id="1"
|
||||
name="sample"
|
||||
isChecked={isChecked}
|
||||
onChange={(e) => {
|
||||
setIsChecked(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
</RowContent>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const basic = Template.bind({});
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
|
||||
|
||||
import RowContent from "./";
|
||||
import * as stories from "./row-content.stories.js";
|
||||
|
||||
<Meta title="Components/RowContent" component={RowContent} />
|
||||
|
||||
# RowContent
|
||||
|
||||
Required for formatted output of elements inside Row
|
||||
|
||||
<Canvas>
|
||||
<Story story={stories.basic} name="Default" />
|
||||
</Canvas>
|
||||
|
||||
<ArgsTable story="Default" />
|
||||
|
||||
## Description
|
||||
|
||||
To correctly display components inside RowContent, you must specify them in a certain order.
|
||||
|
||||
The first and second specified components will be interpreted as Main elements.
|
||||
First will be MainTitle and second MainIcons.
|
||||
All subsequent components will be located on the right and are considered SideElements.
|
||||
|
||||
**_Consider location of components in advance, since when viewing in tablet mode, the markup will shift SideElements to second line._**
|
||||
|
||||
Each not main child can take containerWidth property for task of width of child's container.
|
||||
Loading…
Reference in New Issue
Block a user