@ssa-ui-kit/widgets 0.0.19-alpha → 0.0.21-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/widgets",
-  "version": "0.0.19-alpha",
+  "version": "0.0.21-alpha",
   "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": "^0.0.14-alpha",
-    "@ssa-ui-kit/hooks": "^0.0.1-alpha",
-    "@ssa-ui-kit/utils": "^0.0.1-alpha"
+    "@ssa-ui-kit/core": "^0.0.19-alpha",
+    "@ssa-ui-kit/utils": "^0.0.1-alpha",
+    "@ssa-ui-kit/hooks": "^0.0.1-alpha"
   },
   "browserslist": [
     ">0.1%",

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -23,7 +23,7 @@ export const NavBarItemWithSubMenu = ({
   item: CollapsibleNavBarGroup;
   onClick?: () => void;
 }) => {
-  const { iconName, iconSize, title, items, prefix, css } = item;
+  const { iconName, iconSize, title, items, prefix, css, CustomIcon } = item;
   const uniqName = iconName + title.replace(' ', '').toLowerCase();
   const accordionUniqName = uniqName + 'accordion';
   const match = useMatch(prefix + ':id');
@@ -81,7 +81,7 @@ export const NavBarItemWithSubMenu = ({
                 </Link>
 
                 <Link to="" className={`icon-wrapper${match ? ' active' : ''}`}>
-                  <Icon />
+                  {CustomIcon ? <CustomIcon /> : <Icon />}
                   <AccordionTitle {...data} css={S.AccordionTitle} />
                 </Link>
               </Wrapper>

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -11,9 +11,14 @@ export const NavBarItemWithoutSubMenu = ({
   item: T.CollapsibleNavBarItem;
   onClick?: () => void;
 }) => {
-  const { path, iconName, title, iconSize, css } = item;
+  const { path, iconName, title, iconSize, css, CustomIcon } = item;
   const Icon = () => (
-    <TriggerIcon iconName={iconName} iconSize={iconSize} css={{ ...css }} />
+    <TriggerIcon
+      iconName={iconName}
+      iconSize={iconSize}
+      CustomIcon={CustomIcon}
+      css={{ ...css }}
+    />
   );
 
   return (

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -1,14 +1,16 @@
 import { css, useTheme } from '@emotion/react';
-import { Wrapper, Icon, IMapIcons } from '@ssa-ui-kit/core';
+import { Wrapper, Icon, IMapIcons, SVGProps } from '@ssa-ui-kit/core';
 
 export const TriggerIcon = ({
   iconName,
   iconSize,
   className,
+  CustomIcon,
 }: {
   iconName: keyof IMapIcons;
   iconSize?: number;
   className?: string;
+  CustomIcon?: (props: Omit<SVGProps, 'fill'>) => JSX.Element;
 }) => {
   const theme = useTheme();
   return (
@@ -22,12 +24,20 @@ export const TriggerIcon = ({
         height: 26px;
       `}
       className="trigger-icon">
-      <Icon
-        name={iconName}
-        color={theme.colors.grey}
-        size={iconSize}
-        className={className}
-      />
+      {CustomIcon ? (
+        <CustomIcon
+          size={iconSize}
+          className={className}
+          color={theme.colors.grey}
+        />
+      ) : (
+        <Icon
+          name={iconName}
+          color={theme.colors.grey}
+          size={iconSize}
+          className={className}
+        />
+      )}
     </Wrapper>
   );
 };

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -8,6 +8,7 @@ import { CollapsibleNavBar } from '../CollapsibleNavBar';
 import { ITEMS } from './consts';
 import { Logo } from './Logo';
 import { Layout } from './Layout';
+import { CustomIcon } from './CustomIcon';
 
 type Args = Parameters<typeof CollapsibleNavBar>[0];
 
@@ -51,3 +52,22 @@ export default {
 } as Meta<typeof CollapsibleNavBar>;
 
 export const Default = {};
+
+export const WithCustomIcon = {
+  title: 'With Custom Icon',
+  component: CollapsibleNavBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      ...ITEMS,
+      {
+        path: 'custom',
+        CustomIcon,
+        title: 'Item with custom icon',
+      },
+    ],
+    renderLogo: <Logo />,
+  },
+} as Meta<typeof CollapsibleNavBar>;

package/src/components/CollapsibleNavBar/stories/CustomIcon.tsx

@@ -0,0 +1,20 @@
+export const CustomIcon = () => {
+  const size = 24;
+  const fill = 'rgb(195, 197, 204)';
+  const props = {};
+  return (
+    <svg
+      className="svg-icon"
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M708.76 993.953333a53.366667 53.366667 0 0 1-46.28-26.666666L532.1 741.466667l-154.666667 148.586666A21.333333 21.333333 0 0 1 341.333333 874.666667V192a21.333333 21.333333 0 0 1 6.706667-15.526667c5.333333-5.02 15.26-8.74 25.72-2.666666l91.946667 53.086666 498.833333 288a21.333333 21.333333 0 0 1-4.733333 38.966667l-206 59.64 130.386666 225.826667a53.333333 53.333333 0 0 1-19.526666 72.826666l-129.333334 74.666667a53.02 53.02 0 0 1-26.573333 7.133333z m-171.806667-308.073333a20.666667 20.666667 0 0 1 3 0.213333 21.333333 21.333333 0 0 1 15.48 10.453334l144 249.413333a10.666667 10.666667 0 0 0 14.566667 3.906667l129.333333-74.666667a10.666667 10.666667 0 0 0 3.906667-14.573333l-144-249.413334a21.333333 21.333333 0 0 1 12.546667-31.16l184.053333-53.286666L384 228.953333v595.633334l138.18-132.76a21.333333 21.333333 0 0 1 14.773333-5.946667zM298.666667 661.333333a21.333333 21.333333 0 0 0-21.333334-21.333333H96a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667h746.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v266.666667a21.333333 21.333333 0 0 0 42.666667 0V96a53.393333 53.393333 0 0 0-53.333333-53.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333333v533.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h181.333333a21.333333 21.333333 0 0 0 21.333334-21.333334z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/components/CollapsibleNavBar/types.ts

@@ -5,9 +5,10 @@ export interface CollapsibleNavBarItem extends NavBarExtendedItem {
   css?: React.CSSProperties;
 }
 
-export interface CollapsibleNavBarGroup extends Required<NavBarExtendedGroup> {
+export interface CollapsibleNavBarGroup extends NavBarExtendedGroup {
   iconSize: number;
   css?: React.CSSProperties;
+  prefix: string;
 }
 
 export interface CollapsibleNavBarExtendedProps {

package/src/components/NavBar/types.ts

@@ -1,3 +1,4 @@
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { IMapIcons } from '@ssa-ui-kit/core';
 
 export interface INavBarProps {
@@ -5,12 +6,14 @@ export interface INavBarProps {
 }
 
 export type NavBarExtendedItem = {
+  CustomIcon?: () => EmotionJSX.Element;
   path: string;
   iconName: keyof IMapIcons;
   title: string;
 };
 
 export type NavBarExtendedGroup = {
+  CustomIcon?: () => EmotionJSX.Element;
   prefix?: string;
   iconName: keyof IMapIcons;
   title: string;

package/src/components/TradingInfoCard/TradingInfoCard.stories.tsx

@@ -24,7 +24,7 @@ export const Default: StoryObj<typeof TradingInfoCard> = (
 };
 
 Default.args = {
-  value: '500',
+  value: 500.55,
   unit: 'USD',
   title: 'Turnover',
 };

package/src/components/TradingInfoCard/TradingInfoCard.tsx

@@ -5,34 +5,24 @@ import TradingInfoCardTooltip from './TradingInfoCardTooltip';
 import TradingInfoCardWrapper from './TradingInfoCardWrapper';
 import { ITradingInfoCardProps } from './types';
 
-const TradingInfoCard = ({
+const TradingInfoCardView = ({
   value,
   unit,
   title,
-  onClick,
   icon,
   link,
+  onClick,
 }: ITradingInfoCardProps) => {
   const number = Number(value);
-  const isInteger = Number.isInteger(number);
-  const currentValue = Number.isNaN(number) ? value : Math.floor(number);
+  const currentValue = Number.isNaN(number)
+    ? value
+    : number.toFixed(1).includes('.0')
+    ? Math.floor(number)
+    : number.toFixed(1);
 
   return (
     <TradingInfoCardWrapper onClick={onClick} link={link}>
-      {isInteger || Number.isNaN(number) ? (
-        <TradingInfoCardContent value={currentValue} unit={unit} icon={icon} />
-      ) : (
-        <TradingInfoCardTooltip
-          trigger={
-            <TradingInfoCardContent
-              value={currentValue}
-              unit={unit}
-              icon={icon}
-            />
-          }>
-          {value} {unit}
-        </TradingInfoCardTooltip>
-      )}
+      <TradingInfoCardContent value={currentValue} unit={unit} icon={icon} />
       <CardContent>
         <Typography css={{ fontSize: '12px' }}>{title}</Typography>
       </CardContent>
@@ -40,4 +30,20 @@ const TradingInfoCard = ({
   );
 };
 
+const TradingInfoCard = (props: ITradingInfoCardProps) => {
+  const { value, unit } = props;
+  const number = Number(value);
+  const isInteger = Number.isInteger(number);
+
+  if (isInteger || Number.isNaN(number)) {
+    return <TradingInfoCardView {...props} />;
+  } else {
+    return (
+      <TradingInfoCardTooltip trigger={<TradingInfoCardView {...props} />}>
+        {value} {unit}
+      </TradingInfoCardTooltip>
+    );
+  }
+};
+
 export default TradingInfoCard;

package/src/components/TradingScoreboard/helpers.tsx

@@ -68,7 +68,7 @@ export const oneLineBoardArr = [
     title: 'Orders',
   },
   {
-    value: '500.025',
+    value: '500.125',
     unit: 'USD',
     title: 'Turnover',
   },