feat(FloatingPanel): new component

packages/react-components/src/components/AppFrame/AppFrame.module.scss

@@ -64,6 +64,7 @@ $base-class: 'app-frame';
       }
 
       &__content {
+        position: relative;
         border: 1px solid var(--border-basic-tertiary);
         border-radius: 16px;
         background-color: var(--surface-primary-default);

packages/react-components/src/components/FloatingPanel/FloatingPanel.mdx

@@ -0,0 +1,30 @@
+import { ArgTypes, Canvas, Meta, Title } from '@storybook/blocks';
+import * as FloatingPanelStories from './FloatingPanel.stories';
+
+<Meta of={FloatingPanelStories} />
+
+<Title>FloatingPanel</Title>
+
+[Intro](#Intro) | [Implementation](#Implementation) | [Component API](#ComponentAPI)
+
+## Intro <a id="Intro" />
+
+The `FloatingPanel` component is a UI element designed to appear when form fields change. It provides contextual information or actions related to user input.
+
+<Canvas of={FloatingPanelStories.Default} />
+
+### Implementation <a id="Implementation" />
+
+Positioning: The `FloatingPanel` is positioned absolutely within its container. This means that the parent element must have `position: relative` to ensure the panel is placed correctly.
+
+```jsx
+<div style={{ position: 'relative' }}>
+  <FloatingPanel isVisible={true} placement="bottom">
+    Your content here...
+  </FloatingPanel>
+</div>
+```
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={FloatingPanelStories.Default} sort="requiredFirst" />

packages/react-components/src/components/FloatingPanel/FloatingPanel.module.scss

@@ -0,0 +1,49 @@
+@import '../../utils/StackingContextLevel';
+
+$base-class: 'floating-panel';
+
+.#{$base-class} {
+  position: absolute;
+  transition: all var(--transition-duration-moderate-2) ease-in-out;
+  opacity: 0;
+  z-index: $stacking-context-level-popover;
+  box-shadow: var(--shadow-fixed-bottom);
+  background-color: var(--surface-primary-default);
+  min-height: 100px;
+
+  &--bottom {
+    border-top: 1px solid var(--border-basic-secondary);
+    box-shadow: var(--shadow-fixed-bottom);
+  }
+
+  &--top {
+    border-bottom: 1px solid var(--border-basic-secondary);
+    box-shadow: var(--shadow-fixed-top);
+  }
+
+  &--left {
+    border-right: 1px solid var(--border-basic-secondary);
+    box-shadow: var(--shadow-fixed-left);
+  }
+
+  &--right {
+    border-left: 1px solid var(--border-basic-secondary);
+    box-shadow: var(--shadow-fixed-right);
+  }
+
+  &--bottom,
+  &--top {
+    right: 0;
+    left: 0;
+  }
+
+  &--left,
+  &--right {
+    top: 0;
+    bottom: 0;
+  }
+
+  &--visible {
+    opacity: 1;
+  }
+}

packages/react-components/src/components/FloatingPanel/FloatingPanel.spec.tsx

@@ -0,0 +1,34 @@
+import { render } from 'test-utils';
+
+import { FloatingPanel } from './FloatingPanel';
+import { IFloatingPanelProps } from './types';
+
+const renderComponent = (props: IFloatingPanelProps) => {
+  return render(<FloatingPanel {...props} />);
+};
+
+describe('<FloatingPanel> component', () => {
+  it('should not be visible by default', () => {
+    const { container } = renderComponent({});
+
+    expect(container.firstChild).not.toBeInTheDocument();
+  });
+
+  it('should be visible if isVisible is true', () => {
+    const { container } = renderComponent({
+      isVisible: true,
+    });
+
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.firstChild).toHaveAttribute('aria-visible', 'true');
+  });
+
+  it('should render children', () => {
+    const { container } = renderComponent({
+      isVisible: true,
+      children: <div>Test</div>,
+    });
+
+    expect(container.firstChild).toHaveTextContent('Test');
+  });
+});