From 2aabae66445df50ddb87f22136a9f934c075e36c Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Thu, 4 Mar 2021 02:59:49 +0300 Subject: [PATCH] Web: Components: added stories for EmptyScreenContainer, FieldContainer, FileInput, Grid --- .../asc-web-components/.storybook/main.js | 4 + .../empty-screen-container.stories.js | 92 ++++--- .../field-container.stories.js | 90 ++++++- .../file-input/file-input.stories.js | 119 +++++---- .../asc-web-components/grid/grid.stories.js | 226 ++++++++++++++++++ 5 files changed, 455 insertions(+), 76 deletions(-) diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js index d00008c6ea..0c3f41001a 100644 --- a/packages/asc-web-components/.storybook/main.js +++ b/packages/asc-web-components/.storybook/main.js @@ -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", diff --git a/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js b/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js index f28e66be26..ec4e33fcb8 100644 --- a/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js +++ b/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js @@ -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"; + +Go to home} +/>`, + }, + }, + }, +}; + +const Template = (args) => { + return ( - action("Reset filter clicked")(e)} - > + args.onClick(e)}> Reset filter } /> - )); + ); +}; + +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.", +}; diff --git a/packages/asc-web-components/field-container/field-container.stories.js b/packages/asc-web-components/field-container/field-container.stories.js index a276354407..a3612c1373 100644 --- a/packages/asc-web-components/field-container/field-container.stories.js +++ b/packages/asc-web-components/field-container/field-container.stories.js @@ -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](https://placehold.it/15/C96C27/000000?text=+) #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"; + + + console.log(e.target.value)} /> +`, + }, + }, + }, +}; + +const Template = (args) => { + const [value, setValue] = useState(""); + return ( + + { + setValue(e.target.value); + }} + /> + + ); +}; + +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) => ( +
+ +
+ ), + ], +}; +/* import { storiesOf } from "@storybook/react"; import { action } from "@storybook/addon-actions"; import { StringValue } from "react-values"; @@ -58,3 +145,4 @@ storiesOf("Components|FieldContainer", module) )} )); +*/ diff --git a/packages/asc-web-components/file-input/file-input.stories.js b/packages/asc-web-components/file-input/file-input.stories.js index aab1d8ad42..8c8e373ce2 100644 --- a/packages/asc-web-components/file-input/file-input.stories.js +++ b/packages/asc-web-components/file-input/file-input.stories.js @@ -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 ( -
- { - action("onInput")(file); - console.log( - `name: ${file.name}`, - `lastModified: ${file.lastModifiedDate}`, - `size: ${file.size}` - ); - }} - /> -
+| 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"; + { + console.log( + file, + "name: ", file.name}, + "lastModified: ", file.lastModifiedDate}, + "size: ", file.size} ); - }); + }} +/>`, + }, + }, + }, +}; + +const Template = (args) => { + return ( + { + 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", +}; diff --git a/packages/asc-web-components/grid/grid.stories.js b/packages/asc-web-components/grid/grid.stories.js index ee085dd699..660e3e069d 100644 --- a/packages/asc-web-components/grid/grid.stories.js +++ b/packages/asc-web-components/grid/grid.stories.js @@ -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"; + + + + 200px + + + minmax(100px,1fr) + + + auto + +`, + }, + }, + }, +}; + +const gridProps = { + marginProp: "0 0 20px 0", +}; + +const boxProps = { + paddingProp: "10px", + displayProp: "flex", + alignItems: "center", + justifyContent: "center", +}; + +const Template = (args) => { + return ( + + + 200px + + + minmax(100px,1fr) + + + auto + + + ); +}; + +const TemplateColumns = (args) => { + return ( + <> + + + 200px + + + minmax(100px,1fr) + + + auto + + + + + + 25% + + + 25% + + + 25% + + + + + + 100px + + + 100px + + + 100px + + + + + + minmax(100px,1fr) + + + minmax(100px,1fr) + + + minmax(100px,1fr) + + + + ); +}; + +const TemplateRows = (args) => { + return ( + <> + + + 100px + + + minmax(100px,1fr) + + + auto + + + + + + 50px + + + 50px + + + 50px + + + + ); +}; + +const TemplateLayout = (args) => { + return ( + + + header + + + navbar + + + main + + + sidebar + + + footer + + + ); +}; + +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) )); +*/