Merge pull request 'A checkbox with a label' (#30) from create/checkbox into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/30

src/components/Checkbox.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Checkbox from './Checkbox';
+
+export default {
+  // Title inside navigation bar
+  title: 'Checkbox',
+  // Component to test
+  component: Checkbox,
+  // Clarifying the way how to process specific
+  // properties of your component and which values
+  // it can accept.
+  argTypes: {
+    checked: {
+      options: [true, false],
+      control: { type: 'radio' },
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+/**
+ * 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<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+/* -------------------------------------------------------------------------- */
+/*                          States of your component                          */
+/* -------------------------------------------------------------------------- */
+
+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,
+}
+
+export const EitherLabelChildren = Template.bind({});
+EitherLabelChildren.args = {
+  children: "On/off lights",
+  checked: true,
+  label: "Label!",
+}
+// GO Further

src/components/Checkbox.tsx

@@ -0,0 +1,39 @@
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+  /**
+   * The way to provide `children` inside a component
+   * via attribute instead of enclosed tag
+   */
+  label?: React.ReactNode;
+  /**
+   * When you will have both `children` and `label`
+   * defined on a component it will choose `children`
+   * to display
+   */
+  children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<"input">, "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;
+  }
+
+  return (
+    <label className={classNames(className, "flex items-center")}>
+      <input type="checkbox" {...props} />
+      {children !== undefined && <span>{children}</span>}
+    </label>
+  );
+};
+export default Checkbox;