feat: container query layout

autoguru-au · Feb 3, 2025 · 6e6545c · 6e6545c
1 parent 30a0634
commit 6e6545c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/.changeset/khaki-dragons-remember.md b/.changeset/khaki-dragons-remember.md
@@ -0,0 +1,6 @@
+---
+'@autoguru/overdrive': minor
+---
+
+Introduces DateTimePicker (beta) to help users book a service drop-off time. May
+be extended for additional use cases.
diff --git a/lib/components/DateTimePicker/CalendarGrid.tsx b/lib/components/DateTimePicker/CalendarGrid.tsx
@@ -12,7 +12,7 @@ import type { CalendarState } from 'react-stately';
 import { odStyle } from '../../styles/sprinkles.css';
 import { dataAttrs } from '../../utils/dataAttrs';
 
-import { styledCell } from './DateTimePicker.css';
+import { calendarGridStyle, styledCell } from './DateTimePicker.css';
 
 interface CalendarCellProps extends AriaCalendarCellProps {
 	state: CalendarState;
@@ -69,10 +69,7 @@ export const CalendarGrid = ({ state, ...props }: CalendarGridProps) => {
 	);
 
 	return (
-		<table
-			{...gridProps}
-			className={odStyle({ width: { mobile: '100%', tablet: 'auto' } })}
-		>
+		<table {...gridProps} className={calendarGridStyle}>
 			<thead {...headerProps}>
 				<tr>
 					{weekDays.map((day, index) => (

diff --git a/lib/components/DateTimePicker/DateTimePicker.css.ts b/lib/components/DateTimePicker/DateTimePicker.css.ts
@@ -1,7 +1,35 @@
+import { createContainer, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { focusOutline } from '../../styles/focusOutline.css';
 import { odStyle } from '../../styles/sprinkles.css';
+import { tokens } from '../../themes/base/tokens';
+import { breakpoints } from '../../themes/makeTheme';
+
+// === Container styles
+export const queryContainer = createContainer();
+export const queryContainerStyle = style({
+	containerName: queryContainer,
+	containerType: 'inline-size',
+});
+
+export const layoutStyle = style({
+	'@container': {
+		[`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+			display: 'flex',
+			gap: tokens.space[7],
+		},
+	},
+});
+
+export const calendarGridStyle = style({
+	width: '100%',
+	'@container': {
+		[`${queryContainer} (min-width: ${breakpoints.tablet})`]: {
+			width: 'auto',
+		},
+	},
+});
 
 // == Cell styles
 export const styledCell = recipe({

diff --git a/lib/components/DateTimePicker/DateTimePicker.tsx b/lib/components/DateTimePicker/DateTimePicker.tsx
@@ -28,6 +28,7 @@ import {
 
 import { CalendarButton } from './CalendarButton';
 import { CalendarGrid } from './CalendarGrid';
+import { layoutStyle, queryContainerStyle } from './DateTimePicker.css';
 
 const defaultEnglish = {
 	dateLabel: 'Date',
@@ -183,6 +184,7 @@ export const DateTimePicker = <D extends DateValue>({
 		<div
 			role="group"
 			aria-labelledby={titleId}
+			className={queryContainerStyle}
 			{...dataAttrs({ 'test-id': testId })}
 		>
 			{title && (
@@ -193,12 +195,7 @@ export const DateTimePicker = <D extends DateValue>({
 					{title}
 				</h2>
 			)}
-			<div
-				className={odStyle({
-					display: { tablet: 'flex' },
-					gap: '7',
-				})}
-			>
+			<div className={layoutStyle}>
 				<div className={odStyle({ flexShrink: 0 })}>
 					<h3
 						className={odStyle({

diff --git a/lib/components/SearchBar/SearchBar.stories.tsx b/lib/components/SearchBar/SearchBar.stories.tsx
@@ -4,7 +4,7 @@ import { expect, fn, within, userEvent } from '@storybook/test';
 import { SearchBar } from './SearchBar';
 
 const meta: Meta = {
-	title: 'Forms & Input Fields/Search Input',
+	title: 'Forms & Input Fields/Search Bar',
 	component: SearchBar,
 	args: {
 		placeholder: 'Search for tasks',
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof SearchBar>;
 
 const testPhrase = 'Test search phrase';
 
-export const SearchInput: Story = {
+export const TaskSearch: Story = {
 	play: async ({ args, canvasElement, step }) => {
 		const canvas = within(canvasElement);
 		const field = canvas.getAllByRole('searchbox')[0];