@ssa-ui-kit/core 1.1.0 → 1.1.1

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,13 +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?: number;
+  width?: string;
+  features?: Array<PieChartFeatures>;
+  cardProps?: Omit<WidgetCardProps, 'children'>;
+  activeHighlight?: boolean;
+  onFullscreenModeChange?: (isFullscreenMode: boolean) => void;
 }
 
 export interface PieChartLegendItem extends MayHaveLabel {
@@ -19,14 +27,15 @@ export interface PieChartLegendItem extends MayHaveLabel {
 
 export interface PieChartLegendProps {
   data: Array<PieChartLegendItem>;
+  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
+  );

package/src/components/index.ts

@@ -1,4 +1,3 @@
-export * from './AccordionGroup';
 export { default as Avatar } from './Avatar';
 export { default as Badge } from './Badge';
 export { default as Button } from './Button';
@@ -6,100 +5,104 @@ export { default as Card } from './Card';
 export { default as CardBase } from './Card/CardBase';
 export { default as CardContent } from './CardContent';
 export { default as CardHeader } from './CardHeader';
-export { default as ColorPicker } from './ColorPicker';
 export { default as Checkbox } from './Checkbox';
-export * from './Checkbox';
-export { default as FormCheckbox } from './FormCheckbox';
-export * from './FormCheckbox';
+export { default as ColorPicker } from './ColorPicker';
 export { default as Dropdown } from './Dropdown';
 export { default as DropdownArrow } from './DropdownArrow';
 export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
 export { default as DropdownOptions } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';
-export type { DropdownOptionProps } from './DropdownOptions';
+export { default as Form } from './Form';
+export { default as FormAction } from './FormAction';
+export { default as FormCheckbox } from './FormCheckbox';
+export { default as FormGroup } from './FormGroup';
+export { default as FormHelperText } from './FormHelperText';
+export { default as FormRadioGroup } from './FormRadioGroup';
 export { default as Icon } from './Icon';
-export * from './Icon';
-export * from './Icon/types';
+export { default as Indicator } from './Indicator';
 export { default as Input } from './Input';
 export { default as Label } from './Label';
+export { default as LargeTab } from './LargeTab';
+export { default as Link } from './Link';
 export { default as Modal } from './Modal';
-export { default as ModalDismissButton } from './ModalDismissButton';
 export { default as ModalContent } from './ModalContent';
-export { default as ModalOpenButton } from './ModalOpenButton';
 export { default as ModalDialog } from './ModalDialog';
-export * from './Modal';
-export * from './Popover';
+export { default as ModalDismissButton } from './ModalDismissButton';
+export { default as ModalOpenButton } from './ModalOpenButton';
 export { default as MultipleDropdown } from './MultipleDropdown';
 export { default as MultipleDropdownNotification } from './MultipleDropdownNotification';
 export { default as MultipleDropdownOptions } from './MultipleDropdownOptions';
+export { default as NavBar } from './NavBar';
 export { default as Progress } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressCircle } from './ProgressCircle';
+export { default as ProgressInfo } from './ProgressInfo';
 export { default as ProgressLegend } from './ProgressLegend';
 export { default as ProgressLegendItem } from './ProgressLegendItem';
 export { default as ProgressVertical } from './ProgressVertical';
-export { default as Stepper } from './Stepper';
+export { default as Radio } from './Radio';
+export { default as RadioGroup } from './RadioGroup';
+export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Step } from './Step';
 export { default as StepConnector } from './StepConnector';
 export { default as StepLabel } from './StepLabel';
+export { default as Stepper } from './Stepper';
 export { default as Switch } from './Switch';
-export * from './Switch';
+export { default as Tab } from './Tab';
+export { default as TabBar } from './TabBar';
 export { default as Table } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
 export { default as TableHead } from './TableHead';
 export { default as TableRow } from './TableRow';
-export { default as TableCell } from './TableCell';
-export { default as TableBody } from './TableBody';
-export { default as Tooltip } from './Tooltip';
-export { default as TooltipTrigger } from './TooltipTrigger';
-export { default as TooltipContent } from './TooltipContent';
-export * from './Tooltip';
-export { default as TabBar } from './TabBar';
-export { default as Tab } from './Tab';
-export { default as LargeTab } from './LargeTab';
-export * from './TabBar';
 export { default as Tag } from './Tag';
-export * from './Tag';
 export { default as Textarea } from './Textarea';
-export * from './Textarea';
 export { default as TextField } from './TextField';
-export * from './TextField';
+export { default as Tooltip } from './Tooltip';
+export { default as TooltipContent } from './TooltipContent';
+export { default as TooltipTrigger } from './TooltipTrigger';
 export { default as Typography } from './Typography';
-export * from './Typography';
 export { default as Wrapper } from './Wrapper';
-export * from './Wrapper';
-export { default as Radio } from './Radio';
-export { default as RadioGroup } from './RadioGroup';
-export { default as FormRadioGroup } from './FormRadioGroup';
-export { default as ResponsiveImage } from './ResponsiveImage';
-export * from './ResponsiveImage';
-export { default as Form } from './Form';
-export { default as FormGroup } from './FormGroup';
-export { default as FormAction } from './FormAction';
-export { default as FormHelperText } from './FormHelperText';
-export { default as Indicator } from './Indicator';
+export * from './AccordionGroup';
+export * from './AddNewAccountCard';
 export * from './ButtonGroup';
-export { default as Link } from './Link';
-export * from './WithVisibleLG';
-export * from './WithVisibleMD';
-export * from './WithVisibleSM';
-export * from './WithVisibleUpToLG';
-export { default as NavBar } from './NavBar';
-export * from './NavBar';
-export { default as ProgressInfo } from './ProgressInfo';
-export * from './ProgressInfo';
 export * from './CardList';
-export * from './Pagination';
-export * from './NotificationCard';
+export * from './Checkbox';
+export * from './CollapsibleNavBar';
+export * from './Filters';
+export * from './FormCheckbox';
+export * from './FullscreenModeContext';
+export * from './Icon';
+export * from './Icon/types';
+export * from './ImageItem';
 export * from './LinksTabBar';
+export * from './Modal';
+export * from './NavBar';
+export * from './NotificationCard';
 export * from './NotificationMenu';
-export * from './SearchBox';
-export * from './UserProfile';
-export * from './AddNewAccountCard';
+export * from './Pagination';
 export * from './PieChart';
+export * from './Popover';
+export * from './ProgressInfo';
+export * from './ResponsiveImage';
+export * from './SearchBox';
 export * from './SegmentedPieChart';
-export * from './CollapsibleNavBar';
-export * from './Filters';
+export * from './Switch';
+export * from './TabBar';
 export * from './TableFilters';
+export * from './Tag';
+export * from './Textarea';
+export * from './TextField';
+export * from './Tooltip';
 export * from './Typeahead';
-export * from './ImageItem';
+export * from './Typography';
+export * from './UserProfile';
+export * from './WidgetCard';
+export * from './WithLink';
+export * from './WithVisibleLG';
+export * from './WithVisibleMD';
+export * from './WithVisibleSM';
+export * from './WithVisibleUpToLG';
+export * from './Wrapper';
+export type { DropdownOptionProps } from './DropdownOptions';

package/src/themes/main.ts

@@ -37,6 +37,7 @@ const main: Theme = {
     greyGraphite: 'rgba(71, 74, 80, 1)', //#474a50
     greyGraphite70: 'rgb(122, 124, 127, 0.7)', // #7a7c7f
     greyShadow: 'rgba(42, 48, 57, 0.08)', // #2a3039
+    greyShadow16: 'rgba(42, 48, 57, 0.16)', // #2a303929
     greyShadowHover: 'rgba(93, 102, 112, 0.24)', // #5d6670
     greyOutline: 'rgba(208,	210,	220, 1)', // #d0d2dc
     greyFilterIcon: 'rgb(133, 137, 147)', // #858993

package/src/types/emotion.ts

@@ -21,6 +21,7 @@ type Colors = MakeColors<
     'grey',
     'grey20',
     'grey40',
+    'greyShadow16',
     'greyShadow24',
     'greyDarker',
     'greyDarker40',