feat: add custom Menu component

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)}
+`;

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;

src/authentication/components/Menu/index.ts

@@ -0,0 +1 @@
+export { default } from './Menu';