From 67990e32c2487618c9ee3e853fb36d5186704e9e Mon Sep 17 00:00:00 2001
From: Anton Sabotovich <sab94a@yandex.ru>
Date: Thu, 23 May 2024 13:06:34 +0300
Subject: [PATCH] feat: support Md component

---
 src/harmony/Md/Md.module.css  | 22 ++++++++++++++++++++++
 src/harmony/Md/Md.stories.tsx | 34 ++++++++++++++++++++++++++++++++++
 src/harmony/Md/Md.tsx         |  8 ++++++++
 src/harmony/index.ts          |  1 +
 4 files changed, 65 insertions(+)
 create mode 100644 src/harmony/Md/Md.module.css
 create mode 100644 src/harmony/Md/Md.stories.tsx
 create mode 100644 src/harmony/Md/Md.tsx

diff --git a/src/harmony/Md/Md.module.css b/src/harmony/Md/Md.module.css
new file mode 100644
index 00000000..6e80db96
--- /dev/null
+++ b/src/harmony/Md/Md.module.css
@@ -0,0 +1,22 @@
+.Md a {
+    color: inherit;
+    text-decoration: underline;
+
+    transition: color cubic-bezier(0.3, 0, 0.5, 1) 0.1s;
+
+    cursor: pointer;
+}
+
+.Md a:hover {
+    color: var(--blue-500);
+}
+
+.Md img {
+    max-width: 100%;
+    border-radius: var(--radius-m);
+    cursor: pointer;
+}
+
+.Md p {
+    hyphens: auto;
+}
\ No newline at end of file
diff --git a/src/harmony/Md/Md.stories.tsx b/src/harmony/Md/Md.stories.tsx
new file mode 100644
index 00000000..155fc7b8
--- /dev/null
+++ b/src/harmony/Md/Md.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { Card, CardContent } from '../Card/Card';
+
+import { Md } from './Md';
+
+const meta: Meta<typeof Md> = {
+    title: '@harmony/Md',
+    component: Md,
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof Md> = () => {
+    return (
+        <div style={{ width: 500 }}>
+            <Card>
+                <CardContent view="transparent">
+                    <Md>
+                        <a href="#">Link to some page</a>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut impedit possimus fugit numquam
+                            reiciendis ratione at praesentium cumque, nisi ea quia delectus rem! Ipsa, id voluptates
+                            reprehenderit totam nemo eius sed commodi architecto labore impedit a in laborum explicabo
+                            autem, provident, minima exercitationem corrupti quasi sequi eveniet eaque iure unde.
+                        </p>
+                        <img src="https://www.dogeat.ru/img/%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D0%BA%D0%BE%D1%82%20%D1%85%D1%80%D0%B8%D0%BF%D0%B8%D1%82%20%D0%B8%20%D1%82%D1%8F%D0%B6%D0%B5%D0%BB%D0%BE%20%D0%B4%D1%8B%D1%88%D0%B8%D1%82.jpg" />
+                    </Md>
+                </CardContent>
+            </Card>
+        </div>
+    );
+};
diff --git a/src/harmony/Md/Md.tsx b/src/harmony/Md/Md.tsx
new file mode 100644
index 00000000..8572ff49
--- /dev/null
+++ b/src/harmony/Md/Md.tsx
@@ -0,0 +1,8 @@
+import React, { FC, HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import s from './Md.module.css';
+
+export const Md: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
+    <div className={cn(s.Md, className)} {...props}></div>
+);
diff --git a/src/harmony/index.ts b/src/harmony/index.ts
index 81633bb6..f4cc0c1d 100644
--- a/src/harmony/index.ts
+++ b/src/harmony/index.ts
@@ -22,6 +22,7 @@ export * from './HistoryRecord/HistoryRecord';
 export * from './Input/Input';
 export * from './Keyboard/Keyboard';
 export * from './Link/Link';
+export * from './Md/Md';
 export * from './MenuItem/MenuItem';
 export * from './Modal/Modal';
 export * from './ModalPreview/ModalPreview';