feat: <Input variant="glyph"> (behaves like <Input variant="cta">)

but styled like `<Button variant="glyph">`
JakobJingleheimer · Apr 18, 2023 · 9cb87a4 · 9cb87a4
1 parent 4c20b8d
commit 9cb87a4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/lib/react/Button/Button.module.css b/lib/react/Button/Button.module.css
@@ -41,15 +41,19 @@
 	background-color: unset;
 }
 .Button[variant="glyph"][appearance="danger"] {
+	color: var(--colour-danger);
 	fill: var(--colour-danger);
 }
 .Button[variant="glyph"][appearance="primary"] {
+	color: var(--colour-primary);
 	fill: var(--colour-primary);
 }
 .Button[variant="glyph"][appearance="affirming"] {
+	color: var(--colour-success);
 	fill: var(--colour-success);
 }
 .Button[variant="glyph"][appearance="warning"] {
+	color: var(--colour-warning);
 	fill: var(--colour-warning);
 }
 

diff --git a/lib/react/Input/Input.jsx b/lib/react/Input/Input.jsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 
 import { useInteractiveStates } from '../useInteractiveStates.js';
 
+import Button from '../Button/Button.jsx';
 import buttonStyles from '../Button/Button.module.css';
 
 import styles from './Input.module.css';
@@ -14,6 +15,7 @@ import styles from './Input.module.css';
 export { styles as inputClasses };
 
 export default function Input({
+	appearance = Button.APPEARANCES.PRIMARY,
 	arrangement = Input.ARRANGEMENTS.INLINE,
 	as: Tag = 'input',
 	className,
@@ -80,10 +82,10 @@ export default function Input({
 		if (isInvalid && e.target.checkValidity()) setError('');
 	};
 
-	const isCTA = variant === Input.VARIANTS.CTA;
+	const isButton = buttonVariants.has(variant);
 	const isSwitch = switchTypes.has(type);
 
-	if (isCTA) arrangement = null;
+	if (isButton) arrangement = null;
 
 	if (others.value === null) others.value = ''; // React has a tantrum when `value` is `null`
 
@@ -94,14 +96,14 @@ export default function Input({
 				styles.InputField,
 				{
 					[styles.Fluid]: fluid,
-					[buttonStyles.Button]: isCTA,
+					[buttonStyles.Button]: isButton,
 				},
 			)}
 			pristine={pristine}
 			switch={isSwitch ? '' : null}
 			touched={touched}
-			{...isCTA && {
-				variant: 'cta',
+			{...isButton && {
+				variant,
 			}}
 		>
 			<Tag
@@ -124,11 +126,12 @@ export default function Input({
 				{!!label && (
 					<label
 						className={classnames(styles.Label, {
-							[buttonStyles.Button]: isCTA,
+							[buttonStyles.Button]: isButton,
 						})}
 						htmlFor={id}
-						{...isCTA && {
-							variant: 'cta',
+						{...isButton && {
+							appearance,
+							variant,
 						}}
 					>
 						{label}
@@ -163,7 +166,8 @@ Input.ARRANGEMENTS = {
 	STAND_ALONE: 'stand-alone',
 };
 Input.VARIANTS = {
-	CTA: 'cta',
+	CTA: Button.VARIANTS.CTA,
+	GLYPH: Button.VARIANTS.GLYPH,
 	TOGGLE: 'toggle',
 };
 Input.propTypes = {
@@ -185,6 +189,11 @@ const dtTypes = new Set([
 	'time',
 ]);
 
+const buttonVariants = new Set([
+	Input.VARIANTS.CTA,
+	Input.VARIANTS.GLYPH,
+]);
+
 const switchTypes = new Set([
 	'checkbox',
 	'radio',

diff --git a/lib/react/Input/Input.module.css b/lib/react/Input/Input.module.css
@@ -96,17 +96,20 @@ textarea.Input {
 	order: -1;
 }
 
-.InputField[touched] .Input[variant="cta"]:invalid:focus + .InnerWrapper > .Label {
+.InputField[touched] .Input[variant="cta"]:invalid:focus + .InnerWrapper > .Label,
+.InputField[touched] .Input[variant="glyph"]:invalid:focus + .InnerWrapper > .Label {
 	outline: 2px solid;
 }
 
 .InputField[touched] .Input[variant="cta"]:invalid:focus + .InnerWrapper > .Label,
+.InputField[touched] .Input[variant="glyph"]:invalid:focus + .InnerWrapper > .Label,
 .InputField[touched] .Input:invalid:focus {
 	outline-color: var(--colour-danger);
 }
 
 .InputField[touched] .Input:invalid,
 .InputField[touched] .Input[variant="cta"]:invalid + .InnerWrapper > .Label,
+.InputField[touched] .Input[variant="glyph"]:invalid + .InnerWrapper > .Label,
 .Error {
 	border-color: var(--colour-danger);
 }
@@ -118,7 +121,8 @@ textarea.Input {
  * The Element exist in the doc flow in order to get focused by checkValidity, so 'display: none'
  * and the like are not an option.
  */
-.Input[variant="cta"] {
+.Input[variant="cta"],
+.Input[variant="glyph"] {
 	height: 0;
 	position: absolute;
 	width: 0;
@@ -144,6 +148,27 @@ textarea.Input {
 	padding: var(--default-padding);
 }
 
+.Input:not(:checked) + .InnerWrapper > .Label[variant="glyph"][appearance] {
+	color: unset;
+	fill: unset;
+}
+.Input:checked + .InnerWrapper > .Label[variant="glyph"][appearance="danger"] {
+	color: var(--colour-danger);
+	fill: var(--colour-danger);
+}
+.Input:checked + .InnerWrapper > .Label[variant="glyph"][appearance="primary"] {
+	color: var(--colour-primary);
+	fill: var(--colour-primary);
+}
+.Input:checked + .InnerWrapper > .Label[variant="glyph"][appearance="affirming"] {
+	color: var(--colour-success);
+	fill: var(--colour-success);
+}
+.Input:checked + .InnerWrapper > .Label[variant="glyph"][appearance="warning"] {
+	color: var(--colour-warning);
+	fill: var(--colour-warning);
+}
+
 .Input[variant="toggle"] {
 	align-items: center;
 	appearance: none;