@ssa-ui-kit/widgets 0.0.15-alpha → 0.0.16-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.15-alpha",
+  "version": "0.0.16-alpha",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,7 +29,7 @@
     "js-tokens": "^4.0.0",
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
-    "@ssa-ui-kit/core": "^0.0.10-alpha",
+    "@ssa-ui-kit/core": "^0.0.12-alpha",
     "@ssa-ui-kit/hooks": "^0.0.1-alpha",
     "@ssa-ui-kit/utils": "^0.0.1-alpha"
   },

package/src/components/AccountBalance/AccountBalance.spec.tsx

@@ -79,4 +79,33 @@ describe('AccountBalance', () => {
     await fireEvent.click(linkEl);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('Renders without value list', () => {
+    const { getByText } = render(
+      <AccountBalance
+        total="798"
+        currency="USDT"
+        variant="withoutValueList"
+        data={[
+          {
+            id: 'BTC',
+            label: 'BTC',
+            legendValue: 1,
+            value: 871.23,
+          },
+          {
+            id: 'LTC',
+            label: 'LTC',
+            legendValue: 7,
+            value: 530.25,
+          },
+        ]}
+      />,
+    );
+
+    getByText('1 BTC');
+    getByText('871.23 USDT');
+    getByText('7 LTC');
+    getByText('530.25 USDT');
+  });
 });

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

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { css } from '@emotion/react';
+import { mainTheme } from '@ssa-ui-kit/core';
 
 import { data } from './stories/fixtures';
 
@@ -33,3 +35,43 @@ WithLink.args = {
   ...Default.args,
   link: '/',
 };
+
+export const Custom: StoryObj<typeof AccountBalance> = (
+  args: AccountBalanceProps,
+) => {
+  return (
+    <AccountBalance
+      {...args}
+      css={css`
+        ul li {
+          height: auto;
+        }
+      `}
+    />
+  );
+};
+
+Custom.args = {
+  total: 48700.53569,
+  currency: 'USDT',
+  variant: 'withoutValueList',
+  chartColorPalette: [
+    mainTheme.colors.blue as string,
+    mainTheme.colors.green as string,
+  ],
+  legendColorPalette: ['blue', 'green'],
+  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

@@ -9,6 +9,7 @@ export const AccountBalance = ({
   className,
   onClick,
   link,
+  variant = 'valueList',
   ...props
 }: AccountBalanceProps) => {
   const theme = useTheme();
@@ -55,7 +56,7 @@ export const AccountBalance = ({
             width: 100%;
             display: block;
           `}>
-          <BalancePieChart theme={theme} {...props} />
+          <BalancePieChart theme={theme} variant={variant} {...props} />
         </CardContent>
       </Card>
     </WithLink>

package/src/components/AccountBalance/BalancePieChart.tsx

@@ -10,14 +10,21 @@ import { BalancePieChartTitle } from './BalancePieChartTitle';
 import { BalancePieChartProps } from './types';
 
 export const BalancePieChart = withTheme(
-  ({ total, currency, data, theme }: BalancePieChartProps) => {
+  ({
+    total,
+    currency,
+    data,
+    theme,
+    chartColorPalette,
+    legendColorPalette,
+    variant = 'valueList',
+  }: BalancePieChartProps) => {
     const { legendColorNames, pieChartColors } =
       pieChartPalettes.getBalancePalette(theme);
-
     return (
       <PieChart
         data={data}
-        colors={pieChartColors}
+        colors={chartColorPalette || pieChartColors}
         animate={false}
         title={
           <BalancePieChartTitle
@@ -41,7 +48,9 @@ export const BalancePieChart = withTheme(
         `}>
         <PieChartLegend
           data={data}
-          colors={legendColorNames}
+          colors={legendColorPalette || legendColorNames}
+          variant={variant}
+          currency={currency}
           markerStyles={css`
             width: 10px;
             height: 10px;

package/src/components/AccountBalance/types.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@ssa-ui-kit/core';
+import { MainColors, Theme } from '@ssa-ui-kit/core';
 import type { To } from 'react-router-dom';
 
 interface WithTheme {
@@ -8,6 +8,9 @@ interface WithTheme {
 type BalanceBase = {
   total: number | string;
   currency: string;
+  legendColorPalette?: Array<keyof MainColors>;
+  chartColorPalette?: string[];
+  variant?: 'valueList' | 'withoutValueList';
   data: Array<{
     id: string | number;
     value: number;

package/src/components/PieChart/PieChartLegend.tsx

@@ -12,15 +12,18 @@ export const PieChartLegend = ({
   renderLabel,
   renderValue,
   markerStyles,
+  currency,
   labelListStyles,
   valueListStyles,
+  variant = 'valueList',
 }: PieChartLegendProps) => {
   const theme = useTheme();
+  const isValueList = variant === 'valueList';
   return (
     <Fragment>
       <PieChartLegendList css={labelListStyles}>
         {data.map((item, index) => {
-          const { id, label } = item;
+          const { id, label, value, legendValue } = item;
           return (
             <li key={`tag-${id}`}>
               <PieChartLegendMarker
@@ -28,24 +31,44 @@ export const PieChartLegend = ({
                 as={'span'}
                 css={markerStyles}
               />
-              <Typography variant="h6">
-                {typeof renderLabel === 'function' ? renderLabel(item) : label}
-              </Typography>
+              {isValueList ? (
+                <Typography variant="h6">
+                  {typeof renderLabel === 'function'
+                    ? renderLabel(item)
+                    : label}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="subtitle"
+                  css={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}>
+                  <span>
+                    {legendValue as React.ReactNode} {label}
+                  </span>
+                  <span css={{ fontWeight: '400' }}>
+                    {value} {currency}
+                  </span>
+                </Typography>
+              )}
             </li>
           );
         })}
       </PieChartLegendList>
-      <PieChartLegendList css={valueListStyles}>
-        {data.map((item) => (
-          <li key={`subtitle-${item.id}`}>
-            <Typography variant="subtitle" color={theme.colors.greyDarker60}>
-              {typeof renderValue === 'function'
-                ? renderValue(item)
-                : item.value}
-            </Typography>
-          </li>
-        ))}
-      </PieChartLegendList>
+      {isValueList && (
+        <PieChartLegendList css={valueListStyles}>
+          {data.map((item) => (
+            <li key={`subtitle-${item.id}`}>
+              <Typography variant="subtitle" color={theme.colors.greyDarker60}>
+                {typeof renderValue === 'function'
+                  ? renderValue(item)
+                  : item.value}
+              </Typography>
+            </li>
+          ))}
+        </PieChartLegendList>
+      )}
     </Fragment>
   );
 };

package/src/components/PieChart/types.ts

@@ -23,6 +23,8 @@ export interface PieChartLegendProps {
   renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   className?: string;
   markerStyles?: SerializedStyles;
+  currency?: string;
   labelListStyles?: SerializedStyles;
   valueListStyles?: SerializedStyles;
+  variant?: 'valueList' | 'withoutValueList';
 }