Started using knobs

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 = () => (
-  <Banner
-    title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
-    link="https://code4.ro"
-  />
-);
+export default {
+  title: "Banner",
+  decorators: [withKnobs]
+};
+
+const colorOptions = {
+  Default: null,
+  Yellow: "yellow",
+  Green: "green"
+};
 
-export const green = () => (
-  <Banner
-    color="green"
-    title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
-    link="https://code4.ro"
-  />
-);
 
-export const yellow = () => (
+export const banner = () => (
   <Banner
-    color="yellow"
+    color={select("Color", colorOptions) || undefined}
     title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
     link="https://code4.ro"
   />

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 (
-    <Button color="primary" onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
-
-export const inverted = () => {
-  return (
-    <Button inverted={true} onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
-
-export const disabled = () => {
-  return (
-    <Button disabled={true} onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
-
-export const disabledAndInverted = () => {
-  return (
-    <Button disabled={true} inverted={true} onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
-
-export const danger = () => {
-  return (
-    <Button color="danger" onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
+const colorOptions = [
+  "primary",
+  "danger",
+  "warning"
+];
 
-export const warning = () => {
+export const button = () => {
   return (
-    <Button color="warning" onClick={sayMyName}>
-      Hello Friend
+    <Button
+      inverted={boolean("Inverted", false)}
+      disabled={boolean("Disabled", false)}
+      color={select("Color", colorOptions, "primary")}
+      onClick={sayMyName}
+    >
+      {text("Text", "Hello Friend")}
     </Button>
   );
 };

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 (
-    <DataTableItem extraStyles={extraStyles}>
-      With Default Alignment
-    </DataTableItem>
-  );
+const alignOptions = {
+  "Default (left)": null,
+  Right: "right",
+  Center: "center"
 };
 
-export const withRightAlignment = () => {
-  return (
-    <DataTableItem extraStyles={extraStyles} align="right">
-      With Right Alignment
-    </DataTableItem>
-  );
+
+const extraStyles = {
+  minWidth: "250px"
 };
 
-export const withCenterAlignment = () => {
+
+export const dataTableItem = () => {
   return (
-    <DataTableItem extraStyles={extraStyles} align="center">
-      Centered Content
+    <DataTableItem
+      extraStyles={extraStyles}
+      align={select("Alignment", alignOptions) || undefined}
+    >
+      With {select("Alignment", alignOptions) || "default (left)"} Alignment
     </DataTableItem>
   );
 };

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 = () => <DevelopedBy />;
-
-export const twoLines = () => <DevelopedBy showSecondLine />;
-
-export const oneLineNoPartners = () => <DevelopedBy showPartners={false} />;
-
 const customPartnerLogos = [
   <Logo url="https://www.gov.ro" key="gov">
     <img src={partnerLogo} alt="Guvernul României" />
@@ -37,16 +31,18 @@ const customSecondLineLogos = [
   </Logo>
 ];
 
-export const oneLineCustom = () => (
-  <DevelopedBy showPartners partnerLogos={customPartnerLogos} />
-);
+export const developedBy = () => {
+  const showSecondLine = boolean("Show Secondary Line", false);
+
+  return (
+    <DevelopedBy
+      showPartners={boolean("Show Prtners", false)}
+      partnerLogos={boolean("Use Custom Partners Logos", false) && customPartnerLogos}
+      showSecondLine={showSecondLine}
+      secondLineCaption={showSecondLine && text("Second Line Caption", "Much appreciation goes to")}
+      secondLineLogos={showSecondLine && boolean("Use Second Line Custom Logos", false) && customSecondLineLogos
+      }
+    />
+  );
+};
 
-export const twoLineCustom = () => (
-  <DevelopedBy
-    showPartners
-    partnerLogos={customPartnerLogos}
-    showSecondLine
-    secondLineCaption="Much appreciation goes to"
-    secondLineLogos={customSecondLineLogos}
-  />
-);

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,57 +17,23 @@ const options = [
   { value: 7, label: "Constanta" }
 ];
 
-export const DropdownSearchClosed = () => {
-  return (
-    <DropdownSearch title={"Judet"} options={options} onSelect={() => {}} />
-  );
-};
+export const dropdownSearch = () => {
+  const showSearchInput = boolean("Show Search Input", false);
 
-export const DropdownSearchAlwaysOpen = () => {
   return (
     <DropdownSearch
-      title={title}
-      options={options}
-      onSelect={() => {}}
-      isAlwaysOpen={true}
-    />
-  );
-};
-
-export const DropdownSearchWithAlert = () => {
-  return (
-    <DropdownSearch
-      title={title}
       options={options}
+      title={text("Title", "Județ")}
+      isAlwaysOpen={boolean("Always Open", false)}
+      showSearchInput={showSearchInput}
+      searchPlaceholder={showSearchInput && text("Search Placeholder", "Type to search in the list below")}
       onSelect={(selected) => {
         alert(JSON.stringify(selected));
       }}
     />
   );
 };
 
-export const DropdownWithSearchPlaceholder = () => {
-  return (
-    <DropdownSearch
-      title={title}
-      options={options}
-      onSelect={() => {}}
-      searchPlaceholder={"Type to search in the list below"}
-    />
-  );
-};
-
-export const DropdownWithoutSearchInput = () => {
-  return (
-    <DropdownSearch
-      title={title}
-      options={options}
-      onSelect={() => {}}
-      showSearchInput={false}
-    />
-  );
-};
-
 const countiesWithCities = {
   Alba: ["Somewhere in Alba", "Somewhere else in Alba"],
   Prahova: ["Somewhere in Prahova", "Somewhere else in Prahova"],

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 = () => (
   <a href="/">
@@ -25,19 +29,11 @@ const ProfileItems = () => (
   </>
 );
 
-export const withMenuItems = () => (
-  <Header Logo={<Logo />} MenuItems={<MenuItems />} />
-);
-
-export const withName = () => (
-  <Header name="Ce ma fac" Logo={<Logo />} MenuItems={<MenuItems />} />
-);
-
-export const withProfileItems = () => (
+export const header = () => (
   <Header
-    name="Ce ma fac"
     Logo={<Logo />}
-    MenuItems={<MenuItems />}
-    ProfileItems={<ProfileItems />}
+    MenuItems={boolean("With Menu Items", true) && <MenuItems />}
+    name={boolean("With Name", false) && text("Name", "Ce ma fac")}
+    ProfileItems={boolean("With Profile Items", false) && <ProfileItems />}
   />
 );

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 = () => <Hero title={title} />;
-
-export const withTitleSubtitle = () => (
-  <Hero title={title} subtitle={subtitle} />
-);
+export default {
+  title: "Hero",
+  decorators: [withKnobs]
+};
 
-export const withTitleSubtitleIcon = () => (
-  <Hero title={title} subtitle={subtitle}>
-    <ArrowSvg />
-  </Hero>
-);
+export const hero = () => {
+  const useFallbackIcon = boolean("Use Fallback Icon", false);
 
-export const withDefaultIcon = () => (
-  <Hero title={title} subtitle={subtitle} useFallbackIcon={true} />
-);
+  return (
+    <Hero
+      title={text("Title", title)}
+      subtitle={boolean("With Subtitle", false) && text("Subtitle", subtitle)}
+      useFallbackIcon={useFallbackIcon}
+    >
+      { !useFallbackIcon && boolean("Use Custom Icon", false) && <ArrowSvg />}
+    </Hero>
+  )
+};