2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs/react";
|
|
|
|
import withReadme from "storybook-readme/with-readme";
|
|
|
|
import Readme from "./README.md";
|
|
|
|
import Avatar from ".";
|
|
|
|
import Section from "../../../.storybook/decorators/section";
|
2019-06-18 13:20:49 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const roleOptions = ["owner", "admin", "guest", "user"];
|
2020-11-05 08:34:14 +00:00
|
|
|
const sizeOptions = ["max", "big", "medium", "small", "min"];
|
2019-06-18 13:20:49 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const editAction = () => console.log("Edit action");
|
2019-07-11 12:18:12 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
storiesOf("Components|Avatar", module)
|
2019-06-18 13:20:49 +00:00
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
2020-10-16 13:16:01 +00:00
|
|
|
.add("base", () => {
|
|
|
|
const size = select("size", sizeOptions, "max");
|
|
|
|
const editing = size === "max" ? boolean("editing", false) : false;
|
|
|
|
const editLabel = editing ? text("editLabel", "Edit photo") : "";
|
2019-06-27 11:28:13 +00:00
|
|
|
|
|
|
|
return (
|
2020-10-16 13:16:01 +00:00
|
|
|
<Section>
|
2019-06-18 13:20:49 +00:00
|
|
|
<Avatar
|
2020-10-16 13:16:01 +00:00
|
|
|
size={size}
|
|
|
|
role={select("role", roleOptions, "admin")}
|
|
|
|
source={text("source", "")}
|
|
|
|
userName={text("userName", "")}
|
|
|
|
editing={editing}
|
|
|
|
editLabel={editLabel}
|
|
|
|
editAction={editAction}
|
2019-06-18 13:20:49 +00:00
|
|
|
/>
|
2020-10-16 13:16:01 +00:00
|
|
|
</Section>
|
2019-06-27 11:28:13 +00:00
|
|
|
);
|
2020-10-16 13:16:01 +00:00
|
|
|
});
|