Fix Build Issues

packages/components/src/components/Carousel/Carousel.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useRef } from "react";
 import { useCSS, CarouselStyleProps } from "./Carousel.style";
-import { NavButton } from "./../../";
+import NavButton from "../NavButton";
 
 type CarouselProps = {
 	children: Array<ReactNode>;

packages/components/src/components/Checkbox/Checkbox.style.ts

@@ -1,5 +1,5 @@
 import { StyleFn, makeStyles } from "./../../utils/style-reducer"
-import { colors, log } from "../../theme"
+import { colors, typography, spacing } from "../../theme"
 
 export type CheckboxStyleProps = {
 	labelPosition?: "end" | "start" | "top" | "bottom"
@@ -9,6 +9,13 @@ export type CheckboxStyleProps = {
 	disabled?: boolean
 }
 
+const checkbox: StyleFn = (_, { labelPosition }) => ({
+	color: colors.white,
+	display: "inline-flex",
+	flexDirection: labelPosition === "top" || labelPosition === "bottom" ? "column" : "row",
+	alignItems: "center"
+})
+
 const fillFromProps: StyleFn = (styles, { disabled, error, selected }) => {
 	let fill = error
 		? colors.error
@@ -54,8 +61,8 @@ const outerContainer: StyleFn = (_, { disabled, error, selected }) => ({
 	color: disabled ? colors.gray[400] : colors.white,
 	maxWidth: "2rem",
 	maxHeight: "2rem",
-	width: "2rem",
-	height: "2rem",
+	minWidth: "2rem",
+	minHeight: "2rem",
 	display: "flex",
 	justifyContent: "center",
 	alignItems: "center",
@@ -72,6 +79,8 @@ const innerContainer: StyleFn = (_, { disabled, error, selected }) => ({
 	height: "1.065rem",
 	maxWidth: "1.065rem",
 	maxHeight: "1.065rem",
+	minWidth: "1.065rem",
+	minHeight: "1.065rem",
 	textAlign: "center",
 	[`& > input[type="checkbox"]:checked`]: {
 		borderColor: !selected ? colors.white : borderColorFromProps({}, { disabled, error, selected }).borderColor,
@@ -98,12 +107,23 @@ const icon: StyleFn = () => ({
 	verticalAlign: "middle"
 })
 
-export const useCSS = ({ selected, error, disabled }: CheckboxStyleProps) => {
-	const props = { selected, error, disabled }
+const label: StyleFn = (_, { labelPosition }) => {
+	const value = labelPosition === "top" || labelPosition === "bottom" ? `${spacing.xs} auto` : `auto ${spacing.xs}`
+	return {
+		fontFamily: typography.fonts.base,
+		color: colors.white,
+		margin: value
+	}
+}
+
+export const useCSS = ({ selected, error, disabled, labelPosition }: CheckboxStyleProps) => {
+	const props = { selected, error, disabled, labelPosition }
 	return {
+		checkbox: makeStyles([checkbox])(props),
 		outerContainer: makeStyles([outerContainer])(props),
 		innerContainer: makeStyles([innerContainer, borderColorFromProps])(props),
 		input: makeStyles([input])(props),
+		label: makeStyles([label])(props),
 		icon: makeStyles([icon])(props)
 	}
 }

packages/components/src/components/Checkbox/Checkbox.tsx

@@ -21,10 +21,19 @@ export default function Checkbox({
 }: CheckboxProps) {
 	const styles = useCSS({ ...styleProps, selected, error, disabled });
 	return (
-		<div css={styles.outerContainer}>
-			<div css={styles.innerContainer}>
-				<input css={styles.input} type="checkbox" checked={selected} disabled={disabled} onChange={onChange} />
-				{selected && (icon === "check" ? <CheckIcon css={styles.icon} /> : <DashIcon css={styles.icon} />)}
+		<div css={styles.checkbox}>
+			{(labelPosition === "start" || labelPosition === "top") && <label css={styles.label}>{label}</label>}
+			<div css={styles.outerContainer}>
+				<div css={styles.innerContainer}>
+					<input
+						css={styles.input}
+						type="checkbox"
+						checked={selected}
+						disabled={disabled}
+						onChange={onChange}
+					/>
+					{selected && (icon === "check" ? <CheckIcon css={styles.icon} /> : <DashIcon css={styles.icon} />)}
+				</div>
 			</div>
 			{(labelPosition === "end" || labelPosition === "bottom") && <label css={styles.label}>{label}</label>}
 		</div>

packages/components/src/components/RadioButton/RadioButton.style.ts

@@ -1,5 +1,6 @@
 import { StyleFn, makeStyles } from "../../utils"
 import { typography, colors, spacing } from "../../theme"
+import { CSSProperties } from "react"
 
 export type RadioButtonStyleProps = {
 	selected?: boolean
@@ -76,7 +77,7 @@ const BackgroundFromProps: StyleFn = (styles, { disabled, selected, error }) =>
 			? SELECTED_DEFAULT
 			: disabled
 			? UNSELECTED_DISABLED
-			: styles[key]
+			: styles[key as keyof CSSProperties]
 	return {
 		...styles,
 		[key]: value

packages/components/src/components/TextField/TextField.tsx

@@ -42,7 +42,8 @@ export default function TextField({
 		setIsActive(false);
 	}
 
-	function onInputTextChange(event: React.FormEvent<HTMLInputElement>): void {
+	// FIXME: add correct typing to event, see here: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+	function onInputTextChange(event: any): void {
 		if (!disabled) setInputTextValue(event.currentTarget.value);
 	}
 

packages/components/src/theme/fragments.ts

@@ -1,73 +1,55 @@
-import { StyleFn } from "./../utils/style-reducer";
-import { css } from "@emotion/core";
-import spacing from "./spacing";
-import typography from "./typography";
-import colors from "./colors";
-import { StyleObj, stripInline } from "../utils";
-
-export function withSize(size: string) {
-	return css`
-		padding: ${size === "large"
-			? `${spacing.s4} ${spacing.s2}`
-			: size === "normal" || size === "full"
-			? `${spacing.s3} ${spacing.s2}`
-			: `${spacing.s2} ${spacing.s1}`};
-
-		font-size: ${size === "large"
-			? typography.sizes.large
-			: size === "normal" || size === "full"
-			? typography.sizes.normal
-			: typography.sizes.small};
-
-		width: ${size === "full" ? "100%" : "auto"};
-	`;
-}
+import { StyleFn } from "./../utils/style-reducer"
+import { css } from "@emotion/core"
+import spacing from "./spacing"
+import typography from "./typography"
+import colors from "./colors"
+import { StyleObj, stripInline } from "../utils"
 
 export function log(styles: StyleObj, props: any) {
-	console.log("styles", styles);
-	console.log("props", props);
-	return styles;
+	console.log("styles", styles)
+	console.log("props", props)
+	return styles
 }
 
 export function dimensionsFromProps(styles: StyleObj, { full }: { full: boolean }) {
-	let display: string;
+	let display: string
 	if (styles.display == null) {
-		display = "block";
+		display = "block"
 	}
-	display = styles.display as string;
+	display = styles.display as string
 
 	return {
 		...styles,
 		display: full && display.includes("inline") ? stripInline(display) : display,
-		width: full ? "100%" : styles.width || "",
-	};
+		width: full ? "100%" : styles.width || ""
+	}
 }
 
 export function disabled(styles: StyleObj, { disabled }: { disabled: boolean }): StyleObj {
 	if (!disabled) {
-		return styles;
+		return styles
 	}
 
 	return {
 		...unsetStyles(styles),
 		backgroundColor: colors.gray[100],
-		color: colors.white,
-	};
+		color: colors.white
+	}
 }
 
 function unsetStyles(styles: StyleObj): StyleObj {
 	// Filter and unset all properties that give color, on all states.
 	// Need to add more?
-	const colorProperties = ["color", "backgroundColor", "borderColor", "boxShadow", "fill", "stroke"];
+	const colorProperties = ["color", "backgroundColor", "borderColor", "boxShadow", "fill", "stroke"]
 
 	const filteredEntries = Object.entries(styles).map(([key, value]) => {
 		// If it has a psuedo selector, we're going to disable color from that as well.
 		if (key.includes("&:hover") || key.includes("&:active") || key.includes("&:focus")) {
-			return unsetStyles(value as StyleObj);
+			return unsetStyles(value as StyleObj)
 		} else if (colorProperties.includes(key)) {
-			return [key, "unset"];
+			return [key, "unset"]
 		}
-		return [key, value];
-	});
-	return Object.fromEntries(filteredEntries as any);
+		return [key, value]
+	})
+	return Object.fromEntries(filteredEntries as any)
 }

packages/components/stories/08-Checkbox.stories.tsx

@@ -69,7 +69,7 @@ export const ErrorWithDash = () => {
 export const Disabled = () => {
 	const [selected, setSelected] = useState(false);
 	return (
-		<div style={{ padding: "50px 20px", background: "black" }}>
+		<div style={{ display: "flex", padding: "50px 20px", background: "black" }}>
 			<Checkbox
 				disabled
 				onChange={() => {
@@ -82,3 +82,66 @@ export const Disabled = () => {
 		</div>
 	);
 };
+
+export const WithLabel = () => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<div style={{ display: "flex", padding: "50px 20px", background: "black" }}>
+			<Checkbox
+				onChange={() => {
+					setSelected(!selected);
+				}}
+				selected={selected}
+				label="quite a long label"
+			/>
+		</div>
+	);
+};
+
+export const WithLabelStart = () => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<div style={{ display: "flex", padding: "50px 20px", background: "black" }}>
+			<Checkbox
+				onChange={() => {
+					setSelected(!selected);
+				}}
+				selected={selected}
+				label="quite a long label"
+				labelPosition="start"
+			/>
+		</div>
+	);
+};
+
+export const WithLabelTop = () => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<div style={{ display: "flex", padding: "50px 20px", background: "black" }}>
+			<Checkbox
+				onChange={() => {
+					setSelected(!selected);
+				}}
+				selected={selected}
+				label="quite a long label"
+				labelPosition="top"
+			/>
+		</div>
+	);
+};
+
+export const WithLabelBottom = () => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<div style={{ display: "flex", padding: "50px 20px", background: "black" }}>
+			<Checkbox
+				onChange={() => {
+					setSelected(!selected);
+				}}
+				selected={selected}
+				label="quite a long label"
+				labelPosition="bottom"
+			/>
+		</div>
+	);
+};