From 630bf2daac8395c70bff4ae18ede253f41831cb6 Mon Sep 17 00:00:00 2001
From: Dimitris Karagiannis <mitch.karajohn@gmail.com>
Date: Tue, 10 Oct 2023 14:56:09 +0300
Subject: [PATCH] feat: add custom Menu component

---
 .../components/Menu/Menu.style.ts             | 36 +++++++++
 src/authentication/components/Menu/Menu.tsx   | 73 +++++++++++++++++++
 src/authentication/components/Menu/index.ts   |  1 +
 3 files changed, 110 insertions(+)
 create mode 100644 src/authentication/components/Menu/Menu.style.ts
 create mode 100644 src/authentication/components/Menu/Menu.tsx
 create mode 100644 src/authentication/components/Menu/index.ts

diff --git a/src/authentication/components/Menu/Menu.style.ts b/src/authentication/components/Menu/Menu.style.ts
new file mode 100644
index 00000000..dabed5f2
--- /dev/null
+++ b/src/authentication/components/Menu/Menu.style.ts
@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import {
+  MenuPositionAllowed,
+  optionsStyle,
+} from '@orfium/ictinus/dist/components/utils/DropdownOptions';
+import { rem } from '@orfium/ictinus/dist/theme/utils';
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+export const Button = styled.button`
+  position: relative;
+  color: ${({ textColor }: { textColor: string }) => textColor};
+  border: none;
+  display: flex;
+  font-size: ${({ theme }) => theme.typography.fontSizes['14']};
+  align-items: center;
+  padding: 0;
+
+  > span {
+    padding-right: ${({ theme }) => theme.spacing.sm};
+    display: inline-block;
+  }
+`;
+
+export const Tag = styled.span<{ backgroundColor: string; textColor: string }>`
+  font-size: ${({ theme }) => theme.typography.fontSizes[12]};
+  padding: ${({ theme }) => theme.spacing.xsm};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ textColor }) => textColor};
+  border-radius: ${rem(2)};
+`;
+export const Option = styled.span<{ menuPosition: MenuPositionAllowed }>`
+  ${({ theme, menuPosition }) => optionsStyle({ menuPosition })(theme)}
+`;
diff --git a/src/authentication/components/Menu/Menu.tsx b/src/authentication/components/Menu/Menu.tsx
new file mode 100644
index 00000000..ade2c55e
--- /dev/null
+++ b/src/authentication/components/Menu/Menu.tsx
@@ -0,0 +1,73 @@
+import { Icon, List, useTheme } from '@orfium/ictinus';
+import * as React from 'react';
+
+import ClickAwayListener from '@orfium/ictinus/dist/components/utils/ClickAwayListener';
+import { MenuPositionAllowed } from '@orfium/ictinus/dist/components/utils/DropdownOptions';
+import { Button, Option, Tag, Wrapper } from './Menu.style';
+
+export type Props = {
+  /** Items that are being declared as menu options */
+  items?: string[];
+  /** A callback that is being triggered when an items has been clicked */
+  onSelect: (option: string) => void;
+  /** The text of the button to show - defaults to "More" */
+  buttonText: React.ReactNode;
+  /** The text of the tag to show - defaults to undefined */
+  tagText: React.ReactNode;
+  /** Define if the button is in disabled state */
+  disabled?: boolean;
+  /** Menu position when open */
+  menuPosition?: MenuPositionAllowed;
+};
+
+export type TestProps = {
+  dataTestId?: string;
+};
+
+const Menu: React.FC<Props & TestProps> = (props) => {
+  const {
+    items,
+    disabled,
+    onSelect,
+    buttonText = 'More',
+    menuPosition = 'left',
+    dataTestId,
+    tagText,
+  } = props;
+  const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
+  const textColor = theme.utils.getColor('blue', 600);
+  const backgroundColor = theme.utils.getColor('lightGrey', 100);
+
+  return (
+    <ClickAwayListener onClick={() => setOpen(false)}>
+      <Wrapper data-testid={dataTestId}>
+        <Button disabled={disabled} textColor={textColor} onClick={() => setOpen((open) => !open)}>
+          <span>{buttonText}</span>{' '}
+          <Icon name={open ? 'triangleUp' : 'triangleDown'} size={11} color={textColor} />
+        </Button>
+        {tagText && (
+          <Tag backgroundColor={backgroundColor} textColor={textColor}>
+            {tagText}
+          </Tag>
+        )}
+        {open && (
+          <Option menuPosition={menuPosition}>
+            {items && (
+              <List
+                data={items}
+                rowSize={'small'}
+                handleOptionClick={(option: string) => {
+                  setOpen(false);
+                  onSelect(option);
+                }}
+              />
+            )}
+          </Option>
+        )}
+      </Wrapper>
+    </ClickAwayListener>
+  );
+};
+
+export default Menu;
diff --git a/src/authentication/components/Menu/index.ts b/src/authentication/components/Menu/index.ts
new file mode 100644
index 00000000..a6de24ca
--- /dev/null
+++ b/src/authentication/components/Menu/index.ts
@@ -0,0 +1 @@
+export { default } from './Menu';