From 367a4a85a4292319cd202105ba598cfa3d244cfb Mon Sep 17 00:00:00 2001
From: Surdu <neon-doubt@maskmail.net>
Date: Tue, 2 Jun 2020 03:45:58 +0300
Subject: [PATCH 1/2] Started using knobs

---
 src/components/button/button.stories.js | 59 +++++++------------------
 1 file changed, 17 insertions(+), 42 deletions(-)

diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
index 0560a84..588e56f 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 (
-    <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>
-  );
+const typeOptions = {
+  Primary: "primary",
+  Danger: "danger",
+  Warning: "warning"
 };
 
-export const danger = () => {
-  return (
-    <Button color="danger" onClick={sayMyName}>
-      Hello Friend
-    </Button>
-  );
-};
-
-export const warning = () => {
+export const primary = () => {
   return (
-    <Button color="warning" onClick={sayMyName}>
-      Hello Friend
+    <Button
+      inverted={boolean("Inverted", false)}
+      disabled={boolean("Disabled", false)}
+      type={select("Type", typeOptions, "primary")}
+      onClick={sayMyName}
+    >
+      {text("Text", "Hello Friend")}
     </Button>
   );
 };

From c4ff77b29b33586c26915b0b8b42ca89f84cd3b9 Mon Sep 17 00:00:00 2001
From: Surdu <neon-doubt@maskmail.net>
Date: Fri, 9 Oct 2020 00:04:12 +0300
Subject: [PATCH 2/2] Added knobs for all components that needed them

---
 src/components/banner/banner.stories.js       |  29 ++---
 src/components/button/button.stories.js       |  14 +--
 .../data-table-item.stories.js                |  37 +++---
 .../developed-by/developed-by.stories.js      |  34 +++--
 .../dropdown-search.stories.js                |  54 ++------
 src/components/header/header.stories.js       |  22 ++--
 src/components/hero/hero.stories.js           |  33 ++---
 .../incubated-by/incubated-by.stories.js      |  38 ++++--
 src/components/input/input.stories.js         | 117 +++++++++---------
 src/components/label/label.stories.js         |  14 ++-
 src/components/list-item/list-item.stories.js |  35 ++----
 .../search-input/search-input.stories.js      |  35 ++----
 12 files changed, 205 insertions(+), 257 deletions(-)

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 = () => (
-  <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"
   />
diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
index 588e56f..2306d6e 100644
--- a/src/components/button/button.stories.js
+++ b/src/components/button/button.stories.js
@@ -11,18 +11,18 @@ function sayMyName() {
   alert("Hello Friend");
 }
 
-const typeOptions = {
-  Primary: "primary",
-  Danger: "danger",
-  Warning: "warning"
-};
+const colorOptions = [
+  "primary",
+  "danger",
+  "warning"
+];
 
-export const primary = () => {
+export const button = () => {
   return (
     <Button
       inverted={boolean("Inverted", false)}
       disabled={boolean("Disabled", false)}
-      type={select("Type", typeOptions, "primary")}
+      color={select("Color", colorOptions, "primary")}
       onClick={sayMyName}
     >
       {text("Text", "Hello Friend")}
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 (
-    <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>
   );
 };
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 = () => <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}
-  />
-);
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 (
-    <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));
       }}
@@ -44,28 +34,6 @@ export const DropdownSearchWithAlert = () => {
   );
 };
 
-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"],
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 = () => (
   <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 />}
   />
 );
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 = () => <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>
+  )
+};
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 = (
   <Logo url="https://www.patriabank.ro/" key="patria-bank">
@@ -24,14 +30,30 @@ const customMultiplePartnersLogos = [
   </Logo>
 ];
 
-export default { title: "Incubated By" };
+const noPartner = 0;
+const singlePartner = 1;
+const multiPartner = 2;
 
-export const normal = () => <IncubatedBy />;
+const options = {
+  "No Partner": noPartner,
+  "Single Partner": singlePartner,
+  "Multiple Partner": multiPartner
+};
 
-export const withPartner = () => (
-  <IncubatedBy partnerLogos={customPartnerLogos} />
-);
 
-export const withMultiplePartners = () => (
-  <IncubatedBy partnerLogos={customMultiplePartnersLogos} />
-);
+export const incubatedBy = () => {
+  let logos;
+  const option = select("Partners", options, noPartner)
+
+  if (option === singlePartner) {
+    logos = customPartnerLogos;
+  }
+
+  if (option === multiPartner) {
+    logos = customMultiplePartnersLogos;
+  }
+
+  return (
+    <IncubatedBy partnerLogos={logos} />
+  )
+};
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 = () => (
-  <form
-    style={style}
-    onSubmit={(e) => {
-      e.preventDefault();
-    }}
-  >
-    <Input type="text" label="Text" />
-    <Input type="email" label="Email" />
-    <Input
-      type="tel"
-      label="Telephone"
-      minLength={10}
-      maxLength={13}
-      pattern="(?:00|07)[0-9]*"
-      title="07xxxxxxxx sau 00xxxxxxxxxx - doar cifre"
-    />
-    <Input type="password" label="Password" />
-    <Input type="number" label="Free-range number" />
-    <Input type="number" min={1} max={3} label="Restricted number" />
-    <Input type="number" min={0} max={10} step={2} label="Number with step" />
+const typeOptions = [
+  "text",
+  "email",
+  "tel",
+  "password",
+  "number"
+];
 
-    <input type="submit" value="Validate inputs" />
-    {/* 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 */}
-  </form>
-);
+const sizeOptions = {
+  normal: null,
+  small: "small",
+  medium: "medium",
+  large: "large"
+}
 
-export const sizes = () => (
-  <div style={style}>
-    <Input label="Small" size="small" />
-    <Input label="Normal" />
-    <Input label="Medium" size="medium" />
-    <Input label="Large Input" size="large" />
-  </div>
-);
+const colorOptions = {
+  default: null,
+  primary: "primary",
+  info: "info",
+  success: "success",
+  warning: "warning",
+  danger: "danger"
+}
 
-export const styles = () => (
-  <div style={style}>
-    <Input label="Rounded" rounded={true} />
-  </div>
-);
+export const input = () => {
+  const type = select("Type", typeOptions, "text");
 
-export const colors = () => (
-  <div style={style}>
-    <Input label="Primary" color="primary" />
-    <Input label="Info" color="info" />
-    <Input label="Success" color="success" />
-    <Input label="Warning" color="warning" />
-    <Input label="Danger" color="danger" />
-  </div>
-);
+  return (
+    <form
+      style={style}
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <Input
+        label={text("Label", "Input Label")}
+        secondaryLabel={text("Secondary Label")}
+        type={type}
+        size={select("Size", sizeOptions) || undefined}
+        color={select("Color", colorOptions) || undefined}
+        defaultValue={text("Default Value")}
+        title={text("Title")}
+        rounded={boolean("Rounded", false)}
+        disabled={boolean("Disabled", false)}
+        usePlaceholder={boolean("Use Placeholder", false)}
+        loading={boolean("Loading", false)}
+      />
 
-export const other = () => (
-  <div style={style}>
-    <Input label="Disabled Input" disabled={true} />
-    <Input label="With Placeholder" usePlaceholder={true} />
-    <Input label="With Default Value" defaultValue="Some default Value" />
-    <Input label="With Loading State" loading={true} />
-    <Input label="With Secondary Label" secondaryLabel="Secondary Label" />
-  </div>
-);
+      <input type="submit" value="Validate inputs" />
+      {/* 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
+      */}
+    </form>
+  )
+}
 
 const emailMessage = {
   typeMismatch: "Un email valid trebuie sa contina @"
@@ -129,7 +126,7 @@ export const events = () => {
         usePlaceholder={true}
         onChange={(e) => setInputValue(e.target.value)}
       />
-      <label>{inputValue}</label>
+      <div>{inputValue}</div>
     </div>
   );
 };
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 = () => (
-  <>
-    <Label text="Some Label" />
-    <Label text="Some Secondary Label" isSecondary={true} />
-  </>
+  <Label
+    text={text("Text", "Some Label")}
+    isSecondary={boolean("Is Secondary")}
+  />
 );
diff --git a/src/components/list-item/list-item.stories.js b/src/components/list-item/list-item.stories.js
index 6a52763..639f574 100644
--- a/src/components/list-item/list-item.stories.js
+++ b/src/components/list-item/list-item.stories.js
@@ -1,32 +1,19 @@
 import React, { useState } from "react";
 import { ListItem } from "./list-item";
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 
-export default { title: "ListItem" };
-
-export const withInactiveState = () => (
-  <ListItem title={"Simptome și tratament"} />
-);
-
-export const withActiveState = () => (
-  <ListItem active={true} title={"Simptome și tratament"} />
-);
-
-export const withNonOptionState = () => {
-  return (
-    <div style={{ minWidth: 300, maxWidth: 750 }}>
-      <ListItem
-        nonOption={true}
-        title={`Nu manifești niciun simptom de infecție. Te rugăm să rămâi în siguranță la
-          domiciliu și să limitezi la maximum orice ieșire nerelevantă dacă ai posibilitatea.
-          Dacă nu poți lucra de acasă și trebuie să ieși din casă atunci consultă secțiunea de
-          sfaturi și bune practici pentru cei care nu pot sta în auto-izolare de pe acest website.`}
-      />
-    </div>
-  );
+export default {
+  title: "ListItem",
+  decorators: [withKnobs]
 };
 
-export const withActiveStateAndArrow = () => (
-  <ListItem active={true} hasNext={true} title={"Simptome și tratament"} />
+export const listItem = () => (
+  <ListItem
+    title={text("Title", "Simptome și tratament")}
+    active={boolean("Active")}
+    nonOption={boolean("Non-option")}
+    hasNext={boolean("Has Next")}
+  />
 );
 
 export const onClickWithValue = () => {
diff --git a/src/components/search-input/search-input.stories.js b/src/components/search-input/search-input.stories.js
index 2f5d151..e0c6af2 100644
--- a/src/components/search-input/search-input.stories.js
+++ b/src/components/search-input/search-input.stories.js
@@ -4,40 +4,19 @@ import { SearchInput } from "./search-input";
 
 export default { title: "Search Input", decorators: [withKnobs] };
 
-export const searchInput = () => <SearchInput></SearchInput>;
-export const icon = () => (
-  <SearchInput hasIcon={boolean("Has search", false)}></SearchInput>
-);
-export const placeholder = () => (
-  <SearchInput
-    placeholder={text("Placeholder", "caută informații aici")}
-  ></SearchInput>
-);
-
-export const onValueChanged = () => (
+export const searchInput = () => (
   <SearchInput
+    hasIcon={boolean("Show Search Icon", false)}
+    placeholder={text("Placeholder", "Caută informații aici")}
+    value=""
     onValueChange={(value) => {
-      alert(value);
+      alert("Value:", value);
     }}
-  ></SearchInput>
-);
-
-export const value = () => (
-  <SearchInput value={text("Value", "Code4Romania")}></SearchInput>
-);
-
-export const onClick = () => (
-  <SearchInput
     onClick={(searchValue) => {
-      alert("Search value: " + searchValue);
+      alert("Search clicked: " + searchValue);
     }}
-  ></SearchInput>
-);
-
-export const onEnter = () => (
-  <SearchInput
     onEnter={(searchValue) => {
       alert("Search value: " + searchValue);
     }}
-  ></SearchInput>
+  />
 );