RAC-225: first version of checkbox

akeneo-design-system/.storybook/preview.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import {addDecorator} from '@storybook/react';
+import {addDecorator, addParameters} from '@storybook/react';
 import {StoryStyle} from '../src/shared/global';
 
 addDecorator(story => (
   <>
     <StoryStyle>{story()}</StoryStyle>
   </>
 ));
+
+addParameters({
+    viewMode: 'docs'
+})

akeneo-design-system/package.json

@@ -40,7 +40,7 @@
     "@storybook/addon-actions": "^6.0.4",
     "@storybook/addon-essentials": "^6.0.4",
     "@storybook/addon-links": "^6.0.4",
-    "@storybook/react": "^6.0.4",
+    "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
     "@types/expect-puppeteer": "^4.4.3",

akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { Meta, Story, Preview, Props, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
+import { action } from "@storybook/addon-actions";
+import { Checkbox } from "./Checkbox.tsx";
+
+<Meta
+  title="Components/Checkbox"
+  component={Checkbox}
+  argTypes={{
+    readOnly: {control: {type: 'boolean', default: 'false'}},
+    checked: {control: {type: 'boolean', default: 'false'}},
+    label: 'string',
+  }}
+/>
+
+# Checkbox
+
+## Playground
+
+Use this playground to test the checkbox component
+
+<Preview>
+  <Story name="Standard">
+    {(args) => {
+        return <Checkbox {...args}/>;
+    }}
+  </Story>
+</Preview>
+
+<Props story="Standard" />
+

akeneo-design-system/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,89 @@
+import React, {FormEvent} from 'react';
+import styled, {css} from 'styled-components';
+import {CheckIcon} from '../../icons/CheckIcon';
+
+/**
+ * @TODO use blue20 instead of #dee9f4
+ * @TODO use blue40 instead of #bdd3e9
+ * @TODO use blue100 instead of #5992c7
+ * @TODO use grey60 instead of #f9f9fb
+ * @TODO use grey100 instead of #a1a9b7
+ * @TODO use grey140 instead of #11324d
+*/
+
+const CheckboxContainer = styled.div < {checked: boolean, readOnly: boolean } > `
+    background-color: transparent;
+    height: 20px;
+    width: 20px;
+    border: 1px solid #5992c7;
+    border-radius: 3px;
+    display: inline-block;
+
+    ${props =>
+        props.checked && css`
+            background-color: #5992c7
+        `
+    }
+
+    ${props =>
+        props.checked && props.readOnly && css`
+            background-color: #dee9f4
+            border-color: #bdd3e9
+        `
+    }
+
+    ${props =>
+        !props.checked && props.readOnly && css`
+            background-color: #f9f9fb
+            border-color: #a1a9b7
+        `
+    }
+`;
+
+const LabelContainer = styled.div < {readOnly: boolean} > `
+    font-color: "#11324d";
+    font-weight: 400;
+    font-size: 15px;
+    padding-left: 10px;
+    display: inline-block;
+
+    ${props =>
+        props.readOnly && `
+            font-color: "#a1a9b7";
+        `
+    }
+`;
+
+type CheckboxProps = {
+    checked: boolean,
+    readOnly: boolean,
+    label?: string,
+    onChange?: (value: boolean) => void,
+};
+
+/**
+ * The checkboxes are applied when users can select all, several, or none of the options from a given list.
+ */
+const Checkbox = ({label, checked, onChange, readOnly = false}: CheckboxProps) => {
+    const handleChange = (e: FormEvent<HTMLDivElement>) => onChange && !readOnly && onChange(!checked);
+
+    console.log(checked);
+    console.log(readOnly);
+
+    return (
+        <label>
+            <CheckboxContainer onClick={handleChange} checked={checked} readOnly={readOnly}>
+                {checked ? (
+                    <CheckIcon height={20} width={20}/>
+                ) : null}
+            </CheckboxContainer>
+            {label ? (
+                <LabelContainer readOnly={readOnly}>
+                    {label}
+                </LabelContainer>
+            ) : null}
+        </label>
+    );
+};
+
+export {Checkbox};

akeneo-design-system/src/icons/CheckIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CheckIcon = ({number: width = 24, number: height = 24}) => (
+    <svg width={width} height={height} viewBox="0 0 24 24">
+        <path
+            stroke="#A1A9B7"
+            d="M2.5 12l7.5 6.5L21.5 6"
+            fill="none"
+            fillRule="evenodd"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export {CheckIcon};