feat: adds modal component to react layouts

packages/react-layouts/package.json

@@ -30,7 +30,10 @@
     "@emotion/css": "^10.0.4",
     "@emotion/styled": "^10.0.7",
     "@quid/react-core": "^1.29.0",
+    "@quid/theme": "^1.30.0",
+    "react-router-dom": "^4.3.1",
     "@quid/react-tabs-provider": "^1.26.0",
-    "@quid/theme": "^1.30.0"
+    "react-modal": "^3.8.1",
+    "color": "^3.1.0"
   }
 }

packages/react-layouts/src/Modal/ActionBar.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Quid, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @flow
+
+import * as React from 'react';
+import styled from '@emotion/styled/macro';
+import { withFallback as wf } from '@quid/theme';
+import css from '@emotion/css/macro';
+import { ClassNames } from '@emotion/core';
+
+type ActionBarProps = {
+  action?: React.Node,
+  renderActionLeft?: string => React.Node,
+  renderActionRight?: string => React.Node,
+  className?: string,
+};
+
+const Left = styled.div`
+  margin-left: auto;
+`;
+
+const Right = styled.div`
+  margin-right: auto;
+`;
+
+const ActionBar = styled(
+  ({
+    action,
+    renderActionLeft,
+    renderActionRight,
+    ...props
+  }: ActionBarProps) => (
+    <ClassNames>
+      {({
+        css,
+        actionClassName = css`
+          margin: 0 calc(0.71em / 2);
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        `,
+      }) => (
+        <div {...props}>
+          {renderActionLeft && (
+            <Right>{renderActionLeft(actionClassName)}</Right>
+          )}
+          {action}
+          {renderActionRight && (
+            <Left>{renderActionRight(actionClassName)}</Left>
+          )}
+        </div>
+      )}
+    </ClassNames>
+  )
+)`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 50px;
+  padding: 0.71em;
+  ${wf(
+    props => css`
+      border-top: 1px solid
+        ${props.theme.current === 'light'
+          ? props.theme.colors.gray1
+          : props.theme.colors.gray7};
+    `
+  )};
+`;
+
+export default ActionBar;

packages/react-layouts/src/Modal/Centerer.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Quid, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @flow
+
+import * as React from 'react';
+import styled from '@emotion/styled/macro';
+import css from '@emotion/css/macro';
+import { textStyles } from '@quid/theme';
+type ActionBarProps = {
+  children: React.Node,
+  noPadding?: boolean,
+  centerVertically?: boolean,
+};
+
+const Centerer = styled(
+  ({ children, centerVertically, noPadding, ...props }: ActionBarProps) => (
+    <div {...props}>{children}</div>
+  )
+)`
+  ${textStyles('normal')};
+  display: flex;
+  flex: 1;
+  overflow-y: auto;
+
+  ${props =>
+    !props.noPadding &&
+    css`
+      padding: 2.04em 7.06em;
+    `}
+
+  ${props =>
+    props.centerVertically &&
+    css`
+      align-items: center;
+    `}
+`;
+
+export default Centerer;

packages/react-layouts/src/Modal/Header.js

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Quid, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @flow
+
+import * as React from 'react';
+import styled from '@emotion/styled/macro';
+import type { Importance } from './importanceTypes';
+import { Icon } from '@quid/react-core';
+import css from '@emotion/css/macro';
+import { withFallback as wf, textStyles } from '@quid/theme';
+
+type Props = {
+  title: React.Node,
+  icon?: string,
+  importance: Importance,
+  className?: string,
+};
+
+const HeaderTitle = styled.h1`
+  ${textStyles('regular', 'xlarge')};
+  color: inherit;
+`;
+
+const HeaderIcon = styled(Icon)`
+  box-sizing: initial;
+  text-align: center;
+  font-size: 2.6em;
+  height: 0.93em;
+  width: 0.93em;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0.56em;
+  transform: translateY(30%);
+  padding: 0.37em;
+  border-radius: 100%;
+
+  ${wf(
+    props =>
+      css`
+        background-color: ${props.theme.current === 'light'
+          ? props.theme.colors.gray1
+          : props.theme.colors.gray7};
+        box-shadow: 0 0 0 2px
+          ${props.theme.current === 'light'
+            ? props.theme.colors.white
+            : props.theme.colors.black};
+        color: ${props.theme.primary};
+      `
+  )};
+`;
+
+const INFO_COLOR = '#B5ECEA';
+const WARNING_COLOR = '#F5BBBE';
+
+const Header = styled(({ title, icon, ...props }: Props) => (
+  <header {...props}>
+    <HeaderTitle>{title}</HeaderTitle>
+    {icon && <HeaderIcon name={icon} />}
+  </header>
+))`
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 4.64em;
+  border-bottom: 1px solid transparent;
+  border-radius: 2px 2px 0 0;
+
+  ${wf(
+    props =>
+      props.importance &&
+      props.importance === 'action' &&
+      css`
+        color: ${props.theme.primary};
+        background-color: ${props.theme.current === 'light'
+          ? props.theme.colors.white
+          : props.theme.colors.black};
+        border-color: ${props.theme.current === 'light'
+          ? props.theme.colors.gray1
+          : props.theme.colors.gray7};
+      `
+  )}
+
+  ${wf(
+    props =>
+      props.importance &&
+      props.importance === 'info' &&
+      css`
+        color: ${props.theme.colors.black};
+        background-color: ${INFO_COLOR};
+        border-color: ${INFO_COLOR};
+      `
+  )}
+
+  ${props =>
+    props.importance &&
+    props.importance === 'warning' &&
+    css`
+      background-color: ${WARNING_COLOR};
+      border-color: ${WARNING_COLOR};
+    `};
+`;
+
+export default Header;