fix(Dropdown): added Dropdown component

stories/Button.scss

@@ -38,7 +38,7 @@ a.button {
   position: relative;
 
   height: $min-component-size;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: $font-family;
   font-weight: 700;
   font-size: 15px;
   border: 0;

stories/Button.tsx

@@ -45,9 +45,9 @@ export function Button({
       )}
       layout={Layout.Horizontal}
       type={'button'}
-      onClick={() => {
+      onClick={onClick ? () => {
         if (!isDisabled) onClick()
-      }}
+      } : null}
       {...props}
     >
       <Grid

stories/Card.scss

@@ -22,5 +22,5 @@
   padding: $padding;
   box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 50%);
 
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: $font-family;
 }

stories/Dropdown.scss

@@ -0,0 +1,57 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  font-family: $font-family;
+
+  &.left .list {
+    left: 0;
+  }
+
+  &.right .list {
+    right: 0;
+  }
+
+  .list {
+    @include transition(transform, opacity);
+
+    position: absolute;
+    top: calc(100% + #{$margin});
+    overflow: hidden;
+    min-width: 200px;
+
+    background: $primary;
+    color: $primary-accent;
+    border-radius: $border-radius;
+
+    transform: translateY(-$margin);
+    opacity: 0;
+
+    > * {
+      padding: $padding;
+    }
+  }
+
+  &:not(.visible) .list {
+    pointer-events: none;
+  }
+
+  &.visible .list {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.dropdownItem {
+  color: inherit;
+  text-decoration: none;
+  position: relative;
+
+  &.clickable {
+    @include hover();
+
+    cursor: pointer;
+  }
+}

stories/Dropdown.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Dropdown, DropdownItem, DropdownProps } from './Dropdown';
+import { Button } from './Button';
+import { Alignment } from './constants';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+const Template = (args: DropdownProps) => <Dropdown {...args} />;
+export const Simple = Template.bind({});
+Simple.args = {
+  align: Alignment.Left,
+  children: (
+    <>
+      <DropdownItem
+        href='https://google.com'
+        type='a'
+      >
+        One
+      </DropdownItem>
+      <DropdownItem
+        href='https://google.com'
+        type='a'
+      >
+        Two
+      </DropdownItem>
+      <DropdownItem>
+        Three
+      </DropdownItem>
+    </>
+  ),
+  button: <Button>Click meee!</Button>,
+};

stories/Dropdown.tsx

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { Alignment, Layout } from './constants';
+
+import styles from './Dropdown.scss';
+import { Grid } from './Grid';
+export { DropdownItem } from './DropdownItem';
+
+export interface DropdownProps {
+  align: Alignment;
+  button: ReactNode;
+  children: ReactNode;
+}
+
+export function Dropdown({
+  align,
+  button,
+  children,
+}: DropdownProps): JSX.Element {
+  const elementRef = useRef<HTMLDivElement>();
+  const listenerRef = useRef<(event: MouseEvent) => void>();
+  const [visible, setVisible] = useState<boolean>();
+
+  useEffect(() => {
+    if (visible) {
+      listenerRef.current = (event: MouseEvent): void => {
+        const path = event.composedPath();
+        if (!path.includes(elementRef.current)) {
+          setVisible(false);
+        }
+      };
+
+      window.addEventListener('click', listenerRef.current, {
+        passive: true,
+      });
+    } else if (listenerRef.current) {
+      window.removeEventListener('click', listenerRef.current);
+      listenerRef.current = null;
+    }
+
+    return () => {
+      if (listenerRef.current) {
+        window.removeEventListener('click', listenerRef.current);
+      }
+    }
+  }, [visible]);
+
+  return (
+    <div
+      ref={elementRef}
+      className={classNames(
+        styles.dropdown,
+        styles[align],
+        visible && styles.visible,
+      )}
+    >
+      <div
+        onClick={() => {
+          setVisible(!visible);
+        }}
+      >
+        {button}
+      </div>
+      <Grid
+        className={styles.list}
+        gap={0}
+        layout={Layout.Vertical}
+      >
+        {children}
+      </Grid>
+    </div>
+  );
+}

stories/DropdownItem.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import React, { ElementType, ReactNode } from 'react';
+
+import styles from './Dropdown.scss';
+
+export interface DropdownProps {
+  [key: string]: any;
+  children: ReactNode;
+  type?: ElementType;
+}
+
+export function DropdownItem({
+  children,
+  type: Type = 'div',
+  ...props
+}: DropdownProps): JSX.Element {
+  const isClickable = Type === 'a' || props.onClick || props.href || props.to;
+
+  return (
+    <Type
+      className={classNames(
+        styles.dropdownItem,
+        isClickable && styles.clickable,
+      )}
+      {...props}
+    >
+      {children}
+    </Type>
+  );
+}

stories/_variables.scss

@@ -13,3 +13,4 @@ $min-component-size: 36px;
 $padding: 10px;
 $margin: 10px;
 $font-size: 16px;
+$font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

stories/index.tsx

@@ -12,3 +12,4 @@ export { Separator } from './Separator';
 export { Tooltip } from './Tooltip';
 export { Typography, TypographyStyles } from './Typography';
 export { Toasts, AddToastNotification } from './Toasts';
+export { Dropdown, DropdownItem } from './Dropdown';