@ssa-ui-kit/core 1.0.19 → 1.1.1

package/src/components/PieChart/PieChartHeader.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
+import Wrapper from '@components/Wrapper';
+import { useFullscreenMode } from '@components/FullscreenModeContext';
+import { PieChartProps } from './types';
+import { PieChartButton } from './styles';
+
+export const PieChartHeader = ({
+  features = [],
+}: Pick<PieChartProps, 'features'>) => {
+  const theme = useTheme();
+  const { toggleFullscreenMode, isFullscreenMode } = useFullscreenMode();
+
+  const handleToggleFullscreenMode = (
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    event.stopPropagation();
+    event.preventDefault();
+    toggleFullscreenMode();
+  };
+
+  if (!features.length) {
+    return <Fragment></Fragment>;
+  }
+  return (
+    <Wrapper css={{ width: 'auto', marginLeft: 'auto' }}>
+      {features.includes('fullscreenMode') && (
+        <PieChartButton variant="tertiary" onClick={handleToggleFullscreenMode}>
+          <Icon
+            name={isFullscreenMode ? 'cross' : 'maximize'}
+            css={{
+              cursor: 'pointer',
+            }}
+            tooltip={isFullscreenMode ? 'Close' : 'Maximize'}
+            size={18}
+            color={theme.colors.greyFilterIcon}
+          />
+        </PieChartButton>
+      )}
+    </Wrapper>
+  );
+};

package/src/components/PieChart/PieChartLegend.tsx

@@ -1,32 +1,56 @@
 import { useTheme } from '@emotion/react';
-import { Fragment } from 'react';
 import Typography from '@components/Typography';
 
+import { useFullscreenMode } from '@components/FullscreenModeContext';
+import Wrapper from '@components/Wrapper';
 import { PieChartLegendMarker } from './PieChartLegendMarker';
 import { PieChartLegendList } from './PieChartLegendList';
 import { PieChartLegendProps } from './types';
+import {
+  PieChartLegendListItem,
+  PieChartLegendListValueListItem,
+} from './PieChartLegendListItem';
 
 export const PieChartLegend = ({
   data,
   colors,
   backgroundColors,
-  renderLabel,
-  renderValue,
   markerStyles,
   currency,
   labelListStyles,
   valueListStyles,
   variant = 'valueList',
+  activeHighlight = false,
+  renderLabel,
+  renderValue,
 }: PieChartLegendProps) => {
   const theme = useTheme();
   const isValueList = variant === 'valueList';
+  const { isFullscreenMode, activeId, setActiveId } = useFullscreenMode();
+  const handleActiveIdChange = (newActiveId: null | number | string) => {
+    if (activeHighlight) {
+      setActiveId(newActiveId);
+    }
+  };
   return (
-    <Fragment>
-      <PieChartLegendList css={labelListStyles}>
+    <Wrapper css={{ width: 'auto' }}>
+      <PieChartLegendList
+        css={labelListStyles}
+        isFullscreenMode={isFullscreenMode}>
         {data.map((item, index) => {
           const { id, label, value, legendValue } = item;
+          const isActive = id === activeId;
           return (
-            <li key={`tag-${id}`}>
+            <PieChartLegendListItem
+              key={`tag-${id}`}
+              isActive={isActive}
+              isFullscreenMode={isFullscreenMode}
+              onMouseEnter={() => {
+                handleActiveIdChange(id);
+              }}
+              onMouseLeave={() => {
+                handleActiveIdChange(null);
+              }}>
               <PieChartLegendMarker
                 color={
                   backgroundColors ? undefined : colors?.[index] || 'purple'
@@ -36,9 +60,18 @@ export const PieChartLegend = ({
                 }
                 as={'span'}
                 css={markerStyles}
+                isFullscreenMode={isFullscreenMode}
               />
               {isValueList ? (
-                <Typography variant="h6">
+                <Typography
+                  variant="h6"
+                  css={{
+                    alignSelf: 'start',
+                    marginRight: 5,
+                    height: 'auto',
+                    lineHeight: '34px',
+                    alignContent: 'center',
+                  }}>
                   {typeof renderLabel === 'function'
                     ? renderLabel(item)
                     : label}
@@ -58,23 +91,53 @@ export const PieChartLegend = ({
                   </span>
                 </Typography>
               )}
-            </li>
+              {isValueList && isFullscreenMode && (
+                <Typography
+                  variant="subtitle"
+                  color={theme.colors.greyDarker60}
+                  css={{
+                    fontSize: isFullscreenMode ? '12px' : '0.833rem',
+                    alignContent: isFullscreenMode && 'center',
+                  }}>
+                  {typeof renderValue === 'function'
+                    ? renderValue(item)
+                    : item.value}
+                </Typography>
+              )}
+            </PieChartLegendListItem>
           );
         })}
       </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>
-          ))}
+      {isValueList && !isFullscreenMode && (
+        <PieChartLegendList
+          css={valueListStyles}
+          isFullscreenMode={isFullscreenMode}>
+          {data.map((item) => {
+            const { id } = item;
+            const isActive = id === activeId;
+            return (
+              <PieChartLegendListValueListItem
+                key={`subtitle-${id}`}
+                isActive={isActive}
+                css={{ paddingLeft: 20 }}
+                onMouseEnter={() => {
+                  handleActiveIdChange(id);
+                }}
+                onMouseLeave={() => {
+                  handleActiveIdChange(null);
+                }}>
+                <Typography
+                  variant="subtitle"
+                  color={theme.colors.greyDarker60}>
+                  {typeof renderValue === 'function'
+                    ? renderValue(item)
+                    : item.value}
+                </Typography>
+              </PieChartLegendListValueListItem>
+            );
+          })}
         </PieChartLegendList>
       )}
-    </Fragment>
+    </Wrapper>
   );
 };

package/src/components/PieChart/PieChartLegendList.tsx

@@ -1,19 +1,23 @@
 import styled from '@emotion/styled';
 
-export const PieChartLegendList = styled.ul`
+export const PieChartLegendList = styled.ul<{ isFullscreenMode?: boolean }>`
   display: flex;
-  flex-flow: column;
   justify-content: center;
   list-style: none;
+  flex-flow: ${({ isFullscreenMode }) =>
+    isFullscreenMode ? 'row wrap' : 'column nowrap'};
 
-  height: 100%;
   padding: 0;
-  margin: 0;
-  gap: 14px;
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? 'auto' : '100%')};
+  margin: ${({ isFullscreenMode }) => (isFullscreenMode ? '40px 0 50px' : 0)};
+  gap: ${({ isFullscreenMode }) => (isFullscreenMode ? '0 20px' : 0)};
 
   li {
+    height: 34px;
     display: flex;
     align-items: center;
-    height: 20px;
+    text-align: left;
+    white-space: nowrap;
+    padding-right: ${({ isFullscreenMode }) => isFullscreenMode && '12px'};
   }
 `;

package/src/components/PieChart/PieChartLegendListItem.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+
+export const PieChartLegendListItem = styled.li<{
+  isFullscreenMode?: boolean;
+  isActive?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? 'auto' : '22px')};
+  padding-right: ${({ isFullscreenMode }) => !isFullscreenMode && '5px'};
+  background: ${({ isActive, theme }) =>
+    isActive && `${theme.colors.greyLighter}`};
+  border-radius: ${({ isFullscreenMode, isActive }) =>
+    isFullscreenMode && isActive && '5px'};
+  border-top-left-radius: ${({ isFullscreenMode, isActive }) =>
+    !isFullscreenMode && isActive && '5px'};
+  border-bottom-left-radius: ${({ isFullscreenMode, isActive }) =>
+    !isFullscreenMode && isActive && '5px'};
+`;
+
+export const PieChartLegendListValueListItem = styled.li<{
+  isActive?: boolean;
+}>`
+  padding: 0 12px 0 20px;
+  justify-content: flex-start;
+  background: ${({ isActive, theme }) =>
+    isActive && `${theme.colors.greyLighter}`};
+  border-top-right-radius: ${({ isActive }) => isActive && '5px'};
+  border-bottom-right-radius: ${({ isActive }) => isActive && '5px'};
+`;

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -1,11 +1,17 @@
 import styled from '@emotion/styled';
 import Badge from '@components/Badge';
 
-export const PieChartLegendMarker = styled(Badge)<{ background?: string }>`
-  display: inline-block;
+export const PieChartLegendMarker = styled(Badge)<{
+  background?: string;
+  isFullscreenMode?: boolean;
+}>`
+  display: flex;
+  align-self: center;
+  margin-right: 12px;
+  margin-left: 12px;
+  margin-top: ${({ isFullscreenMode }) => !isFullscreenMode && '2px'};
 
   padding: 0;
-  margin-right: 12px;
 
   width: 8px;
   height: 8px;

package/src/components/PieChart/colorPalettes.ts

@@ -10,6 +10,8 @@ export const getBalancePalette = (theme: Theme) => {
     'turquoise',
     'pink',
     'purple',
+    '#6C94F7',
+    '#55D6D2',
   ] as unknown as Array<keyof MainColors>;
 
   const pieChartColors = [
@@ -21,6 +23,8 @@ export const getBalancePalette = (theme: Theme) => {
     theme.colors.turquoise,
     theme.colors.pink,
     theme.colors.purple,
+    '#6C94F7',
+    '#55D6D2',
   ] as unknown as string[];
 
   return { legendColorNames, pieChartColors };

package/src/components/PieChart/stories/fixtures.ts

@@ -37,3 +37,56 @@ export const accountData = [
     label: 'Other',
   },
 ];
+
+export const eventsDataBig = [
+  {
+    id: 1,
+    value: 500,
+    label: 'Event first',
+  },
+  {
+    id: 2,
+    value: 305,
+    label: 'Event second',
+  },
+  {
+    id: 3,
+    value: 789,
+    label: 'Event third',
+  },
+  {
+    id: 4,
+    value: 120,
+    label: 'Event fourth',
+  },
+  {
+    id: 5,
+    value: 39,
+    label: 'Event fifth',
+  },
+  {
+    id: 6,
+    value: 995,
+    label: 'Event sixth',
+  },
+  {
+    id: 7,
+    value: 753,
+    label: 'Event seventh',
+  },
+  {
+    id: 8,
+    value: 183,
+    label: 'Event eighth',
+  },
+  {
+    id: 9,
+    value: 683,
+    label: 'Event ninth',
+  },
+  {
+    id: 10,
+    value: 359,
+    label: 'Event tenth',
+  },
+];

package/src/components/PieChart/styles.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+import Button from '@components/Button';
+
+export const PieChartButton = styled(Button)`
+  height: auto;
+  padding: 0;
+  background: none;
+  box-shadow: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    box-shadow: none;
+    &:before {
+      display: none;
+    }
+  }
+
+  &:hover {
+    svg path {
+      fill: ${({ theme }) => theme.colors.greyDarker};
+    }
+  }
+`;

package/src/components/PieChart/types.ts

@@ -1,12 +1,21 @@
 import { SerializedStyles } from '@emotion/react';
 import { ResponsivePie, MayHaveLabel } from '@nivo/pie';
-import { CommonProps } from '../..';
+import { CommonProps, WidgetCardProps } from '../..';
 
+export type PieChartFeatures =
+  | 'header'
+  | 'fullscreenMode'
+  | 'activeItemAnimation';
 export interface PieChartProps
   extends CommonProps,
     React.ComponentProps<typeof ResponsivePie> {
   title?: React.ReactNode;
   children?: React.ReactNode;
+  width?: string;
+  features?: Array<PieChartFeatures>;
+  cardProps?: Omit<WidgetCardProps, 'children'>;
+  activeHighlight?: boolean;
+  onFullscreenModeChange?: (isFullscreenMode: boolean) => void;
 }
 
 export interface PieChartLegendItem extends MayHaveLabel {
@@ -18,14 +27,15 @@ export interface PieChartLegendItem extends MayHaveLabel {
 
 export interface PieChartLegendProps {
   data: Array<PieChartLegendItem>;
-  colors?: Array<keyof MainColors>;
+  activeHighlight?: boolean;
+  colors?: Array<keyof MainColors | string>;
   backgroundColors?: Array<string>;
-  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
-  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   className?: string;
   markerStyles?: SerializedStyles;
   currency?: string;
   labelListStyles?: SerializedStyles;
   valueListStyles?: SerializedStyles;
   variant?: 'valueList' | 'withoutValueList';
+  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
+  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
 }

package/src/components/SegmentedPieChart/SegmentedPieChart.tsx

@@ -52,7 +52,7 @@ export const SegmentedPieChart = ({
         data={balanceDataForTheGraph}
         animate={true}
         css={{
-          width: 400,
+          width: '400px',
           margin: '40px 120px',
         }}
         isInteractive

package/src/components/WidgetCard/Content.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import CardContent from '@components/CardContent';
+
+export const Content = styled(CardContent)<{ isFullscreenMode?: boolean }>`
+  max-width: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : '406px')};
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 5px;
+  height: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : 'auto')};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    max-width: initial;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: initial;
+  }
+`;

package/src/components/WidgetCard/Header.tsx

@@ -0,0 +1,45 @@
+import { Fragment } from 'react';
+import { Interpolation, Theme, css, useTheme } from '@emotion/react';
+import CardHeader from '@components/CardHeader';
+import { WidgetCardTitle } from './Title';
+import { WidgetCardProps } from './types';
+
+type HeaderProps = {
+  className?: string;
+  children?: React.ReactNode;
+  titleCSS?: Interpolation<Theme>;
+} & Pick<WidgetCardProps, 'title'>;
+
+export const Header = ({
+  title,
+  className,
+  children,
+  titleCSS,
+}: HeaderProps) => {
+  const theme = useTheme();
+
+  return (
+    <CardHeader
+      css={css`
+        margin-bottom: 5px;
+        ${theme.mediaQueries.md} {
+          margin-bottom: 10px;
+        }
+      `}
+      className={className}>
+      <WidgetCardTitle
+        variant="h3"
+        weight="bold"
+        css={[
+          css`
+            flex-direction: row;
+            width: 100%;
+          `,
+          titleCSS,
+        ]}>
+        {title}
+        {children && <Fragment>{children}</Fragment>}
+      </WidgetCardTitle>
+    </CardHeader>
+  );
+};

package/src/components/WidgetCard/Title.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+import Typography from '@components/Typography';
+
+export const WidgetCardTitle = styled(Typography)`
+  display: flex;
+  font-size: 16px;
+  ${({ theme }) => theme.mediaQueries.md} {
+    font-size: 20px;
+  }
+`;

package/src/components/WidgetCard/WidgetCard.tsx

@@ -0,0 +1,38 @@
+import { useFullscreenMode, WithLink } from '@components';
+import { WidgetCardBase } from './WidgetCardBase';
+import { Header } from './Header';
+import { Content } from './Content';
+import { WidgetCardProps } from './types';
+
+export const WidgetCard = ({
+  title,
+  className,
+  wrapperClassName,
+  contentClassName,
+  headerClassName,
+  headerContent,
+  link,
+  width,
+  children,
+  onClick,
+}: WidgetCardProps) => {
+  const { isFullscreenMode } = useFullscreenMode();
+  return (
+    <WithLink link={link} onClick={onClick} className={wrapperClassName}>
+      <WidgetCardBase
+        className={className}
+        onClick={link ? undefined : onClick}
+        isFullscreenMode={isFullscreenMode}
+        width={width}>
+        <Header title={title} className={headerClassName}>
+          {headerContent}
+        </Header>
+        <Content
+          className={contentClassName}
+          isFullscreenMode={isFullscreenMode}>
+          {children}
+        </Content>
+      </WidgetCardBase>
+    </WithLink>
+  );
+};

package/src/components/WidgetCard/WidgetCardBase.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import Card from '@components/Card';
+
+export const WidgetCardBase = styled(Card)<{
+  isFullscreenMode?: boolean;
+  width?: string;
+}>`
+  border-radius: 20px;
+  padding: 5px 10px;
+  width: ${({ isFullscreenMode, width }) =>
+    isFullscreenMode ? '100%' : width};
+  height: 100%;
+  position: ${({ isFullscreenMode }) =>
+    isFullscreenMode ? 'absolute' : 'static'};
+  top: ${({ isFullscreenMode }) => isFullscreenMode && 0};
+  left: ${({ isFullscreenMode }) => isFullscreenMode && 0};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding: 12px 20px 11px;
+  }
+
+  box-shadow: 0 10px 40px 0 ${({ theme }) => theme.colors.greyShadow};
+`;

package/src/components/WidgetCard/WithWidgetCard.tsx

@@ -0,0 +1,18 @@
+import { PieChartProps } from '@components/PieChart';
+import { WidgetCard } from './WidgetCard';
+
+export const WithWidgetCard = ({
+  children,
+  features = [],
+  cardProps = {},
+  width,
+}: {
+  children: React.ReactNode;
+} & Pick<PieChartProps, 'features' | 'cardProps' | 'width'>) =>
+  features && features.includes('header') ? (
+    <WidgetCard {...cardProps} width={width}>
+      {children}
+    </WidgetCard>
+  ) : (
+    children
+  );

package/src/components/WidgetCard/index.ts

@@ -0,0 +1,5 @@
+export * from './WidgetCard';
+export * from './WithWidgetCard';
+export * from './WidgetCardBase';
+export * from './Title';
+export * from './types';

package/src/components/WidgetCard/types.ts

@@ -0,0 +1,14 @@
+import type { To } from 'react-router-dom';
+
+export type WidgetCardProps = {
+  title?: React.ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  contentClassName?: string;
+  headerClassName?: string;
+  headerContent?: React.ReactNode;
+  link?: To;
+  children?: React.ReactNode;
+  width?: string;
+  onClick?: () => void;
+};

package/src/components/WithLink.tsx

@@ -0,0 +1,30 @@
+import { Link, To } from 'react-router-dom';
+import { css } from '@emotion/react';
+
+export const WithLink = ({
+  link,
+  onClick,
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  link?: To;
+}) =>
+  link ? (
+    <Link
+      to={link}
+      onClick={onClick}
+      className={className}
+      css={css`
+        text-decoration: none;
+        div {
+          cursor: pointer;
+        }
+      `}>
+      {children}
+    </Link>
+  ) : (
+    children
+  );