Feat/input variants

@types/cherry.d.ts

@@ -137,6 +137,7 @@ interface ColProps {
 		| "inline-flex"
 		| "none";
 	fullScreen?: boolean;
+	sticky?: boolean;
 	theme?: object;
 }
 
@@ -165,6 +166,7 @@ interface InputProps
 	size?: "default" | "big";
 	label?: string;
 	fullWidth?: boolean;
+	variant?: "primary" | "secondary" | "tertiary";
 	theme?: object;
 }
 
@@ -176,13 +178,16 @@ interface ToggleInputProps
 	size?: "default" | "big";
 	label?: string;
 	fullWidth?: boolean;
+	variant?: "primary" | "secondary" | "tertiary";
 	theme?: object;
 }
 
 interface RangeSliderProps
 	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
 	type?: "range";
 	size?: "default" | "big";
+	fullWidth?: boolean;
+	variant?: "primary" | "secondary" | "tertiary";
 	theme?: object;
 }
 
@@ -194,6 +199,7 @@ interface SelectProps
 	size?: "default" | "big";
 	label?: string;
 	fullWidth?: boolean;
+	variant?: "primary" | "secondary" | "tertiary";
 	theme?: object;
 }
 
@@ -205,6 +211,7 @@ interface TextareaProps
 	size?: "default" | "big";
 	label?: string;
 	fullWidth?: boolean;
+	variant?: "primary" | "secondary" | "tertiary";
 	theme?: object;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.2-6",
+	"version": "0.0.2-7",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

src/Layout/Grid/Col/Col.js

@@ -32,6 +32,7 @@ function Col({
 	lastXxxl,
 	display,
 	fullScreen,
+	sticky,
 	theme = localTheme,
 }) {
 	return (
@@ -64,8 +65,9 @@ function Col({
 				lastXxxl,
 				display,
 				fullScreen,
+				sticky,
 			)}
-			className={className}
+			className={className ? `col ${className}` : "col"}
 			id={id}
 			data-col
 		>

src/Layout/Grid/Col/Col.styles.js

@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import { mq, Breakpoints } from "../../../mq";
 
 const col = css`
-	position: relative;
 	width: 100%;
 	min-height: 1px;
 	flex-basis: 0;
@@ -118,6 +117,7 @@ export const colStyles = (
 	lastXxxl,
 	display,
 	fullScreen,
+	sticky,
 ) => css`
 	${display &&
 	css`
@@ -158,6 +158,17 @@ export const colStyles = (
 		}
 	`}
 
+	${sticky &&
+	css`
+		${mq(Breakpoints.lg)} {
+			position: sticky;
+			top: ${theme.spacing.paddingTopBody.desktop};
+			max-height: calc(100vh - ${theme.spacing.paddingTopBody.desktop});
+			overflow-y: auto;
+			-webkit-overflow-scrolling: touch;
+		}
+	`}
+
 	${mq(Breakpoints.xs)} {
 		${firstXs &&
 		css`

src/Layout/Grid/Row/Row.js

@@ -9,12 +9,12 @@ function Row({
 	alignItems,
 	justifyContent,
 	gutterXs = "default",
-	gutterSm,
-	gutterMd,
-	gutterLg,
-	gutterXl,
-	gutterXxl,
-	gutterXxxl,
+	gutterSm = "default",
+	gutterMd = "default",
+	gutterLg = "default",
+	gutterXl = "default",
+	gutterXxl = "default",
+	gutterXxxl = "default",
 	theme = localTheme,
 }) {
 	return (

src/Layout/Grid/Row/Row.styles.js

@@ -86,8 +86,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -98,8 +97,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -110,8 +108,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -124,8 +121,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -136,8 +132,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -148,8 +143,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -162,8 +156,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -174,8 +167,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -186,8 +178,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -200,8 +191,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -212,8 +202,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -224,8 +213,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -238,8 +226,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -250,8 +237,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -262,8 +248,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -276,8 +261,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -288,8 +272,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -300,8 +283,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}
@@ -314,8 +296,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.default};
 			margin-left: ${theme.spacing.marginRow.default};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.default};
 				padding-left: ${theme.spacing.gutterCol.default};
 			}
@@ -326,8 +307,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.medium};
 			margin-left: ${theme.spacing.marginRow.medium};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.medium};
 				padding-left: ${theme.spacing.gutterCol.medium};
 			}
@@ -338,8 +318,7 @@ export const rowStyles = (
 			margin-right: ${theme.spacing.marginRow.big};
 			margin-left: ${theme.spacing.marginRow.big};
 
-			& [data-col],
-			& > * {
+			& .col {
 				padding-right: ${theme.spacing.gutterCol.big};
 				padding-left: ${theme.spacing.gutterCol.big};
 			}

src/Layout/Input/Input.js

@@ -13,12 +13,21 @@ function Input({
 	error,
 	label,
 	fullWidth,
+	variant = "secondary",
 	theme = localTheme,
 	...props
 }) {
 	if ((type === "checkbox") | (type === "radio")) {
 		return (
-			<div css={radioCheckWrapperStyles(theme, type, size, fullWidth)}>
+			<div
+				css={radioCheckWrapperStyles(
+					theme,
+					type,
+					size,
+					fullWidth,
+					variant,
+				)}
+			>
 				<input
 					type={type}
 					className={className}
@@ -30,6 +39,7 @@ function Input({
 						success,
 						error,
 						fullWidth,
+						variant,
 					)}
 					{...props}
 				/>
@@ -61,6 +71,7 @@ function Input({
 					success,
 					error,
 					fullWidth,
+					variant,
 				)}
 				{...props}
 			/>