Styled Dropdown

packages/styled-components/src/components/primitives/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Dropdown } from '.';
+import { text } from '@storybook/addon-knobs';
+import { LinkItem } from 'components/primitives/List/Items';
+import { favorite as Favorite, Icon } from 'components/primitives/Icon';
+import styled from 'styled-components';
+
+export default {
+  title: 'Primitives/Dropdown',
+  component: Dropdown,
+};
+
+export const Titles = () => (
+  <>
+    <h1>Titles</h1>
+    <Dropdown title="Title">
+      <LinkItem title="title" />
+      <LinkItem title="title" />
+      <LinkItem title="title" />
+      <LinkItem title="title" />
+    </Dropdown>
+  </>
+);
+
+export const Icons = () => (
+  <>
+    <h1>Icons</h1>
+    <Dropdown title="Title">
+      <LinkItem title="title" icon={<Favorite type={Icon.Types.Filled} />} />
+      <LinkItem title="title" icon={<Favorite type={Icon.Types.Filled} />} />
+      <LinkItem title="title" icon={<Favorite type={Icon.Types.Filled} />} />
+      <LinkItem title="title" icon={<Favorite type={Icon.Types.Filled} />} />
+    </Dropdown>
+  </>
+);
+
+const StyledFlex = styled.div`
+  display: flex;
+`;
+export const Columns = () => (
+  <>
+    <h1>Columns</h1>
+    <Dropdown title="Title">
+      <StyledFlex>
+        <div>
+          {' '}
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+        </div>
+        <div>
+          {' '}
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+          <LinkItem
+            title="title"
+            icon={<Favorite type={Icon.Types.Filled} />}
+          />
+        </div>
+      </StyledFlex>
+    </Dropdown>
+  </>
+);
+
+export const Playground = () => (
+  <>
+    <h1>Playground</h1>
+    <Dropdown title={text('Title', 'Title')}>
+      {text('Content', 'Content')}
+    </Dropdown>
+  </>
+);

packages/styled-components/src/components/primitives/Dropdown/Dropdown.styled.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Icon } from 'components/primitives/Icon';
+import { List } from 'components/primitives/List';
+
+export const StyledWrapper = styled.div`
+  position: relative;
+`;
+
+export const StyledAnchor = styled.a`
+  display: flex;
+  align-items: middle;
+  flex: 1 1 0%;
+`;
+
+export const StyledIcon = styled(Icon)`
+  fill: currentColor;
+  margin-left: 0.5rem;
+  pointer-events: none;
+`;
+
+export const StyledList = styled(List)`
+  min-width: 10rem;
+`;

packages/styled-components/src/components/primitives/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { Dropdown } from './Dropdown';
+
+describe('Dropdown', () => {
+  it('should render children when dropdown is open', () => {
+    render(
+      <Dropdown title="title">
+        <div>foo</div>
+      </Dropdown>
+    );
+    const expandMore = screen.getByTestId('expandMore');
+    fireEvent.click(expandMore);
+    screen.getByText('foo');
+  });
+  it('should render title', () => {
+    render(<Dropdown title="foo" />);
+    screen.getByText('foo');
+  });
+  it('should render ExpandMore icon', () => {
+    render(<Dropdown title="title" />);
+    screen.getByTestId('expandMore');
+  });
+  it('should render ExpandLess icon on click', () => {
+    render(<Dropdown title="title" />);
+    const expandMore = screen.getByTestId('expandMore');
+    fireEvent.click(expandMore);
+    screen.getByTestId('expandLess');
+  });
+  it('should close menu when click outside', () => {
+    render(<Dropdown title="title" />);
+    const expandMore = screen.getByTestId('expandMore');
+    fireEvent.click(expandMore);
+    screen.getByTestId('expandLess');
+    fireEvent.click(document);
+    screen.getByTestId('expandMore');
+  });
+});

packages/styled-components/src/components/primitives/Dropdown/Dropdown.tsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Icon, Typography } from 'components/primitives';
+import {
+  expand_more as ExpandMore,
+  expand_less as ExpandLess,
+} from 'components/primitives/Icon';
+import { Props } from './Dropdown.types';
+import {
+  StyledWrapper,
+  StyledAnchor,
+  StyledIcon,
+  StyledList,
+} from './Dropdown.styled';
+
+export const Dropdown = ({
+  title,
+  className,
+  children,
+  testId = 'dropdown',
+}: Props) => {
+  const node = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleClose = (e) => {
+      if (node.current && !node.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClose);
+    return () => {
+      document.removeEventListener('click', handleClose);
+    };
+  }, [node]);
+
+  return (
+    <StyledWrapper ref={node} data-testid={testId}>
+      <StyledAnchor
+        className={className}
+        role="button"
+        onClick={() => setIsOpen((isOpen) => !isOpen)}
+      >
+        <Typography tag={Typography.Tags.Span} type={Typography.Types.Body}>
+          {title}
+        </Typography>
+        <StyledIcon testId={isOpen ? 'expandLess' : 'expandMore'}>
+          {isOpen ? (
+            <ExpandLess type={Icon.Types.Filled} />
+          ) : (
+            <ExpandMore type={Icon.Types.Filled} />
+          )}
+        </StyledIcon>
+      </StyledAnchor>
+      {isOpen && <StyledList>{children}</StyledList>}
+    </StyledWrapper>
+  );
+};

packages/styled-components/src/components/primitives/Dropdown/Dropdown.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type Props = {
+  title: string;
+  className?: string;
+  children?: ReactNode;
+  testId?: string;
+};

packages/styled-components/src/components/primitives/Dropdown/index.ts

@@ -0,0 +1 @@
+export * from './Dropdown';

packages/styled-components/src/components/primitives/index.ts

@@ -4,6 +4,7 @@ export * from './Badges/IconicBadge';
 export * from './Badges/NumericBadge';
 export * from './Button';
 export * from './Chat/ConversationSummary';
+export * from './Dropdown';
 export * from './Icon';
 export * from './Image';
 export * from './Link';