feat: start on styling

autoguru-au · Jan 31, 2025 · 2dc9c30 · 2dc9c30
1 parent 0f28d3b
commit 2dc9c30
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 22 deletions.
diff --git a/lib/components/DateTimePicker/CalendarButton.tsx b/lib/components/DateTimePicker/CalendarButton.tsx
@@ -0,0 +1,29 @@
+import React, { useRef } from 'react';
+import { useButton, type AriaButtonProps } from 'react-aria';
+
+import { focusOutline } from '../../styles/focusOutline.css';
+import { odStyle } from '../../styles/sprinkles.css';
+
+export const CalendarButton = (props: AriaButtonProps) => {
+	const ref = useRef(null);
+	const { buttonProps } = useButton(props, ref);
+	return (
+		<button
+			{...buttonProps}
+			className={odStyle({
+				alignItems: 'center',
+				background: { initial: 'white' },
+				borderRadius: '2',
+				cursor: { hover: 'pointer', disabled: 'default' },
+				display: 'flex',
+				justifyContent: 'center',
+				padding: 'none',
+				size: '7',
+				...focusOutline,
+			})}
+			ref={ref}
+		>
+			{props.children}
+		</button>
+	);
+};
diff --git a/lib/components/DateTimePicker/CalendarGrid.tsx b/lib/components/DateTimePicker/CalendarGrid.tsx
@@ -8,8 +8,11 @@ import {
 } from 'react-aria';
 import type { CalendarState } from 'react-stately';
 
+import { odStyle } from '../../styles/sprinkles.css';
 import { dataAttrs } from '../../utils/dataAttrs';
 
+import { styledCell } from './DateTimePicker.css';
+
 const CalendarCell = ({ state, date }) => {
 	const ref = React.useRef(null);
 	const {
@@ -23,11 +26,12 @@ const CalendarCell = ({ state, date }) => {
 	} = useCalendarCell({ date }, state, ref);
 
 	return (
-		<td {...cellProps}>
+		<td {...cellProps} className={odStyle({ padding: '1' })}>
 			<div
 				{...buttonProps}
 				ref={ref}
 				hidden={isOutsideVisibleRange}
+				className={styledCell()}
 				{...dataAttrs({
 					selected: isSelected,
 					disabled: isDisabled,
@@ -55,11 +59,21 @@ export const CalendarGrid = ({
 	);
 
 	return (
-		<table {...gridProps}>
+		<table
+			{...gridProps}
+			className={odStyle({ width: { mobile: '100%', tablet: 'auto' } })}
+		>
 			<thead {...headerProps}>
 				<tr>
 					{weekDays.map((day, index) => (
-						<th key={index}>{day}</th>
+						<th
+							key={index}
+							className={odStyle({
+								color: 'gray600',
+							})}
+						>
+							{day}
+						</th>
 					))}
 				</tr>
 			</thead>

diff --git a/lib/components/DateTimePicker/DateTimePicker.css.ts b/lib/components/DateTimePicker/DateTimePicker.css.ts
@@ -0,0 +1,34 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+import { focusOutline } from '../../styles/focusOutline.css';
+import { odStyle } from '../../styles/sprinkles.css';
+
+// == Cell styles
+export const styledCell = recipe({
+	base: [
+		odStyle({
+			alignItems: 'center',
+			background: {
+				initial: 'white',
+				hover: 'gray200',
+				selected: 'gray900',
+				disabled: 'white',
+			},
+			borderRadius: '2',
+			color: {
+				initial: 'gray900',
+				selected: 'white',
+				disabled: 'gray400',
+			},
+			cursor: {
+				initial: 'pointer',
+				disabled: 'default',
+			},
+			display: 'flex',
+			fontSize: 'md',
+			justifyContent: 'center',
+			size: '7',
+			...focusOutline,
+		}),
+	],
+});
diff --git a/lib/components/DateTimePicker/DateTimePicker.tsx b/lib/components/DateTimePicker/DateTimePicker.tsx
@@ -1,3 +1,4 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
 import {
 	getLocalTimeZone,
 	// currently only supporting western-style Gregorian calendar
@@ -6,7 +7,6 @@ import {
 } from '@internationalized/date';
 import React from 'react';
 import {
-	useButton,
 	useCalendar,
 	useDateFormatter,
 	useLocale,
@@ -16,13 +16,17 @@ import {
 import { useCalendarState } from 'react-stately';
 
 import { odStyle } from '../../styles/sprinkles.css';
+import { Icon } from '../Icon';
 import { OptionGrid, OptionItem } from '../OptionGrid/OptionGrid';
 
+import { CalendarButton } from './CalendarButton';
 import { CalendarGrid } from './CalendarGrid';
 
 const defaultEnglish = {
 	dateLabel: 'Date',
 	timeLabel: 'Time',
+	nextLabel: 'Next',
+	prevLabel: 'Prev',
 } as const;
 
 type LangContent = keyof typeof defaultEnglish;
@@ -60,16 +64,6 @@ function createCalendar(identifier) {
 	throw new Error(`Unsupported calendar configured ${identifier}`);
 }
 
-function CalendarButton(props) {
-	const ref = React.useRef(null);
-	const { buttonProps } = useButton(props, ref);
-	return (
-		<button {...buttonProps} ref={ref}>
-			{props.children}
-		</button>
-	);
-}
-
 const dateTextPunctuationEN = (text: string) =>
 	text
 		.split(' ')
@@ -122,8 +116,8 @@ export const DateTimePicker = <D extends DateValue>({
 		<div>
 			<div
 				className={odStyle({
-					display: 'flex',
-					gap: '5',
+					display: { tablet: 'flex' },
+					gap: '7',
 				})}
 			>
 				<div className={odStyle({ flexShrink: 0 })}>
@@ -137,14 +131,36 @@ export const DateTimePicker = <D extends DateValue>({
 					</h3>
 					<div
 						{...calendarProps}
-						className={odStyle({ display: 'flex' })}
+						className={odStyle({
+							alignItems: 'center',
+							display: 'flex',
+							justifyContent: 'space-between',
+							marginBottom: '2',
+						})}
 					>
-						<CalendarButton {...prevButtonProps}>
-							Prev
+						<CalendarButton
+							{...prevButtonProps}
+							aria-label={
+								lang?.prevLabel ?? defaultEnglish.prevLabel
+							}
+						>
+							<Icon icon={ChevronLeftIcon} />
 						</CalendarButton>
-						<h3>{calendarTitle}</h3>
-						<CalendarButton {...nextButtonProps}>
-							Next
+						<h4
+							className={odStyle({
+								fontWeight: 'bold',
+								margin: 'none',
+							})}
+						>
+							{calendarTitle}
+						</h4>
+						<CalendarButton
+							{...nextButtonProps}
+							aria-label={
+								lang?.nextLabel ?? defaultEnglish.nextLabel
+							}
+						>
+							<Icon icon={ChevronRightIcon} />
 						</CalendarButton>
 					</div>
 					<CalendarGrid