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> - ); -};