From 4de26b6da0fbfd8ef192ac989787562050843958 Mon Sep 17 00:00:00 2001
From: laveshv <laveshv@amazon.com>
Date: Thu, 17 Oct 2024 08:14:11 -0700
Subject: [PATCH 01/10] Create bluedialog.page.tsx

---
 pages/bluedialog/bluedialog.page.tsx | 98 ++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 pages/bluedialog/bluedialog.page.tsx

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
new file mode 100644
index 0000000000..6dd7181eea
--- /dev/null
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -0,0 +1,98 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import {
+  Box,
+  Button,
+  DatePicker,
+  ExpandableSection,
+  Form,
+  FormField,
+  Header,
+  Input,
+  Select,
+  SpaceBetween,
+  Textarea,
+} from '~components';
+
+import styles from './styles.scss';
+
+export default function Bluedialogbox() {
+  const [showDialog, setShowDialog] = React.useState(true);
+  // Inputs
+  const [dateValue, setDateValue] = React.useState('');
+  const [amountValue, setAmountValue] = React.useState('0');
+  const [descriptionValue, setDescriptionValue] = React.useState('');
+  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
+
+  function submitData() {
+    console.log({ dateValue, amountValue, descriptionValue, selectedService });
+  }
+  function skipDialog() {
+    setShowDialog(false);
+  }
+
+  return showDialog ? (
+    <div className={styles['blue-dialog-box']}>
+      <Form
+        header={
+          <div className={styles['blue-dialog-box__header']}>
+            <Header variant="h1">Dialog header</Header>
+            <Button iconName="close" variant="icon" onClick={skipDialog} />
+          </div>
+        }
+      >
+        <div className={styles['blue-dialog-box__content']}>
+          <SpaceBetween direction="vertical" size="l">
+            <FormField label="When did the increase occur?">
+              <DatePicker
+                onChange={({ detail }) => setDateValue(detail.value)}
+                value={dateValue}
+                openCalendarAriaLabel={selectedDate =>
+                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+                }
+                placeholder="YYYY/MM/DD"
+              />
+            </FormField>
+            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
+              <Input value={amountValue} onChange={({ detail }) => setAmountValue(detail.value)} />
+            </FormField>
+
+            <ExpandableSection
+              defaultExpanded={true}
+              headerText={
+                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
+                  Provide more details to enhance troubleshooting
+                </Box>
+              }
+            >
+              <SpaceBetween size={'l'}>
+                <FormField label="Which service is this related to ? - optional">
+                  <Select
+                    selectedOption={selectedService}
+                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
+                    options={[
+                      { label: 'Cloudwatch', value: 'Cloudwatch' },
+                      { label: 'Dynamodb', value: 'Dynamodb' },
+                      { label: 'Route 53', value: 'Route 53' },
+                      { label: 'S3', value: 'S3' },
+                    ]}
+                  />
+                </FormField>
+                <FormField label="Describe the issue in few words. - optional">
+                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
+                </FormField>
+              </SpaceBetween>
+            </ExpandableSection>
+          </SpaceBetween>
+        </div>
+        <div className={styles['blue-dialog-box__footer']}>
+          <Button onClick={submitData}>Submit</Button>
+        </div>
+      </Form>
+    </div>
+  ) : (
+    <></>
+  );
+}

From e3ab331bb3ad80bf46a86922d078fa3c10d6789d Mon Sep 17 00:00:00 2001
From: laveshv <laveshv@amazon.com>
Date: Thu, 17 Oct 2024 08:14:36 -0700
Subject: [PATCH 02/10] Create styles.scss

---
 pages/bluedialog/styles.scss | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 pages/bluedialog/styles.scss

diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
new file mode 100644
index 0000000000..f46fdbe9b4
--- /dev/null
+++ b/pages/bluedialog/styles.scss
@@ -0,0 +1,33 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '~design-tokens' as awsui;
+
+.alert-container {
+  inline-size: 500px;
+}
+
+.blue-dialog-box {
+  margin: 20px;
+  border: 1px solid awsui.$color-border-status-info;
+  background-color: awsui.$color-background-status-info;
+  border-radius: 16px;
+}
+.blue-dialog-box__header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px 0 20px;
+}
+
+.blue-dialog-box__content {
+  padding: 0 20px 20px 20px;
+}
+
+.blue-dialog-box__footer {
+  border-block-start: 1px solid awsui.$color-border-divider-default;
+  padding: 10px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 20px;
+}

From 23677fb0f59d0cd55516649ea4fe3c1897c0fec9 Mon Sep 17 00:00:00 2001
From: laveshv <laveshv@amazon.com>
Date: Thu, 17 Oct 2024 09:23:37 -0700
Subject: [PATCH 03/10] Update styles.scss

---
 pages/bluedialog/styles.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index f46fdbe9b4..5ed9597060 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -4,9 +4,6 @@
 */
 @use '~design-tokens' as awsui;
 
-.alert-container {
-  inline-size: 500px;
-}
 
 .blue-dialog-box {
   margin: 20px;

From e78ac0347cd3d81dd0ab7c42b9298e6532cea880 Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Fri, 25 Oct 2024 17:25:15 -0700
Subject: [PATCH 04/10] some a11y changes and fixing style lint issues

---
 pages/bluedialog/bluedialog.page.tsx | 32 +++++++++++++++++++---------
 pages/bluedialog/styles.scss         | 23 ++++++++++++++------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index 6dd7181eea..1045d2d764 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -19,7 +19,6 @@ import {
 import styles from './styles.scss';
 
 export default function Bluedialogbox() {
-  const [showDialog, setShowDialog] = React.useState(true);
   // Inputs
   const [dateValue, setDateValue] = React.useState('');
   const [amountValue, setAmountValue] = React.useState('0');
@@ -30,16 +29,22 @@ export default function Bluedialogbox() {
     console.log({ dateValue, amountValue, descriptionValue, selectedService });
   }
   function skipDialog() {
-    setShowDialog(false);
+    console.log('skip dialog');
   }
 
-  return showDialog ? (
-    <div className={styles['blue-dialog-box']}>
+  return (
+    <div
+      className={styles['blue-dialog-box']}
+      role={'dialog'}
+      aria-labelledby="dialog-box"
+      aria-modal="true"
+      tabIndex={-1}
+    >
       <Form
         header={
-          <div className={styles['blue-dialog-box__header']}>
+          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
             <Header variant="h1">Dialog header</Header>
-            <Button iconName="close" variant="icon" onClick={skipDialog} />
+            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
           </div>
         }
       >
@@ -53,10 +58,15 @@ export default function Bluedialogbox() {
                   'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
                 }
                 placeholder="YYYY/MM/DD"
+                ariaLabel="Select date of increase"
               />
             </FormField>
             <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
-              <Input value={amountValue} onChange={({ detail }) => setAmountValue(detail.value)} />
+              <Input
+                value={amountValue}
+                onChange={({ detail }) => setAmountValue(detail.value)}
+                ariaLabel="Enter increase amount in USD"
+              />
             </FormField>
 
             <ExpandableSection
@@ -66,6 +76,7 @@ export default function Bluedialogbox() {
                   Provide more details to enhance troubleshooting
                 </Box>
               }
+              aria-expanded={true}
             >
               <SpaceBetween size={'l'}>
                 <FormField label="Which service is this related to ? - optional">
@@ -78,6 +89,7 @@ export default function Bluedialogbox() {
                       { label: 'Route 53', value: 'Route 53' },
                       { label: 'S3', value: 'S3' },
                     ]}
+                    ariaLabel="Select related service"
                   />
                 </FormField>
                 <FormField label="Describe the issue in few words. - optional">
@@ -88,11 +100,11 @@ export default function Bluedialogbox() {
           </SpaceBetween>
         </div>
         <div className={styles['blue-dialog-box__footer']}>
-          <Button onClick={submitData}>Submit</Button>
+          <Button onClick={submitData} ariaLabel="Submit form">
+            Submit
+          </Button>
         </div>
       </Form>
     </div>
-  ) : (
-    <></>
   );
 }
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index 5ed9597060..c526670051 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -4,26 +4,35 @@
 */
 @use '~design-tokens' as awsui;
 
-
 .blue-dialog-box {
-  margin: 20px;
-  border: 1px solid awsui.$color-border-status-info;
+  margin-block: 20px;
+  margin-inline: 20px;
+  border-block: 1px solid awsui.$color-border-status-info;
+  border-inline: 1px solid awsui.$color-border-status-info;
   background-color: awsui.$color-background-status-info;
-  border-radius: 16px;
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
+  border-end-start-radius: 16px;
+  border-end-end-radius: 16px;
 }
 .blue-dialog-box__header {
   display: flex;
   justify-content: space-between;
-  padding: 10px 20px 0 20px;
+  padding-block-start: 10px;
+  padding-block-end: 0;
+  padding-inline: 20px;
 }
 
 .blue-dialog-box__content {
-  padding: 0 20px 20px 20px;
+  padding-block-start: 0;
+  padding-block-end: 20px;
+  padding-inline: 20px;
 }
 
 .blue-dialog-box__footer {
   border-block-start: 1px solid awsui.$color-border-divider-default;
-  padding: 10px;
+  padding-block: 10px;
+  padding-inline: 10px;
   display: flex;
   flex-direction: row-reverse;
   gap: 20px;

From e099eaab385100916c359d905e6b72e320263a4d Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Mon, 28 Oct 2024 17:44:44 -0700
Subject: [PATCH 05/10] Changes related to focus management

---
 pages/bluedialog/bluedialog.page.tsx | 31 +++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index 1045d2d764..c9bdf87884 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import {
   Box,
@@ -19,26 +19,43 @@ import {
 import styles from './styles.scss';
 
 export default function Bluedialogbox() {
-  // Inputs
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  // Inputs (these following can be clubbed into one state object)
   const [dateValue, setDateValue] = React.useState('');
   const [amountValue, setAmountValue] = React.useState('0');
   const [descriptionValue, setDescriptionValue] = React.useState('');
   const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
 
+  useEffect(() => {
+    // Store the element that had focus before dialog opened
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog container when it opens
+    if (dialogRef.current) {
+      dialogRef.current.focus();
+    }
+    // Cleanup: Return focus to the trigger element when dialog closes
+    return () => {
+      if (triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    };
+  }, []);
   function submitData() {
-    console.log({ dateValue, amountValue, descriptionValue, selectedService });
+    console.log({ dateValue, amountValue, descriptionValue, selectedService }); // submit the form with these values to determine next action
   }
   function skipDialog() {
-    console.log('skip dialog');
+    console.log('skip dialog'); // can be used by the parent component to dismiss/ hide this dialog box
   }
 
   return (
     <div
       className={styles['blue-dialog-box']}
       role={'dialog'}
-      aria-labelledby="dialog-box"
-      aria-modal="true"
-      tabIndex={-1}
+      aria-labelledby="dialog-title"
+      aria-modal="false" // Maintains natural focus flow since it's an inline dialog
+      tabIndex={-1} // This allows the dialog to receive focus
     >
       <Form
         header={

From 8436467ad3696f81347412398517be3d628e5f8a Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Tue, 29 Oct 2024 17:50:26 -0700
Subject: [PATCH 06/10] Adding a parent page that will consume this bluedialog
 component

---
 pages/bluedialog/bluedialog.page.tsx | 132 +++------------------------
 pages/bluedialog/dialog.tsx          | 127 ++++++++++++++++++++++++++
 pages/bluedialog/styles.scss         |   2 -
 3 files changed, 140 insertions(+), 121 deletions(-)
 create mode 100644 pages/bluedialog/dialog.tsx

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index c9bdf87884..9c4f2f5363 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -1,127 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import {
-  Box,
-  Button,
-  DatePicker,
-  ExpandableSection,
-  Form,
-  FormField,
-  Header,
-  Input,
-  Select,
-  SpaceBetween,
-  Textarea,
-} from '~components';
+import { Box } from '~components';
 
-import styles from './styles.scss';
-
-export default function Bluedialogbox() {
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLElement | null>(null);
-  // Inputs (these following can be clubbed into one state object)
-  const [dateValue, setDateValue] = React.useState('');
-  const [amountValue, setAmountValue] = React.useState('0');
-  const [descriptionValue, setDescriptionValue] = React.useState('');
-  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
-
-  useEffect(() => {
-    // Store the element that had focus before dialog opened
-    triggerRef.current = document.activeElement as HTMLElement;
-
-    // Focus the dialog container when it opens
-    if (dialogRef.current) {
-      dialogRef.current.focus();
-    }
-    // Cleanup: Return focus to the trigger element when dialog closes
-    return () => {
-      if (triggerRef.current) {
-        triggerRef.current.focus();
-      }
-    };
-  }, []);
-  function submitData() {
-    console.log({ dateValue, amountValue, descriptionValue, selectedService }); // submit the form with these values to determine next action
-  }
-  function skipDialog() {
-    console.log('skip dialog'); // can be used by the parent component to dismiss/ hide this dialog box
-  }
+import Bluedialog from './dialog';
 
+export default function BluedialogPage() {
+  const submitData = (data: any) => {
+    console.log(data); // submit the form with these values to determine next action
+  };
+  const skipDialog = () => {
+    console.log('skip dialog');
+  };
   return (
-    <div
-      className={styles['blue-dialog-box']}
-      role={'dialog'}
-      aria-labelledby="dialog-title"
-      aria-modal="false" // Maintains natural focus flow since it's an inline dialog
-      tabIndex={-1} // This allows the dialog to receive focus
-    >
-      <Form
-        header={
-          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
-            <Header variant="h1">Dialog header</Header>
-            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
-          </div>
-        }
-      >
-        <div className={styles['blue-dialog-box__content']}>
-          <SpaceBetween direction="vertical" size="l">
-            <FormField label="When did the increase occur?">
-              <DatePicker
-                onChange={({ detail }) => setDateValue(detail.value)}
-                value={dateValue}
-                openCalendarAriaLabel={selectedDate =>
-                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
-                }
-                placeholder="YYYY/MM/DD"
-                ariaLabel="Select date of increase"
-              />
-            </FormField>
-            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
-              <Input
-                value={amountValue}
-                onChange={({ detail }) => setAmountValue(detail.value)}
-                ariaLabel="Enter increase amount in USD"
-              />
-            </FormField>
-
-            <ExpandableSection
-              defaultExpanded={true}
-              headerText={
-                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
-                  Provide more details to enhance troubleshooting
-                </Box>
-              }
-              aria-expanded={true}
-            >
-              <SpaceBetween size={'l'}>
-                <FormField label="Which service is this related to ? - optional">
-                  <Select
-                    selectedOption={selectedService}
-                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
-                    options={[
-                      { label: 'Cloudwatch', value: 'Cloudwatch' },
-                      { label: 'Dynamodb', value: 'Dynamodb' },
-                      { label: 'Route 53', value: 'Route 53' },
-                      { label: 'S3', value: 'S3' },
-                    ]}
-                    ariaLabel="Select related service"
-                  />
-                </FormField>
-                <FormField label="Describe the issue in few words. - optional">
-                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
-                </FormField>
-              </SpaceBetween>
-            </ExpandableSection>
-          </SpaceBetween>
-        </div>
-        <div className={styles['blue-dialog-box__footer']}>
-          <Button onClick={submitData} ariaLabel="Submit form">
-            Submit
-          </Button>
-        </div>
-      </Form>
-    </div>
+    <Box padding="xxl">
+      <Bluedialog onSubmit={submitData} onSkip={skipDialog} />
+    </Box>
   );
 }
diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
new file mode 100644
index 0000000000..9e9a6cded6
--- /dev/null
+++ b/pages/bluedialog/dialog.tsx
@@ -0,0 +1,127 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+
+import {
+  Box,
+  Button,
+  DatePicker,
+  ExpandableSection,
+  Form,
+  FormField,
+  Header,
+  Input,
+  Select,
+  SpaceBetween,
+  Textarea,
+} from '~components';
+
+import styles from './styles.scss';
+
+export default function Bluedialog({ onSubmit, onSkip }: any) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  // Inputs (these following can be clubbed into one state object)
+  const [dateValue, setDateValue] = React.useState('');
+  const [amountValue, setAmountValue] = React.useState('0');
+  const [descriptionValue, setDescriptionValue] = React.useState('');
+  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
+
+  useEffect(() => {
+    // Store the element that had focus before dialog opened
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog container when it opens
+    if (dialogRef.current) {
+      dialogRef.current.focus();
+    }
+    // Cleanup: Return focus to the trigger element when dialog closes
+    return () => {
+      if (triggerRef.current) {
+        triggerRef.current.focus();
+      }
+    };
+  }, []);
+  function submitData() {
+    onSubmit({ dateValue, amountValue, descriptionValue, selectedService });
+  }
+  function skipDialog() {
+    onSkip(); // can be used by the parent component to dismiss/ hide this dialog box
+  }
+
+  return (
+    <div
+      className={styles['blue-dialog-box']}
+      role={'dialog'}
+      aria-labelledby="dialog-title"
+      aria-modal="false" // Maintains natural focus flow since it's an inline dialog
+      tabIndex={-1} // This allows the dialog to receive focus
+    >
+      <Form
+        header={
+          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
+            <Header variant="h1">Dialog header</Header>
+            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
+          </div>
+        }
+      >
+        <div className={styles['blue-dialog-box__content']}>
+          <SpaceBetween direction="vertical" size="l">
+            <FormField label="When did the increase occur?">
+              <DatePicker
+                onChange={({ detail }) => setDateValue(detail.value)}
+                value={dateValue}
+                openCalendarAriaLabel={selectedDate =>
+                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
+                }
+                placeholder="YYYY/MM/DD"
+                ariaLabel="Select date of increase"
+              />
+            </FormField>
+            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
+              <Input
+                value={amountValue}
+                onChange={({ detail }) => setAmountValue(detail.value)}
+                ariaLabel="Enter increase amount in USD"
+              />
+            </FormField>
+
+            <ExpandableSection
+              defaultExpanded={true}
+              headerText={
+                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
+                  Provide more details to enhance troubleshooting
+                </Box>
+              }
+              aria-expanded={true}
+            >
+              <SpaceBetween size={'l'}>
+                <FormField label="Which service is this related to ? - optional">
+                  <Select
+                    selectedOption={selectedService}
+                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
+                    options={[
+                      { label: 'Cloudwatch', value: 'Cloudwatch' },
+                      { label: 'Dynamodb', value: 'Dynamodb' },
+                      { label: 'Route 53', value: 'Route 53' },
+                      { label: 'S3', value: 'S3' },
+                    ]}
+                    ariaLabel="Select related service"
+                  />
+                </FormField>
+                <FormField label="Describe the issue in few words. - optional">
+                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
+                </FormField>
+              </SpaceBetween>
+            </ExpandableSection>
+          </SpaceBetween>
+        </div>
+        <div className={styles['blue-dialog-box__footer']}>
+          <Button onClick={submitData} ariaLabel="Submit form">
+            Submit
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index c526670051..7f02ce8191 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -5,8 +5,6 @@
 @use '~design-tokens' as awsui;
 
 .blue-dialog-box {
-  margin-block: 20px;
-  margin-inline: 20px;
   border-block: 1px solid awsui.$color-border-status-info;
   border-inline: 1px solid awsui.$color-border-status-info;
   background-color: awsui.$color-background-status-info;

From 3c3014f22a647ad644416685621ba4bc9c93cf8c Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Thu, 19 Dec 2024 17:43:19 -0800
Subject: [PATCH 07/10] Changing the input fields

---
 pages/bluedialog/bluedialog.page.tsx |   5 +-
 pages/bluedialog/dialog.tsx          | 118 ++++++++++-----------------
 pages/bluedialog/styles.scss         |   4 +-
 3 files changed, 47 insertions(+), 80 deletions(-)

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index 9c4f2f5363..706d6a3723 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -10,12 +10,9 @@ export default function BluedialogPage() {
   const submitData = (data: any) => {
     console.log(data); // submit the form with these values to determine next action
   };
-  const skipDialog = () => {
-    console.log('skip dialog');
-  };
   return (
     <Box padding="xxl">
-      <Bluedialog onSubmit={submitData} onSkip={skipDialog} />
+      <Bluedialog onSubmit={submitData} />
     </Box>
   );
 }
diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
index 9e9a6cded6..ea02fa7ddc 100644
--- a/pages/bluedialog/dialog.tsx
+++ b/pages/bluedialog/dialog.tsx
@@ -2,30 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 
-import {
-  Box,
-  Button,
-  DatePicker,
-  ExpandableSection,
-  Form,
-  FormField,
-  Header,
-  Input,
-  Select,
-  SpaceBetween,
-  Textarea,
-} from '~components';
+import { Button, Checkbox, Form, FormField, SpaceBetween, Textarea } from '~components';
 
 import styles from './styles.scss';
 
-export default function Bluedialog({ onSubmit, onSkip }: any) {
+export default function Bluedialog({ onSubmit }: any) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
   // Inputs (these following can be clubbed into one state object)
-  const [dateValue, setDateValue] = React.useState('');
-  const [amountValue, setAmountValue] = React.useState('0');
-  const [descriptionValue, setDescriptionValue] = React.useState('');
-  const [selectedService, setSelectedService] = React.useState({ label: 'Cloudwatch', value: 'Cloudwatch' });
+  const [feedbackOptions, setFeedbackOptions] = React.useState({
+    harmful: false,
+    incomplete: false,
+    inaccurate: false,
+    other: false,
+  });
+  const [feedbackText, setFeedbackText] = React.useState('');
 
   useEffect(() => {
     // Store the element that had focus before dialog opened
@@ -42,11 +33,9 @@ export default function Bluedialog({ onSubmit, onSkip }: any) {
       }
     };
   }, []);
+
   function submitData() {
-    onSubmit({ dateValue, amountValue, descriptionValue, selectedService });
-  }
-  function skipDialog() {
-    onSkip(); // can be used by the parent component to dismiss/ hide this dialog box
+    onSubmit({ feedbackOptions, feedbackText });
   }
 
   return (
@@ -57,63 +46,44 @@ export default function Bluedialog({ onSubmit, onSkip }: any) {
       aria-modal="false" // Maintains natural focus flow since it's an inline dialog
       tabIndex={-1} // This allows the dialog to receive focus
     >
-      <Form
-        header={
-          <div className={styles['blue-dialog-box__header']} id={'dialog-title'}>
-            <Header variant="h1">Dialog header</Header>
-            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
-          </div>
-        }
-      >
+      <Form>
         <div className={styles['blue-dialog-box__content']}>
           <SpaceBetween direction="vertical" size="l">
-            <FormField label="When did the increase occur?">
-              <DatePicker
-                onChange={({ detail }) => setDateValue(detail.value)}
-                value={dateValue}
-                openCalendarAriaLabel={selectedDate =>
-                  'Choose certificate expiry date' + (selectedDate ? `, selected date is ${selectedDate}` : '')
-                }
-                placeholder="YYYY/MM/DD"
-                ariaLabel="Select date of increase"
-              />
+            <FormField label="What did you dislike about the response?">
+              <SpaceBetween size={'s'} direction={'horizontal'}>
+                <Checkbox
+                  checked={feedbackOptions.harmful}
+                  onChange={({ detail }) => setFeedbackOptions({ ...feedbackOptions, harmful: detail.checked })}
+                >
+                  Harmful
+                </Checkbox>
+                <Checkbox
+                  checked={feedbackOptions.incomplete}
+                  onChange={({ detail }) => setFeedbackOptions({ ...feedbackOptions, incomplete: detail.checked })}
+                >
+                  Incomplete
+                </Checkbox>
+                <Checkbox
+                  checked={feedbackOptions.inaccurate}
+                  onChange={({ detail }) => setFeedbackOptions({ ...feedbackOptions, inaccurate: detail.checked })}
+                >
+                  Inaccurate
+                </Checkbox>
+                <Checkbox
+                  checked={feedbackOptions.other}
+                  onChange={({ detail }) => setFeedbackOptions({ ...feedbackOptions, other: detail.checked })}
+                >
+                  Other
+                </Checkbox>
+              </SpaceBetween>
             </FormField>
-            <FormField constraintText="Enter a dollar amount in USD" label="What is the increase amount?">
-              <Input
-                value={amountValue}
-                onChange={({ detail }) => setAmountValue(detail.value)}
-                ariaLabel="Enter increase amount in USD"
+            <FormField label="Tell us more - optional">
+              <Textarea
+                onChange={({ detail }) => setFeedbackText(detail.value)}
+                value={feedbackText}
+                placeholder={'Additional feedback'}
               />
             </FormField>
-
-            <ExpandableSection
-              defaultExpanded={true}
-              headerText={
-                <Box color="text-status-inactive" fontWeight="bold" fontSize="heading-xs">
-                  Provide more details to enhance troubleshooting
-                </Box>
-              }
-              aria-expanded={true}
-            >
-              <SpaceBetween size={'l'}>
-                <FormField label="Which service is this related to ? - optional">
-                  <Select
-                    selectedOption={selectedService}
-                    onChange={({ detail }: any) => setSelectedService(detail.selectedOption)}
-                    options={[
-                      { label: 'Cloudwatch', value: 'Cloudwatch' },
-                      { label: 'Dynamodb', value: 'Dynamodb' },
-                      { label: 'Route 53', value: 'Route 53' },
-                      { label: 'S3', value: 'S3' },
-                    ]}
-                    ariaLabel="Select related service"
-                  />
-                </FormField>
-                <FormField label="Describe the issue in few words. - optional">
-                  <Textarea onChange={({ detail }) => setDescriptionValue(detail.value)} value={descriptionValue} />
-                </FormField>
-              </SpaceBetween>
-            </ExpandableSection>
           </SpaceBetween>
         </div>
         <div className={styles['blue-dialog-box__footer']}>
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index 7f02ce8191..53fb794bd0 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -13,6 +13,7 @@
   border-end-start-radius: 16px;
   border-end-end-radius: 16px;
 }
+
 .blue-dialog-box__header {
   display: flex;
   justify-content: space-between;
@@ -22,8 +23,7 @@
 }
 
 .blue-dialog-box__content {
-  padding-block-start: 0;
-  padding-block-end: 20px;
+  padding-block: 20px;
   padding-inline: 20px;
 }
 

From eb3e45065b3d111e9fc1426527a063149550bdb0 Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Thu, 19 Dec 2024 17:52:10 -0800
Subject: [PATCH 08/10] Increasing the distance between the options

---
 pages/bluedialog/dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
index ea02fa7ddc..ee8c7dfc60 100644
--- a/pages/bluedialog/dialog.tsx
+++ b/pages/bluedialog/dialog.tsx
@@ -50,7 +50,7 @@ export default function Bluedialog({ onSubmit }: any) {
         <div className={styles['blue-dialog-box__content']}>
           <SpaceBetween direction="vertical" size="l">
             <FormField label="What did you dislike about the response?">
-              <SpaceBetween size={'s'} direction={'horizontal'}>
+              <SpaceBetween size={'xxl'} direction={'horizontal'}>
                 <Checkbox
                   checked={feedbackOptions.harmful}
                   onChange={({ detail }) => setFeedbackOptions({ ...feedbackOptions, harmful: detail.checked })}

From 7d474df6791ab8448653b9aacc95e02ed667807f Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Thu, 19 Dec 2024 18:04:11 -0800
Subject: [PATCH 09/10] CSS changes related to footer and stretching textarea

---
 pages/bluedialog/dialog.tsx  | 3 ++-
 pages/bluedialog/styles.scss | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
index ee8c7dfc60..e8aeab8817 100644
--- a/pages/bluedialog/dialog.tsx
+++ b/pages/bluedialog/dialog.tsx
@@ -77,8 +77,9 @@ export default function Bluedialog({ onSubmit }: any) {
                 </Checkbox>
               </SpaceBetween>
             </FormField>
-            <FormField label="Tell us more - optional">
+            <FormField label="Tell us more - optional" stretch={true}>
               <Textarea
+                rows={1}
                 onChange={({ detail }) => setFeedbackText(detail.value)}
                 value={feedbackText}
                 placeholder={'Additional feedback'}
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index 53fb794bd0..6a2ffd7bbd 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -30,7 +30,7 @@
 .blue-dialog-box__footer {
   border-block-start: 1px solid awsui.$color-border-divider-default;
   padding-block: 10px;
-  padding-inline: 10px;
+  padding-inline: 20px;
   display: flex;
   flex-direction: row-reverse;
   gap: 20px;

From 793d28037358384c5bd26447132025d0a3d97cb2 Mon Sep 17 00:00:00 2001
From: Laveshv <laveshv@amazon.com>
Date: Mon, 6 Jan 2025 21:33:12 -0800
Subject: [PATCH 10/10] Addressed comments on PR

---
 pages/bluedialog/bluedialog.page.tsx | 10 +++++-----
 pages/bluedialog/dialog.tsx          | 17 ++++++++++++-----
 pages/bluedialog/styles.scss         | 13 ++-----------
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/pages/bluedialog/bluedialog.page.tsx b/pages/bluedialog/bluedialog.page.tsx
index 706d6a3723..d6a4a0d370 100644
--- a/pages/bluedialog/bluedialog.page.tsx
+++ b/pages/bluedialog/bluedialog.page.tsx
@@ -7,12 +7,12 @@ import { Box } from '~components';
 import Bluedialog from './dialog';
 
 export default function BluedialogPage() {
+  const [showDialog, setShowDialog] = React.useState(true);
   const submitData = (data: any) => {
     console.log(data); // submit the form with these values to determine next action
   };
-  return (
-    <Box padding="xxl">
-      <Bluedialog onSubmit={submitData} />
-    </Box>
-  );
+  const skipDialog = () => {
+    setShowDialog(false);
+  };
+  return <Box padding="xxl">{showDialog && <Bluedialog onSubmit={submitData} onSkip={skipDialog} />}</Box>;
 }
diff --git a/pages/bluedialog/dialog.tsx b/pages/bluedialog/dialog.tsx
index e8aeab8817..6a7f462783 100644
--- a/pages/bluedialog/dialog.tsx
+++ b/pages/bluedialog/dialog.tsx
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 
-import { Button, Checkbox, Form, FormField, SpaceBetween, Textarea } from '~components';
+import { Box, Button, Checkbox, Form, FormField, SpaceBetween, Textarea } from '~components';
 
 import styles from './styles.scss';
 
-export default function Bluedialog({ onSubmit }: any) {
+export default function Bluedialog({ onSubmit, onSkip }: any) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
   // Inputs (these following can be clubbed into one state object)
@@ -37,17 +37,23 @@ export default function Bluedialog({ onSubmit }: any) {
   function submitData() {
     onSubmit({ feedbackOptions, feedbackText });
   }
+  function skipDialog() {
+    onSkip(); // can be used by the parent component to dismiss/ hide this dialog box
+  }
 
   return (
     <div
       className={styles['blue-dialog-box']}
       role={'dialog'}
-      aria-labelledby="dialog-title"
+      aria-labelledby="feedback dialog"
       aria-modal="false" // Maintains natural focus flow since it's an inline dialog
       tabIndex={-1} // This allows the dialog to receive focus
     >
       <Form>
-        <div className={styles['blue-dialog-box__content']}>
+        <Box padding={'l'}>
+          <div className={styles['blue-dialog-box__close']}>
+            <Button iconName="close" variant="icon" onClick={skipDialog} aria-label="Close dialog" />
+          </div>
           <SpaceBetween direction="vertical" size="l">
             <FormField label="What did you dislike about the response?">
               <SpaceBetween size={'xxl'} direction={'horizontal'}>
@@ -86,7 +92,8 @@ export default function Bluedialog({ onSubmit }: any) {
               />
             </FormField>
           </SpaceBetween>
-        </div>
+        </Box>
+
         <div className={styles['blue-dialog-box__footer']}>
           <Button onClick={submitData} ariaLabel="Submit form">
             Submit
diff --git a/pages/bluedialog/styles.scss b/pages/bluedialog/styles.scss
index 6a2ffd7bbd..264c8c967c 100644
--- a/pages/bluedialog/styles.scss
+++ b/pages/bluedialog/styles.scss
@@ -14,17 +14,8 @@
   border-end-end-radius: 16px;
 }
 
-.blue-dialog-box__header {
-  display: flex;
-  justify-content: space-between;
-  padding-block-start: 10px;
-  padding-block-end: 0;
-  padding-inline: 20px;
-}
-
-.blue-dialog-box__content {
-  padding-block: 20px;
-  padding-inline: 20px;
+.blue-dialog-box__close {
+  float: right;
 }
 
 .blue-dialog-box__footer {