@ssa-ui-kit/widgets 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,9 +29,9 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^1.0.11",
-    "@ssa-ui-kit/utils": "^1.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0"
+    "@ssa-ui-kit/core": "^1.1.1",
+    "@ssa-ui-kit/hooks": "^1.0.0",
+    "@ssa-ui-kit/utils": "^1.0.0"
   },
   "browserslist": [
     ">0.1%",
@@ -40,7 +40,7 @@
   ],
   "devDependencies": {
     "@emotion/jest": "^11.11.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "^1.48.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/testing-library__jest-dom": "^5.14.6",
@@ -57,8 +57,8 @@
     "@emotion/styled": "^11.10.5",
     "@nivo/core": "^0.83.0",
     "@nivo/line": "^0.83.0",
-    "@nivo/scales": "^0.83.0",
     "@nivo/pie": "^0.83.0",
+    "@nivo/scales": "^0.83.0",
     "react": "18.x",
     "react-dom": "18.x",
     "react-hook-form": "^7.46.1",

package/src/components/AccountBalance/AccountBalance.stories.tsx

@@ -20,6 +20,12 @@ Default.args = {
   data,
 };
 
+export const WithFullscreenMode: StoryObj<typeof AccountBalance> = {};
+WithFullscreenMode.args = {
+  ...Default.args,
+  fullscreenModeFeature: true,
+};
+
 export const WithLink: StoryObj<typeof AccountBalance> = (
   args: AccountBalanceProps,
 ) => {
@@ -75,3 +81,43 @@ Custom.args = {
     },
   ],
 };
+
+export const WithoutPaletteColors: StoryObj<typeof AccountBalance> = (
+  args: AccountBalanceProps,
+) => {
+  return (
+    <AccountBalance
+      {...args}
+      css={css`
+        ul li {
+          height: auto;
+        }
+      `}
+    />
+  );
+};
+
+WithoutPaletteColors.args = {
+  total: 48700.53569,
+  currency: 'USDT',
+  variant: 'withoutValueList',
+  chartColorPalette: ['#F7931A', '#50AF95'],
+  legendColorPalette: [
+    'linear-gradient(243.84deg, rgb(235, 117, 86), rgb(242, 136, 142))',
+    '#50AF95',
+  ],
+  data: [
+    {
+      id: 'BTC',
+      label: 'BTC',
+      value: 571.23,
+      legendValue: 12323,
+    },
+    {
+      id: 'LTC',
+      label: 'LTC',
+      value: 530.25,
+      legendValue: 12323,
+    },
+  ],
+};

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,7 +1,7 @@
-import { css, useTheme } from '@emotion/react';
-import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
+import { useTheme } from '@emotion/react';
+import { css } from '@emotion/css';
+import { WithLink } from '@ssa-ui-kit/core';
 import { BalancePieChart } from './BalancePieChart';
-import { WithLink } from './WithLink';
 import { AccountBalanceProps } from './types';
 
 export const AccountBalance = ({
@@ -10,55 +10,39 @@ export const AccountBalance = ({
   onClick,
   link,
   variant = 'valueList',
+  fullscreenModeFeature = false,
+  activeHighlight = true,
   ...props
 }: AccountBalanceProps) => {
   const theme = useTheme();
 
   return (
     <WithLink link={link} onClick={onClick}>
-      <Card
-        className={className}
-        onClick={link ? undefined : onClick}
-        css={css`
-          border-radius: 20px;
-          padding: 5px 10px;
-          width: 100%;
-
-          ${theme.mediaQueries.md} {
-            padding: 10px;
-          }
-
-          ${theme.mediaQueries.lg} {
-            padding: 12px 20px 11px;
-          }
-
-          box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-        `}>
-        <CardHeader
-          css={css`
-            margin-bottom: 10px;
-          `}>
-          <Typography
-            variant="h3"
-            weight="bold"
-            css={css`
-              font-size: 16px;
-              ${theme.mediaQueries.md} {
-                font-size: 20px;
-              }
-            `}>
-            {title}
-          </Typography>
-        </CardHeader>
-        <CardContent
-          css={css`
-            max-width: 406px;
-            width: 100%;
-            display: block;
-          `}>
-          <BalancePieChart theme={theme} variant={variant} {...props} />
-        </CardContent>
-      </Card>
+      <BalancePieChart
+        theme={theme}
+        variant={variant}
+        fullscreenModeFeature={fullscreenModeFeature}
+        activeHighlight={activeHighlight}
+        pieChartProps={{
+          cardProps: {
+            title,
+            className,
+            headerClassName: css([
+              {
+                fontSize: 11,
+              },
+            ]),
+            contentClassName: css([
+              {
+                [theme.mediaQueries.md]: {
+                  alignItems: 'center !important',
+                },
+              },
+            ]),
+          },
+        }}
+        {...props}
+      />
     </WithLink>
   );
 };

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -1,6 +1,11 @@
+import { useState } from 'react';
 import { withTheme, css } from '@emotion/react';
-
-import { PieChart, PieChartLegend, pieChartPalettes } from '@ssa-ui-kit/core';
+import {
+  PieChart,
+  PieChartFeatures,
+  PieChartLegend,
+  pieChartPalettes,
+} from '@ssa-ui-kit/core';
 import { BalancePieChartTitle } from './BalancePieChartTitle';
 
 import { BalancePieChartProps } from './types';
@@ -14,13 +19,32 @@ export const BalancePieChart = withTheme(
     chartColorPalette,
     legendColorPalette,
     variant = 'valueList',
+    pieChartProps = {},
+    fullscreenModeFeature = false,
+    activeHighlight = false,
   }: BalancePieChartProps) => {
+    const [isFullscreenMode, setFullscreenMode] = useState(false);
     const { legendColorNames, pieChartColors } =
       pieChartPalettes.getBalancePalette(theme);
+    const featuresList = new Set<PieChartFeatures>();
+
+    if (Object.keys(pieChartProps.cardProps || {}).length) {
+      featuresList.add('header');
+    }
+    if (fullscreenModeFeature) {
+      featuresList.add('header');
+      featuresList.add('fullscreenMode');
+    }
+
+    const handleFullscreenModeChange = (pieChartFullscreenMode: boolean) => {
+      setFullscreenMode(pieChartFullscreenMode);
+    };
     return (
       <PieChart
         data={data}
+        features={Array.from(featuresList)}
         colors={chartColorPalette || pieChartColors}
+        onFullscreenModeChange={handleFullscreenModeChange}
         animate={false}
         title={
           <BalancePieChartTitle
@@ -29,51 +53,61 @@ export const BalancePieChart = withTheme(
             currency={currency}
           />
         }
-        css={css`
-          div:nth-of-type(1) {
-            width: 100px;
-            height: 100px;
-          }
-
-          ${theme.mediaQueries.lg} {
+        css={
+          !isFullscreenMode &&
+          css`
             div:nth-of-type(1) {
-              width: 120px;
-              height: 120px;
+              width: 100px;
+              height: 100px;
             }
-          }
-        `}>
+
+            ${theme.mediaQueries.lg} {
+              div:nth-of-type(1) {
+                width: 120px;
+                height: 120px;
+              }
+            }
+          `
+        }
+        width={'100%'}
+        {...pieChartProps}>
         <PieChartLegend
           data={data}
           colors={legendColorPalette || legendColorNames}
           variant={variant}
           currency={currency}
+          activeHighlight={activeHighlight}
           markerStyles={css`
             width: 10px;
             height: 10px;
             margin-right: 5px;
           `}
           labelListStyles={css`
-            gap: 5px;
+            gap: 0;
+            li {
+              height: 22.5px;
+            }
             h6 {
               font-weight: 700;
-              font-size: 12px;
+              line-height: 22.5px;
+              font-size: ${!isFullscreenMode && '12px'};
               ${theme.mediaQueries.md} {
-                font-size: 13px;
+                font-size: ${!isFullscreenMode && '13px'};
               }
               ${theme.mediaQueries.lg} {
-                font-size: 14px;
+                font-size: ${!isFullscreenMode && '14px'};
               }
             }
-
-            ${theme.mediaQueries.lg} {
-              margin-left: -20%;
-            }
           `}
           valueListStyles={css`
-            gap: 5px;
+            gap: 0;
+            li {
+              height: 22.5px;
+            }
             h6 {
+              line-height: 22.5px;
               color: ${theme.colors.greyDarker80};
-              font-size: 11px;
+              font-size: ${isFullscreenMode ? '12px' : '11px'};
               ${theme.mediaQueries.lg} {
                 font-size: 12px;
               }

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -1,45 +1,54 @@
 import { withTheme, css } from '@emotion/react';
-import { Typography } from '@ssa-ui-kit/core';
+import { Typography, useFullscreenMode } from '@ssa-ui-kit/core';
 import { useTextSizeDecrease } from '@ssa-ui-kit/hooks';
 import { BalancePieChartTitleProps } from './types';
 
 export const BalancePieChartTitle = withTheme(
   ({ total, currency, theme }: BalancePieChartTitleProps) => {
     const ref = useTextSizeDecrease();
+    const { isFullscreenMode } = useFullscreenMode();
     return (
       <Typography
         ref={ref}
         variant="body2"
         weight="bold"
         color={theme.colors.greyDarker}
-        css={css`
-          font-size: 13px;
-          padding: 0 14px;
-          ${theme.mediaQueries.md} {
-            font-size: 14px;
-          }
-          ${theme.mediaQueries.lg} {
-            font-size: 16px;
-          }
-          line-height: 1;
-        `}>
+        css={
+          isFullscreenMode
+            ? css`
+                font-size: 24px !important;
+                font-weight: 500;
+              `
+            : css`
+                font-size: 13px;
+                padding: 0 14px;
+                line-height: 1;
+              `
+        }>
         {total}
         <Typography
           variant="body2"
           weight="regular"
           as="span"
           color={theme.colors.greyDarker80}
-          css={css`
-            display: block;
-            font-size: 12px;
-            ${theme.mediaQueries.md} {
-              font-size: 13px;
-            }
-            ${theme.mediaQueries.lg} {
-              font-size: 14px;
-            }
-            line-height: 25px;
-          `}>
+          css={
+            isFullscreenMode
+              ? css`
+                  font-size: 18px;
+                  margin-left: 10px;
+                `
+              : css`
+                  display: block;
+                  font-size: 12px;
+                  ${theme.mediaQueries.md} {
+                    font-size: 13px;
+                  }
+                  ${theme.mediaQueries.lg} {
+                    font-size: 14px;
+                  }
+                  line-height: 25px;
+                `
+          }>
           {currency}
         </Typography>
       </Typography>

package/src/components/AccountBalance/index.ts

@@ -1,5 +1,4 @@
 export { AccountBalance } from './AccountBalance';
 export { BalancePieChart } from './BalancePieChart';
 export { BalancePieChartTitle } from './BalancePieChartTitle';
-export { WithLink } from './WithLink';
 export * from './types';

package/src/components/AccountBalance/types.ts

@@ -1,5 +1,5 @@
-import { MainColors, Theme } from '@ssa-ui-kit/core';
 import type { To } from 'react-router-dom';
+import { MainColors, PieChartProps, Theme } from '@ssa-ui-kit/core';
 
 interface WithTheme {
   theme: Theme;
@@ -8,9 +8,10 @@ interface WithTheme {
 type BalanceBase = {
   total: number | string;
   currency: string;
-  legendColorPalette?: Array<keyof MainColors>;
+  legendColorPalette?: Array<keyof MainColors | string>;
   chartColorPalette?: string[];
   variant?: 'valueList' | 'withoutValueList';
+  fullscreenModeFeature?: boolean;
   data: Array<{
     id: string | number;
     value: number;
@@ -19,13 +20,17 @@ type BalanceBase = {
   }>;
 };
 
-export interface BalancePieChartProps extends WithTheme, BalanceBase {}
+export interface BalancePieChartProps extends WithTheme, BalanceBase {
+  pieChartProps?: Partial<PieChartProps>;
+  activeHighlight?: boolean;
+}
 
 export interface AccountBalanceProps extends BalanceBase {
   title?: string;
   className?: string;
   onClick?: () => void;
   link?: To;
+  activeHighlight?: boolean;
 }
 
 export type BalancePieChartTitleProps = Pick<

package/src/components/ExchangeAccount/ExchangeAccount.stories.tsx

@@ -56,12 +56,12 @@ export const List: StoryObj<typeof ExchangeAccount> = () => {
     <div
       css={css`
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
         gap: 10px;
 
         ${theme.mediaQueries.md} {
           max-width: 1542px;
-          grid-template-columns: repeat(3, minmax(200px, 1fr));
+          grid-template-columns: repeat(3, minmax(270px, 1fr));
           gap: 20px;
         }
       `}>

package/src/components/ExchangeAccount/ExchangeAccount.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { useTheme } from '@emotion/react';
 import {
   Button,
@@ -6,8 +7,9 @@ import {
   CardHeader,
   Icon,
   Typography,
+  WithLink,
 } from '@ssa-ui-kit/core';
-import { BalancePieChart, WithLink } from '@components/AccountBalance';
+import { BalancePieChart } from '@components/AccountBalance';
 import { ExchangeAccountProps } from './types';
 import * as S from './styles';
 
@@ -65,7 +67,20 @@ export const ExchangeAccount = ({
           {isActive ? status : 'Not available'}
         </Typography>
         <CardContent css={S.CardContent} direction="column">
-          <BalancePieChart theme={theme} {...data} />
+          <BalancePieChart
+            theme={theme}
+            {...data}
+            pieChartProps={{
+              className: css`
+                ${theme.mediaQueries.md} {
+                  flex-direction: row;
+                }
+                ${theme.mediaQueries.lg} {
+                  flex-direction: column;
+                }
+              `,
+            }}
+          />
         </CardContent>
       </CardBase>
     </WithLink>

package/src/components/ExchangeAccount/styles.ts

@@ -83,6 +83,9 @@ export const Status = (theme: Theme) => css`
 export const CardContent = (theme: Theme) => css`
   width: 100%;
   padding: 10px 20px;
+  & > div {
+    flex-direction: row;
+  }
 
   ul:last-child {
     li {
@@ -91,43 +94,22 @@ export const CardContent = (theme: Theme) => css`
     }
   }
 
-  ${theme.mediaQueries.md} {
-    > div {
-      display: block;
-      text-align: center;
-
-      .pie-chart-wrapper {
-        margin: 0 auto 6px;
-      }
-    }
-
-    ul {
-      display: inline-flex;
-      height: auto;
+  ${theme.mediaQueries.sm} {
+    & > div {
+      justify-content: space-around;
     }
+  }
 
-    ul:last-child {
-      margin-left: 30px;
+  ${theme.mediaQueries.md} {
+    justify-content: space-around;
+    & > div {
+      flex-direction: column;
     }
   }
 
   ${theme.mediaQueries.lg} {
-    > div {
-      display: flex;
-      justify-content: space-around;
-
-      .pie-chart-wrapper {
-        margin: 0 10px 0 0;
-      }
-    }
-
-    ul {
-      display: flex;
-      margin-left: 0;
-    }
-
-    ul:last-child {
-      margin-left: 10px;
+    & > div {
+      flex-direction: row;
     }
   }
 `;

package/test-results/.last-run.json

@@ -0,0 +1,21 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "e9b658dfa47cbcc923fa-5d8f192ca399a0e3af8d",
+    "e9b658dfa47cbcc923fa-fa2e3998b096c2a84a78",
+    "e9b658dfa47cbcc923fa-fd3540ef424862ee1613",
+    "e9b658dfa47cbcc923fa-593ad1271cc938aaa552",
+    "e9b658dfa47cbcc923fa-1bac0b243ac805b359d7",
+    "f842a66268b5977a58f7-a0c08d47595dd7f659fa",
+    "f842a66268b5977a58f7-4efdb0edbfec872edd6a",
+    "f842a66268b5977a58f7-6ef7b0ec18215b6dc2f4",
+    "f842a66268b5977a58f7-c42323a029ec8bb42609",
+    "f842a66268b5977a58f7-92d257b6c4ef385a908e",
+    "dc515447f22f49e5c441-5df2e440933bc5ee2b27",
+    "dc515447f22f49e5c441-2b56a90eb61ef7e0fd51",
+    "dc515447f22f49e5c441-4165392e40a58aa9249e",
+    "dc515447f22f49e5c441-20b74ff58c12bdb09590",
+    "dc515447f22f49e5c441-ff84682b66bfd613fd24",
+    "a2ee24e0f108a5cb0d28-bdfc5b569adaa00d522c"
+  ]
+}