From ef96135678e5be2be6f4958b30bfee0d39b8b213 Mon Sep 17 00:00:00 2001
From: Anton Sabotovich <sab94a@yandex.ru>
Date: Wed, 29 May 2024 16:02:53 +0300
Subject: [PATCH] feat: remove Md component

---
 src/harmony/Image/Image.module.css  |  5 +++++
 src/harmony/Image/Image.stories.tsx | 31 ++++++++++++++++++++++++++
 src/harmony/Image/Image.tsx         |  8 +++++++
 src/harmony/Md/Md.module.css        | 22 -------------------
 src/harmony/Md/Md.stories.tsx       | 34 -----------------------------
 src/harmony/Md/Md.tsx               |  8 -------
 src/harmony/Text/Text.module.css    | 29 ++++++++++++++++++++++++
 src/harmony/Text/Text.tsx           |  4 ++++
 src/harmony/index.ts                |  2 +-
 9 files changed, 78 insertions(+), 65 deletions(-)
 create mode 100644 src/harmony/Image/Image.module.css
 create mode 100644 src/harmony/Image/Image.stories.tsx
 create mode 100644 src/harmony/Image/Image.tsx
 delete mode 100644 src/harmony/Md/Md.module.css
 delete mode 100644 src/harmony/Md/Md.stories.tsx
 delete mode 100644 src/harmony/Md/Md.tsx

diff --git a/src/harmony/Image/Image.module.css b/src/harmony/Image/Image.module.css
new file mode 100644
index 00000000..2243d5a4
--- /dev/null
+++ b/src/harmony/Image/Image.module.css
@@ -0,0 +1,5 @@
+.Image {
+    max-width: 100%;
+    border-radius: var(--radius-m);
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/harmony/Image/Image.stories.tsx b/src/harmony/Image/Image.stories.tsx
new file mode 100644
index 00000000..f455048c
--- /dev/null
+++ b/src/harmony/Image/Image.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardContent } from '../Card/Card';
+
+import { Image } from './Image';
+
+const meta: Meta = {
+    title: '@harmony/Image',
+    component: Image,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Image> = {
+    args: {
+        src: 'https://cs11.pikabu.ru/post_img/big/2019/04/20/10/1555780815170653117.jpg',
+    },
+
+    render(args) {
+        return (
+            <div style={{ width: 400 }}>
+                <Card>
+                    <CardContent view="transparent">
+                        <Image {...args} />
+                    </CardContent>
+                </Card>
+            </div>
+        );
+    },
+};
diff --git a/src/harmony/Image/Image.tsx b/src/harmony/Image/Image.tsx
new file mode 100644
index 00000000..e6f0d971
--- /dev/null
+++ b/src/harmony/Image/Image.tsx
@@ -0,0 +1,8 @@
+import React, { FC, ImgHTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import s from './Image.module.css';
+
+export const Image: FC<ImgHTMLAttributes<HTMLImageElement>> = ({ className, ...props }) => (
+    <img className={cn(s.Image, className)} {...props} />
+);
diff --git a/src/harmony/Md/Md.module.css b/src/harmony/Md/Md.module.css
deleted file mode 100644
index 6e80db96..00000000
--- a/src/harmony/Md/Md.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.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
deleted file mode 100644
index 155fc7b8..00000000
--- a/src/harmony/Md/Md.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-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
deleted file mode 100644
index 8572ff49..00000000
--- a/src/harmony/Md/Md.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-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/Text/Text.module.css b/src/harmony/Text/Text.module.css
index 3b28f859..caafbdc7 100644
--- a/src/harmony/Text/Text.module.css
+++ b/src/harmony/Text/Text.module.css
@@ -4,6 +4,9 @@ h3.Text,
 h4.Text,
 h5.Text,
 h6.Text,
+ul.Text,
+ol.Text,
+li.Text,
 p.Text {
     margin-top: 0;
     margin-bottom: 0;
@@ -15,6 +18,9 @@ h3.Text:first-child,
 h4.Text:first-child,
 h5.Text:first-child,
 h6.Text:first-child,
+ul.Text:first-child,
+ol.Text:first-child,
+li.Text:first-child,
 p.Text:first-child {
     padding-top: 0;
 }
@@ -25,6 +31,9 @@ h3.Text:last-child,
 h4.Text:last-child,
 h5.Text:last-child,
 h6.Text:last-child,
+ul.Text:last-child,
+ol.Text:last-child,
+li.Text:last-child,
 p.Text:last-child {
     padding-bottom: 0;
 }
@@ -48,6 +57,7 @@ h5.Text {
 }
 
 p.Text {
+    hyphens: auto;
     padding-top: var(--gap-xs);
     padding-bottom: var(--gap-sm);
 }
@@ -123,4 +133,23 @@ p.Text {
 
 .TextStrike {
     text-decoration: line-through;
+}
+
+ol.Text, ul.Text, li.Text {
+    font-size: var(--font-size-m);
+    line-height: var(--line-height-m);
+    font-weight: 400;
+}
+
+ol.Text, ul.Text {
+    padding-top: var(--gap-xs);
+    padding-bottom: var(--gap-sm);
+}
+
+li.Text {
+    padding-bottom: var(--gap-xs);
+}
+
+blockquote.Text {
+    padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) var(--gap-l);
 }
\ No newline at end of file
diff --git a/src/harmony/Text/Text.tsx b/src/harmony/Text/Text.tsx
index 3c123666..051223a5 100644
--- a/src/harmony/Text/Text.tsx
+++ b/src/harmony/Text/Text.tsx
@@ -61,6 +61,10 @@ interface AllowedHTMLElements {
     h5: React.JSX.IntrinsicElements['h5'];
     h6: React.JSX.IntrinsicElements['h6'];
     legend: React.JSX.IntrinsicElements['legend'];
+    ol: React.JSX.IntrinsicElements['ol'];
+    ul: React.JSX.IntrinsicElements['ul'];
+    li: React.JSX.IntrinsicElements['li'];
+    blockquote: React.JSX.IntrinsicElements['blockquote'];
 }
 
 type HeadingTagName = Extract<keyof AllowedHTMLElements, `h${number}`>;
diff --git a/src/harmony/index.ts b/src/harmony/index.ts
index 86a917d6..66d3ebd7 100644
--- a/src/harmony/index.ts
+++ b/src/harmony/index.ts
@@ -20,11 +20,11 @@ export * from './FormEditor/FormEditor';
 export * from './GlobalSearch/GlobalSearch';
 export * from './Gravatar/Gravatar';
 export * from './HistoryRecord/HistoryRecord';
+export * from './Image/Image';
 export * from './Input/Input';
 export * from './Keyboard/Keyboard';
 export * from './Link/Link';
 export * from './ListView/ListView';
-export * from './Md/Md';
 export * from './MenuItem/MenuItem';
 export * from './Modal/Modal';
 export * from './ModalPreview/ModalPreview';