diff --git a/src/components/banner/banner.stories.js b/src/components/banner/banner.stories.js index 23ec1f0..babaeb5 100644 --- a/src/components/banner/banner.stories.js +++ b/src/components/banner/banner.stories.js @@ -1,26 +1,23 @@ import React from "react"; import { Banner } from "./banner"; +import { withKnobs, select } from "@storybook/addon-knobs"; -export default { title: "Banner" }; -export const defaultColor = () => ( - -); +export default { + title: "Banner", + decorators: [withKnobs] +}; + +const colorOptions = { + Default: null, + Yellow: "yellow", + Green: "green" +}; -export const green = () => ( - -); -export const yellow = () => ( +export const banner = () => ( diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js index 0560a84..2306d6e 100644 --- a/src/components/button/button.stories.js +++ b/src/components/button/button.stories.js @@ -1,56 +1,31 @@ import React from "react"; import { Button } from "./button"; +import { withKnobs, text, boolean, select } from "@storybook/addon-knobs"; -export default { title: "Button" }; +export default { + title: "Button", + decorators: [withKnobs] +}; function sayMyName() { alert("Hello Friend"); } -export const primary = () => { - return ( - - ); -}; - -export const inverted = () => { - return ( - - ); -}; - -export const disabled = () => { - return ( - - ); -}; - -export const disabledAndInverted = () => { - return ( - - ); -}; - -export const danger = () => { - return ( - - ); -}; +const colorOptions = [ + "primary", + "danger", + "warning" +]; -export const warning = () => { +export const button = () => { return ( - ); }; diff --git a/src/components/data-table-item/data-table-item.stories.js b/src/components/data-table-item/data-table-item.stories.js index 4ff597a..560f51d 100644 --- a/src/components/data-table-item/data-table-item.stories.js +++ b/src/components/data-table-item/data-table-item.stories.js @@ -1,32 +1,31 @@ import React from "react"; import { DataTableItem } from "./data-table-item"; +import { withKnobs, select } from "@storybook/addon-knobs"; -export default { title: "Data Table Item" }; - -const extraStyles = { - minWidth: "250px" +export default { + title: "Data Table Item", + decorators: [withKnobs] }; -export const withDefaultAlignment = () => { - return ( - - With Default Alignment - - ); +const alignOptions = { + "Default (left)": null, + Right: "right", + Center: "center" }; -export const withRightAlignment = () => { - return ( - - With Right Alignment - - ); + +const extraStyles = { + minWidth: "250px" }; -export const withCenterAlignment = () => { + +export const dataTableItem = () => { return ( - - Centered Content + + With {select("Alignment", alignOptions) || "default (left)"} Alignment ); }; diff --git a/src/components/developed-by/developed-by.stories.js b/src/components/developed-by/developed-by.stories.js index aea5281..c7a7aca 100644 --- a/src/components/developed-by/developed-by.stories.js +++ b/src/components/developed-by/developed-by.stories.js @@ -1,18 +1,12 @@ import React from "react"; import { DevelopedBy } from "./developed-by"; -import { withKnobs } from "@storybook/addon-knobs"; import { Logo } from "../.."; import partnerLogo from "./assets/partener.png"; import dsuLogo from "./assets/dsu.png"; +import { withKnobs, boolean, text } from "@storybook/addon-knobs"; export default { title: "Developed By", decorators: [withKnobs] }; -export const oneLine = () => ; - -export const twoLines = () => ; - -export const oneLineNoPartners = () => ; - const customPartnerLogos = [ Guvernul României @@ -37,16 +31,18 @@ const customSecondLineLogos = [ ]; -export const oneLineCustom = () => ( - -); +export const developedBy = () => { + const showSecondLine = boolean("Show Secondary Line", false); + + return ( + + ); +}; -export const twoLineCustom = () => ( - -); diff --git a/src/components/dropdown-search/dropdown-search.stories.js b/src/components/dropdown-search/dropdown-search.stories.js index bc723f4..fd1a12a 100644 --- a/src/components/dropdown-search/dropdown-search.stories.js +++ b/src/components/dropdown-search/dropdown-search.stories.js @@ -1,9 +1,11 @@ import React, { useState } from "react"; import { DropdownSearch } from "./dropdown-search"; +import { withKnobs, text, boolean } from "@storybook/addon-knobs"; -export default { title: "Dropdown Search" }; - -const title = "Judet"; +export default { + title: "Dropdown Search", + decorators: [withKnobs] +}; const options = [ { value: 1, label: "Alba" }, @@ -15,28 +17,16 @@ const options = [ { value: 7, label: "Constanta" } ]; -export const DropdownSearchClosed = () => { - return ( - {}} /> - ); -}; +export const dropdownSearch = () => { + const showSearchInput = boolean("Show Search Input", false); -export const DropdownSearchAlwaysOpen = () => { return ( {}} - isAlwaysOpen={true} - /> - ); -}; - -export const DropdownSearchWithAlert = () => { - return ( - { alert(JSON.stringify(selected)); }} @@ -44,28 +34,6 @@ export const DropdownSearchWithAlert = () => { ); }; -export const DropdownWithSearchPlaceholder = () => { - return ( - {}} - searchPlaceholder={"Type to search in the list below"} - /> - ); -}; - -export const DropdownWithoutSearchInput = () => { - return ( - {}} - showSearchInput={false} - /> - ); -}; - const countiesWithCities = { Alba: ["Somewhere in Alba", "Somewhere else in Alba"], Prahova: ["Somewhere in Prahova", "Somewhere else in Prahova"], diff --git a/src/components/header/header.stories.js b/src/components/header/header.stories.js index 427bbba..a0e8cd4 100644 --- a/src/components/header/header.stories.js +++ b/src/components/header/header.stories.js @@ -1,8 +1,12 @@ import React from "react"; import { Header } from "./header"; import { ReactComponent as LogoSvg } from "../../images/cemafac.svg"; +import { withKnobs, boolean, text } from "@storybook/addon-knobs"; -export default { title: "Header" }; +export default { + title: "Header", + decorators: [withKnobs] +}; const Logo = () => ( @@ -25,19 +29,11 @@ const ProfileItems = () => ( ); -export const withMenuItems = () => ( -
} MenuItems={} /> -); - -export const withName = () => ( -
} MenuItems={} /> -); - -export const withProfileItems = () => ( +export const header = () => (
} - MenuItems={} - ProfileItems={} + MenuItems={boolean("With Menu Items", true) && } + name={boolean("With Name", false) && text("Name", "Ce ma fac")} + ProfileItems={boolean("With Profile Items", false) && } /> ); diff --git a/src/components/hero/hero.stories.js b/src/components/hero/hero.stories.js index efc63f5..c78ac76 100644 --- a/src/components/hero/hero.stories.js +++ b/src/components/hero/hero.stories.js @@ -1,23 +1,26 @@ import React from "react"; import { Hero } from "./hero"; import { ReactComponent as ArrowSvg } from "../../images/icons/arrow-right.svg"; +import { withKnobs, boolean, text } from "@storybook/addon-knobs"; + const title = "Ce pasi ai de urmat"; const subtitle = "Pentru a te putea ajuta ..."; -export default { title: "Hero" }; - -export const withTitle = () => ; - -export const withTitleSubtitle = () => ( - -); +export default { + title: "Hero", + decorators: [withKnobs] +}; -export const withTitleSubtitleIcon = () => ( - - - -); +export const hero = () => { + const useFallbackIcon = boolean("Use Fallback Icon", false); -export const withDefaultIcon = () => ( - -); + return ( + + { !useFallbackIcon && boolean("Use Custom Icon", false) && } + + ) +}; diff --git a/src/components/incubated-by/incubated-by.stories.js b/src/components/incubated-by/incubated-by.stories.js index b01a8ac..2d9a707 100644 --- a/src/components/incubated-by/incubated-by.stories.js +++ b/src/components/incubated-by/incubated-by.stories.js @@ -2,6 +2,12 @@ import React from "react"; import { IncubatedBy } from "./incubated-by"; import { Logo } from "../.."; import patriaBank from "../../images/patria-bank.png"; +import { withKnobs, select } from "@storybook/addon-knobs"; + +export default { + title: "Incubated By", + decorators: [withKnobs] +}; const customPartnerLogos = ( @@ -24,14 +30,30 @@ const customMultiplePartnersLogos = [ ]; -export default { title: "Incubated By" }; +const noPartner = 0; +const singlePartner = 1; +const multiPartner = 2; -export const normal = () => ; +const options = { + "No Partner": noPartner, + "Single Partner": singlePartner, + "Multiple Partner": multiPartner +}; -export const withPartner = () => ( - -); -export const withMultiplePartners = () => ( - -); +export const incubatedBy = () => { + let logos; + const option = select("Partners", options, noPartner) + + if (option === singlePartner) { + logos = customPartnerLogos; + } + + if (option === multiPartner) { + logos = customMultiplePartnersLogos; + } + + return ( + + ) +}; diff --git a/src/components/input/input.stories.js b/src/components/input/input.stories.js index c5885ad..d5997f2 100644 --- a/src/components/input/input.stories.js +++ b/src/components/input/input.stories.js @@ -1,73 +1,70 @@ import React, { useState } from "react"; import { Input } from "./input"; +import { withKnobs, text, select, boolean } from "@storybook/addon-knobs"; -export default { title: "Input" }; +export default { + title: "Input", + decorators: [withKnobs] +}; const style = { width: 500 }; -export const types = () => ( -
{ - e.preventDefault(); - }} - > - - - - - - - +const typeOptions = [ + "text", + "email", + "tel", + "password", + "number" +]; - - {/* Please see - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_validation_process - on how to trigger native form validation from JS */} -
-); +const sizeOptions = { + normal: null, + small: "small", + medium: "medium", + large: "large" +} -export const sizes = () => ( -
- - - - -
-); +const colorOptions = { + default: null, + primary: "primary", + info: "info", + success: "success", + warning: "warning", + danger: "danger" +} -export const styles = () => ( -
- -
-); +export const input = () => { + const type = select("Type", typeOptions, "text"); -export const colors = () => ( -
- - - - - -
-); + return ( +
{ + e.preventDefault(); + }} + > + -export const other = () => ( -
- - - - - -
-); + + {/* Please see + https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Constraint_validation_process + on how to trigger native form validation from JS + */} +
+ ) +} const emailMessage = { typeMismatch: "Un email valid trebuie sa contina @" @@ -129,7 +126,7 @@ export const events = () => { usePlaceholder={true} onChange={(e) => setInputValue(e.target.value)} /> - +
{inputValue}
); }; diff --git a/src/components/label/label.stories.js b/src/components/label/label.stories.js index 4c24ac5..ad5b181 100644 --- a/src/components/label/label.stories.js +++ b/src/components/label/label.stories.js @@ -1,11 +1,15 @@ import React from "react"; import { Label } from "./label"; +import { withKnobs, text, boolean } from "@storybook/addon-knobs"; -export default { title: "Label" }; +export default { + title: "Label", + decorators: [withKnobs] +}; export const types = () => ( - <> -