@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

package/src/components/WfoSummary/WfoSummaryCard.tsx

@@ -3,118 +3,87 @@ import React, { FC } from 'react';
 import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import {
-    SummaryCardButtonConfig,
-    SummaryCardListItem,
-    WfoSummaryCardHeader,
-    WfoSummaryCardHeaderProps,
-    WfoSummaryCardList,
+  SummaryCardButtonConfig,
+  SummaryCardListItem,
+  WfoSummaryCardHeader,
+  WfoSummaryCardHeaderProps,
+  WfoSummaryCardList,
 } from '@/components';
 import { getWfoSummaryCardsStyles } from '@/components/WfoSummary/styles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoCheckmarkCircleFill, WfoCubeFill, WfoXCircleFill } from '@/icons';
 
 export enum SummaryCardStatus {
-    Success = 'Success',
-    Error = 'Error',
-    Neutral = 'Neutral',
+  Success = 'Success',
+  Error = 'Error',
+  Neutral = 'Neutral',
 }
 
 export type WfoSummaryCardProps = {
-    headerTitle: string;
-    headerValue: string | number;
-    listTitle: string;
-    listItems: SummaryCardListItem[];
-    headerStatus?: SummaryCardStatus;
-    button?: SummaryCardButtonConfig;
-    isLoading?: boolean;
-    isFetching?: boolean;
-    headerBadge?: Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'>;
+  headerTitle: string;
+  headerValue: string | number;
+  listTitle: string;
+  listItems: SummaryCardListItem[];
+  headerStatus?: SummaryCardStatus;
+  button?: SummaryCardButtonConfig;
+  isLoading?: boolean;
+  isFetching?: boolean;
+  headerBadge?: Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'>;
 };
 
 export const WfoSummaryCard: FC<WfoSummaryCardProps> = ({
-    button,
-    isLoading,
-    isFetching,
-    headerStatus,
-    headerValue = '-',
-    headerTitle,
-    listTitle,
-    listItems,
-    headerBadge,
+  button,
+  isLoading,
+  isFetching,
+  headerStatus,
+  headerValue = '-',
+  headerTitle,
+  listTitle,
+  listItems,
+  headerBadge,
 }) => {
-    const { theme } = useOrchestratorTheme();
-    const { cardContainerStyle } = useWithOrchestratorTheme(
-        getWfoSummaryCardsStyles,
-    );
+  const { theme } = useOrchestratorTheme();
+  const { cardContainerStyle } = useWithOrchestratorTheme(getWfoSummaryCardsStyles);
 
-    const getIconTypeAndColorForHeaderStatus = (
-        status?: SummaryCardStatus,
-    ): Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'> => {
-        switch (status) {
-            case SummaryCardStatus.Success:
-                return {
-                    iconType: () => (
-                        <WfoCheckmarkCircleFill
-                            width={32}
-                            height={32}
-                            color={theme.colors.ghost}
-                        />
-                    ),
-                    iconColor: theme.colors.success,
-                };
-            case SummaryCardStatus.Error:
-                return {
-                    iconType: () => (
-                        <WfoXCircleFill
-                            width={32}
-                            height={32}
-                            color={theme.colors.ghost}
-                        />
-                    ),
-                    iconColor: theme.colors.danger,
-                };
-            case SummaryCardStatus.Neutral:
-                return {
-                    iconType: () => (
-                        <WfoCubeFill
-                            width={32}
-                            height={32}
-                            color={theme.colors.ghost}
-                        />
-                    ),
-                    iconColor: theme.colors.primary,
-                };
-            default:
-                return (
-                    headerBadge ?? {
-                        iconType: () => (
-                            <WfoCubeFill
-                                width={32}
-                                height={32}
-                                color={theme.colors.ghost}
-                            />
-                        ),
-                        iconColor: theme.colors.primary,
-                    }
-                );
-        }
-    };
+  const getIconTypeAndColorForHeaderStatus = (
+    status?: SummaryCardStatus,
+  ): Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'> => {
+    switch (status) {
+      case SummaryCardStatus.Success:
+        return {
+          iconType: () => <WfoCheckmarkCircleFill width={32} height={32} color={theme.colors.textGhost} />,
+          iconColor: theme.colors.success,
+        };
+      case SummaryCardStatus.Error:
+        return {
+          iconType: () => <WfoXCircleFill width={32} height={32} color={theme.colors.textGhost} />,
+          iconColor: theme.colors.danger,
+        };
+      case SummaryCardStatus.Neutral:
+        return {
+          iconType: () => <WfoCubeFill width={32} height={32} color={theme.colors.textGhost} />,
+          iconColor: theme.colors.primary,
+        };
+      default:
+        return (
+          headerBadge ?? {
+            iconType: () => <WfoCubeFill width={32} height={32} color={theme.colors.textGhost} />,
+            iconColor: theme.colors.primary,
+          }
+        );
+    }
+  };
 
-    return (
-        <EuiFlexItem css={cardContainerStyle}>
-            <WfoSummaryCardHeader
-                text={headerTitle}
-                value={headerValue}
-                isFetching={isFetching}
-                {...getIconTypeAndColorForHeaderStatus(headerStatus)}
-            />
-            <EuiSpacer size="m" />
-            <WfoSummaryCardList
-                title={listTitle}
-                items={listItems}
-                button={button}
-                isLoading={isLoading}
-            />
-        </EuiFlexItem>
-    );
+  return (
+    <EuiFlexItem css={cardContainerStyle}>
+      <WfoSummaryCardHeader
+        text={headerTitle}
+        value={headerValue}
+        isFetching={isFetching}
+        {...getIconTypeAndColorForHeaderStatus(headerStatus)}
+      />
+      <EuiSpacer size="m" />
+      <WfoSummaryCardList title={listTitle} items={listItems} button={button} isLoading={isLoading} />
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoSummary/WfoSummaryCardHeader/WfoSummaryCardHeader.tsx

@@ -1,13 +1,6 @@
 import React, { FC } from 'react';
 
-import {
-    EuiAvatar,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiLoadingSpinner,
-    EuiPanel,
-    EuiText,
-} from '@elastic/eui';
+import { EuiAvatar, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
 import { IconType } from '@elastic/eui/src/components/icon';
 
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
@@ -15,51 +8,46 @@ import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { getWfoSummaryCardHeaderStyles } from './styles';
 
 export type WfoSummaryCardHeaderProps = {
-    text: string;
-    value: number | string;
-    iconType: IconType;
-    iconColor: string | undefined;
-    isFetching?: boolean;
+  text: string;
+  value: number | string;
+  iconType: IconType;
+  iconColor: string | undefined;
+  isFetching?: boolean;
 };
 
 export const WfoSummaryCardHeader: FC<WfoSummaryCardHeaderProps> = ({
-    text,
-    value,
-    iconType,
-    iconColor,
-    isFetching,
+  text,
+  value,
+  iconType,
+  iconColor,
+  isFetching,
 }) => {
-    const { theme } = useOrchestratorTheme();
-    const { avatarStyle, totalSectionStyle, valueStyle } =
-        useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
+  const { theme } = useOrchestratorTheme();
+  const { avatarStyle, totalSectionStyle, valueStyle } = useWithOrchestratorTheme(getWfoSummaryCardHeaderStyles);
 
-    return (
-        <EuiFlexItem grow={0}>
-            <EuiPanel
-                hasShadow={false}
-                css={{ backgroundColor: theme.colors.backgroundBaseSubdued }}
-                paddingSize="l"
-            >
-                <EuiFlexGroup alignItems="center">
-                    <EuiAvatar
-                        iconSize="l"
-                        size="xl"
-                        type="space"
-                        name={text}
-                        css={avatarStyle}
-                        iconType={iconType}
-                        iconColor={theme.colors.ghost}
-                        color={iconColor}
-                    />
-                    <div css={totalSectionStyle}>
-                        <EuiText color="subdued">{text}</EuiText>
-                        <EuiFlexGroup gutterSize="s" alignItems="center">
-                            <EuiText css={valueStyle}>{value}</EuiText>
-                            {isFetching && <EuiLoadingSpinner />}
-                        </EuiFlexGroup>
-                    </div>
-                </EuiFlexGroup>
-            </EuiPanel>
-        </EuiFlexItem>
-    );
+  return (
+    <EuiFlexItem grow={0}>
+      <EuiPanel hasShadow={false} css={{ backgroundColor: theme.colors.backgroundBaseSubdued }} paddingSize="l">
+        <EuiFlexGroup alignItems="center">
+          <EuiAvatar
+            iconSize="l"
+            size="xl"
+            type="space"
+            name={text}
+            css={avatarStyle}
+            iconType={iconType}
+            iconColor={theme.colors.textGhost}
+            color={iconColor}
+          />
+          <div css={totalSectionStyle}>
+            <EuiText color="subdued">{text}</EuiText>
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiText css={valueStyle}>{value}</EuiText>
+              {isFetching && <EuiLoadingSpinner />}
+            </EuiFlexGroup>
+          </div>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoSummary/WfoSummaryCardHeader/styles.ts

@@ -3,25 +3,25 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoSummaryCardHeaderStyles = ({ theme }: WfoThemeHelpers) => {
-    const avatarStyle = css({
-        maxHeight: theme.base * 3,
-        maxWidth: theme.base * 3,
-    });
+  const avatarStyle = css({
+    maxHeight: theme.base * 3,
+    maxWidth: theme.base * 3,
+  });
 
-    const totalSectionStyle = css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-    });
+  const totalSectionStyle = css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  });
 
-    const valueStyle = css({
-        fontSize: theme.size.l,
-        fontWeight: theme.font.weight.semiBold,
-    });
+  const valueStyle = css({
+    fontSize: theme.size.l,
+    fontWeight: theme.font.weight.semiBold,
+  });
 
-    return {
-        avatarStyle,
-        totalSectionStyle,
-        valueStyle,
-    };
+  return {
+    avatarStyle,
+    totalSectionStyle,
+    valueStyle,
+  };
 };

package/src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardList.tsx

@@ -3,84 +3,61 @@ import React, { FC } from 'react';
 import { useRouter } from 'next/router';
 
 import {
-    EuiButton,
-    EuiFlexItem,
-    EuiHorizontalRule,
-    EuiPanel,
-    EuiSkeletonText,
-    EuiSpacer,
-    useEuiScrollBar,
+  EuiButton,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSkeletonText,
+  EuiSpacer,
+  useEuiScrollBar,
 } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
 
-import {
-    SummaryCardListItem,
-    WfoSummaryCardListItem,
-} from './WfoSummaryCardListItem';
+import { SummaryCardListItem, WfoSummaryCardListItem } from './WfoSummaryCardListItem';
 import { getWfoSummaryCardListStyles } from './styles';
 
 export type SummaryCardButtonConfig = {
-    name: string;
-    url: string;
+  name: string;
+  url: string;
 };
 
 export type WfoSummaryCardListProps = {
-    title: string;
-    items: SummaryCardListItem[];
-    button?: SummaryCardButtonConfig;
-    isLoading?: boolean;
+  title: string;
+  items: SummaryCardListItem[];
+  button?: SummaryCardButtonConfig;
+  isLoading?: boolean;
 };
 
-export const WfoSummaryCardList: FC<WfoSummaryCardListProps> = ({
-    title,
-    items,
-    button,
-    isLoading = false,
-}) => {
-    const router = useRouter();
-    const euiScrollBarStyle = useEuiScrollBar();
-    const { listContainerStyle, listHeaderStyle, listStyle } =
-        useWithOrchestratorTheme(getWfoSummaryCardListStyles);
-
-    return (
-        <EuiFlexItem>
-            <EuiPanel
-                css={listContainerStyle}
-                hasShadow={false}
-                hasBorder={true}
-                paddingSize="l"
-            >
-                <div>
-                    <p css={listHeaderStyle}>{title}</p>
-                    <EuiSpacer size="m" />
-                    <EuiSkeletonText isLoading={isLoading} lines={10}>
-                        <div css={[listStyle, euiScrollBarStyle]}>
-                            {items?.map((item, index) => (
-                                <div key={index}>
-                                    <WfoSummaryCardListItem
-                                        title={item.title}
-                                        value={item.value}
-                                        url={item.url}
-                                    />
-                                    {index === items.length - 1 ? null : (
-                                        <EuiHorizontalRule margin="none" />
-                                    )}
-                                </div>
-                            ))}
-                        </div>
-                    </EuiSkeletonText>
+export const WfoSummaryCardList: FC<WfoSummaryCardListProps> = ({ title, items, button, isLoading = false }) => {
+  const router = useRouter();
+  const euiScrollBarStyle = useEuiScrollBar();
+  const { listContainerStyle, listHeaderStyle, listStyle } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
+
+  return (
+    <EuiFlexItem>
+      <EuiPanel css={listContainerStyle} hasShadow={false} hasBorder={true} paddingSize="l">
+        <div>
+          <p css={listHeaderStyle}>{title}</p>
+          <EuiSpacer size="m" />
+          <EuiSkeletonText isLoading={isLoading} lines={10}>
+            <div css={[listStyle, euiScrollBarStyle]}>
+              {items?.map((item, index) => (
+                <div key={index}>
+                  <WfoSummaryCardListItem title={item.title} value={item.value} url={item.url} />
+                  {index === items.length - 1 ? null : <EuiHorizontalRule margin="none" />}
                 </div>
-                <EuiSpacer size="m" />
-                {button && (
-                    <EuiButton
-                        fullWidth
-                        onClick={() => router.push(button.url)}
-                    >
-                        {button.name}
-                    </EuiButton>
-                )}
-            </EuiPanel>
-        </EuiFlexItem>
-    );
+              ))}
+            </div>
+          </EuiSkeletonText>
+        </div>
+        <EuiSpacer size="m" />
+        {button && (
+          <EuiButton fullWidth onClick={() => router.push(button.url)}>
+            {button.name}
+          </EuiButton>
+        )}
+      </EuiPanel>
+    </EuiFlexItem>
+  );
 };

package/src/components/WfoSummary/WfoSummaryCardList/WfoSummaryCardListItem.tsx

@@ -8,54 +8,35 @@ import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { getWfoSummaryCardListStyles } from './styles';
 
 export type SummaryCardListItem = {
-    title: string;
-    value: ReactNode;
-    url?: string;
+  title: string;
+  value: ReactNode;
+  url?: string;
 };
 
 export type WfoSummaryCardListItemProps = {
-    title: string;
-    value: ReactNode;
-    url?: string;
+  title: string;
+  value: ReactNode;
+  url?: string;
 };
 
-export const WfoSummaryCardListItem: FC<WfoSummaryCardListItemProps> = ({
-    title,
-    value,
-    url,
-}) => {
-    const { theme } = useOrchestratorTheme();
-    const {
-        listItemContainerStyle,
-        listItemTitleStyle,
-        listItemSubtitleStyle,
-        listItemHighlightIconStyle,
-    } = useWithOrchestratorTheme(getWfoSummaryCardListStyles);
+export const WfoSummaryCardListItem: FC<WfoSummaryCardListItemProps> = ({ title, value, url }) => {
+  const { theme } = useOrchestratorTheme();
+  const { listItemContainerStyle, listItemTitleStyle, listItemSubtitleStyle, listItemHighlightIconStyle } =
+    useWithOrchestratorTheme(getWfoSummaryCardListStyles);
 
-    return (
-        <WfoOptionalLink href={url}>
-            <EuiFlexGroup css={listItemContainerStyle} gutterSize="none">
-                <EuiFlexItem>
-                    <EuiTextColor
-                        color={
-                            url ? theme.colors.link : theme.colors.textHeading
-                        }
-                        css={listItemTitleStyle}
-                    >
-                        {title}
-                    </EuiTextColor>
-                    <EuiTextColor css={listItemSubtitleStyle}>
-                        {value}
-                    </EuiTextColor>
-                </EuiFlexItem>
-                <EuiFlexItem
-                    className={url ? 'highlight-icon' : undefined}
-                    grow={false}
-                    css={listItemHighlightIconStyle}
-                >
-                    <EuiIcon type="sortRight" color="primary" />
-                </EuiFlexItem>
-            </EuiFlexGroup>
-        </WfoOptionalLink>
-    );
+  return (
+    <WfoOptionalLink href={url}>
+      <EuiFlexGroup css={listItemContainerStyle} gutterSize="none">
+        <EuiFlexItem>
+          <EuiTextColor color={url ? theme.colors.link : theme.colors.textHeading} css={listItemTitleStyle}>
+            {title}
+          </EuiTextColor>
+          <EuiTextColor css={listItemSubtitleStyle}>{value}</EuiTextColor>
+        </EuiFlexItem>
+        <EuiFlexItem className={url ? 'highlight-icon' : undefined} grow={false} css={listItemHighlightIconStyle}>
+          <EuiIcon type="sortRight" color="primary" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </WfoOptionalLink>
+  );
 };

package/src/components/WfoSummary/WfoSummaryCardList/styles.ts

@@ -3,53 +3,53 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoSummaryCardListStyles = ({ theme }: WfoThemeHelpers) => {
-    const listContainerStyle = css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        flexGrow: 1,
-        borderColor: theme.colors.borderBaseSubdued,
-        backgroundColor: theme.colors.backgroundBaseNeutral,
-    });
-
-    const listHeaderStyle = css({
-        fontWeight: theme.font.weight.semiBold,
-    });
-
-    const listStyle = css({
-        height: theme.base * 20,
-        overflow: 'auto',
-    });
-
-    const listItemContainerStyle = css({
-        paddingBlock: theme.size.m,
-        '.highlight-icon': {
-            visibility: 'hidden',
-        },
-        '&:hover .highlight-icon': {
-            visibility: 'visible',
-        },
-    });
-
-    const listItemTitleStyle = css({
-        fontWeight: theme.font.weight.medium,
-    });
-
-    const listItemSubtitleStyle = css({
-        fontWeight: theme.font.weight.regular,
-    });
-
-    const listItemHighlightIconStyle = css({
-        visibility: 'hidden',
-    });
-
-    return {
-        listContainerStyle,
-        listHeaderStyle,
-        listStyle,
-        listItemContainerStyle,
-        listItemTitleStyle,
-        listItemSubtitleStyle,
-        listItemHighlightIconStyle,
-    };
+  const listContainerStyle = css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    borderColor: theme.colors.borderBaseSubdued,
+    backgroundColor: theme.colors.backgroundBaseNeutral,
+  });
+
+  const listHeaderStyle = css({
+    fontWeight: theme.font.weight.semiBold,
+  });
+
+  const listStyle = css({
+    height: theme.base * 20,
+    overflow: 'auto',
+  });
+
+  const listItemContainerStyle = css({
+    paddingBlock: theme.size.m,
+    '.highlight-icon': {
+      visibility: 'hidden',
+    },
+    '&:hover .highlight-icon': {
+      visibility: 'visible',
+    },
+  });
+
+  const listItemTitleStyle = css({
+    fontWeight: theme.font.weight.medium,
+  });
+
+  const listItemSubtitleStyle = css({
+    fontWeight: theme.font.weight.regular,
+  });
+
+  const listItemHighlightIconStyle = css({
+    visibility: 'hidden',
+  });
+
+  return {
+    listContainerStyle,
+    listHeaderStyle,
+    listStyle,
+    listItemContainerStyle,
+    listItemTitleStyle,
+    listItemSubtitleStyle,
+    listItemHighlightIconStyle,
+  };
 };