creates date picker context

Author: TheSonOfThomp

packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx

@@ -3,10 +3,16 @@ import { StoryFn } from '@storybook/react';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
+import { Size } from '@leafygreen-ui/tokens';
+
+import {
+  DatePickerContextProps,
+  DatePickerProvider,
+} from '../DatePickerContext';
 
 import { DateInputSegment } from './DateInputSegment';
 
-const meta: StoryMetaType<typeof DateInputSegment> = {
+const meta: StoryMetaType<typeof DateInputSegment, DatePickerContextProps> = {
   title: 'Components/DatePicker/DateInputSegment',
   component: DateInputSegment,
   parameters: {
@@ -16,7 +22,13 @@ const meta: StoryMetaType<typeof DateInputSegment> = {
         darkMode: [false, true],
         value: [undefined, 6, 2023],
         segment: ['day', 'month', 'year'],
+        size: Object.values(Size),
       },
+      decorator: (Instance, ctx) => (
+        <DatePickerProvider value={{ size: ctx?.args.size }}>
+          <Instance />
+        </DatePickerProvider>
+      ),
       excludeCombinations: [
         {
           value: 6,

packages/date-picker/src/DateInputSegment/DateInputSegment.tsx

@@ -7,6 +7,8 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
+import { useDatePickerContext } from '../DatePickerContext';
+
 import {
   charsPerSegment,
   defaultMax,
@@ -37,9 +39,7 @@ export function DateInputSegment({
 
   const { theme } = useDarkMode(darkMode);
   const baseFontSize = useUpdatedBaseFontSize();
-  // TODO: implement context
-  // const { size } = useDatePickerContext();
-  const size = Size.Default;
+  const { size } = useDatePickerContext();
 
   return (
     <input
@@ -55,7 +55,7 @@ export function DateInputSegment({
         baseStyles,
         fontSizeStyles[baseFontSize],
         segmentThemeStyles[theme],
-        // segmentSizeStyles[size],
+        segmentSizeStyles[size ?? Size.Default],
         segmentWidthStyles[segment],
       )}
     />

packages/date-picker/src/DatePicker/DatePicker.types.ts

@@ -1,4 +1,4 @@
-import { BaseDatePickerProps } from 'src/types';
+import { BaseDatePickerProps } from '../types';
 
 export interface DatePickerProps extends BaseDatePickerProps {
   /** The initial selected date. Ignored if `value` is provided */

packages/date-picker/src/DatePickerContext/DatePickerContext.spec.tsx

@@ -0,0 +1,11 @@
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { DatePickerContext } from '.';
+
+describe('packages/date-picker-context', () => {
+  test('condition', () => {
+
+  })
+})

packages/date-picker/src/DatePickerContext/DatePickerContext.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+import { DatePickerContextProps } from './DatePickerContext.types';
+
+export const DatePickerContext = createContext<DatePickerContextProps>({});
+export const DatePickerProvider = DatePickerContext.Provider;
+export const useDatePickerContext = () => useContext(DatePickerContext);

packages/date-picker/src/DatePickerContext/DatePickerContext.types.ts

@@ -0,0 +1,3 @@
+import { BaseDatePickerProps } from 'src/types';
+
+export interface DatePickerContextProps extends Partial<BaseDatePickerProps> {}

packages/date-picker/src/DatePickerContext/index.ts

@@ -0,0 +1,6 @@
+export {
+  DatePickerContext,
+  DatePickerProvider,
+  useDatePickerContext,
+} from './DatePickerContext';
+export { DatePickerContextProps } from './DatePickerContext.types';