Merge pull request #53 from Synthetixio/add/checkbox

Add checkbox component

.storybook/main.js

@@ -1,4 +1,9 @@
 module.exports = {
 	stories: ['../stories/**/**/*.stories.mdx', '../stories/**/**/*.stories.@(js|jsx|ts|tsx)'],
-	addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-designs'],
+	addons: [
+		'@storybook/addon-backgrounds',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'storybook-addon-designs',
+	],
 };

.storybook/preview-body.html

@@ -12,6 +12,10 @@
 		font-size: 12px;
 	}
 
+	body {
+		min-height: 100vh;
+	}
+
 	* {
 		box-sizing: border-box;
 	}

.storybook/preview.js

@@ -1,9 +1,22 @@
+import colors from '../src/styles/colors';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+	backgrounds: {
+		default: 'dark',
+		values: [
+			{ name: 'dark', value: '#111' },
+			{ name: 'light', value: '#F8F8F8' },
+			{ name: 'black', value: '#000000' },
+			{ name: 'white', value: '#FFFFFF' },
+			{ name: 'purple', value: colors.gradients.purple },
+			{ name: 'darkBlue', value: colors.gradients.darkBlue },
+		],
+	},
+};

package.json

@@ -26,6 +26,7 @@
 		"@commitlint/cli": "16.2.3",
 		"@commitlint/config-conventional": "16.2.1",
 		"@storybook/addon-actions": "6.4.22",
+		"@storybook/addon-backgrounds": "^6.4.22",
 		"@storybook/addon-essentials": "6.4.22",
 		"@storybook/addon-links": "6.4.22",
 		"@storybook/react": "6.4.22",

src/components/Button.tsx

@@ -1,8 +1,9 @@
 import React, { ButtonHTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import theme from '../styles/theme';
+
 import colors from '../styles/colors';
 import fonts from '../styles/fonts';
+import theme from '../styles/theme';
 
 interface ButtonProps {
 	text?: string;
@@ -135,5 +136,5 @@ const StyledButtonText = styled.span<{
 	${({ variant, disabled }) =>
 		variant === 'secondary' &&
 		!disabled &&
-		`background-image: ${colors.gradients.lightBlue} background-size: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent;`}
+		`background-image: ${colors.gradients.lightBlue}; background-size: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent;`}
 `;

src/components/Checkbox.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import colors from '../styles/colors';
+
+interface CheckboxProps {
+	id: string;
+	disabled?: boolean;
+	label?: string;
+	name?: string;
+	checked?: boolean;
+	onChange: (checked: boolean) => unknown;
+}
+
+export default function Checkbox({
+	id,
+	disabled = false,
+	label,
+	name,
+	checked,
+	onChange,
+	...rest
+}: CheckboxProps) {
+	return (
+		<StyledContainer {...rest}>
+			<HiddenCheckbox
+				id={id}
+				name={name}
+				checked={checked}
+				disabled={disabled}
+				onChange={() => onChange(!checked)}
+			/>
+			<StyledLabel htmlFor={id}>
+				<StyledCheckbox checked={checked} disabled={disabled} />
+				{label && <StyledLabelText disabled={disabled}>{label}</StyledLabelText>}
+			</StyledLabel>
+		</StyledContainer>
+	);
+}
+
+const StyledContainer = styled.div`
+	display: inline-block;
+`;
+
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+	border: 0;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+`;
+
+const StyledLabel = styled.label`
+	display: flex;
+`;
+
+const StyledLabelText = styled.span<{ disabled?: boolean }>`
+	display: inline-block;
+	cursor: pointer;
+	font-family: 'Inter Bold';
+	font-size: 1.2rem;
+	line-height: 2.2rem;
+	color: ${(attrs) => (attrs.disabled ? colors.disabled : colors.white)};
+`;
+
+const StyledCheckbox = styled.div<{ checked?: boolean; disabled?: boolean }>`
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	overflow: hidden;
+	margin-right: 0.75rem;
+	width: 2.2rem;
+	height: 2.2rem;
+	border-radius: 50%;
+	background-image: ${colors.gradients.pink};
+
+	${(attrs) => attrs.disabled && `filter: grayscale(100%);`}
+
+	::before {
+		content: '';
+		position: absolute;
+		left: 8%;
+		top: 8%;
+		border-radius: 50%;
+		width: 84%;
+		height: 84%;
+		background-color: ${colors.backgroundColor};
+	}
+
+	::after {
+		content: '';
+		position: absolute;
+		left: 27%;
+		top: 27%;
+		border-radius: 50%;
+		width: 46%;
+		height: 46%;
+		background-image: ${colors.gradients.pink};
+		opacity: ${(attrs) => (attrs.checked ? '1' : '0')};
+		transition: opacity 80ms ease-in-out;
+	}
+`;

src/components/IconButton.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import styled from 'styled-components';
+
 import colors from '../styles/colors';
 import spacings from '../styles/spacings';
 
@@ -53,5 +54,5 @@ const StyledGradient = styled.div<{
 	border: 1px solid ${colors.black};
 	border-radius: ${({ rounded }) => (rounded ? '30px' : '4px')};
 	cursor: pointer;
-	${({ active }) => active && `background: ${colors.gradients.grey}`}
+	${({ active }) => active && `background: ${colors.gradients.grey};`}
 `;

src/components/TextInput.tsx

@@ -1,5 +1,6 @@
 import React, { FormEventHandler, HTMLAttributes } from 'react';
 import styled from 'styled-components';
+
 import colors from '../styles/colors';
 
 interface TextInputProps extends HTMLAttributes<HTMLDivElement> {

src/index.ts

@@ -51,6 +51,7 @@ export { default as IconButton } from './components/IconButton';
 export { default as Tabs } from './components/Tabs';
 export { default as LinkButton } from './components/LinkButton';
 export { default as Selector } from './components/Selector';
+export { default as Checkbox } from './components/Checkbox';
 export { default as Dropdown } from './components/Dropdown';
 export { default as Card } from './components/Card';
 export { default as Carousel } from './components/Carousel';

src/styles/colors.ts

@@ -10,13 +10,13 @@ export default {
 	pink: '#ED1EFF',
 	green: '#31D8A4',
 	gradients: {
-		darkBlue: 'linear-gradient(180deg, #08021E 0%, #1F0777 146.21%);',
-		lightBlue: 'linear-gradient(73.6deg, #85FFC4 2.11%, #5CC6FF 90.45%);',
-		purple: 'linear-gradient(73.6deg, #8E2DE2 2.11%, #4B01E0 90.45%);',
-		orange: 'linear-gradient(73.6deg, #FF8060 2.11%, #FEB27A 90.45%);',
-		pink: 'linear-gradient(73.6deg, #8E2DE2 2.11%, #ED1EFF 90.45%);',
-		rainbow: 'linear-gradient(90deg, #ED1EFF 0%, #00D1FF 100%);',
-		grey: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(311.52deg, #3D464C -36.37%, #131619 62.81%);',
+		darkBlue: 'linear-gradient(180deg, #08021E 0%, #1F0777 146.21%)',
+		lightBlue: 'linear-gradient(73.6deg, #85FFC4 2.11%, #5CC6FF 90.45%)',
+		purple: 'linear-gradient(73.6deg, #8E2DE2 2.11%, #4B01E0 90.45%)',
+		orange: 'linear-gradient(73.6deg, #FF8060 2.11%, #FEB27A 90.45%)',
+		pink: 'linear-gradient(73.6deg, #8E2DE2 2.11%, #ED1EFF 90.45%)',
+		rainbow: 'linear-gradient(90deg, #ED1EFF 0%, #00D1FF 100%)',
+		grey: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(311.52deg, #3D464C -36.37%, #131619 62.81%)',
 	},
 	hoverOpacity: '9f',
 } as const;

stories/Checkbox.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { withDesign } from 'storybook-addon-designs';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import Checkbox from '../src/components/Checkbox';
+
+export default {
+	title: 'Checkbox',
+	component: Checkbox,
+	decorators: [withDesign],
+	args: {
+		id: 'checkbox',
+		name: 'example-checkbox',
+	},
+	parameters: {
+		backgrounds: {
+			default: 'darkBlue',
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/zeCepPb3Bo6Fd92FdcolUT/v1.0?node-id=894%3A23624',
+		},
+	},
+} as ComponentMeta<typeof Checkbox>;
+
+export const Example: ComponentStory<typeof Checkbox> = (args) => {
+	const [checked, setChecked] = useState(false);
+	return <Checkbox {...args} label="Example Checkbox" onChange={setChecked} checked={checked} />;
+};
+
+export const Enabled: ComponentStory<typeof Checkbox> = (args) => (
+	<Checkbox {...args} label="Enabled Checkbox" checked />
+);
+
+export const Disabled: ComponentStory<typeof Checkbox> = (args) => (
+	<Checkbox {...args} label="Disabled Checkbox" checked disabled />
+);

yarn.lock

@@ -1940,7 +1940,7 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/[email protected]":
+"@storybook/[email protected]", "@storybook/addon-backgrounds@^6.4.22":
   version "6.4.22"
   resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.4.22.tgz#5d9dbff051eefc1ca6e6c7973c01d17fbef4c2f5"
   integrity sha512-xQIV1SsjjRXP7P5tUoGKv+pul1EY8lsV7iBXQb5eGbp4AffBj3qoYBSZbX4uiazl21o0MQiQoeIhhaPVaFIIGg==