chore: Adding date values to date component pages for comparison

cloudscape-design · Feb 10, 2025 · 4ad3236 · 4ad3236
1 parent d366444
commit 4ad3236
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 30 deletions.
diff --git a/pages/date-input/simple.page.tsx b/pages/date-input/simple.page.tsx
@@ -2,23 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 
-import { Box } from '~components';
+import { Box, SpaceBetween } from '~components';
 import DateInput from '~components/date-input';
 
 export default function DateInputScenario() {
   const [value, setValue] = useState('');
 
   return (
     <Box padding="l">
-      <h1>Date input</h1>
-      <DateInput
-        className="testing-date-input"
-        name="date"
-        ariaLabel="Enter the date in YYYY/MM/DD"
-        placeholder="YYYY/MM/DD"
-        onChange={event => setValue(event.detail.value)}
-        value={value}
-      />
+      <SpaceBetween direction="vertical" size="m">
+        <h1>Date input</h1>
+        <DateInput
+          className="testing-date-input"
+          name="date"
+          ariaLabel="Enter the date in YYYY/MM/DD"
+          placeholder="YYYY/MM/DD"
+          onChange={event => setValue(event.detail.value)}
+          value={value}
+        />
+        <b>Raw value</b>
+        <pre>{JSON.stringify(value, undefined, 2)}</pre>
+      </SpaceBetween>
     </Box>
   );
 }
diff --git a/pages/date-picker/simple.page.tsx b/pages/date-picker/simple.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 
-import { Box, DatePicker, FormField, Link } from '~components';
+import { Box, DatePicker, FormField, Link, SpaceBetween } from '~components';
 
 import i18nStrings from './i18n-strings';
 
@@ -11,25 +11,29 @@ export default function DatePickerScenario() {
 
   return (
     <Box padding="s">
-      <h1>Date picker simple version</h1>
-      <Link id="focus-dismiss-helper">Focusable element before the date picker</Link>
-      <br />
-      <FormField label="Certificate expiry date" constraintText="Use YYYY/MM/DD format.">
-        <DatePicker
-          value={value}
-          name={'date-picker-name'}
-          locale="en-GB"
-          i18nStrings={i18nStrings}
-          openCalendarAriaLabel={selectedDate =>
-            'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
-          }
-          placeholder={'YYYY/MM/DD'}
-          onChange={event => setValue(event.detail.value)}
-        />
-      </FormField>
-      <br />
-      <br />
-      <Link id="focusable-element-after-date-picker">Focusable element after the date picker</Link>
+      <SpaceBetween direction="vertical" size="m">
+        <h1>Date picker simple version</h1>
+        <Link id="focus-dismiss-helper">Focusable element before the date picker</Link>
+        <br />
+        <FormField label="Certificate expiry date" constraintText="Use YYYY/MM/DD format.">
+          <DatePicker
+            value={value}
+            name={'date-picker-name'}
+            locale="en-GB"
+            i18nStrings={i18nStrings}
+            openCalendarAriaLabel={selectedDate =>
+              'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+            }
+            placeholder={'YYYY/MM/DD'}
+            onChange={event => setValue(event.detail.value)}
+          />
+        </FormField>
+        <br />
+        <br />
+        <Link id="focusable-element-after-date-picker">Focusable element after the date picker</Link>
+        <b>Raw value</b>
+        <pre>{JSON.stringify(value, undefined, 2)}</pre>
+      </SpaceBetween>
     </Box>
   );
 }