From 7e424c9708c18d1cc956e7aee296ff077ae6c87e Mon Sep 17 00:00:00 2001
From: Alexander Lobyntsev <yakutoc@gmail.com>
Date: Fri, 31 May 2024 19:14:08 +0700
Subject: [PATCH] chore(website): add IconExtendedInfo

---
 .../components/roster/IconExtendedInfo.tsx    | 108 ++++++++++++++++++
 .../components/roster/IconInfo.tsx            |  99 ----------------
 2 files changed, 108 insertions(+), 99 deletions(-)
 create mode 100644 website/plasma-website/components/roster/IconExtendedInfo.tsx
 delete mode 100644 website/plasma-website/components/roster/IconInfo.tsx

diff --git a/website/plasma-website/components/roster/IconExtendedInfo.tsx b/website/plasma-website/components/roster/IconExtendedInfo.tsx
new file mode 100644
index 0000000000..83979eff11
--- /dev/null
+++ b/website/plasma-website/components/roster/IconExtendedInfo.tsx
@@ -0,0 +1,108 @@
+import React, { useContext, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { IconClose } from '@salutejs/plasma-icons';
+import { H2 } from '@salutejs/plasma-b2c';
+
+import { Context } from '../../store';
+import { capitalize } from '../../utils';
+import { multipleMediaQuery } from '../../mixins';
+
+import { IconClipboard } from './IconClipboard';
+import { IconOptionsSize } from './IconOptionsSize';
+import { IconOptionsColors } from './IconOptionsColors';
+
+type IconInfoProps = {
+    onClose: () => void;
+    offset: number;
+};
+
+const StyledHeader = styled.header`
+    display: flex;
+    align-items: center;
+    padding-bottom: 1.5rem;
+`;
+
+const StyledExtendInfo = styled.div<{ offset?: number }>`
+    position: relative;
+    z-index: 1;
+    left: ${({ offset = 1 }) => {
+        // INFO: Смещение для cell grid (60px размер cell)
+        const cellOffset = 60 * (offset - 1);
+        // INFO: Смещение для gap grid (4px размер gap cell)
+        const gapOffset = 4 * (offset - 2);
+
+        return -(cellOffset + gapOffset);
+    }}px;
+    display: block;
+    padding-top: 3rem;
+    margin-bottom: 1.5rem;
+    width: 60rem;
+    box-sizing: border-box;
+
+    ${multipleMediaQuery(['M', 'S'])(css`
+        padding-top: 2rem;
+    `)}
+`;
+
+const StyledIconOptions = styled.div`
+    display: flex;
+    align-items: center;
+    column-gap: 1.875rem;
+    margin-bottom: 2rem;
+`;
+
+const StyledIconClose = styled.span`
+    height: 2.25rem;
+    margin-right: 1.5rem;
+    color: rgba(255, 255, 255, 0.28);
+    transition: color 120ms ease-in;
+
+    cursor: pointer;
+
+    &:hover {
+        color: rgba(255, 255, 255, 1);
+    }
+`;
+
+const StyledContent = styled.div`
+    padding-left: 3.75rem;
+`;
+
+const StyledClipboardWrapper = styled.div`
+    display: inline-flex;
+    flex-direction: column;
+`;
+
+export const IconExtendedInfo = ({ offset, onClose }: IconInfoProps) => {
+    const { state } = useContext(Context);
+    const [iconSize, setIconSize] = useState('xs');
+
+    if (!state.wizardItemName) {
+        return null;
+    }
+
+    const iconComponent = `Icon${capitalize(state.wizardItemName)}`;
+    const importCode = `import { ${iconComponent} } from '@salutejs/plasma-icons';`;
+    const codeSnippet = `<${iconComponent} size="${iconSize}" color="${state.color?.value}" />`;
+
+    return (
+        <StyledExtendInfo offset={offset}>
+            <StyledHeader>
+                <StyledIconClose onClick={onClose}>
+                    <IconClose size="m" color="inherit" />
+                </StyledIconClose>
+                <H2 bold={false}>{state.wizardItemName}</H2>
+            </StyledHeader>
+            <StyledContent>
+                <StyledIconOptions>
+                    <IconOptionsColors />
+                    <IconOptionsSize defaultSize="xs" onChange={setIconSize} />
+                </StyledIconOptions>
+                <StyledClipboardWrapper>
+                    <IconClipboard source={importCode} title="Импорт" />
+                    <IconClipboard source={codeSnippet} title="React" />
+                </StyledClipboardWrapper>
+            </StyledContent>
+        </StyledExtendInfo>
+    );
+};
diff --git a/website/plasma-website/components/roster/IconInfo.tsx b/website/plasma-website/components/roster/IconInfo.tsx
deleted file mode 100644
index ea0988e283..0000000000
--- a/website/plasma-website/components/roster/IconInfo.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useContext } from 'react';
-import styled, { css } from 'styled-components';
-import { IconClose } from '@salutejs/plasma-icons';
-
-import { Context } from '../../store';
-import { capitalize } from '../../utils';
-
-import { IconClipboard } from './IconClipboard';
-
-type IconInfoProps = {
-    isActive?: boolean;
-};
-
-const StyledIconSource = styled.div`
-    display: flex;
-    flex-direction: column;
-    row-gap: 0.5rem;
-`;
-
-const StyledIconOptions = styled.div`
-    height: 1.5rem;
-    margin-bottom: 2rem;
-
-    & + ${StyledIconSource} {
-        margin-bottom: 1.25rem;
-    }
-`;
-
-const StyledHeader = styled.header`
-    display: flex;
-    align-items: center;
-    padding-bottom: 1.5rem;
-`;
-
-const StyledIconInfo = styled.div<{ isActive?: boolean }>`
-    display: none;
-    width: 724px;
-    height: 314px;
-    margin-left: -3rem;
-    box-sizing: border-box;
-
-    ${({ isActive }) =>
-        isActive &&
-        css`
-            display: block;
-            padding-top: 3rem;
-            padding-left: 3rem;
-            padding-bottom: 4rem;
-        `}
-`;
-
-const StyledHeading = styled.span`
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-    color: rgba(255, 255, 255, 0.8);
-`;
-
-const StyledSubtitle = styled(StyledHeading)`
-    color: rgba(255, 255, 255, 0.28);
-`;
-
-const StyledIconClose = styled(IconClose)`
-    margin-right: 1.5rem;
-    margin-left: -3px;
-    color: rgba(255, 255, 255, 0.28);
-`;
-
-export const IconInfo = ({ isActive }: IconInfoProps) => {
-    const { state } = useContext(Context);
-
-    if (!state.wizardItemName) {
-        return null;
-    }
-
-    const iconComponent = `Icon${capitalize(state.wizardItemName)}`;
-    const importCode = `import { ${iconComponent} } from '@salutejs/plasma-icons';`;
-    const codeSnippet = `<${iconComponent} size="xs" color="inherit" />`;
-
-    return (
-        <StyledIconInfo isActive={isActive}>
-            <StyledHeader>
-                <StyledIconClose size="s" color="inherit" />
-                <span>{state.wizardItemName}</span>
-            </StyledHeader>
-            <StyledIconOptions>inherit</StyledIconOptions>
-            <StyledIconSource>
-                <StyledSubtitle>Импорт</StyledSubtitle>
-                <div>
-                    <IconClipboard source={importCode} />
-                    <StyledHeading>{importCode}</StyledHeading>
-                </div>
-            </StyledIconSource>
-            <StyledIconSource>
-                <StyledSubtitle>React</StyledSubtitle>
-                <StyledHeading>{codeSnippet}</StyledHeading>
-            </StyledIconSource>
-        </StyledIconInfo>
-    );
-};