From 273d2792028ec1250cca6c103fb15360f289ed33 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 10 Mar 2021 14:15:22 +0300 Subject: [PATCH] Web: COmponents: added story for RowContent --- .../asc-web-components/.storybook/main.js | 1 + .../password-input/password-input.stories.mdx | 5 - .../asc-web-components/row-content/index.js | 6 + .../row-content/row-content.stories.js | 471 +++++++----------- .../row-content/row-content.stories.mdx | 28 ++ 5 files changed, 221 insertions(+), 290 deletions(-) create mode 100644 packages/asc-web-components/row-content/row-content.stories.mdx diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js index 807b221988..f9465e42dd 100644 --- a/packages/asc-web-components/.storybook/main.js +++ b/packages/asc-web-components/.storybook/main.js @@ -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", diff --git a/packages/asc-web-components/password-input/password-input.stories.mdx b/packages/asc-web-components/password-input/password-input.stories.mdx index 1836a8085f..1587d6d208 100644 --- a/packages/asc-web-components/password-input/password-input.stories.mdx +++ b/packages/asc-web-components/password-input/password-input.stories.mdx @@ -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" }, diff --git a/packages/asc-web-components/row-content/index.js b/packages/asc-web-components/row-content/index.js index 6803cda4e3..08aa9e5dc5 100644 --- a/packages/asc-web-components/row-content/index.js +++ b/packages/asc-web-components/row-content/index.js @@ -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, diff --git a/packages/asc-web-components/row-content/row-content.stories.js b/packages/asc-web-components/row-content/row-content.stories.js index 8eaf1e966b..301a9a1576 100644 --- a/packages/asc-web-components/row-content/row-content.stories.js +++ b/packages/asc-web-components/row-content/row-content.stories.js @@ -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 ( -
-

Base demo

-
- - - Demo - - <> - - - - - Demo - - - Demo - - - 0 000 0000000 - - - demo@demo.com - - - - - Demo Demo - - <> - - - <> - - Demo Demo - - - 0 000 0000000 - - - demo.demo@demo.com - - - - - Demo Demo Demo - - <> - <> - - Demo Demo Demo - - - 0 000 0000000 - - - demo.demo.demo@demo.com - - - - - Demo Demo Demo Demo - - <> - - - - Demo - - - Demo Demo Demo Demo - - - 0 000 0000000 - - - demo.demo.demo.demo@demo.com - - -
-

Custom elements

-
- - - John Doe - - <> - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - - {({ value, toggle }) => ( - { - toggle(e.target.checked); - }} - /> - )} - - -
- ); - }); +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 ( + <> +

Base demo

+
+ + + Demo + + <> + + + + + Demo + + + Demo + + + 0 000 0000000 + + + demo@demo.com + + + + + Demo Demo + + <> + + + <> + + Demo Demo + + + 0 000 0000000 + + + demo.demo@demo.com + + + + + Demo Demo Demo + + <> + <> + + Demo Demo Demo + + + 0 000 0000000 + + + demo.demo.demo@demo.com + + + + + Demo Demo Demo Demo + + <> + + + + Demo + + + Demo Demo Demo Demo + + + 0 000 0000000 + + + demo.demo.demo.demo@demo.com + + +
+

Custom elements

+
+ + + John Doe + + <> + { + setIsChecked(e.target.checked); + }} + /> + + + ); +}; + +export const basic = Template.bind({}); diff --git a/packages/asc-web-components/row-content/row-content.stories.mdx b/packages/asc-web-components/row-content/row-content.stories.mdx new file mode 100644 index 0000000000..40b67169b2 --- /dev/null +++ b/packages/asc-web-components/row-content/row-content.stories.mdx @@ -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"; + + + +# RowContent + +Required for formatted output of elements inside Row + + + + + + + +## 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.