@ssa-ui-kit/widgets 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
+    "@ssa-ui-kit/core": "^1.1.7",
     "@ssa-ui-kit/hooks": "^1.0.0",
-    "@ssa-ui-kit/core": "^1.1.6",
     "@ssa-ui-kit/utils": "^1.0.0"
   },
   "browserslist": [

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

@@ -66,6 +66,7 @@ Custom.args = {
     mainTheme.colors.green as string,
   ],
   legendColorPalette: ['blue', 'green'],
+  widgetMaxWidth: '230px',
   data: [
     {
       id: 'BTC',
@@ -106,6 +107,7 @@ WithoutPaletteColors.args = {
     'linear-gradient(243.84deg, rgb(235, 117, 86), rgb(242, 136, 142))',
     '#50AF95',
   ],
+  widgetMaxWidth: '230px',
   data: [
     {
       id: 'BTC',

package/src/components/AccountBalance/AccountBalance.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import { css } from '@emotion/css';
 import { WithLink } from '@ssa-ui-kit/core';
@@ -12,9 +13,11 @@ export const AccountBalance = ({
   variant = 'valueList',
   fullscreenModeFeature = false,
   activeHighlight = true,
+  widgetMaxWidth = '280px',
   ...props
 }: AccountBalanceProps) => {
   const theme = useTheme();
+  const [isFullscreenMode, setIsFullscreenMode] = useState(false);
 
   return (
     <WithLink link={link} onClick={onClick}>
@@ -23,10 +26,19 @@ export const AccountBalance = ({
         variant={variant}
         fullscreenModeFeature={fullscreenModeFeature}
         activeHighlight={activeHighlight}
+        onFullscreenModeChange={setIsFullscreenMode}
         pieChartProps={{
+          width: '100%',
           cardProps: {
             title,
-            className,
+            className: [
+              css`
+                & > div:last-of-type {
+                  max-width: ${isFullscreenMode ? '100%' : widgetMaxWidth};
+                }
+              `,
+              className,
+            ].join(' '),
             headerClassName: css([
               {
                 fontSize: 11,

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -22,6 +22,7 @@ export const BalancePieChart = withTheme(
     pieChartProps = {},
     fullscreenModeFeature = false,
     activeHighlight = false,
+    onFullscreenModeChange,
   }: BalancePieChartProps) => {
     const [isFullscreenMode, setFullscreenMode] = useState(false);
     const { legendColorNames, pieChartColors } =
@@ -38,6 +39,7 @@ export const BalancePieChart = withTheme(
 
     const handleFullscreenModeChange = (pieChartFullscreenMode: boolean) => {
       setFullscreenMode(pieChartFullscreenMode);
+      onFullscreenModeChange?.(pieChartFullscreenMode);
     };
     return (
       <PieChart

package/src/components/AccountBalance/BalancePieChartTitle.tsx

@@ -1,15 +1,12 @@
 import { withTheme, css } from '@emotion/react';
 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}
@@ -20,7 +17,7 @@ export const BalancePieChartTitle = withTheme(
                 font-weight: 500;
               `
             : css`
-                font-size: 13px;
+                font-size: 10px;
                 padding: 0 14px;
                 line-height: 1;
               `

package/src/components/AccountBalance/types.ts

@@ -23,6 +23,7 @@ type BalanceBase = {
 export interface BalancePieChartProps extends WithTheme, BalanceBase {
   pieChartProps?: Partial<PieChartProps>;
   activeHighlight?: boolean;
+  onFullscreenModeChange?: (isFullscreenMode: boolean) => void;
 }
 
 export interface AccountBalanceProps extends BalanceBase {
@@ -31,6 +32,7 @@ export interface AccountBalanceProps extends BalanceBase {
   onClick?: () => void;
   link?: To;
   activeHighlight?: boolean;
+  widgetMaxWidth?: string;
 }
 
 export type BalancePieChartTitleProps = Pick<

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

@@ -1,6 +1,7 @@
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { css, useTheme } from '@emotion/react';
+import { css as cssClassname } from '@emotion/css';
 import { Icon, AddNewAccountCard } from '@ssa-ui-kit/core';
 import { ExchangeAccount } from './ExchangeAccount';
 import { dataValues } from './helpers';
@@ -19,6 +20,12 @@ export const Default: StoryObj<typeof ExchangeAccount> = () => {
       data={dataValues[0].data}
       onClick={() => alert('Card is clicked!')}
       onDelete={() => alert('Card is deleted!')}
+      pieChartProps={{
+        className: cssClassname`
+          align-self: center;
+          max-width: 300px;
+        `,
+      }}
     />
   );
 };
@@ -40,6 +47,12 @@ export const WithLink: StoryObj<typeof ExchangeAccount> = () => {
               link="/link"
               onClick={() => alert('Card is clicked!')}
               onDelete={() => alert('Card is deleted!')}
+              pieChartProps={{
+                className: cssClassname`
+                  align-self: center;
+                  max-width: 300px;
+                `,
+              }}
             />
           }
         />
@@ -79,6 +92,12 @@ export const List: StoryObj<typeof ExchangeAccount> = () => {
             data={item.data}
             onClick={() => alert('Card is clicked!')}
             onDelete={() => alert('Card is deleted!')}
+            pieChartProps={{
+              className: cssClassname`
+                align-self: center;
+                max-width: 300px;
+              `,
+            }}
           />
         );
       })}

package/src/components/ExchangeAccount/ExchangeAccount.tsx

@@ -19,6 +19,7 @@ export const ExchangeAccount = ({
   status,
   link,
   data,
+  pieChartProps,
   onClick,
   onDelete,
 }: ExchangeAccountProps) => {
@@ -69,7 +70,6 @@ export const ExchangeAccount = ({
         <CardContent css={S.CardContent} direction="column">
           <BalancePieChart
             theme={theme}
-            {...data}
             pieChartProps={{
               className: css`
                 ${theme.mediaQueries.md} {
@@ -79,7 +79,9 @@ export const ExchangeAccount = ({
                   flex-direction: column;
                 }
               `,
+              ...pieChartProps,
             }}
+            {...data}
           />
         </CardContent>
       </CardBase>

package/src/components/ExchangeAccount/types.ts

@@ -1,4 +1,5 @@
 import { To } from 'react-router-dom';
+import { PieChartProps } from '@ssa-ui-kit/core';
 import { AccountBalanceProps } from '@components/AccountBalance';
 
 export interface ExchangeAccountProps {
@@ -9,4 +10,5 @@ export interface ExchangeAccountProps {
   onDelete: () => void;
   link?: To;
   data: Omit<AccountBalanceProps, 'title' | 'className' | 'onClick' | 'link'>;
+  pieChartProps?: Partial<PieChartProps>;
 }