JIRA-1234 fix(style): 123

src/ts/components/UiKit/components/Button.tsx

@@ -5,9 +5,9 @@ import style from '../styles/index.module.scss';
 
 export function getCustomClassName(type?: string, disabled?: boolean) {
   let customClassName = {
-    slim: style.button_slim,
-    second: style.button_second,
-    primary: style.button_primary,
+    slim: style.ui_kit_button_slim,
+    second: style.ui_kit_button_second,
+    primary: style.ui_kit_button_primary,
   }[type || 'primary'] || '';
 
   if (disabled) {
@@ -34,7 +34,7 @@ function UiKitButton({
   return (
     <button
       title={title}
-      className={`${style.button} ${customClassName || ''} ${className || ''}`}
+      className={`${style.ui_kit_button} ${customClassName || ''} ${className || ''}`}
       onClick={() => {
         if (onClick) onClick();
       }}

src/ts/components/UiKit/components/Wrapper.tsx

@@ -25,27 +25,27 @@ function UiKitWrapper({
 }: IUiKitWrapperProps) {
   return (
     <div
-      className={`${style.wrapper} ${className || ''}`}
+      className={`${style.ui_kit_wrapper} ${className || ''}`}
       title={localization.get(help)}
     >
       {title && (
-        <h6 className={style.title}>
+        <h6 className={style.ui_kit_title}>
           {localization.get(title)}
         </h6>
       )}
       {description && (
-        <p className={style.description}>
+        <p className={style.ui_kit_description}>
           {localization.get(description)}
         </p>
       )}
       {children}
       {help && (
-        <p className={style.help}>
+        <p className={style.ui_kit_help}>
           {localization.get(example)}
         </p>
       )}
       {error && (
-        <p className={style.error}>
+        <p className={style.ui_kit_error}>
           {error}
         </p>
       )}

src/ts/components/UiKit/styles/index.module.scss

@@ -22,15 +22,15 @@
   background-color: #FFFFFF;
 }
 
-.wrapper + .wrapper {
+.ui_kit_wrapper + .ui_kit_wrapper {
   vertical-align: top;
   margin-top: var(--space-l);
 }
 
-.title,
-.description,
-.help,
-.error,
+.ui_kit_title,
+.ui_kit_description,
+.ui_kit_help,
+.ui_kit_error,
 .button {
   font-weight: 100;
   font-size: var(--font-xs);
@@ -46,26 +46,27 @@
   color: var(--color-grey);
 }
 
-.title {
+.ui_kit_title {
   font-weight: bold;
   color: var(--color-black);
 }
 
-.title,
-.description {
+.ui_kit_title,
+.ui_kit_description {
   margin-bottom: 6px;
 }
 
-.help,
-.error {
+.ui_kit_help,
+.ui_kit_error {
   margin-top: 6px;
 }
 
-.error {
+.ui_kit_error {
   color: var(--color-12);
 }
 
-.button {
+
+.ui_kit_button {
   --button-color-bg: var(--color-button);
   --button-color-text: #FFFFFF;
   --button-color-border: var(--color-button);
@@ -82,7 +83,7 @@
   }
 }
 
-.button {
+.ui_kit_button {
   font-weight: bold;
   font-size: var(--font-xs);
   display: inline-block;
@@ -121,7 +122,7 @@
   }
 }
 
-.button + .button {
+.ui_kit_button + .ui_kit_button {
   margin-right: 24px;
 }
 

src/ts/pages/Common/components/Changes.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import dataGripStore from 'ts/store/DataGrip';
 import { getDate, getDateByTimestamp } from 'ts/helpers/formatter';
+import RECOMMENDATION_TYPES from 'ts/helpers/Recommendations/contstants';
 
 import RecommendationsWrapper from 'ts/components/Recommendations/wrapper';
 import NothingFound from 'ts/components/NothingFound';
@@ -29,7 +30,14 @@ function Changes({ statistic }: IChangesProps) {
 
   const [fullDay, shortDay] = getDateByTimestamp(maxData.timestamp);
   const recommendations = [
-    [fullDay, ` (${shortDay}) было влито больше всего изменений.`, 'fact'],
+    {
+      title: fullDay, // TODO: вынести локализацию
+      description: ` (${shortDay}) было влито больше всего изменений.`,
+      type: RECOMMENDATION_TYPES.FACT,
+      arguments: {
+        description: [shortDay],
+      },
+    },
   ];
 
   return (

src/ts/pages/Common/components/Commits.tsx

@@ -9,8 +9,10 @@ import PageWrapper from 'ts/components/Page/wrapper';
 import BarChart from 'ts/components/BarChart';
 import DayInfo from 'ts/components/DayInfo';
 import Title from 'ts/components/Title';
+import RECOMMENDATION_TYPES from 'ts/helpers/Recommendations/contstants';
 import localization from 'ts/helpers/Localization';
 
+
 interface ICommitsProps {
   statistic: any;
 }
@@ -31,11 +33,14 @@ function Commits({ statistic }: ICommitsProps) {
 
   const [fullDay, shortDay] = getDateByTimestamp(maxData.timestamp);
   const recommendations = [
-    [
-      fullDay,
-      localization.get('page.common.commits.description', shortDay),
-      'fact',
-    ],
+    {
+      title: fullDay,
+      description: 'page.common.commits.description',
+      type: RECOMMENDATION_TYPES.FACT,
+      arguments: {
+        description: [shortDay],
+      },
+    },
   ];
 
   return (
@@ -53,7 +58,6 @@ function Commits({ statistic }: ICommitsProps) {
       </PageWrapper>
       <br/>
       <br/>
-      {}
       <Title title={localization.get(
         'page.common.commits.title2',
         getDate(selected?.timestamp),

src/ts/pages/Common/components/PopularWords.tsx

@@ -5,7 +5,7 @@ import NothingFound from 'ts/components/NothingFound';
 import PageWrapper from 'ts/components/Page/wrapper';
 import CandyChart from 'ts/components/CandyChart';
 import Title from 'ts/components/Title';
-import localization from 'ts/helpers/Localization';
+import RECOMMENDATION_TYPES from 'ts/helpers/Recommendations/contstants';
 
 interface IPopularWordsProps {
   statistic: any[];
@@ -23,12 +23,15 @@ function PopularWords({ statistic, mode }: IPopularWordsProps) {
 
   if (!dots?.length) return (<NothingFound />);
 
-  // dots[0].color = COLOR.FIRST;
   const recommendations = [
-    [dots[0].title,
-      localization.get('page.common.words.description', dots[0].value),
-      'fact',
-    ],
+    {
+      title: dots[0].title,
+      description: 'page.common.words.description',
+      type: RECOMMENDATION_TYPES.FACT,
+      arguments: {
+        description: [dots[0].value],
+      },
+    },
   ];
 
   return (

src/ts/pages/Person/components/Tempo.tsx

@@ -13,7 +13,6 @@ import Pagination from 'ts/components/DataLoader/components/Pagination';
 import getFakeLoader from 'ts/components/DataLoader/helpers/formatter';
 import NothingFound from 'ts/components/NothingFound';
 import TempoChart from 'ts/components/Tempo';
-import Title from 'ts/components/Title';
 
 import uiKitStyle from 'ts/components/UiKit/styles/index.module.scss';
 import style from 'ts/pages/Team/styles/filters.module.scss';
@@ -59,9 +58,8 @@ const Tempo = observer((): React.ReactElement => {
   if (!partOfData?.length) return (<NothingFound />);
   return (
     <>
-      <Title title="common.filters" />
       <PageWrapper>
-        <div className={style.tempo_page_filters}>
+        <div className={style.tempo_filters}>
           <UiKitButton
             type="second"
             disabled={week === 1}
@@ -71,7 +69,7 @@ const Tempo = observer((): React.ReactElement => {
           >
             «
           </UiKitButton>
-          <div className={`${uiKitStyle.ui_kit_common} ${style.date_range}`}>
+          <div className={`${uiKitStyle.ui_kit_common} ${style.tempo_filters_date_range}`}>
             {getShortDateRange({
               from: firstWeekDay.timestamp,
               to: lastWeekDay.timestamp,

src/ts/pages/Person/components/Week.tsx

@@ -7,12 +7,11 @@ import { IPaginationRequest, IPagination } from 'ts/interfaces/Pagination';
 import { getShortDateRange, getShortNumber } from 'ts/helpers/formatter';
 import dataGripStore from 'ts/store/DataGrip';
 
-import PageWrapper from 'ts/components/Page/wrapper';
 import DataLoader from 'ts/components/DataLoader';
 import Pagination from 'ts/components/DataLoader/components/Pagination';
 import getFakeLoader from 'ts/components/DataLoader/helpers/formatter';
 import NothingFound from 'ts/components/NothingFound';
-import Table from 'ts/components/Table';
+import DataView from 'ts/components/DataView';
 import Column from 'ts/components/Table/components/Column';
 import { ColumnTypesEnum } from 'ts/components/Table/interfaces/Column';
 import LineChart from 'ts/components/LineChart';
@@ -26,9 +25,11 @@ import ISort from 'ts/interfaces/Sort';
 interface IWeekViewProps {
   name: string;
   response?: IPagination<any>;
+  updateSort?: Function;
+  mode?: string;
 }
 
-function WeekView({ response, name }: IWeekViewProps) {
+function WeekView({ response, updateSort, name, mode }: IWeekViewProps) {
   if (!response) return null;
 
   const typeChart = getOptions({ max: getMax(response, 'authors', name), order: dataGripStore.dataGrip.type.list });
@@ -39,7 +40,13 @@ function WeekView({ response, name }: IWeekViewProps) {
   const taskInDayChart = getOptions({ max: getMax(response, 'taskInDay', name) });
 
   return (
-    <Table rows={response.content}>
+    <DataView
+      rows={response.content}
+      sort={response.sort}
+      updateSort={updateSort}
+      type={mode === 'print' ? 'cards' : undefined}
+      columnCount={mode === 'print' ? 3 : undefined}
+    >
       <Column
         isFixed
         template={ColumnTypesEnum.STRING}
@@ -104,7 +111,7 @@ function WeekView({ response, name }: IWeekViewProps) {
         )}
         width={200}
       />
-    </Table>
+    </DataView>
   );
 }
 
@@ -126,17 +133,18 @@ const Week = observer(({
       {mode !== 'print' && (
         <RecommendationsWrapper recommendations={recommendations} />
       )}
-      <PageWrapper template="table">
-        <DataLoader
-          to="response"
-          loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
-            content: rows, pagination, sort,
-          })}
-        >
-          <WeekView name={statistic.author} />
-          {mode !== 'print' && <Pagination />}
-        </DataLoader>
-      </PageWrapper>
+      <DataLoader
+        to="response"
+        loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
+          content: rows, pagination, sort,
+        })}
+      >
+        <WeekView
+          name={statistic.author}
+          mode={mode}
+        />
+        {mode !== 'print' && <Pagination />}
+      </DataLoader>
     </>
   );
 });

src/ts/pages/Team/components/PR/Total.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import DataView from 'ts/components/DataView';
+import Table from 'ts/components/Table';
 import Column from 'ts/components/Table/components/Column';
 import { ColumnTypesEnum } from 'ts/components/Table/interfaces/Column';
 import LineChart from 'ts/components/LineChart';
@@ -40,7 +40,7 @@ function Total() {
   ];
 
   return (
-    <DataView rows={rows}>
+    <Table rows={rows}>
       <Column
         title="page.team.pr.workDays"
         properties="workDays"
@@ -79,7 +79,7 @@ function Total() {
           />
         )}
       />
-    </DataView>
+    </Table>
   );
 }
 

src/ts/pages/Team/components/PR/index.tsx

@@ -67,21 +67,19 @@ const PR = observer(({
 
       <PageBreak/>
       <Title title="page.team.pr.longDelay"/>
-      <PageWrapper template="table">
-        <DataLoader
-          to="response"
-          loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
-            content: rows,
-            pagination: mode === 'print'
-              ? { size: 20 }
-              : pagination,
-            sort,
-          })}
-        >
-          <All mode={mode} />
-          {mode !== 'print' && <Pagination/>}
-        </DataLoader>
-      </PageWrapper>
+      <DataLoader
+        to="response"
+        loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
+          content: rows,
+          pagination: mode === 'print'
+            ? { size: 20 }
+            : pagination,
+          sort,
+        })}
+      >
+        <All mode={mode} />
+        {mode !== 'print' && <Pagination/>}
+      </DataLoader>
     </>
   );
 });

src/ts/pages/Team/components/Tempo.tsx

@@ -61,7 +61,7 @@ const Tempo = observer((): React.ReactElement => {
     <>
       <Title title="common.filters" />
       <PageWrapper>
-        <div className={style.tempo_page_filters}>
+        <div className={style.tempo_filters}>
           <UiKitButton
             type="second"
             disabled={week === 1}
@@ -71,7 +71,7 @@ const Tempo = observer((): React.ReactElement => {
           >
             «
           </UiKitButton>
-          <div className={`${uiKitStyle.ui_kit_common} ${style.date_range}`}>
+          <div className={`${uiKitStyle.ui_kit_common} ${style.tempo_filters_date_range}`}>
             {getShortDateRange({
               from: firstWeekDay.timestamp,
               to: lastWeekDay.timestamp,
@@ -96,7 +96,7 @@ const Tempo = observer((): React.ReactElement => {
             «
           </UiKitButton>
           <UiKitSelect
-            className={style.user}
+            className={style.tempo_filters_user}
             value={user}
             options={[ '', ...dataGripStore.dataGrip.author.list]}
             onChange={(id: number, name: string) => {

src/ts/pages/Team/components/TreeFilters.tsx

@@ -15,12 +15,12 @@ const TreeFilters = observer((): React.ReactElement => {
   options.unshift({ id: 0, title: localization.get('page.team.tree.filters.all') });
 
   return (
-    <>
+    <div>
       <UiKitSelect
         title="page.team.tree.filters.author"
         value={treeStore.authorId}
         options={options}
-        className={style.filter}
+        className={style.tree_filters}
         onChange={(authorId: number) => {
           treeStore.updateFilter('authorId', authorId);
         }}
@@ -29,12 +29,12 @@ const TreeFilters = observer((): React.ReactElement => {
         title="page.team.tree.filters.commits"
         help="page.team.tree.filters.help"
         value={treeStore.minCommits}
-        className={style.filter}
+        className={style.tree_filters}
         onChange={(minCommits: number) => {
           treeStore.updateFilter('minCommits', minCommits);
         }}
       />
-    </>
+    </div>
   );
 });
 

src/ts/pages/Team/styles/filters.module.scss

@@ -1,25 +1,25 @@
 @import '../../../../styles/variables';
 
-.filter {
+.tree_filters {
   display: inline-block;
   margin: 0 24px 24px 0;
   vertical-align: top;
 }
 
-.tempo_page_filters {
+.tempo_filters {
   margin: 0 0 24px 0;
-}
 
-.date_range {
-  width: 260px;
-  max-width: 260px;
-  margin: 0 var(--space-xs);
-  text-align: center;
-}
+  &_date_range {
+    width: 260px;
+    max-width: 260px;
+    margin: 0 var(--space-xs);
+    text-align: center;
+  }
 
-.user {
-  display: inline-block;
-  width: 260px;
-  max-width: 260px;
-  margin: 0 6px;
+  &_user {
+    display: inline-block;
+    width: 260px;
+    max-width: 260px;
+    margin: 0 6px;
+  }
 }