From 301b96ec9057a7bd96a0ef3585d13f45502af55a Mon Sep 17 00:00:00 2001
From: Margarita Golubeva <margaret.golubeva@gmail.com>
Date: Mon, 17 Jun 2024 21:09:44 +0300
Subject: [PATCH] feat: add difficulty description tooltip

---
 src/pages/AboutUsPage/view/AboutUsPageView.ts   | 10 +++++-----
 src/shared/img/svg/leaves.svg                   |  2 +-
 src/shared/types/product.ts                     | 16 +++++++++++++++-
 src/widgets/Blog/test/blog.spec.ts              |  2 +-
 src/widgets/ProductInfo/view/ProductInfoView.ts |  5 +++++
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/pages/AboutUsPage/view/AboutUsPageView.ts b/src/pages/AboutUsPage/view/AboutUsPageView.ts
index b64ceb4c..e8c3d99f 100644
--- a/src/pages/AboutUsPage/view/AboutUsPageView.ts
+++ b/src/pages/AboutUsPage/view/AboutUsPageView.ts
@@ -1,9 +1,9 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
-import { LINK_DETAILS } from '@/shared/constants/links.ts';
+import { LINK_DETAIL } from '@/shared/constants/links.ts';
 import { PAGE_DESCRIPTION } from '@/shared/constants/pages.ts';
-import SVG_DETAILS from '@/shared/constants/svg.ts';
+import SVG_DETAIL from '@/shared/constants/svg.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 
@@ -48,13 +48,13 @@ class AboutUsPageView {
     const logo = new LinkModel({
       attrs: {
         href: 'https://rs.school',
-        target: LINK_DETAILS.BLANK,
+        target: LINK_DETAIL.BLANK,
       },
       classes: [styles.logo],
     });
 
-    const svg = document.createElementNS(SVG_DETAILS.SVG_URL, 'svg');
-    svg.append(createSVGUse(SVG_DETAILS.RSS_LOGO));
+    const svg = document.createElementNS(SVG_DETAIL.SVG_URL, 'svg');
+    svg.append(createSVGUse(SVG_DETAIL.RSS_LOGO));
     logo.getHTML().append(svg);
     return logo;
   }
diff --git a/src/shared/img/svg/leaves.svg b/src/shared/img/svg/leaves.svg
index 50b5f595..340ea8b9 100644
--- a/src/shared/img/svg/leaves.svg
+++ b/src/shared/img/svg/leaves.svg
@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg  width="800px" height="800px" viewBox="0 -8 72 72" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"><title>leaf</title><path d="M48.68,38.71c8.06-8.06,10-34.59,10-34.59A40.94,40.94,0,0,1,44.41,7.73C36.16,8.43,28.52,9.6,24,14.08,17.13,21,15.4,30.82,19.34,37.77,23.66,31,41.47,21.29,41.47,21.29,28.69,30.43,14,47.78,13.41,50s3.64,2.3,4.3,1.15,3.2-5.78,6-8.57C30.68,47.53,41.33,46.07,48.68,38.71Z"/></svg>
+<svg  width="800px" height="800px" viewBox="0 -8 72 72" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"><path d="M48.68,38.71c8.06-8.06,10-34.59,10-34.59A40.94,40.94,0,0,1,44.41,7.73C36.16,8.43,28.52,9.6,24,14.08,17.13,21,15.4,30.82,19.34,37.77,23.66,31,41.47,21.29,41.47,21.29,28.69,30.43,14,47.78,13.41,50s3.64,2.3,4.3,1.15,3.2-5.78,6-8.57C30.68,47.53,41.33,46.07,48.68,38.71Z"/></svg>
diff --git a/src/shared/types/product.ts b/src/shared/types/product.ts
index 1443ab42..40f7c3f2 100644
--- a/src/shared/types/product.ts
+++ b/src/shared/types/product.ts
@@ -18,15 +18,29 @@ export const SIZE = {
   XL: 'XL',
 } as const;
 
+export type SizeType = (typeof SIZE)[keyof typeof SIZE];
+
 export const LEVEL = {
   1: '1',
   2: '2',
   3: '3',
 } as const;
 
-export type SizeType = (typeof SIZE)[keyof typeof SIZE];
 export type LevelType = (typeof LEVEL)[keyof typeof LEVEL];
 
+export const DIFFICULTY = {
+  en: {
+    1: 'Almost unkillable',
+    2: 'Needs some love',
+    3: 'For botanical ninjas',
+  },
+  ru: {
+    1: 'Почти неубиваемое',
+    2: 'Нужно немножко любви',
+    3: 'Для ниндзя ботаников',
+  },
+} as const;
+
 export interface Variant {
   discount: number;
   id: number;
diff --git a/src/widgets/Blog/test/blog.spec.ts b/src/widgets/Blog/test/blog.spec.ts
index 015cd5bf..5cc89f1b 100644
--- a/src/widgets/Blog/test/blog.spec.ts
+++ b/src/widgets/Blog/test/blog.spec.ts
@@ -1,6 +1,6 @@
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
-import BlogWidgetModel from '../model/BogWidgetModel.ts';
+import BlogWidgetModel from '../model/BlogWidgetModel.ts';
 
 /**
  * @vitest-environment jsdom
diff --git a/src/widgets/ProductInfo/view/ProductInfoView.ts b/src/widgets/ProductInfo/view/ProductInfoView.ts
index fc10ec7a..e14743d5 100644
--- a/src/widgets/ProductInfo/view/ProductInfoView.ts
+++ b/src/widgets/ProductInfo/view/ProductInfoView.ts
@@ -10,6 +10,7 @@ import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
 import { PRODUCT_INFO_TEXT, PRODUCT_INFO_TEXT_KEY } from '@/shared/constants/product.ts';
 import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
 import SVG_DETAIL from '@/shared/constants/svg.ts';
+import { DIFFICULTY } from '@/shared/types/product.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import createSVGUse from '@/shared/utils/createSVGUse.ts';
 import getCurrentLanguage from '@/shared/utils/getCurrentLanguage.ts';
@@ -219,8 +220,12 @@ class ProductInfoView {
         cssClasses: ['difficultySpan'],
         innerContent: PRODUCT_INFO_TEXT[currentLanguage].DIFFICULTY,
         tag: 'span',
+        title: DIFFICULTY[getCurrentLanguage()][this.params.level],
       });
 
+      observeStore(selectCurrentLanguage, () => {
+        difficultySpan.title = this.params.level ? DIFFICULTY[getCurrentLanguage()][this.params.level] : '';
+      });
       observeCurrentLanguage(difficultySpan, PRODUCT_INFO_TEXT, PRODUCT_INFO_TEXT_KEY.DIFFICULTY);
 
       difficultySpan.append(...this.createDifficultyPoints());