{"size": 2039, "ext": "js", "max_stars_repo_path": "vue/components/ui/molecules/notification/notification.stories.js", "max_stars_repo_name": "ripe-tech/ripe-components-vue", "max_stars_repo_stars_event_min_datetime": "2019-05-29T11:30:29.000Z", "max_stars_repo_stars_event_max_datetime": "2021-05-29T16:03:04.000Z", "max_issues_repo_path": "vue/components/ui/molecules/notification/notification.stories.js", "max_issues_repo_name": "ripe-tech/ripe-components-vue", "max_issues_repo_issues_event_min_datetime": "2019-05-04T08:33:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T16:24:51.000Z", "max_forks_repo_path": "vue/components/ui/molecules/notification/notification.stories.js", "max_forks_repo_name": "ripe-tech/ripe-components-vue", "max_forks_repo_forks_event_min_datetime": "2020-01-09T18:25:47.000Z", "max_forks_repo_forks_event_max_datetime": "2020-01-09T18:25:47.000Z"}
{"max_stars_count": 8, "max_issues_count": 561, "max_forks_count": 1, "avg_line_length": 30.4328358209, "max_line_length": 90, "alphanum_fraction": 0.3325159392}
import { storiesOf } from "@storybook/vue";
import { withKnobs, text, boolean, color, select, number } from "@storybook/addon-knobs";

storiesOf("Components/Molecules/Notification", module)
    .addDecorator(withKnobs)
    .add("Notification", () => ({
        props: {
            icon: {
                default: select(
                    "Icon",
                    {
                        Ok: "ok-circle",
                        Close: "close",
                        Unset: null
                    },
                    "ok-circle"
                )
            },
            iconColor: {
                default: color("Icon Color", "#00d684")
            },
            variant: {
                default: select(
                    "Variant",
                    {
                        White: "white",
                        Dark: "dark",
                        Unset: null
                    },
                    "white"
                )
            },
            text: {
                default: text("Text", "Copied to Clipboard")
            },
            link: {
                default: text("Link", "https://www.platforme.com/")
            },
            visible: {
                default: boolean("Visible", true)
            },
            topHeight: {
                default: number("Top Height", 100)
            }
        },
        computed: {
            style: function() {
                return {
                    "background-color": this.color
                };
            }
        },
        template: `
            <div>
                <notification
                    v-bind:text="text"
                    v-bind:link="link"
                    v-bind:variant="variant"
                    v-bind:icon="icon"
                    v-bind:icon-color="iconColor"
                    v-bind:visible="visible"
                    v-bind:top-height="topHeight"
                />
            </div>
        `
    }));
