Web: Components: added story of Checkbox, fix passing props

packages/asc-web-components/avatar-editor/avatar-editor.stories.js

@@ -129,7 +129,6 @@ class Wrapper extends React.Component {
     });
   }
   render() {
-    console.log(this.props);
     const {
       unknownError,
       unknownTypeError,

packages/asc-web-components/calendar/calendar.stories.js

@@ -97,6 +97,7 @@ const Template = (args) => {
       selectedDate={new Date(args.selectedDate)}
       openToDate={new Date(args.openToDate)}
       minDate={new Date(args.minDate)}
+      locale="en"
     />
   );
 };

packages/asc-web-components/calendar/styled-calendar.js

@@ -77,7 +77,9 @@ const CalendarStyle = styled.div`
 
   .calendar-month_selected-day {
     background-color: ${(props) =>
-      props.theme.calendar.selectedDay.backgroundColor};
+      props.color
+        ? props.color
+        : props.theme.calendar.selectedDay.backgroundColor};
     border-radius: ${(props) => props.theme.calendar.selectedDay.borderRadius};
     cursor: ${(props) => props.theme.calendar.selectedDay.cursor};
     color: ${(props) => props.theme.calendar.selectedDay.color};

packages/asc-web-components/checkbox/checkbox.stories.js

@@ -1,5 +1,105 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
+
+import Checkbox from "./";
+
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: { component: "Custom checkbox input" },
+      source: {
+        code: `
+        import Checkbox from "@appserver/components/checkbox";
+
+<Checkbox
+  id="id"
+  name="name"
+  value="value"
+  label="label"
+  isChecked={false}
+  isIndeterminate={false}
+  isDisabled={false}
+  onChange={() => {}}
+/>
+        `,
+      },
+    },
+  },
+  argTypes: {
+    className: { description: "Accepts class" },
+    id: { description: "Used as HTML id property" },
+    isChecked: {
+      description: "The checked property sets the checked state of a checkbox",
+    },
+    isDisabled: { description: "Disables the Checkbox input " },
+    isIndeterminate: {
+      description:
+        "If true, this state is shown as a rectangle in the checkbox",
+    },
+    label: { description: "Label of the input" },
+    name: { description: "Used as HTML `name` property" },
+    onChange: {
+      description: "Will be triggered whenever an CheckboxInput is clicked ",
+      action: "onChange",
+    },
+    style: { description: "Accepts css style " },
+    value: { description: "Value of the input" },
+    title: { description: "Title " },
+    truncate: { description: "Disables word wrapping" },
+  },
+};
+
+class Wrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isChecked: false,
+    };
+  }
+
+  onChange = (e) => {
+    this.props.onChange(e);
+    this.setState({ isChecked: !this.state.isChecked });
+  };
+
+  render() {
+    return (
+      <Checkbox
+        {...this.props}
+        isChecked={this.props.isChecked || this.state.isChecked}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+const Template = (args) => {
+  return <Wrapper {...args} />;
+};
+
+const AllCheckboxesTemplate = (args) => {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat( auto-fill, minmax(120px, 1fr) )",
+        gridGap: "16px",
+        alignItems: "center",
+      }}
+    >
+      <Checkbox />
+      <Checkbox isChecked={true} />
+      <Checkbox isDisabled={true} />
+      <Checkbox isIndeterminate={true} />
+      <Checkbox label="Some label" />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+export const AllCheckboxStates = AllCheckboxesTemplate.bind({});
+/*import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import { BooleanValue } from "react-values";
 import { withKnobs, boolean, text } from "@storybook/addon-knobs/react";
@@ -31,4 +131,4 @@ storiesOf("Components|Input", module)
         )}
       </BooleanValue>
     </Section>
-  ));
+  ));*/