From fc53aa2fe7f61e8b885d6a1eb3738aacfac294e8 Mon Sep 17 00:00:00 2001
From: Zimtir <zimtir@mail.ru>
Date: Sat, 2 Apr 2022 01:08:49 +0300
Subject: [PATCH] feat: migration of mailto

---
 package.json                                  |  6 ++--
 .../molecules/Mailto/Mailto.stories.tsx       | 15 ++++++++
 .../Mailto/Mailto.styles.module.scss          | 34 +++++++++++++++++++
 src/components/molecules/Mailto/Mailto.tsx    | 29 ++++++++++++++++
 src/components/molecules/Mailto/index.ts      |  1 +
 5 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/molecules/Mailto/Mailto.stories.tsx
 create mode 100644 src/components/molecules/Mailto/Mailto.styles.module.scss
 create mode 100644 src/components/molecules/Mailto/Mailto.tsx
 create mode 100644 src/components/molecules/Mailto/index.ts

diff --git a/package.json b/package.json
index a99d207..644bcb8 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,8 @@
         "assets": [
           "package.json",
           "package-lock.json",
-          "CHANGELOG.md"
+          "CHANGELOG.md",
+          "src/scss/**/*.scss"
         ],
         "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
       }
@@ -147,7 +148,8 @@
   "files": [
     "README.md",
     "LICENSE",
-    "dist"
+    "dist",
+    "src/scss"
   ],
   "publishConfig": {
     "registry": "https://npm.pkg.github.com",
diff --git a/src/components/molecules/Mailto/Mailto.stories.tsx b/src/components/molecules/Mailto/Mailto.stories.tsx
new file mode 100644
index 0000000..0f456b3
--- /dev/null
+++ b/src/components/molecules/Mailto/Mailto.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import { Mailto, MailtoProps } from './Mailto'
+
+export default {
+  title: 'molecules/Mailto',
+  component: Mailto
+} as ComponentMeta<React.ComponentType<MailtoProps>>
+
+const Template: ComponentStory<React.ComponentType<MailtoProps>> = args => <Mailto {...args} />
+
+export const Primary = Template.bind({})
+Primary.args = {}
diff --git a/src/components/molecules/Mailto/Mailto.styles.module.scss b/src/components/molecules/Mailto/Mailto.styles.module.scss
new file mode 100644
index 0000000..a76192e
--- /dev/null
+++ b/src/components/molecules/Mailto/Mailto.styles.module.scss
@@ -0,0 +1,34 @@
+@import 'src/scss/mixins';
+
+.mailto {
+  @include flex-center;
+
+  margin: 15px 12px;
+
+  @include mobile {
+    width: 100%;
+    justify-content: left;
+    padding-left: 8px;
+  }
+}
+
+.title {
+  color: $color-light;
+  font-weight: 500;
+}
+
+.title,
+.label {
+  font-size: 22px;
+  line-height: 50px;
+}
+
+.label {
+  color: $color-base;
+  padding-left: 10px;
+  font-weight: 500;
+
+  &:hover {
+    color: $color-light-gray;
+  }
+}
diff --git a/src/components/molecules/Mailto/Mailto.tsx b/src/components/molecules/Mailto/Mailto.tsx
new file mode 100644
index 0000000..8ae32d4
--- /dev/null
+++ b/src/components/molecules/Mailto/Mailto.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+
+import { Link } from 'react-router-dom'
+
+import css from './Mailto.styles.module.scss'
+
+export type MailtoProps = {
+  mailto: string
+  label: string
+  title: string
+}
+
+export const Mailto = ({ mailto, label, title }: MailtoProps) => {
+  return (
+    <div className={css.mailto}>
+      <p className={css.title}>{title}</p>
+      <Link
+        to="#"
+        onClick={event => {
+          window.location.href = mailto
+          event.preventDefault()
+        }}
+        className={css.label}
+      >
+        {label}
+      </Link>
+    </div>
+  )
+}
diff --git a/src/components/molecules/Mailto/index.ts b/src/components/molecules/Mailto/index.ts
new file mode 100644
index 0000000..62bf7b2
--- /dev/null
+++ b/src/components/molecules/Mailto/index.ts
@@ -0,0 +1 @@
+export * from './Mailto'