diff --git a/src/App.tsx b/src/App.tsx
index 4e529cc..69002fa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,9 +10,7 @@ import React from "react";
* @return {JSX.Element}
*/
function App() {
- return (
-
Hello world!
- );
+ return
Hello world!
;
}
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Checkbox.stories.tsx b/src/components/Checkbox.stories.tsx
index 0b90e2c..b5ba94b 100644
--- a/src/components/Checkbox.stories.tsx
+++ b/src/components/Checkbox.stories.tsx
@@ -1,58 +1,43 @@
-import React from 'react';
+import React, { useState } from "react";
+import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import Checkbox from './Checkbox';
+import Checkbox from "./Checkbox";
export default {
- // Title inside navigation bar
- title: 'Checkbox',
- // Component to test
+ title: "Checkbox",
component: Checkbox,
- // Clarifying the way how to process specific
- // properties of your component and which values
- // it can accept.
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
- checked: {
- options: [true, false],
- control: { type: 'radio' },
+ isChecked: {
+ type: "boolean",
+ },
+ children: {
+ type: "string",
+ defaultValue: "Use light theme",
+ },
+ disabled: {
+ type: "boolean",
+ defaultValue: "false",
},
},
} as ComponentMeta;
-/**
- * This is a way to define a tempalte for your component.
- *
- * This template should cover all the states.
- *
- * In most cases you should just distruct args attribute
- * on a returning component.
- */
const Template: ComponentStory = (args) => (
);
-/* -------------------------------------------------------------------------- */
-/* States of your component */
-/* -------------------------------------------------------------------------- */
+export const Checked = Template.bind({});
+Checked.args = {
+ isChecked: true,
+ children: "This is custom checkbox",
+};
export const Unchecked = Template.bind({});
Unchecked.args = {
- label: "On/off lights",
- checked: false,
- children: undefined,
-}
-export const Checked = Template.bind({});
-Checked.args = {
- children: "On/off lights",
- checked: true,
- label: undefined,
-}
+ isChecked: false,
+};
-export const EitherLabelChildren = Template.bind({});
-EitherLabelChildren.args = {
- children: "On/off lights",
- checked: true,
- label: "Label!",
-}
-// GO Further
\ No newline at end of file
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index ae987d3..dbf3fd7 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,38 +1,47 @@
-import classNames from "classnames";
import React from "react";
+import classNames from "classnames";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
-type Props = {
+export type Props = {
/**
- * The way to provide `children` inside a component
- * via attribute instead of enclosed tag
+ * Control the state of checkbox
*/
- label?: React.ReactNode;
+ isChecked: boolean;
/**
- * When you will have both `children` and `label`
- * defined on a component it will choose `children`
- * to display
+ * An Element next to the checkbox
*/
children?: React.ReactNode;
-} & Omit, "type">;
-
-/**
- * Customized `input[type="checkbox"]` component with label
- *
- * All common input properties are inherited.
- *
- * To define a label content either provide `label` attribute
- * or use common `children` property
- */
-const Checkbox = ({label, children, className, ...props}: Props) => {
-
- if(label && !children) {
- children = label;
- }
+} & Omit, "type">;
+const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
return (
-