@ssa-ui-kit/widgets 0.0.7-alpha → 0.0.8-alpha

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

@@ -1,118 +1,118 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Icon } from '@ssa-ui-kit/core';
-import TradingInfoCard from './TradingInfoCard';
-import { ITradingInfoCardProps } from './types';
-
-export default {
-  title: 'Widgets/TradingInfoCard',
-  component: TradingInfoCard,
-} as Meta<typeof TradingInfoCard>;
-
-export const Default: StoryObj<typeof TradingInfoCard> = (
-  args: ITradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-Default.args = {
-  value: '500',
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithLink: StoryObj<typeof TradingInfoCard> = (
-  args: ITradingInfoCardProps,
-) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <TradingInfoCard
-              value={args.value}
-              unit={args.unit}
-              title={args.title}
-              icon={args.icon}
-              link={'/link'}
-            />
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {
-  value: '500',
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithTooltip: StoryObj<typeof TradingInfoCard> = (
-  args: ITradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-WithTooltip.args = {
-  value: '500.025',
-  unit: 'USD',
-  title: 'Turnover',
-};
-
-export const WithIcon: StoryObj<typeof TradingInfoCard> = (
-  args: ITradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-      onClick={() => alert('clicked!')}
-    />
-  );
-};
-
-WithIcon.args = {
-  value: '500.025',
-  unit: 'USD',
-  title: 'Turnover',
-  icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
-};
-
-export const WithoutUnit: StoryObj<typeof TradingInfoCard> = (
-  args: ITradingInfoCardProps,
-) => {
-  return (
-    <TradingInfoCard
-      value={args.value}
-      unit={args.unit}
-      title={args.title}
-      icon={args.icon}
-    />
-  );
-};
-
-WithoutUnit.args = {
-  value: 'ETH/USDT',
-  title: 'Pairs',
-};
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '@ssa-ui-kit/core';
+import TradingInfoCard from './TradingInfoCard';
+import { ITradingInfoCardProps } from './types';
+
+export default {
+  title: 'Widgets/TradingInfoCard',
+  component: TradingInfoCard,
+} as Meta<typeof TradingInfoCard>;
+
+export const Default: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+Default.args = {
+  value: '500',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithLink: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <TradingInfoCard
+              value={args.value}
+              unit={args.unit}
+              title={args.title}
+              icon={args.icon}
+              link={'/link'}
+            />
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {
+  value: '500',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithTooltip: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+WithTooltip.args = {
+  value: '500.025',
+  unit: 'USD',
+  title: 'Turnover',
+};
+
+export const WithIcon: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+      onClick={() => alert('clicked!')}
+    />
+  );
+};
+
+WithIcon.args = {
+  value: '500.025',
+  unit: 'USD',
+  title: 'Turnover',
+  icon: <Icon name="arrow-up" color="#2CA24D" size={16} />,
+};
+
+export const WithoutUnit: StoryObj<typeof TradingInfoCard> = (
+  args: ITradingInfoCardProps,
+) => {
+  return (
+    <TradingInfoCard
+      value={args.value}
+      unit={args.unit}
+      title={args.title}
+      icon={args.icon}
+    />
+  );
+};
+
+WithoutUnit.args = {
+  value: 'ETH/USDT',
+  title: 'Pairs',
+};

package/src/components/TradingInfoCard/TradingInfoCard.tsx

@@ -1,43 +1,43 @@
-import { CardContent, Typography } from '@ssa-ui-kit/core';
-
-import TradingInfoCardContent from './TradingInfoCardContent';
-import TradingInfoCardTooltip from './TradingInfoCardTooltip';
-import TradingInfoCardWrapper from './TradingInfoCardWrapper';
-import { ITradingInfoCardProps } from './types';
-
-const TradingInfoCard = ({
-  value,
-  unit,
-  title,
-  onClick,
-  icon,
-  link,
-}: ITradingInfoCardProps) => {
-  const number = Number(value);
-  const isInteger = Number.isInteger(number);
-  const currentValue = Number.isNaN(number) ? value : Math.floor(number);
-
-  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>
-      )}
-      <CardContent>
-        <Typography css={{ fontSize: '12px' }}>{title}</Typography>
-      </CardContent>
-    </TradingInfoCardWrapper>
-  );
-};
-
-export default TradingInfoCard;
+import { CardContent, Typography } from '@ssa-ui-kit/core';
+
+import TradingInfoCardContent from './TradingInfoCardContent';
+import TradingInfoCardTooltip from './TradingInfoCardTooltip';
+import TradingInfoCardWrapper from './TradingInfoCardWrapper';
+import { ITradingInfoCardProps } from './types';
+
+const TradingInfoCard = ({
+  value,
+  unit,
+  title,
+  onClick,
+  icon,
+  link,
+}: ITradingInfoCardProps) => {
+  const number = Number(value);
+  const isInteger = Number.isInteger(number);
+  const currentValue = Number.isNaN(number) ? value : Math.floor(number);
+
+  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>
+      )}
+      <CardContent>
+        <Typography css={{ fontSize: '12px' }}>{title}</Typography>
+      </CardContent>
+    </TradingInfoCardWrapper>
+  );
+};
+
+export default TradingInfoCard;

package/src/components/TradingInfoCard/TradingInfoCardContent.tsx

@@ -1,32 +1,32 @@
-import { useTheme } from '@emotion/react';
-import { CardContent, Typography } from '@ssa-ui-kit/core';
-
-import { TradingInfoContent } from './types';
-
-const TradingInfoCardContent = ({ value, unit, icon }: TradingInfoContent) => {
-  const theme = useTheme();
-  return (
-    <CardContent
-      css={{
-        justifyContent: 'flex-start',
-        alignItems: 'baseline',
-        gap: '2px',
-      }}>
-      <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
-        {value}
-      </Typography>
-      {unit ? (
-        <Typography data-testid="unit" variant="h6" weight="lighter">
-          {unit}
-        </Typography>
-      ) : null}
-      {icon ? (
-        <div css={{ display: 'flex', alignSelf: 'center', marginLeft: '3px' }}>
-          {icon}
-        </div>
-      ) : null}
-    </CardContent>
-  );
-};
-
-export default TradingInfoCardContent;
+import { useTheme } from '@emotion/react';
+import { CardContent, Typography } from '@ssa-ui-kit/core';
+
+import { TradingInfoContent } from './types';
+
+const TradingInfoCardContent = ({ value, unit, icon }: TradingInfoContent) => {
+  const theme = useTheme();
+  return (
+    <CardContent
+      css={{
+        justifyContent: 'flex-start',
+        alignItems: 'baseline',
+        gap: '2px',
+      }}>
+      <Typography variant="h5" weight="bold" color={theme.colors.greyDarker}>
+        {value}
+      </Typography>
+      {unit ? (
+        <Typography data-testid="unit" variant="h6" weight="lighter">
+          {unit}
+        </Typography>
+      ) : null}
+      {icon ? (
+        <div css={{ display: 'flex', alignSelf: 'center', marginLeft: '3px' }}>
+          {icon}
+        </div>
+      ) : null}
+    </CardContent>
+  );
+};
+
+export default TradingInfoCardContent;

package/src/components/TradingInfoCard/TradingInfoCardTooltip.tsx

@@ -1,47 +1,47 @@
-import { css, useTheme } from '@emotion/react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  Typography,
-} from '@ssa-ui-kit/core';
-
-import { ITradingInfoCardTooltipProps } from './types';
-
-const TradingInfoCardTooltip = ({
-  trigger,
-  children,
-}: ITradingInfoCardTooltipProps) => {
-  const theme = useTheme();
-  return (
-    <Tooltip
-      offsetPx={0}
-      enableHover={true}
-      enableClick={false}
-      arrowProps={{
-        width: 18,
-        height: 3,
-        fill: theme.colors.greyGraphite,
-      }}>
-      <TooltipTrigger>
-        <div data-testid="tooltip-trigger">{trigger}</div>
-      </TooltipTrigger>
-      <TooltipContent
-        css={css`
-          padding: 4px 5px;
-          border-radius: 2px;
-          background: ${theme.colors.greyGraphite};
-
-          svg {
-            margin-bottom: -1px;
-          }
-        `}>
-        <Typography css={{ fontSize: '12px' }} color={theme.colors.white}>
-          {children}
-        </Typography>
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-export default TradingInfoCardTooltip;
+import { css, useTheme } from '@emotion/react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  Typography,
+} from '@ssa-ui-kit/core';
+
+import { ITradingInfoCardTooltipProps } from './types';
+
+const TradingInfoCardTooltip = ({
+  trigger,
+  children,
+}: ITradingInfoCardTooltipProps) => {
+  const theme = useTheme();
+  return (
+    <Tooltip
+      offsetPx={0}
+      enableHover={true}
+      enableClick={false}
+      arrowProps={{
+        width: 18,
+        height: 3,
+        fill: theme.colors.greyGraphite,
+      }}>
+      <TooltipTrigger>
+        <div data-testid="tooltip-trigger">{trigger}</div>
+      </TooltipTrigger>
+      <TooltipContent
+        css={css`
+          padding: 4px 5px;
+          border-radius: 2px;
+          background: ${theme.colors.greyGraphite};
+
+          svg {
+            margin-bottom: -1px;
+          }
+        `}>
+        <Typography css={{ fontSize: '12px' }} color={theme.colors.white}>
+          {children}
+        </Typography>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export default TradingInfoCardTooltip;

package/src/components/TradingInfoCard/TradingInfoCardWrapper.tsx

@@ -1,72 +1,72 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Theme, css } from '@emotion/react';
-import { CardBase } from '@ssa-ui-kit/core';
-import { ITradingInfoCardWrapperProps } from './types';
-
-const infoCardWrapper = (theme: Theme) => css`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: max-content;
-  min-width: 100%;
-  background: ${theme.colors.greyLighter};
-  padding: 4px 10px;
-  border-radius: 6px;
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  box-shadow: none;
-  user-select: none;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
-    content: '';
-  }
-
-  &:active {
-    background: ${theme.colors.white};
-
-    &::before {
-      border-radius: 6px;
-      box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow24};
-    }
-  }
-`;
-
-const TradingInfoCardWrapper = ({
-  onClick,
-  link,
-  children,
-}: ITradingInfoCardWrapperProps) => {
-  return (
-    <React.Fragment>
-      {link ? (
-        <Link to={link} css={infoCardWrapper}>
-          {children}
-        </Link>
-      ) : (
-        <CardBase
-          role={onClick ? 'button' : 'region'}
-          tabIndex={onClick ? 0 : -1}
-          onClick={() => {
-            if (typeof onClick === 'function') {
-              onClick();
-            }
-          }}
-          css={infoCardWrapper}>
-          {children}
-        </CardBase>
-      )}
-    </React.Fragment>
-  );
-};
-
-export default TradingInfoCardWrapper;
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Theme, css } from '@emotion/react';
+import { CardBase } from '@ssa-ui-kit/core';
+import { ITradingInfoCardWrapperProps } from './types';
+
+const infoCardWrapper = (theme: Theme) => css`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: max-content;
+  min-width: 100%;
+  background: ${theme.colors.greyLighter};
+  padding: 4px 10px;
+  border-radius: 6px;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow: none;
+  user-select: none;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow};
+    content: '';
+  }
+
+  &:active {
+    background: ${theme.colors.white};
+
+    &::before {
+      border-radius: 6px;
+      box-shadow: 0 10px 40px 0 ${theme.colors.greyShadow24};
+    }
+  }
+`;
+
+const TradingInfoCardWrapper = ({
+  onClick,
+  link,
+  children,
+}: ITradingInfoCardWrapperProps) => {
+  return (
+    <React.Fragment>
+      {link ? (
+        <Link to={link} css={infoCardWrapper}>
+          {children}
+        </Link>
+      ) : (
+        <CardBase
+          role={onClick ? 'button' : 'region'}
+          tabIndex={onClick ? 0 : -1}
+          onClick={() => {
+            if (typeof onClick === 'function') {
+              onClick();
+            }
+          }}
+          css={infoCardWrapper}>
+          {children}
+        </CardBase>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default TradingInfoCardWrapper;

package/src/components/TradingInfoCard/index.ts

@@ -1,3 +1,3 @@
-export { default as TradingInfoCard } from './TradingInfoCard';
-export * from './types';
-export * from './TradingInfoCardTooltip';
+export { default as TradingInfoCard } from './TradingInfoCard';
+export * from './types';
+export * from './TradingInfoCardTooltip';