plasma-website: Redesign "Icons" page [Part 2]

website/plasma-website/components/roster/Footer.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { TextS } from '@salutejs/plasma-b2c';
 import { secondary } from '@salutejs/plasma-tokens-b2c';
 
+import { multipleMediaQuery } from '../../mixins';
 import { IconGitHub, MainCommunityMenu } from '../index';
 
 const community = [
@@ -16,7 +17,17 @@ const community = [
 const currentYear = new Date().getFullYear();
 
 const StyledFooter = styled.footer`
-    padding-bottom: 2rem;
+    padding: 0 4rem 2rem;
+
+    ${multipleMediaQuery(['M'])(css`
+        padding-right: 3.5rem;
+        padding-left: 3.5rem;
+    `)}
+
+    ${multipleMediaQuery(['S'])(css`
+        padding-right: 1rem;
+        padding-left: 1rem;
+    `)}
 `;
 
 const StyledMainCommunityMenu = styled(MainCommunityMenu)`

website/plasma-website/components/roster/Header.tsx

@@ -1,15 +1,12 @@
-import { useContext, useCallback } from 'react';
+import React from 'react';
 import type { FC, HTMLAttributes } from 'react';
 import styled from 'styled-components';
 import { Container, Image, BodyM } from '@salutejs/plasma-b2c';
 import { background, text } from '@salutejs/plasma-tokens-b2c';
 
-import { Context, setTheme } from '../../store';
-import { Badge } from '../Badge';
 import logo from '../../public/plasma-logo.png';
 
 import { FlatButton } from './FlatButton';
-import { ThemeSwitcher } from './ThemeSwitcher';
 
 const basePath = process.env.BASE_PATH || '';
 
@@ -21,36 +18,31 @@ const StyledRoot = styled.header`
     background: ${background};
     box-shadow: -1px 0 1px rgb(0 0 0 / 5%), -4px 0 14px rgb(0 0 0 / 8%);
 `;
+
 const StyledInner = styled.div`
     display: flex;
     align-items: center;
     height: 3.75rem;
 `;
+
 const StyledImageWrapper = styled.a`
     display: flex;
     align-items: center;
     margin-right: 1.25rem;
     text-decoration: none;
     color: ${text};
-    user-select: no-select;
+    user-select: none;
 `;
+
 const StyledImage = styled(Image)`
     margin-right: 0.5rem;
 `;
 
 const activeMenuItemId = 'icons';
-const menu = [
-    { id: 'icons', text: 'Icons', href: `${basePath}/icons` },
-    { id: 'colors', text: 'Colors', href: `${basePath}/colors`, disabled: true, soon: true },
-];
 
-export const Header: FC<HeaderProps> = () => {
-    const { state, dispatch } = useContext(Context);
-    const onThemeSwitcherChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
-        (event) => dispatch(setTheme(event.target.checked ? 'dark' : 'light')),
-        [dispatch],
-    );
+const menu = [{ id: 'icons', text: 'Icons', href: `${basePath}/icons` }];
 
+export const Header: FC<HeaderProps> = () => {
     return (
         <StyledRoot>
             <Container>
@@ -67,16 +59,8 @@ export const Header: FC<HeaderProps> = () => {
                         </StyledImageWrapper>
                     )}
                     {menu.map((item) => (
-                        <FlatButton
-                            key={item.id}
-                            text={item.text}
-                            href={!item.disabled ? item.href : undefined}
-                            $disabled={item.disabled}
-                            isActive={item.id === activeMenuItemId}
-                            contentRight={item.soon && <Badge text="Soon" size="s" />}
-                        />
+                        <FlatButton key={item.id} text={item.text} isActive={item.id === activeMenuItemId} />
                     ))}
-                    <ThemeSwitcher value="theme" checked={state.theme === 'dark'} onChange={onThemeSwitcherChange} />
                 </StyledInner>
             </Container>
         </StyledRoot>

website/plasma-website/components/roster/IconClipboard.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { IconCopyOutline } from '@salutejs/plasma-icons';
 import { useToast } from '@salutejs/plasma-b2c';
 import type { ShowToastArgs } from '@salutejs/plasma-b2c';
 
+import { multipleMediaQuery } from '../../mixins';
+
 const StyledClipboardIcon = styled(IconCopyOutline)`
     margin-left: -1.375rem;
     margin-right: 0.313rem;
@@ -37,6 +39,10 @@ const StyledHeading = styled.span`
     font-size: 0.75rem;
     line-height: 0.875rem;
     color: rgba(255, 255, 255, 0.8);
+
+    ${multipleMediaQuery(['S'])(css`
+        line-height: 1.25rem;
+    `)}
 `;
 
 const StyledTitle = styled(StyledHeading)`

website/plasma-website/components/roster/IconExtendedInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { IconClose } from '@salutejs/plasma-icons';
 import { H2 } from '@salutejs/plasma-b2c';
@@ -14,6 +14,7 @@ import { IconOptionsColors } from './IconOptionsColors';
 type IconInfoProps = {
     onClose: () => void;
     offset: number;
+    isDeprecate: boolean;
 };
 
 const StyledHeader = styled.header`
@@ -35,13 +36,18 @@ const StyledExtendInfo = styled.div<{ offset?: number }>`
     }}px;
     display: block;
     padding-top: 3rem;
-    margin-bottom: 1.5rem;
-    width: 60rem;
+    margin-bottom: 4rem;
+    width: calc(100vw - var(--plasma-grid-largeM-margin) * 2);
+    max-width: 60rem;
     box-sizing: border-box;
 
     ${multipleMediaQuery(['M', 'S'])(css`
         padding-top: 2rem;
     `)}
+
+    ${multipleMediaQuery(['S'])(css`
+        width: calc(100vw - 1rem * 2);
+    `)}
 `;
 
 const StyledIconOptions = styled.div`
@@ -62,41 +68,56 @@ const StyledIconClose = styled.span`
     &:hover {
         color: rgba(255, 255, 255, 1);
     }
+
+    ${multipleMediaQuery(['S'])(css`
+        margin-right: 0.5rem;
+    `)}
 `;
 
 const StyledContent = styled.div`
     padding-left: 3.75rem;
+
+    ${multipleMediaQuery(['S'])(css`
+        padding-left: 0;
+    `)}
 `;
 
 const StyledClipboardWrapper = styled.div`
     display: inline-flex;
     flex-direction: column;
 `;
 
-export const IconExtendedInfo = ({ offset, onClose }: IconInfoProps) => {
+const StyledDeprecateIcon = styled.span`
+    margin-left: 1rem;
+    color: var(--text-negative);
+`;
+
+export const IconExtendedInfo = ({ offset, onClose, isDeprecate }: 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}" />`;
+    const codeSnippet = `<${iconComponent} size="${state.size?.value}" color="${state.color?.value}" />`;
 
     return (
         <StyledExtendInfo offset={offset}>
             <StyledHeader>
                 <StyledIconClose onClick={onClose}>
                     <IconClose size="m" color="inherit" />
                 </StyledIconClose>
-                <H2 bold={false}>{state.wizardItemName}</H2>
+                <H2 bold={false}>
+                    {state.wizardItemName}
+                    {isDeprecate && <StyledDeprecateIcon>[deprecate]</StyledDeprecateIcon>}
+                </H2>
             </StyledHeader>
             <StyledContent>
                 <StyledIconOptions>
                     <IconOptionsColors />
-                    <IconOptionsSize defaultSize="xs" onChange={setIconSize} />
+                    <IconOptionsSize />
                 </StyledIconOptions>
                 <StyledClipboardWrapper>
                     <IconClipboard source={importCode} title="Импорт" />

website/plasma-website/components/roster/IconHoverDetails.tsx

@@ -17,7 +17,7 @@ const StyleSizeItem = styled.span<{ isDisable?: boolean }>`
         isDisable &&
         css`
             color: rgba(255, 255, 255, 0.28);
-            transition: color 120ms ease-in;
+            transition: var(--color-transition);
         `}
 `;
 

website/plasma-website/components/roster/IconOptionsColors.tsx

@@ -49,7 +49,7 @@ const StyledOptionCommon = styled.div<{ isActive?: boolean }>`
     border-radius: 0.75rem;
     color: rgba(255, 255, 255, 0.56);
 
-    transition: color 120ms ease-in, background-color 120ms ease-in;
+    transition: var(--color-transition), background-color var(--background-color-transition);
 
     cursor: pointer;
 

website/plasma-website/components/roster/IconOptionsSize.tsx

@@ -1,14 +1,12 @@
-import React, { useState } from 'react';
+import React, { useContext } from 'react';
 import styled, { css } from 'styled-components';
 
-import { AnimationSlideUp } from './AnimationSlideUp';
+import { Context, setIconSize } from '../../store';
+import type { State } from '../../store';
 
-type IconOptionsSizeProps = {
-    onChange: (value: string) => void;
-    defaultSize: string;
-};
+import { AnimationSlideUp } from './AnimationSlideUp';
 
-const options = [
+const options: Array<State['size']> = [
     { value: 'xs', label: '16' },
     { value: 's', label: '24' },
     { value: 'm', label: '36' },
@@ -54,7 +52,7 @@ const StyledOption = styled.div<{ isActive?: boolean; isXS?: boolean }>`
 
     cursor: pointer;
 
-    transition: color 120ms ease-in, background-color 120ms ease-in, border-radius 120ms ease-in;
+    transition: var(--color-transition), var(--background-color-transition), var(--border-radius-transition);
 
     &:hover {
         color: rgba(255, 255, 255, 0.96);
@@ -91,8 +89,8 @@ const StyledOption = styled.div<{ isActive?: boolean; isXS?: boolean }>`
         `}
 `;
 
-export const IconOptionsSize = ({ onChange, defaultSize }: IconOptionsSizeProps) => {
-    const [currentSizeOption, setCurrentSizeOption] = useState<string>(defaultSize);
+export const IconOptionsSize = () => {
+    const { dispatch, state } = useContext(Context);
 
     return (
         <StyledOptions>
@@ -101,10 +99,9 @@ export const IconOptionsSize = ({ onChange, defaultSize }: IconOptionsSizeProps)
                     <StyledOption
                         key={label}
                         isXS={value === 'xs'}
-                        isActive={currentSizeOption === value}
+                        isActive={state.size?.value === value}
                         onClick={() => {
-                            setCurrentSizeOption(value);
-                            onChange(value);
+                            dispatch(setIconSize({ value, label }));
                         }}
                     >
                         <StyledOptionInfo>{label}</StyledOptionInfo>