feat: button full width

Author: luangjokaj

@types/cherry.d.ts

@@ -41,6 +41,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	variant?: "primary" | "secondary" | "tertiary";
 	frame?: boolean;
 	size?: "default" | "big";
+	fullWidth?: boolean;
 	theme?: object;
 }
 

package-lock.json

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

package.json

@@ -8,13 +8,21 @@ function Button({
 	variant = "primary",
 	size = "default",
 	frame,
+	fullWidth,
 	theme = localTheme,
 	...props
 }) {
 	return (
 		<button
 			className={className}
-			css={buttonStyles(theme, variant, size, frame, props.disabled)}
+			css={buttonStyles(
+				theme,
+				variant,
+				size,
+				frame,
+				props.disabled,
+				fullWidth,
+			)}
 			{...props}
 		>
 			{children}

src/Layout/Button/Button.js

@@ -4,16 +4,27 @@ import {
 	buttonFontStyles,
 	resetButtonStyles,
 } from "../../helperStyles";
-import { Breakpoints, mq } from "../../mq";
 
-export const buttonStyles = (theme, variant, size, frame, disabled) => css`
+export const buttonStyles = (
+	theme,
+	variant,
+	size,
+	frame,
+	disabled,
+	fullWidth,
+) => css`
 	${resetButtonStyles};
 	display: inline-block;
 	vertical-align: middle;
 	font-weight: 600;
 	padding: 15px 25px;
 	border-radius: 100px;
 
+	${fullWidth &&
+	css`
+		width: 100%;
+	`}
+
 	${size === "default"
 		? css`
 				${buttonFontStyles(theme)};

src/Layout/Button/Button.styles.js

@@ -32,14 +32,22 @@ function Input({
 					{...props}
 				/>
 				{type === "checkbox" ? <Check /> : <em />}
-				{label && <Label htmlFor={props.id}>{label}</Label>}
+				{label && (
+					<Label htmlFor={props.id} error={error} success={success}>
+						{label}
+					</Label>
+				)}
 			</div>
 		);
 	}
 
 	return (
 		<>
-			{label && <Label htmlFor={props.id}>{label}</Label>}
+			{label && (
+				<Label htmlFor={props.id} error={error} success={success}>
+					{label}
+				</Label>
+			)}
 			<input
 				type={type}
 				className={className}

src/Layout/Input/Input.js

@@ -16,7 +16,11 @@ function Select({
 }) {
 	return (
 		<>
-			{label && <Label htmlFor={props.id}>{label}</Label>}
+			{label && (
+				<Label htmlFor={props.id} error={error} success={success}>
+					{label}
+				</Label>
+			)}
 			<div css={selectWrapperStyles(theme, size, success, error)}>
 				<select
 					className={className}

src/Layout/Input/Select/Select.js

@@ -14,7 +14,11 @@ function Textarea({
 }) {
 	return (
 		<>
-			{label && <Label htmlFor={props.id}>{label}</Label>}
+			{label && (
+				<Label htmlFor={props.id} error={error} success={success}>
+					{label}
+				</Label>
+			)}
 			<textarea
 				className={className}
 				css={inputStyles(