Skip to content

Commit c4ff77b

Browse files
author
Surdu
committed
Added knobs for all components that needed them
1 parent 367a4a8 commit c4ff77b

12 files changed

Lines changed: 205 additions & 257 deletions

File tree

‎src/components/banner/banner.stories.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
11
import React from "react";
22
import { Banner } from "./banner";
3+
import { withKnobs, select } from "@storybook/addon-knobs";
34

4-
export default { title: "Banner" };
55

6-
export const defaultColor = () => (
7-
<Banner
8-
title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
9-
link="https://code4.ro"
10-
/>
11-
);
6+
export default {
7+
title: "Banner",
8+
decorators: [withKnobs]
9+
};
10+
11+
const colorOptions = {
12+
Default: null,
13+
Yellow: "yellow",
14+
Green: "green"
15+
};
1216

13-
export const green = () => (
14-
<Banner
15-
color="green"
16-
title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
17-
link="https://code4.ro"
18-
/>
19-
);
2017

21-
export const yellow = () => (
18+
export const banner = () => (
2219
<Banner
23-
color="yellow"
20+
color={select("Color", colorOptions) || undefined}
2421
title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. "
2522
link="https://code4.ro"
2623
/>

‎src/components/button/button.stories.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ function sayMyName() {
1111
alert("Hello Friend");
1212
}
1313

14-
const typeOptions = {
15-
Primary: "primary",
16-
Danger: "danger",
17-
Warning: "warning"
18-
};
14+
const colorOptions = [
15+
"primary",
16+
"danger",
17+
"warning"
18+
];
1919

20-
export const primary = () => {
20+
export const button = () => {
2121
return (
2222
<Button
2323
inverted={boolean("Inverted", false)}
2424
disabled={boolean("Disabled", false)}
25-
type={select("Type", typeOptions, "primary")}
25+
color={select("Color", colorOptions, "primary")}
2626
onClick={sayMyName}
2727
>
2828
{text("Text", "Hello Friend")}

‎src/components/data-table-item/data-table-item.stories.js‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
11
import React from "react";
22
import { DataTableItem } from "./data-table-item";
3+
import { withKnobs, select } from "@storybook/addon-knobs";
34

4-
export default { title: "Data Table Item" };
5-
6-
const extraStyles = {
7-
minWidth: "250px"
5+
export default {
6+
title: "Data Table Item",
7+
decorators: [withKnobs]
88
};
99

10-
export const withDefaultAlignment = () => {
11-
return (
12-
<DataTableItem extraStyles={extraStyles}>
13-
With Default Alignment
14-
</DataTableItem>
15-
);
10+
const alignOptions = {
11+
"Default (left)": null,
12+
Right: "right",
13+
Center: "center"
1614
};
1715

18-
export const withRightAlignment = () => {
19-
return (
20-
<DataTableItem extraStyles={extraStyles} align="right">
21-
With Right Alignment
22-
</DataTableItem>
23-
);
16+
17+
const extraStyles = {
18+
minWidth: "250px"
2419
};
2520

26-
export const withCenterAlignment = () => {
21+
22+
export const dataTableItem = () => {
2723
return (
28-
<DataTableItem extraStyles={extraStyles} align="center">
29-
Centered Content
24+
<DataTableItem
25+
extraStyles={extraStyles}
26+
align={select("Alignment", alignOptions) || undefined}
27+
>
28+
With {select("Alignment", alignOptions) || "default (left)"} Alignment
3029
</DataTableItem>
3130
);
3231
};

‎src/components/developed-by/developed-by.stories.js‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
import React from "react";
22
import { DevelopedBy } from "./developed-by";
3-
import { withKnobs } from "@storybook/addon-knobs";
43
import { Logo } from "../..";
54
import partnerLogo from "./assets/partener.png";
65
import dsuLogo from "./assets/dsu.png";
6+
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
77

88
export default { title: "Developed By", decorators: [withKnobs] };
99

10-
export const oneLine = () => <DevelopedBy />;
11-
12-
export const twoLines = () => <DevelopedBy showSecondLine />;
13-
14-
export const oneLineNoPartners = () => <DevelopedBy showPartners={false} />;
15-
1610
const customPartnerLogos = [
1711
<Logo url="https://www.gov.ro" key="gov">
1812
<img src={partnerLogo} alt="Guvernul României" />
@@ -37,16 +31,18 @@ const customSecondLineLogos = [
3731
</Logo>
3832
];
3933

40-
export const oneLineCustom = () => (
41-
<DevelopedBy showPartners partnerLogos={customPartnerLogos} />
42-
);
34+
export const developedBy = () => {
35+
const showSecondLine = boolean("Show Secondary Line", false);
36+
37+
return (
38+
<DevelopedBy
39+
showPartners={boolean("Show Prtners", false)}
40+
partnerLogos={boolean("Use Custom Partners Logos", false) && customPartnerLogos}
41+
showSecondLine={showSecondLine}
42+
secondLineCaption={showSecondLine && text("Second Line Caption", "Much appreciation goes to")}
43+
secondLineLogos={showSecondLine && boolean("Use Second Line Custom Logos", false) && customSecondLineLogos
44+
}
45+
/>
46+
);
47+
};
4348

44-
export const twoLineCustom = () => (
45-
<DevelopedBy
46-
showPartners
47-
partnerLogos={customPartnerLogos}
48-
showSecondLine
49-
secondLineCaption="Much appreciation goes to"
50-
secondLineLogos={customSecondLineLogos}
51-
/>
52-
);

‎src/components/dropdown-search/dropdown-search.stories.js‎

Lines changed: 11 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useState } from "react";
22
import { DropdownSearch } from "./dropdown-search";
3+
import { withKnobs, text, boolean } from "@storybook/addon-knobs";
34

4-
export default { title: "Dropdown Search" };
5-
6-
const title = "Judet";
5+
export default {
6+
title: "Dropdown Search",
7+
decorators: [withKnobs]
8+
};
79

810
const options = [
911
{ value: 1, label: "Alba" },
@@ -15,57 +17,23 @@ const options = [
1517
{ value: 7, label: "Constanta" }
1618
];
1719

18-
export const DropdownSearchClosed = () => {
19-
return (
20-
<DropdownSearch title={"Judet"} options={options} onSelect={() => {}} />
21-
);
22-
};
20+
export const dropdownSearch = () => {
21+
const showSearchInput = boolean("Show Search Input", false);
2322

24-
export const DropdownSearchAlwaysOpen = () => {
2523
return (
2624
<DropdownSearch
27-
title={title}
28-
options={options}
29-
onSelect={() => {}}
30-
isAlwaysOpen={true}
31-
/>
32-
);
33-
};
34-
35-
export const DropdownSearchWithAlert = () => {
36-
return (
37-
<DropdownSearch
38-
title={title}
3925
options={options}
26+
title={text("Title", "Județ")}
27+
isAlwaysOpen={boolean("Always Open", false)}
28+
showSearchInput={showSearchInput}
29+
searchPlaceholder={showSearchInput && text("Search Placeholder", "Type to search in the list below")}
4030
onSelect={(selected) => {
4131
alert(JSON.stringify(selected));
4232
}}
4333
/>
4434
);
4535
};
4636

47-
export const DropdownWithSearchPlaceholder = () => {
48-
return (
49-
<DropdownSearch
50-
title={title}
51-
options={options}
52-
onSelect={() => {}}
53-
searchPlaceholder={"Type to search in the list below"}
54-
/>
55-
);
56-
};
57-
58-
export const DropdownWithoutSearchInput = () => {
59-
return (
60-
<DropdownSearch
61-
title={title}
62-
options={options}
63-
onSelect={() => {}}
64-
showSearchInput={false}
65-
/>
66-
);
67-
};
68-
6937
const countiesWithCities = {
7038
Alba: ["Somewhere in Alba", "Somewhere else in Alba"],
7139
Prahova: ["Somewhere in Prahova", "Somewhere else in Prahova"],

‎src/components/header/header.stories.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React from "react";
22
import { Header } from "./header";
33
import { ReactComponent as LogoSvg } from "../../images/cemafac.svg";
4+
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
45

5-
export default { title: "Header" };
6+
export default {
7+
title: "Header",
8+
decorators: [withKnobs]
9+
};
610

711
const Logo = () => (
812
<a href="/">
@@ -25,19 +29,11 @@ const ProfileItems = () => (
2529
</>
2630
);
2731

28-
export const withMenuItems = () => (
29-
<Header Logo={<Logo />} MenuItems={<MenuItems />} />
30-
);
31-
32-
export const withName = () => (
33-
<Header name="Ce ma fac" Logo={<Logo />} MenuItems={<MenuItems />} />
34-
);
35-
36-
export const withProfileItems = () => (
32+
export const header = () => (
3733
<Header
38-
name="Ce ma fac"
3934
Logo={<Logo />}
40-
MenuItems={<MenuItems />}
41-
ProfileItems={<ProfileItems />}
35+
MenuItems={boolean("With Menu Items", true) && <MenuItems />}
36+
name={boolean("With Name", false) && text("Name", "Ce ma fac")}
37+
ProfileItems={boolean("With Profile Items", false) && <ProfileItems />}
4238
/>
4339
);

‎src/components/hero/hero.stories.js‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import React from "react";
22
import { Hero } from "./hero";
33
import { ReactComponent as ArrowSvg } from "../../images/icons/arrow-right.svg";
4+
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
5+
46
const title = "Ce pasi ai de urmat";
57
const subtitle = "Pentru a te putea ajuta ...";
68

7-
export default { title: "Hero" };
8-
9-
export const withTitle = () => <Hero title={title} />;
10-
11-
export const withTitleSubtitle = () => (
12-
<Hero title={title} subtitle={subtitle} />
13-
);
9+
export default {
10+
title: "Hero",
11+
decorators: [withKnobs]
12+
};
1413

15-
export const withTitleSubtitleIcon = () => (
16-
<Hero title={title} subtitle={subtitle}>
17-
<ArrowSvg />
18-
</Hero>
19-
);
14+
export const hero = () => {
15+
const useFallbackIcon = boolean("Use Fallback Icon", false);
2016

21-
export const withDefaultIcon = () => (
22-
<Hero title={title} subtitle={subtitle} useFallbackIcon={true} />
23-
);
17+
return (
18+
<Hero
19+
title={text("Title", title)}
20+
subtitle={boolean("With Subtitle", false) && text("Subtitle", subtitle)}
21+
useFallbackIcon={useFallbackIcon}
22+
>
23+
{ !useFallbackIcon && boolean("Use Custom Icon", false) && <ArrowSvg />}
24+
</Hero>
25+
)
26+
};

‎src/components/incubated-by/incubated-by.stories.js‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import React from "react";
22
import { IncubatedBy } from "./incubated-by";
33
import { Logo } from "../..";
44
import patriaBank from "../../images/patria-bank.png";
5+
import { withKnobs, select } from "@storybook/addon-knobs";
6+
7+
export default {
8+
title: "Incubated By",
9+
decorators: [withKnobs]
10+
};
511

612
const customPartnerLogos = (
713
<Logo url="https://www.patriabank.ro/" key="patria-bank">
@@ -24,14 +30,30 @@ const customMultiplePartnersLogos = [
2430
</Logo>
2531
];
2632

27-
export default { title: "Incubated By" };
33+
const noPartner = 0;
34+
const singlePartner = 1;
35+
const multiPartner = 2;
2836

29-
export const normal = () => <IncubatedBy />;
37+
const options = {
38+
"No Partner": noPartner,
39+
"Single Partner": singlePartner,
40+
"Multiple Partner": multiPartner
41+
};
3042

31-
export const withPartner = () => (
32-
<IncubatedBy partnerLogos={customPartnerLogos} />
33-
);
3443

35-
export const withMultiplePartners = () => (
36-
<IncubatedBy partnerLogos={customMultiplePartnersLogos} />
37-
);
44+
export const incubatedBy = () => {
45+
let logos;
46+
const option = select("Partners", options, noPartner)
47+
48+
if (option === singlePartner) {
49+
logos = customPartnerLogos;
50+
}
51+
52+
if (option === multiPartner) {
53+
logos = customMultiplePartnersLogos;
54+
}
55+
56+
return (
57+
<IncubatedBy partnerLogos={logos} />
58+
)
59+
};

0 commit comments

Comments
 (0)