From 36a2a9681c966a2b4212f5659a71fc60d62c8b23 Mon Sep 17 00:00:00 2001
From: Matt Nolting <matthew.nolting@gmail.com>
Date: Tue, 24 Jun 2025 22:29:08 -0400
Subject: [PATCH] feat(CC-date-and-time): added and validated date/time picker

---
 .../DatePicker/CalendarMonth.figma.tsx          | 15 +++++++++++++++
 .../components/DatePicker/DatePicker.figma.tsx  | 13 +++++++++++++
 .../DatePicker/TimeAndTimePicker.figma.tsx      | 15 +++++++++++++++
 .../components/DatePicker/TimePicker.figma.tsx  | 17 +++++++++++++++++
 4 files changed, 60 insertions(+)
 create mode 100644 packages/code-connect/components/DatePicker/CalendarMonth.figma.tsx
 create mode 100644 packages/code-connect/components/DatePicker/DatePicker.figma.tsx
 create mode 100644 packages/code-connect/components/DatePicker/TimeAndTimePicker.figma.tsx
 create mode 100644 packages/code-connect/components/DatePicker/TimePicker.figma.tsx

diff --git a/packages/code-connect/components/DatePicker/CalendarMonth.figma.tsx b/packages/code-connect/components/DatePicker/CalendarMonth.figma.tsx
new file mode 100644
index 00000000000..8fde324c68f
--- /dev/null
+++ b/packages/code-connect/components/DatePicker/CalendarMonth.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { CalendarMonth } from '@patternfly/react-core';
+
+// Documentation for CalendarMonth can be found at https://www.patternfly.org/components/calendar-month
+
+figma.connect(
+  CalendarMonth,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7741-2677',
+  {
+    props: {
+      date: '2025-06-16'
+    },
+    example: (props) => <CalendarMonth date={new Date(props.date)} onChange={() => {}} onMonthChange={() => {}} />
+  }
+);
diff --git a/packages/code-connect/components/DatePicker/DatePicker.figma.tsx b/packages/code-connect/components/DatePicker/DatePicker.figma.tsx
new file mode 100644
index 00000000000..658f4e97948
--- /dev/null
+++ b/packages/code-connect/components/DatePicker/DatePicker.figma.tsx
@@ -0,0 +1,13 @@
+import figma from '@figma/code-connect';
+import { DatePicker } from '@patternfly/react-core';
+
+// Documentation for DatePicker can be found at https://www.patternfly.org/components/date-picker
+
+figma.connect(
+  DatePicker,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958:136841',
+  {
+    props: {},
+    example: () => <DatePicker onChange={() => {}} />
+  }
+);
diff --git a/packages/code-connect/components/DatePicker/TimeAndTimePicker.figma.tsx b/packages/code-connect/components/DatePicker/TimeAndTimePicker.figma.tsx
new file mode 100644
index 00000000000..85a4680b0f0
--- /dev/null
+++ b/packages/code-connect/components/DatePicker/TimeAndTimePicker.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { TimePicker } from '@patternfly/react-core';
+
+// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
+
+figma.connect(
+  TimePicker,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136824',
+  {
+    props: {
+      children: figma.children('*')
+    },
+    example: (props) => <TimePicker>{props.children}</TimePicker>
+  }
+);
diff --git a/packages/code-connect/components/DatePicker/TimePicker.figma.tsx b/packages/code-connect/components/DatePicker/TimePicker.figma.tsx
new file mode 100644
index 00000000000..943d3a7ee5d
--- /dev/null
+++ b/packages/code-connect/components/DatePicker/TimePicker.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { TimePicker } from '@patternfly/react-core';
+
+// Documentation for TimePicker can be found at https://www.patternfly.org/components/time-picker
+
+figma.connect(
+  TimePicker,
+  'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7958-136830',
+  {
+    props: {
+      isDisabled: figma.enum('State', { Disabled: true }),
+
+      inputValue: figma.children('Input field')
+    },
+    example: (props: any) => <TimePicker time={props.inputValue} onChange={() => {}} />
+  }
+);