feat(client): add CloseButton and base dialog components

packages/client/src/elements/Dialog/Dialog.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import Dialog from '.';
+import { DialogProps } from './Dialog.types';
+
+export default {
+  title: 'Elements/Dialog',
+  component: Dialog,
+} as Meta;
+
+const Template: Story<DialogProps> = (args) => (
+  <div>
+    <h1>Background title</h1>
+    <p>Cliniass potus ine tolosa! Meaningless advices needs most intuitions.</p>
+    <Dialog {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <>Lorem Ipsum</>,
+};

packages/client/src/elements/Dialog/Dialog.styled.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+import hexToRgba from '../../utils/hexToRgba';
+import Card from '../Card';
+
+export const Wrapper = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Overlay = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => hexToRgba(theme.palette.background.default, 0.85)};
+`;
+
+export const StyledCard = styled(Card)`
+  position: relative;
+  padding: 20px 60px;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+export const CloseButtonWrapper = styled.div`
+  position: absolute;
+  top: 12px;
+  right: 12px;
+`;

packages/client/src/elements/Dialog/Dialog.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+interface DialogProps {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}

packages/client/src/elements/Dialog/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { CloseButton } from '../buttons';
+import { CloseButtonWrapper, Overlay, StyledCard, Wrapper } from './Dialog.styled';
+import { DialogProps } from './Dialog.types';
+
+const Dialog = ({ children, open = false, onClose }: DialogProps) => (
+  <Wrapper data-testid="dialog">
+    <StyledCard>
+      <CloseButtonWrapper>
+        <CloseButton />
+      </CloseButtonWrapper>
+      <h2>Title</h2>
+      <p>Description</p>
+      {children}
+    </StyledCard>
+    <Overlay />
+  </Wrapper>
+);
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;

packages/client/src/elements/buttons/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import CloseButton from './index';
+
+export default {
+  title: 'Elements/buttons/Close Button',
+  component: CloseButton,
+} as Meta;
+
+const Template: Story<CloseButtonProps> = (args) => <CloseButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  noLabel: false,
+  label: 'Custom close label',
+};

packages/client/src/elements/buttons/CloseButton/CloseButton.styled.ts

@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+
+const size = '21px';
+
+export const baseLineStyle = css`
+  height: 3px;
+  width: ${size};
+  margin-top: 8px;
+  position: absolute;
+  background: ${({ theme: { palette } }) => palette.text.secondary};
+  border-radius: 2px;
+  transition: all 0.3s ease-in;
+`;
+
+export const LeftRight = styled.div`
+  ${baseLineStyle};
+  transform: rotate(45deg);
+`;
+
+export const RightLeft = styled.div`
+  ${baseLineStyle};
+  transform: rotate(-45deg);
+`;
+
+export const StyledButton = styled.button`
+  background: transparent;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: ${size};
+  height: ${size};
+  cursor: pointer;
+  outline: none;
+
+  :focus-visible {
+    transition: box-shadow 150ms ease-in-out;
+    box-shadow: 0 0 0 2px ${({ theme: { palette } }) => palette.primary.main};
+  }
+
+  &:hover ${LeftRight} {
+    transform: rotate(-45deg);
+    background: ${({ theme: { palette } }) => palette.colors.red};
+  }
+  &:hover ${RightLeft} {
+    transform: rotate(45deg);
+    background: ${({ theme: { palette } }) => palette.colors.red};
+  }
+`;

packages/client/src/elements/buttons/CloseButton/CloseButton.types.d.ts

@@ -0,0 +1 @@
+type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

packages/client/src/elements/buttons/CloseButton/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { LeftRight, RightLeft, StyledButton } from './CloseButton.styled';
+
+const CloseButton = (props: CloseButtonProps) => (
+  <StyledButton data-testid="closeButton" {...props}>
+    <LeftRight />
+    <RightLeft />
+  </StyledButton>
+);
+
+CloseButton.displayName = 'CloseButton';
+
+export default CloseButton;

packages/client/src/elements/buttons/index.ts

@@ -1,3 +1,4 @@
 export { default as BackButton } from './BackButton';
 export { default as Button } from './Button';
+export { default as CloseButton } from './CloseButton';
 export { default as IconButton } from './IconButton';

packages/client/src/elements/index.ts

@@ -8,9 +8,10 @@ export {
   Spinner,
 } from './animations';
 export { default as BackgroundSideLogo } from './BackgroundSideLogo';
-export { BackButton, Button, IconButton } from './buttons';
+export { BackButton, Button, CloseButton, IconButton } from './buttons';
 export { default as Card } from './Card';
 export { default as Copyright } from './Copyright';
+export { default as Dialog } from './Dialog';
 export { DateField, FunctionField, TextField } from './fields';
 export { default as InvitationStatusField } from './fields/InvitationStatusField';
 export { default as Form } from './Form';