Merge pull request #7 from include-davis/feat/delivery-form

Implement DeliveryFormSection component

app/(pages)/_globals/globals.scss

@@ -6,11 +6,14 @@
 
     --primary: var(--include-purple);
     --secondary: #e7c6f9;
+	--tertiary: #bf9a90;
+	--tertiary-light: #f8f6f5;
     --light-background: rgb(241, 240, 240);
     --dark-background: #0d303b;
 
     --text-dark: #0d303b;
     --text-light: #def6ff;
+	--text-grey: #808080;
 
     /* spacers */
     --tiny-spacer: 8px;
@@ -22,9 +25,16 @@
     /* border radius */
     --b-radius: 8px;
 
+	/* input border */
+	--b-input: 1px solid #d3d3d3;
+	--b-input-focus: 2px solid var(--tertiary);
+
     /* navbar */
     --navbar-height: 80px;
 
+	/* icon size */
+	--icon-input-size: 1.5rem;
+
     background-color: var(--light-background);
 }
 
@@ -56,3 +66,6 @@ h4 {
 p {
     font-size: 1rem;
 }
+input, select {
+	font-size: 1rem;
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/Address/Address.module.scss

@@ -0,0 +1,15 @@
+.input_group {
+	display: flex;
+	gap: var(--small-spacer);
+}
+
+.address {
+	display: flex;
+	flex-direction: column;
+	gap: var(--small-spacer);
+
+	.add_field {
+		color: var(--tertiary);
+		cursor: pointer;
+	}
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/Address/Address.tsx

@@ -0,0 +1,62 @@
+import InputField from '../InputField/InputField';
+
+import { useState } from 'react';
+import { IoIosSearch } from 'react-icons/io';
+
+import styles from './Address.module.scss';
+
+export default function Address({
+  updateShippingField,
+}: {
+  updateShippingField: (property: string, value: string) => void;
+}) {
+  const [isFieldAdded, setFieldAdded] = useState(false);
+
+  return (
+    <>
+      <div className={styles.address}>
+        <InputField
+          label="Address"
+          name="address"
+          type="text"
+          icon={IoIosSearch}
+          handleFieldChange={updateShippingField}
+        />
+        {!isFieldAdded && (
+          <div onClick={() => setFieldAdded(true)} className={styles.add_field}>
+            + Add apartment, suite, etc.
+          </div>
+        )}
+        {isFieldAdded && (
+          <InputField
+            label="Apartment, suite, etc. (optional)"
+            name="apartment"
+            type="text"
+            handleFieldChange={updateShippingField}
+          />
+        )}
+      </div>
+      <div className={styles.input_group}>
+        <InputField
+          label="City"
+          name="city"
+          type="text"
+          handleFieldChange={updateShippingField}
+        />
+        <InputField
+          label="State"
+          name="state"
+          type="select"
+          list={['CA']}
+          handleFieldChange={updateShippingField}
+        />
+        <InputField
+          label="ZIP code"
+          name="zip"
+          type="text"
+          handleFieldChange={updateShippingField}
+        />
+      </div>
+    </>
+  );
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/DeliveryFormSection.module.scss

@@ -0,0 +1,8 @@
+@use "app/(pages)/_globals/mixins";
+
+.delivery_form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--small-spacer);
+	padding: var(--spacer);
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/DeliveryFormSection.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import DeliveryOptions from './DeliveryOptions/DeliveryOptions';
+import ShippingInfo from './ShippingInfo/ShippingInfo';
+
+import styles from './DeliveryFormSection.module.scss';
+
+export default function DeliveryFormSection() {
+  return (
+    <form className={styles.delivery_form}>
+      <h2 className={styles.heading}>Delivery</h2>
+      <DeliveryOptions />
+      <ShippingInfo />
+    </form>
+  );
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/DeliveryOptions/DeliveryOptions.module.scss

@@ -0,0 +1,46 @@
+.delivery_options {
+	border: none;
+	border-radius: var(--b-radius);
+	background-color: white;
+
+	.opt {
+		display: flex;
+		align-items: center;
+		gap: var(--tiny-spacer);
+		padding: var(--small-spacer);
+		border: var(--b-input);
+		border-radius: var(--b-radius);
+
+		&:has(> input:checked) {
+			background-color: var(--tertiary-light);
+			border: 1px solid var(--tertiary);
+			outline: none;
+			accent-color: var(--tertiary);
+		}
+
+		&:first-child {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			&:not(:has(> input:checked)) {
+				border-bottom: none;
+			}
+		}
+
+		&:last-child {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			&:not(:has(> input:checked)) {
+				border-top: none;
+			}
+		}
+
+		.icon {
+			font-size: var(--icon-input-size);
+			margin-left: auto;
+			color: var(--tertiary);
+			fill: var(--tertiary);
+		}
+	}
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/DeliveryOptions/DeliveryOptions.tsx

@@ -0,0 +1,45 @@
+import { ElementType } from 'react';
+import { CiDeliveryTruck } from 'react-icons/ci';
+import { PiHouseLineLight } from 'react-icons/pi';
+
+import styles from './DeliveryOptions.module.scss';
+
+export default function DeliveryOptions() {
+  return (
+    <fieldset className={styles.delivery_options}>
+      <Option
+        label="Ship"
+        value="ship"
+        icon={CiDeliveryTruck}
+        isDefault={true}
+      />
+      <Option label="Pick up" value="pickUp" icon={PiHouseLineLight} />
+    </fieldset>
+  );
+}
+
+function Option({
+  label,
+  value,
+  isDefault,
+  icon: Icon,
+}: {
+  label: string;
+  value: string;
+  isDefault?: boolean;
+  icon?: ElementType;
+}) {
+  return (
+    <div className={styles.opt}>
+      <input
+        type="radio"
+        id={value}
+        value={value}
+        name="delivery_opt"
+        defaultChecked={isDefault}
+      />
+      <label htmlFor={value}>{label}</label>
+      {Icon && <Icon className={styles.icon} />}
+    </div>
+  );
+}

app/(pages)/checkout/_components/CheckoutForm/DeliveryFormSection/InputField/InputField.module.scss

@@ -0,0 +1,62 @@
+.input_field {
+	position: relative;
+	width: 100%;
+
+	input, select {
+		padding: var(--small-spacer) var(--small-spacer) ;
+		width: 100%;
+		border: var(--b-input);
+		border-radius: var(--b-radius);
+		transition: 250ms;
+
+		&:focus {
+			border: var(--b-input-focus);
+			outline: none;
+		}
+
+		&.invalid,
+		&::placeholder {
+			color: var(--text-grey);
+		}
+	}
+
+	/* remove default Safari styling */
+	select {
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	.icon {
+		font-size: var(--icon-input-size);
+		fill: var(--text-grey);
+		position: absolute;
+		right: var(--small-spacer);
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	label {
+		position: absolute;
+		top: var(--tiny-spacer);
+		left: var(--small-spacer);
+		color: var(--text-grey);
+		transition: transform 250ms;	
+		transform-origin: left center;
+	}
+
+	select.valid + label, 
+	input:not(:placeholder-shown) + label {
+		  transform: translateY(-10%) scale(0.75);
+	}
+
+	select.valid,
+	input:not(:placeholder-shown) {
+		padding-top: var(--spacer);
+		padding-bottom: var(--tiny-spacer);
+	}
+
+	select.invalid + label,
+	input:placeholder-shown + label {
+		display: none;
+	}	
+}