@ssa-ui-kit/core 1.0.18 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.18",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Badge/Badge.stories.tsx

@@ -154,3 +154,11 @@ WithIcon.argTypes = {
     control: false,
   },
 };
+
+export const WithCustomColor = () => {
+  return (
+    <Badge color={'#F7931A'} size="medium">
+      Custom color
+    </Badge>
+  );
+};

package/src/components/Badge/Badge.tsx

@@ -36,7 +36,17 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
   ref,
 ) {
   return (
-    <BadgeBase ref={ref} css={[mapColors[color], mapSizes[size]]} {...props}>
+    <BadgeBase
+      ref={ref}
+      css={[
+        color in mapColors
+          ? mapColors[color as keyof MainColors]
+          : {
+              background: color,
+            },
+        mapSizes[size],
+      ]}
+      {...props}>
       {children ? children : null}
     </BadgeBase>
   );

package/src/components/Badge/types.ts

@@ -1,5 +1,5 @@
 export interface BadgeProps {
-  color?: keyof MainColors;
+  color?: keyof MainColors | string;
   size?: keyof MainSizes;
   children?: React.ReactNode;
   as?: React.ElementType;

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -141,6 +141,68 @@ describe('Dropdown', () => {
     }
   });
 
+  it('Selected item changed successfully', async () => {
+    const selectedItem = items[2];
+    const {
+      user,
+      mockOnChange,
+      getByRole,
+      queryByRole,
+      getByTestId,
+      rerender,
+    } = setup({
+      selectedItem,
+    });
+
+    expect(mockOnChange).not.toBeCalled();
+
+    let dropdownEl = getByTestId('dropdown');
+
+    let dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    let listboxEl = queryByRole('listbox');
+
+    await user.click(dropdownToggleEl);
+
+    listboxEl = getByRole('listbox');
+    const listItemEls = within(listboxEl).getAllByRole('listitem');
+
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+
+    await within(dropdownToggleEl).findByTitle('Carrot up');
+
+    for (let i = 0; i < items.length; ++i) {
+      const listItem = items[i];
+      const listItemEl = listItemEls[i];
+
+      const itemListValue = getListItemValue(listItem);
+
+      await within(listItemEl).findByText(itemListValue);
+      expect(within(listItemEl).getByRole('button')).toHaveTextContent(
+        itemListValue,
+      );
+
+      if (listItem.id === selectedItem.id) {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'true');
+        expect(listItemEl).toHaveStyle('background: #DEE1EC');
+      } else {
+        expect(listItemEl).toHaveAttribute('aria-selected', 'false');
+      }
+    }
+
+    rerender(
+      <Dropdown onChange={mockOnChange} selectedItem={items[0]}>
+        {items.map((item, index) => (
+          <DropdownOption key={index} value={item.value} />
+        ))}
+      </Dropdown>,
+    );
+
+    dropdownEl = getByTestId('dropdown');
+    dropdownToggleEl = within(dropdownEl).getByRole('combobox');
+    expect(dropdownToggleEl).toHaveTextContent(getListItemValue(items[0]));
+  });
+
   it('Renders with an empty items array', async () => {
     const mockOnChange = jest.fn();
     const { getByTestId, queryByRole, getByRole } = render(

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
 import DropdownOption from '@components/DropdownOption';
-
+import Button from '@components/Button';
 import Dropdown from './Dropdown';
 import { DropdownProps } from './types';
 import { DropdownOptionProps } from '../..';
@@ -153,3 +153,28 @@ export const Custom: StoryObj = (args: Args) => {
 Custom.args = {
   isDisabled: false,
 };
+
+export const DynamicallyChangedSelectedItem: StoryObj = (args: Args) => {
+  const [selectedIndex, setSelectedIndex] = useState(1);
+
+  const handleUpdate = () => {
+    const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
+    setSelectedIndex(newIndex);
+  };
+  return (
+    <div>
+      <Dropdown
+        isDisabled={args.isDisabled}
+        selectedItem={items[selectedIndex]}>
+        {items.map((item) => (
+          <DropdownOption key={item.id} value={item.value} />
+        ))}
+      </Dropdown>
+      <Button variant="info" css={{ marginLeft: 10 }} onClick={handleUpdate}>
+        Update selected item
+      </Button>
+    </div>
+  );
+};
+
+DynamicallyChangedSelectedItem.args = { isDisabled: false };

package/src/components/Dropdown/Dropdown.tsx

@@ -77,6 +77,10 @@ const Dropdown = <T extends DropdownOptionProps>({
     }
   }, [isOpen, isDisabled, isFocused]);
 
+  useEffect(() => {
+    setActiveItem(selectedItem);
+  }, [selectedItem]);
+
   useEffect(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);

package/src/components/PieChart/PieChart.stories.tsx

@@ -21,49 +21,47 @@ export const FitnessExample: StoryObj<typeof PieChart> = () => {
   ] as unknown as string[];
 
   return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={fitnessData}
-        colors={pieChartColors}
-        animate={false}
-        title={
+    <PieChart
+      data={fitnessData}
+      colors={pieChartColors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="regular"
+          color={theme.colors.greyDarker60}
+          css={css`
+            font-size: 16px;
+            line-height: 16px;
+            margin-top: -5px;
+          `}>
+          Total
           <Typography
             variant="body2"
-            weight="regular"
-            color={theme.colors.greyDarker60}
+            weight="bold"
+            color={theme.colors.greyDarker}
             css={css`
-              font-size: 16px;
-              line-height: 16px;
-              margin-top: -5px;
+              font-size: 27.65px;
+              line-height: 35px;
             `}>
-            Total
+            143
             <Typography
               variant="body2"
-              weight="bold"
-              color={theme.colors.greyDarker}
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker60}
               css={css`
-                font-size: 27.65px;
-                line-height: 35px;
+                font-size: 16px;
+                font-weight: 600;
+                margin-left: 3px;
               `}>
-              143
-              <Typography
-                variant="body2"
-                weight="regular"
-                as="span"
-                color={theme.colors.greyDarker60}
-                css={css`
-                  font-size: 16px;
-                  font-weight: 600;
-                  margin-left: 3px;
-                `}>
-                hrs
-              </Typography>
+              hrs
             </Typography>
           </Typography>
-        }>
-        <PieChartLegend data={fitnessData} colors={colorNames} />
-      </PieChart>
-    </div>
+        </Typography>
+      }>
+      <PieChartLegend data={fitnessData} colors={colorNames} />
+    </PieChart>
   );
 };
 FitnessExample.args = {};
@@ -74,56 +72,111 @@ export const AccountExample: StoryObj<typeof PieChart> = () => {
     pieChartPalettes.getBalancePalette(theme);
 
   return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={accountData}
-        colors={pieChartColors}
-        animate={false}
-        title={
+    <PieChart
+      data={accountData}
+      colors={pieChartColors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+          `}>
+          18183 &nbsp;
           <Typography
             variant="body2"
-            weight="bold"
-            color={theme.colors.greyDarker}
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
             css={css`
-              font-size: 20px;
-              line-height: 25px;
+              font-size: 14px;
             `}>
-            18183 &nbsp;
-            <Typography
-              variant="body2"
-              weight="regular"
-              as="span"
-              color={theme.colors.greyDarker80}
-              css={css`
-                font-size: 14px;
-              `}>
-              USDT
-            </Typography>
+            USDT
           </Typography>
-        }>
-        <PieChartLegend
-          data={accountData}
-          colors={legendColorNames}
-          renderValue={({ value, label }) =>
-            label === 'Other' ? value + ' USD' : value + ' ' + label
+        </Typography>
+      }>
+      <PieChartLegend
+        data={accountData}
+        colors={legendColorNames}
+        renderValue={({ value, label }) =>
+          label === 'Other' ? value + ' USD' : value + ' ' + label
+        }
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
           }
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-          `}
-          labelListStyles={css`
-            h6 {
-              font-weight: 700;
-            }
-          `}
-          valueListStyles={css`
-            h6 {
-              color: ${theme.colors.greyDarker80};
-            }
-          `}
-        />
-      </PieChart>
-    </div>
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+      />
+    </PieChart>
   );
 };
 AccountExample.args = {};
+
+export const CustomColors: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colors = ['#F7931A', '#50AF95', '#6f93d1', '#d37070'];
+
+  return (
+    <PieChart
+      data={accountData}
+      colors={colors}
+      animate={false}
+      title={
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+          `}>
+          18183 &nbsp;
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
+            css={css`
+              font-size: 14px;
+            `}>
+            USDT
+          </Typography>
+        </Typography>
+      }>
+      <PieChartLegend
+        data={accountData}
+        backgroundColors={colors}
+        renderValue={({ value, label }) =>
+          label === 'Other' ? value + ' USD' : value + ' ' + label
+        }
+        markerStyles={css`
+          width: 10px;
+          height: 10px;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
+          }
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+      />
+    </PieChart>
+  );
+};
+CustomColors.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -8,10 +8,16 @@ export const PieChart = ({
   className,
   title,
   children,
+  width = 400,
   ...chartProps
 }: PieChartProps) => {
   return (
-    <PieChartBase as={as} className={className}>
+    <PieChartBase
+      as={as}
+      className={className}
+      css={{
+        width,
+      }}>
       <div className="pie-chart-wrapper">
         <ResponsivePie
           isInteractive={false}

package/src/components/PieChart/types.ts

@@ -7,6 +7,7 @@ export interface PieChartProps
     React.ComponentProps<typeof ResponsivePie> {
   title?: React.ReactNode;
   children?: React.ReactNode;
+  width?: number;
 }
 
 export interface PieChartLegendItem extends MayHaveLabel {
@@ -18,7 +19,7 @@ export interface PieChartLegendItem extends MayHaveLabel {
 
 export interface PieChartLegendProps {
   data: Array<PieChartLegendItem>;
-  colors?: Array<keyof MainColors>;
+  colors?: Array<keyof MainColors | string>;
   backgroundColors?: Array<string>;
   renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;