Add tests

src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx

@@ -48,5 +48,25 @@ const Template: StoryFn<typeof ReleaseAnnouncementComponent> = (args) => {
   );
 };
 
-export const ReleaseAnnouncement = Template.bind({});
-ReleaseAnnouncement.args = {};
+export const Default = Template.bind({});
+Default.args = {};
+
+export const MultiLinesContent = Template.bind({});
+MultiLinesContent.args = {
+  header: "A multi line header which is taking multiple lines",
+  description:
+    "A multi line description which is taking multiple lines. The OK button should be horizontally centred.",
+};
+
+export const BottomPlacement = Template.bind({});
+BottomPlacement.args = {
+  placement: "bottom",
+};
+
+// export const MultiLinesContent = {
+//   args: {
+//     header: "A multi line header which is taking multiple lines",
+//     description:
+//       "A multi line description which is taking multiple lines. The close button should be horizontally centred.",
+//   },
+// };

src/components/ReleaseAnnouncement/__snapshots__/ReleaseAnnouncement.test.tsx.snap

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ReleaseAnnouncement > renders 1`] = `
+<div
+  aria-hidden="true"
+  data-floating-ui-inert=""
+>
+  <button
+    aria-controls=":r2:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    aria-label="open menu"
+    class="_button_2a1efe"
+    data-kind="primary"
+    data-size="lg"
+    data-state="open"
+    role="button"
+    tabindex="0"
+  >
+    Open menu
+  </button>
+</div>
+`;
+
+exports[`ReleaseAnnouncement > renders the component at the bottom of the trigger button 1`] = `
+<div
+  aria-hidden="true"
+  data-floating-ui-inert=""
+>
+  <button
+    aria-controls=":re:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    aria-label="open menu"
+    class="_button_2a1efe"
+    data-kind="primary"
+    data-size="lg"
+    data-state="open"
+    role="button"
+    tabindex="0"
+  >
+    Open menu
+  </button>
+</div>
+`;
+
+exports[`ReleaseAnnouncement > renders with a long label header and description 1`] = `
+<div
+  aria-hidden="true"
+  data-floating-ui-inert=""
+>
+  <button
+    aria-controls=":r8:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    aria-label="open menu"
+    class="_button_2a1efe"
+    data-kind="primary"
+    data-size="lg"
+    data-state="open"
+    role="button"
+    tabindex="0"
+  >
+    Open menu
+  </button>
+</div>
+`;

src/components/ReleaseAnnouncement/useReleaseAnnouncement.tsx

@@ -17,10 +17,8 @@ limitations under the License.
 import {
   arrow,
   autoUpdate,
-  flip,
   offset,
   Placement,
-  shift,
   useFloating,
   useId,
   useInteractions,
@@ -79,12 +77,6 @@ export function useReleaseAnnouncement({
     middleware: [
       // arrow height 12px + 4px padding
       offset(16),
-      flip({
-        crossAxis: placement.includes("-"),
-        fallbackAxisSideDirection: "end",
-        padding: 5,
-      }),
-      shift(),
       // add the little arrow along with the floating content
       arrow({
         element: arrowRef,