Merge pull request #36 from skbkontur/semke/update-back-arrows

Semke/update back arrows
skbkontur · Aug 16, 2023 · c2e91ce · c2e91ce
2 parents cf0062f + 3a5cc75
commit c2e91ce
Show file tree

Hide file tree

Showing 21 changed files with 203 additions and 237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## v2.2.1 - 2023.08.15
+- Update back link arrows
+
 ## v2.1.3 - 2023.07.10
 - fix link to parent task
 

diff --git a/cassandra-distributed-task-queue-ui/package.json b/cassandra-distributed-task-queue-ui/package.json
@@ -36,10 +36,10 @@
     "test": "mocha **/*.test.ts"
   },
   "peerDependencies": {
-    "@skbkontur/react-icons": ">=3 <=5",
+    "@skbkontur/icons": ">=1 <2",
     "@skbkontur/react-ui": ">=2 <=4",
-    "react": ">=16 <=17",
-    "react-dom": ">=16 <=17",
+    "react": ">=16 <=18",
+    "react-dom": ">=16 <=18",
     "react-router-dom": ">=6"
   },
   "dependencies": {
@@ -62,7 +62,7 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/runtime": "^7.14.8",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@skbkontur/react-icons": "^5.2.4",
+    "@skbkontur/icons": "^1.3.0",
     "@skbkontur/react-ui": "^4.1.0",
     "@storybook/addon-actions": "^6.3.5",
     "@storybook/addons": "^6.3.5",
@@ -72,8 +72,8 @@
     "@types/mocha": "^9.0.0",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.15",
-    "@types/react-router-dom": "^5.1.8",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "babel-loader": "^8.2.2",

diff --git a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
-import ArrowTriangleDownIcon from "@skbkontur/react-icons/ArrowTriangleDown";
-import ArrowTriangleRightIcon from "@skbkontur/react-icons/ArrowTriangleRight";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular";
+import { ArrowShapeTriangleARightIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleARightIcon16Regular";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { ThemeContext, Hint, Link } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
@@ -208,7 +208,11 @@ export class Accordion extends React.Component<TaskAccordionProps, TaskAccordion
                         data-tid="ToggleButton"
                         className={jsStyles.toggleButton()}
                         onClick={this.toggleCollapseManual}>
-                        {collapsedSelf ? <ArrowTriangleRightIcon /> : <ArrowTriangleDownIcon />}
+                        {collapsedSelf ? (
+                            <ArrowShapeTriangleARightIcon16Regular />
+                        ) : (
+                            <ArrowShapeTriangleADownIcon16Regular />
+                        )}
                         <span data-tid="ToggleButtonText" className={jsStyles.toggleButtonText()}>
                             {title}
                         </span>

diff --git a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
@@ -1,4 +1,4 @@
-import CopyIcon from "@skbkontur/react-icons/Copy";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular";
 import { Link, Toast } from "@skbkontur/react-ui";
 import copy from "copy-to-clipboard";
 import React, { PropsWithChildren } from "react";
@@ -19,7 +19,7 @@ export class AllowCopyToClipboard extends React.Component<PropsWithChildren<{}>>
         return (
             <span>
                 <span ref={x => (this.children = x)}>{this.props.children}</span>{" "}
-                <Link icon={<CopyIcon />} onClick={this.handleCopy} />
+                <Link icon={<CopyIcon16Regular />} onClick={this.handleCopy} />
             </span>
         );
     }

diff --git a/...ra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx b/...ra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
@@ -1,4 +1,4 @@
-import CopyIcon from "@skbkontur/react-icons/Copy";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular";
 import { Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
@@ -87,7 +87,7 @@ export class ErrorHandlingContainerModal extends React.Component<
                                             <h4 className={jsStyles.header()}>Client stack trace</h4>
                                         </Fit>
                                         <Fit>
-                                            <Link icon={<CopyIcon />} onClick={() => this.copyData(stack)}>
+                                            <Link icon={<CopyIcon16Regular />} onClick={() => this.copyData(stack)}>
                                                 Скопировать
                                             </Link>
                                         </Fit>
@@ -106,7 +106,9 @@ export class ErrorHandlingContainerModal extends React.Component<
                                             <h4 className={jsStyles.header()}>Server stack trace</h4>
                                         </Fit>
                                         <Fit>
-                                            <Link icon={<CopyIcon />} onClick={() => this.copyData(serverStack)}>
+                                            <Link
+                                                icon={<CopyIcon16Regular />}
+                                                onClick={() => this.copyData(serverStack)}>
                                                 Скопировать
                                             </Link>
                                         </Fit>

diff --git a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts b/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts
diff --git a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx b/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
@@ -21,6 +21,12 @@ export const jsStyles = {
         `;
     },
 
+    withArrow(): string {
+        return css`
+            padding: ${globalVerticalPadding}px ${newBaseSize * 12}px 0;
+        `;
+    },
+
     topRightTools(): string {
         return css`
             position: absolute;
@@ -30,20 +36,9 @@ export const jsStyles = {
         `;
     },
 
-    greyLineHeader(t: Theme): string {
-        return css`
-            background-color: ${t.bgDisabled};
-            padding: ${2 * baseSize}px ${globalHorizontalPadding}px;
-            margin-left: ${-globalHorizontalPadding}px;
-            margin-right: ${-globalHorizontalPadding}px;
-            margin-bottom: ${3 * baseSize}px;
-            word-break: break-all;
-        `;
-    },
-
-    greyContent(): string {
+    headerContent(): string {
         return css`
-            margin-top: ${2 * baseSize}px;
+            margin-top: ${3 * newBaseSize}px;
         `;
     },
 
@@ -52,7 +47,7 @@ export const jsStyles = {
             margin: 0;
             font-weight: 700;
             font-size: 29px;
-            line-height: 40px;
+            line-height: 48px;
         `;
     },
 
@@ -61,20 +56,42 @@ export const jsStyles = {
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
-            padding-bottom: ${globalVerticalPadding}px;
+            padding-bottom: ${newBaseSize * 5}px;
         `;
     },
 
     header(): string {
         return css`
-            margin-bottom: ${3 * baseSize}px;
+            margin-bottom: ${5 * newBaseSize}px;
         `;
     },
 
-    backLinkContainer(): string {
+    borderBottom(t: Theme): string {
         return css`
-            margin-bottom: ${3 * baseSize}px;
-            margin-left: -4px;
+            border-bottom: 2px solid ${t.grayXLight};
+        `;
+    },
+
+    backLink(): string {
+        return css`
+            position: absolute;
+            left: 0;
+            height: ${newBaseSize * 12}px;
+            width: ${newBaseSize * 12}px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `;
+    },
+
+    backLinkIcon(t: Theme): string {
+        return css`
+            display: block;
+            color: #757575;
+
+            &:hover {
+                color: ${t.textColorDefault};
+            }
         `;
     },
 

diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -1,7 +1,8 @@
-import ArrowChevronLeftIcon from "@skbkontur/react-icons/ArrowChevronLeft";
+import { ArrowALeftIcon24Regular } from "@skbkontur/icons/ArrowALeftIcon24Regular";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Loader, ThemeContext } from "@skbkontur/react-ui";
-import React from "react";
+import React, { CSSProperties } from "react";
+import { To } from "react-router-dom";
 
 import { RouterLink } from "../RouterLink/RouterLink";
 
@@ -10,13 +11,14 @@ import { jsStyles } from "./CommonLayout.styles";
 interface CommonLayoutProps {
     topRightTools?: Nullable<JSX.Element> | string;
     children?: React.ReactNode;
-    style?: any;
+    withArrow?: boolean;
+    style?: CSSProperties;
 }
 
-export function CommonLayout({ children, topRightTools, ...restProps }: CommonLayoutProps): JSX.Element {
+export function CommonLayout({ children, topRightTools, withArrow, ...restProps }: CommonLayoutProps): JSX.Element {
     const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.commonLayout(theme)} {...restProps}>
+        <div className={`${jsStyles.commonLayout(theme)} ${withArrow ? jsStyles.withArrow() : ""}`} {...restProps}>
             {topRightTools && <div className={jsStyles.topRightTools()}>{topRightTools}</div>}
             {children}
         </div>
@@ -38,66 +40,44 @@ CommonLayout.Content = function Content({ children, ...restProps }: CommonLayout
 
 interface CommonLayoutHeaderProps {
     title: string | JSX.Element;
-    tools?: JSX.Element;
+    tools?: JSX.Element | null;
+    children?: JSX.Element;
+    borderBottom?: boolean;
 }
 
-CommonLayout.Header = function Header({ title, tools, ...restProps }: CommonLayoutHeaderProps): JSX.Element {
-    return (
-        <div className={jsStyles.header()} {...restProps}>
-            <RowStack baseline block gap={2}>
-                <Fit>
-                    <h2 className={jsStyles.headerTitle()} data-tid="Header">
-                        {title}
-                    </h2>
-                </Fit>
-                {tools && <Fill>{tools}</Fill>}
-            </RowStack>
-        </div>
-    );
-};
-
-interface CommonLayoutGreyLineHeaderProps {
-    "data-tid"?: Nullable<string>;
-    children?: Nullable<JSX.Element>;
-    title: string | JSX.Element;
-    tools?: null | JSX.Element;
-}
-
-CommonLayout.GreyLineHeader = function GreyLineHeader({
-    children,
+CommonLayout.Header = function Header({
     title,
     tools,
-}: CommonLayoutGreyLineHeaderProps): JSX.Element {
+    children,
+    borderBottom,
+    ...restProps
+}: CommonLayoutHeaderProps): JSX.Element {
     const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.greyLineHeader(theme)}>
+        <div className={`${jsStyles.header()} ${borderBottom ? jsStyles.borderBottom(theme) : ""}`} {...restProps}>
             <RowStack baseline block gap={2}>
-                <Fill>
+                <Fit>
                     <h2 className={jsStyles.headerTitle()} data-tid="Header">
                         {title}
                     </h2>
-                </Fill>
-                {tools && <Fit>{tools}</Fit>}
+                </Fit>
+                {tools && <Fill>{tools}</Fill>}
             </RowStack>
-            {children && <div className={`${jsStyles.content()} ${jsStyles.greyContent()}`}>{children}</div>}
+            {children && <div className={`${jsStyles.content()} ${jsStyles.headerContent()}`}>{children}</div>}
         </div>
     );
 };
 
 interface CommonLayoutGoBackProps {
-    children?: React.ReactNode;
-    to: string;
+    to: To;
 }
 
-CommonLayout.GoBack = function CommonLayoutGoBack({ children, to }: CommonLayoutGoBackProps): JSX.Element {
+CommonLayout.GoBack = function CommonLayoutGoBack({ to }: CommonLayoutGoBackProps): JSX.Element {
+    const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.backLinkContainer()}>
-            <RouterLink data-tid="GoBack" to={to}>
-                <ArrowChevronLeftIcon />
-                {"\u00A0"}
-                {children}
-            </RouterLink>
-        </div>
+        <RouterLink data-tid="GoBack" to={to} className={jsStyles.backLink()}>
+            <ArrowALeftIcon24Regular align="none" className={jsStyles.backLinkIcon(theme)} />
+        </RouterLink>
     );
 };
 

diff --git a/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx b/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx
@@ -1,11 +1,11 @@
 import { ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
-import { Link, Location } from "react-router-dom";
+import { Link, To } from "react-router-dom";
 
 import { jsStyles } from "./RouterLink.styles";
 
 interface RouterLinkProps {
-    to: string | Partial<Location>;
+    to: To;
     children?: React.ReactNode;
     className?: string;
 }