@ssa-ui-kit/widgets 3.10.2 → 3.11.0

package/dist/components/ListGoals/ListGoals.d.ts

@@ -3,4 +3,4 @@ import { ListGoalsProps } from './types';
  *
  * UI Component that uses CardList to render a list of goals
  */
-export declare const ListGoals: ({ goals }: ListGoalsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ListGoals: ({ goals, avatarBorder }: ListGoalsProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ListGoals/ListGoalsCard.d.ts

@@ -1,2 +1,2 @@
 import { ItemCardProps } from './types';
-export declare const ListGoalsCard: ({ image, title, details, progressProps, }: ItemCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ListGoalsCard: ({ image, title, details, progressProps, avatarBorder, }: ItemCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/ListGoals/types.d.ts

@@ -9,6 +9,8 @@ export type Goal = {
 };
 export interface ListGoalsProps {
     goals: Array<Goal>;
+    /** Shows a border around the avatar in each goal card. @default false */
+    avatarBorder?: boolean;
 }
 export type ProgressProps = Partial<React.ComponentProps<typeof ProgressCircle>>;
 export interface ItemCardProps {
@@ -16,4 +18,6 @@ export interface ItemCardProps {
     title: string;
     details: string;
     progressProps: ProgressProps;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
 }

package/dist/components/MealPlanner/MealPlanner.d.ts

@@ -1,2 +1,2 @@
 import { MealPlannerProps } from './types';
-export declare const MealPlanner: ({ data }: MealPlannerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MealPlanner: ({ data, avatarBorder }: MealPlannerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/MealPlanner/MealPlannerCard.d.ts

@@ -1,2 +1,2 @@
 import { MealPlannerCardProps } from './types';
-export declare const MealPlannerCard: ({ name, image, carbs, protein, fat, }: MealPlannerCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MealPlannerCard: ({ name, image, carbs, protein, fat, avatarBorder, }: MealPlannerCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/MealPlanner/types.d.ts

@@ -5,6 +5,8 @@ export interface MealPlannerCardProps {
     carbs: number;
     protein: number;
     fat: number;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
 }
 export type MealPlannerData = MealPlannerCardProps & {
     id: number;
@@ -17,4 +19,6 @@ export interface MealPlannerProps {
     data: {
         [mealName: string]: MealPlannerItem;
     };
+    /** Shows a border around the avatar in each meal card. @default false */
+    avatarBorder?: boolean;
 }

package/dist/components/UpcomingWorkouts/UpcomingWorkoutCard.d.ts

@@ -3,4 +3,4 @@ import { UpcomingWorkoutCardProps } from './types';
  *
  * UI Component that use CardList to render a list of upcoming workouts
  */
-export declare const UpcomingWorkoutCard: ({ image, title, workoutTime, renderDetails, onClick, }: UpcomingWorkoutCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UpcomingWorkoutCard: ({ image, title, workoutTime, renderDetails, onClick, avatarBorder, }: UpcomingWorkoutCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/UpcomingWorkouts/UpcomingWorkouts.d.ts

@@ -1,2 +1,2 @@
 import { UpcomingWorkoutsProps } from './types';
-export declare const UpcomingWorkouts: ({ workouts }: UpcomingWorkoutsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UpcomingWorkouts: ({ workouts, avatarBorder, }: UpcomingWorkoutsProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/UpcomingWorkouts/types.d.ts

@@ -4,6 +4,8 @@ export interface UpcomingWorkoutCardProps {
     workoutTime: string;
     renderDetails: () => React.ReactNode;
     onClick?: () => void;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
 }
 export type Workout = {
     id: string;
@@ -18,4 +20,6 @@ export type Workout = {
 };
 export interface UpcomingWorkoutsProps {
     workouts: Array<Workout>;
+    /** Shows a border around the avatar in each workout card. @default false */
+    avatarBorder?: boolean;
 }

package/dist/components/UserCard/UserCard.d.ts

@@ -1,5 +1,8 @@
 import { User } from './types';
-declare const UserCard: ({ user }: {
+interface UserCardProps {
     user: User | null;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
+}
+declare const UserCard: ({ user, avatarBorder }: UserCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default UserCard;

package/dist/components/UserCard/UserCardCredentials.d.ts

@@ -1,3 +1,7 @@
 import { User } from './types';
-declare const UserCardCredentials: ({ name, email, }: Partial<Pick<User, "name" | "email">>) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface UserCardCredentialsProps extends Partial<Pick<User, 'name' | 'email'>> {
+    /** Shows a border around the avatar. @default false */
+    avatarBorder?: boolean;
+}
+declare const UserCardCredentials: ({ name, email, avatarBorder, }: UserCardCredentialsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default UserCardCredentials;

package/dist/index.js

@@ -21330,7 +21330,8 @@ const UpcomingWorkoutCard = ({
   title,
   workoutTime,
   renderDetails,
-  onClick
+  onClick,
+  avatarBorder = false
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Card, {
@@ -21338,8 +21339,9 @@ const UpcomingWorkoutCard = ({
     children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
       direction: "row",
       children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
-        size: 42,
-        image: image
+        size: core_namespaceObject.AvatarSizes.large,
+        image: image,
+        border: avatarBorder
       }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardContent, {
         css: UpcomingWorkoutCard_ref,
         children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
@@ -21381,7 +21383,8 @@ const UpcomingWorkoutCard = ({
 
 
 const UpcomingWorkouts = ({
-  workouts
+  workouts,
+  avatarBorder
 }) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardList, {
   title: "Upcoming Workout",
   items: workouts,
@@ -21390,6 +21393,7 @@ const UpcomingWorkouts = ({
     title: workout.title,
     workoutTime: workout.workoutTime,
     onClick: workout.handleClick,
+    avatarBorder: avatarBorder,
     renderDetails: () => (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
       children: [(0,jsx_runtime_namespaceObject.jsx)("strong", {
         children: workout.details.exercises
@@ -21754,7 +21758,8 @@ const ListGoalsCard = ({
   image,
   title,
   details,
-  progressProps
+  progressProps,
+  avatarBorder = false
 }) => {
   const {
     size = 50,
@@ -21768,8 +21773,9 @@ const ListGoalsCard = ({
     children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
       direction: "row",
       children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
-        size: 42,
+        size: core_namespaceObject.AvatarSizes.large,
         image: image,
+        border: avatarBorder,
         css: ListGoalsCard_ref2
       }), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.CardContent, {
         css: ListGoalsCard_ref,
@@ -21806,7 +21812,8 @@ const ListGoalsCard = ({
  * UI Component that uses CardList to render a list of goals
  */
 const ListGoals = ({
-  goals
+  goals,
+  avatarBorder
 }) => {
   return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.CardList, {
     title: "Goals",
@@ -21818,7 +21825,8 @@ const ListGoals = ({
       progressProps: {
         currentValue: goal.completion,
         color: goal.color
-      }
+      },
+      avatarBorder: avatarBorder
     })
   });
 };
@@ -21887,7 +21895,8 @@ const MealPlannerCard = ({
   image,
   carbs,
   protein,
-  fat
+  fat,
+  avatarBorder = false
 }) => {
   const listItems = {
     carbs,
@@ -21897,8 +21906,9 @@ const MealPlannerCard = ({
   return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
     css: MealPlannerCard_ref2,
     children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
-      size: 64,
-      image: image
+      size: core_namespaceObject.AvatarSizes.large,
+      image: image,
+      border: avatarBorder
     }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: MealPlannerCard_ref,
       children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
@@ -21949,7 +21959,8 @@ var MealPlanner_ref2 =  true ? {
   styles: "line-height:normal"
 } : 0;
 const MealPlanner = ({
-  data
+  data,
+  avatarBorder
 }) => {
   const [selectedOption, setSelectedOption] = (0,external_react_namespaceObject.useState)(null);
   const [options, setOptions] = (0,external_react_namespaceObject.useState)([]);
@@ -22009,7 +22020,8 @@ const MealPlanner = ({
           id,
           ...props
         }) => (0,jsx_runtime_namespaceObject.jsx)(MealPlannerCard, {
-          ...props
+          ...props,
+          avatarBorder: avatarBorder
         }, id))
       })
     })]
@@ -22168,14 +22180,16 @@ var UserCardCredentials_ref2 =  true ? {
 } : 0;
 const UserCardCredentials = ({
   name,
-  email
+  email,
+  avatarBorder = false
 }) => (0,jsx_runtime_namespaceObject.jsxs)("div", {
   css: UserCardCredentials_container,
   children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
     css: UserCardCredentials_ref2,
     children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Avatar, {
-      size: 42,
-      image: 'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fface%2Fface_46.png?alt=media&token=aaa3a75c-4779-4887-b011-352f8dd6c214'
+      size: core_namespaceObject.AvatarSizes.large,
+      image: 'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fface%2Fface_46.png?alt=media&token=aaa3a75c-4779-4887-b011-352f8dd6c214',
+      border: avatarBorder
     }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
       css: UserCardCredentials_ref,
       children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typography, {
@@ -22209,7 +22223,8 @@ var UserCard_ref =  true ? {
   styles: "cursor:pointer"
 } : 0;
 const UserCard = ({
-  user
+  user,
+  avatarBorder
 }) => (0,jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
   children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
     css: UserCard_container,
@@ -22225,7 +22240,8 @@ const UserCard = ({
       })
     }), (0,jsx_runtime_namespaceObject.jsx)(UserCard_UserCardCredentials, {
       name: user?.name,
-      email: user?.email
+      email: user?.email,
+      avatarBorder: avatarBorder
     })]
   }), (0,jsx_runtime_namespaceObject.jsx)(UserCard_UserCardBMI, {
     weight: user?.weight,
@@ -22584,10 +22600,17 @@ const BalancePieChart = (0,react_namespaceObject.withTheme)(({
     }
     return isSaved;
   });
+  const isAllValuesZero = data.length > 0 && chartData.length === 0;
   const chartColors = (chartColorPalette || pieChartColors).filter((item, index) => !filteredIndexes.includes(index));
-  if (chartColors.length < chartData.length) {
-    for (let i = 0; i < chartData.length - chartColors.length; i++) {
-      chartColors.push(core_namespaceObject.mainTheme.colors.purpleLighter);
+  const chartDataWithZeroFallback = isAllValuesZero ? [{
+    id: '__zero__',
+    value: 1,
+    label: '__zero__'
+  }] : chartData;
+  const chartColorsWithZeroFallback = isAllValuesZero ? [theme.palette.secondary.dark] : chartColors;
+  if (chartColorsWithZeroFallback.length < chartDataWithZeroFallback.length) {
+    for (let i = 0; i < chartDataWithZeroFallback.length - chartColorsWithZeroFallback.length; i++) {
+      chartColorsWithZeroFallback.push(core_namespaceObject.mainTheme.colors.purpleLighter);
     }
   }
   if (Object.keys(pieChartProps.cardProps || {}).length) {
@@ -22602,9 +22625,9 @@ const BalancePieChart = (0,react_namespaceObject.withTheme)(({
     onFullscreenModeChange?.(pieChartFullscreenMode);
   };
   return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.PieChart, {
-    data: chartData,
+    data: chartDataWithZeroFallback,
     features: Array.from(featuresList),
-    colors: chartColors,
+    colors: chartColorsWithZeroFallback,
     onFullscreenModeChange: handleFullscreenModeChange,
     animate: false,
     title: (0,jsx_runtime_namespaceObject.jsx)(BalancePieChartTitle, {}),