From c5c65d84dc67d13f155c92b8d56716d56b9b50c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Thu, 4 Aug 2022 13:12:12 +0300 Subject: [PATCH] reset backup --- src/stories/Checkbox.stories.tsx | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/stories/Checkbox.stories.tsx diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx new file mode 100644 index 0000000..7faf1bd --- /dev/null +++ b/src/stories/Checkbox.stories.tsx @@ -0,0 +1,58 @@ +import Checkbox from "../components/Checkbox"; +import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react"; +import React, { useState } from "react"; +import { ReactComponent as Checkmark } from "assets/svg/check.svg"; +import { boolean } from "yup/lib/locale"; + +export default { + title: "Checkbox", + component: Checkbox, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + isChecked: { + type: "boolean", + }, + children: { + type: "string", + defaultValue: "Use light theme", + }, + disabled: { + type: "boolean", + defaultValue: "false", + }, + id: { + type: "string", + defaultValue: "uniqueID", + }, + name: { + type: "string", + defaultValue: "checkbox name", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Checked = Template.bind({}); +Checked.args = { + isChecked: true, + children: "This is custom checkbox", +}; + +export const Unchecked = Template.bind({}); +Unchecked.args = { + isChecked: false, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, +}; + +export const Hovered = bindTemplate({}); +Hovered.args = { + className: "hover:true", + isChecked: false, +};