Merge branch 'styled-components' of https://github.com/cmpsr/composer …

…into styled-snackbar

* 'styled-components' of https://github.com/cmpsr/composer:
  Styled Tooltip (#169)
  Styled Modal Improvements (#176)
  Styled Dropdown (#167)
  Styled Modal (#173)

packages/styled-components/package.json

@@ -13,7 +13,7 @@
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "scripts": {
-    "storybook": "echo 'Starting Storybook' && start-storybook -p 8080 -c .storybook",
+    "storybook": "echo 'Starting Storybook' && start-storybook -p 8080 -c .storybook --no-dll",
     "build-storybook": "build-storybook -c .storybook",
     "libbuild": "rimraf lib && babel src --out-dir lib --extensions '.ts,.tsx' --copy-files && find lib -type f -name '*.test.*' -exec rm {} + && yarn tsc -d --declarationDir lib --declarationMap --emitDeclarationOnly",
     "test": "jest --env=jest-environment-jsdom-sixteen",
@@ -28,7 +28,6 @@
     "downshift": "^5.1.1",
     "react-device-detect": "^1.11.14",
     "react-markdown": "^4.3.1",
-    "react-modal": "^3.11.2",
     "react-popper": "^2.2.3",
     "react-toastify": "^6.0.8",
     "react-tooltip": "^4.2.6",

packages/styled-components/src/components/Components.types.ts

@@ -0,0 +1,5 @@
+export enum Shapes {
+  Rounded = 'rounded',
+  SemiRounded = 'semiRounded',
+  Rectangle = 'rectangle'
+}

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
 import { StyledButton } from './Button.styled';
-import { Types, HtmlTypes, Shapes, Props } from './Button.types';
+import { Types, HtmlTypes, Props } from './Button.types';
+import { Shapes } from 'components/Components.types';
 
 export const Button = ({
   children,
@@ -11,7 +12,7 @@ export const Button = ({
   htmlType = HtmlTypes.Button,
   testId = 'button',
   disabled = false,
-  shape = Shapes.Rectangle,
+  shape = Shapes.Rectangle
 }: Props) => (
   <StyledButton
     data-testid={testId}

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

@@ -1,20 +1,15 @@
 import { ReactNode } from 'react';
+import { Shapes } from 'components/Components.types';
 
 export enum Types {
   Primary = 'primary',
-  Secondary = 'secondary',
+  Secondary = 'secondary'
 }
 
 export enum HtmlTypes {
   Button = 'button',
   Submit = 'submit',
-  Reset = 'reset',
-}
-
-export enum Shapes {
-  Rounded = 'rounded',
-  SemiRounded = 'semiRounded',
-  Rectangle = 'rectangle',
+  Reset = 'reset'
 }
 
 export type Props = {

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';