add SfDropdown

Author: gioboa

packages/storefront-ui/src/components/SfDropdown/SfDropdown.tsx

@@ -0,0 +1,21 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { SfDropdownProps } from './types';
+
+export const SfDropdown = component$<SfDropdownProps>((props) => {
+  const { ref, open: isOpen = false, class: _class, style: containerStyle, ...dropdownOptions } = props;
+
+  //TODO
+  // const { refs, style: dropdownStyle } = useDropdown({ isOpen, ...dropdownOptions });
+  const dropdownStyle = '';
+
+  return (
+    <div {...(ref ? { ref } : {})} class={['w-max', _class]} style={containerStyle} data-testid="dropdown">
+      <Slot name="trigger" />
+      {isOpen && (
+        <div {...(ref ? { ref } : {})} style={dropdownStyle} aria-hidden={!isOpen} data-testid="dropdown-content">
+          <Slot />
+        </div>
+      )}
+    </div>
+  );
+});

packages/storefront-ui/src/components/SfDropdown/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export {  SfDropdown } from './SfDropdown';

packages/storefront-ui/src/components/SfDropdown/types.ts

@@ -0,0 +1,10 @@
+import { PropFunction, QwikIntrinsicElements, Signal } from '@builder.io/qwik';
+
+export type SfDropdownProps = {
+  //Omit<UseDropdownOptions, 'isOpen'> &
+  style?: QwikIntrinsicElements['div']['style'];
+  ref?: Signal<Element | undefined>;
+  class?: string;
+  open?: boolean;
+  onClose$?: PropFunction<() => void>;
+};