@ssa-ui-kit/core 1.1.3 → 1.1.6

package/package.json

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

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

@@ -217,11 +217,10 @@ export const FullscreenAndTitle: StoryObj<typeof PieChart> = () => {
         `}
         labelListStyles={css`
           li {
-            height: ${isFullscreenMode ? 'auto' : '34px'};
+            height: 34px;
           }
           h6 {
             color: ${theme.colors.greyDarker};
-            line-height: 34px;
             font-size: 14px;
             &:nth-of-type(1) {
               font-weight: 500;

package/src/components/PieChart/PieChart.tsx

@@ -42,7 +42,6 @@ const PieChartComponent = ({
   return (
     <WithWidgetCard
       features={features}
-      width={`calc(${width} + ${internalOffset}px)`}
       cardProps={{
         headerContent: <PieChartHeader features={features} />,
         ...cardProps,
@@ -50,7 +49,7 @@ const PieChartComponent = ({
       <PieChartBase
         as={as}
         className={className}
-        width={`calc(${width} + ${internalOffset}px)`}
+        width={width}
         isFullscreenMode={isFullscreenMode}>
         <div className="pie-chart-wrapper">
           <ResponsivePie

package/src/components/PieChart/PieChartLegend.tsx

@@ -68,8 +68,9 @@ export const PieChartLegend = ({
                   css={{
                     alignSelf: 'start',
                     marginRight: 5,
-                    height: 'auto',
-                    lineHeight: '34px',
+                    height: '100%',
+                    lineHeight: '14px',
+                    fontSize: 14,
                     alignContent: 'center',
                   }}>
                   {typeof renderLabel === 'function'

package/src/components/WidgetCard/Content.tsx

@@ -7,7 +7,7 @@ export const Content = styled(CardContent)<{ isFullscreenMode?: boolean }>`
   display: flex;
   justify-content: space-between;
   gap: 5px;
-  height: ${({ isFullscreenMode }) => (isFullscreenMode ? '100%' : 'auto')};
+  height: 100%;
 
   ${({ theme }) => theme.mediaQueries.md} {
     max-width: initial;

package/src/components/WidgetCard/WidgetCard.tsx

@@ -12,7 +12,6 @@ export const WidgetCard = ({
   headerClassName,
   headerContent,
   link,
-  width,
   children,
   onClick,
 }: WidgetCardProps) => {
@@ -22,8 +21,7 @@ export const WidgetCard = ({
       <WidgetCardBase
         className={className}
         onClick={link ? undefined : onClick}
-        isFullscreenMode={isFullscreenMode}
-        width={width}>
+        isFullscreenMode={isFullscreenMode}>
         <Header title={title} className={headerClassName}>
           {headerContent}
         </Header>

package/src/components/WidgetCard/WidgetCardBase.tsx

@@ -3,18 +3,18 @@ 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};
+  width: 100%;
   height: 100%;
   position: ${({ isFullscreenMode }) =>
     isFullscreenMode ? 'absolute' : 'static'};
   top: ${({ isFullscreenMode }) => isFullscreenMode && 0};
   left: ${({ isFullscreenMode }) => isFullscreenMode && 0};
 
+  z-index: 1;
+
   ${({ theme }) => theme.mediaQueries.md} {
     padding: 10px;
   }

package/src/components/WidgetCard/WithWidgetCard.tsx

@@ -5,14 +5,11 @@ export const WithWidgetCard = ({
   children,
   features = [],
   cardProps = {},
-  width,
 }: {
   children: React.ReactNode;
-} & Pick<PieChartProps, 'features' | 'cardProps' | 'width'>) =>
+} & Pick<PieChartProps, 'features' | 'cardProps'>) =>
   features && features.includes('header') ? (
-    <WidgetCard {...cardProps} width={width}>
-      {children}
-    </WidgetCard>
+    <WidgetCard {...cardProps}>{children}</WidgetCard>
   ) : (
     children
   );

package/src/components/WidgetCard/types.ts

@@ -9,6 +9,5 @@ export type WidgetCardProps = {
   headerContent?: React.ReactNode;
   link?: To;
   children?: React.ReactNode;
-  width?: string;
   onClick?: () => void;
 };