@evolve.ui/core-components 1.0.0 → 1.1.0

package/src/BannerNotification/BannerNotification.tsx

@@ -0,0 +1,157 @@
+import { cn } from '@evolve.ui/theme-system';
+import { ReactNode, useMemo } from 'react';
+
+import { Button } from '../Button/Button';
+import { IconButton } from '../IconButton/IconButton';
+import { Close } from '../Icons';
+import { useWindowIsMobile } from '../providers';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { BodyPrimary, BodySecondary } from '../Typography/Text/Text';
+import { BannerNotificationSkeleton } from './components/BannerNotificationSkeleton';
+import { BannerIcon } from './components/CalloutIcon/BannerIcon';
+import { getRandomTooltipId } from './utils/getRandomTooltipId';
+
+type Props = {
+    /**
+     * Configuration for the action button.
+     */
+    actionButtonConfig?: {
+        /**
+         * The label for the close button.
+         */
+        label: string;
+
+        /**
+         * Callback function called when the close button is clicked.
+         */
+        onClick: () => void;
+    };
+
+    /**
+     * Additional CSS class name for the component.
+     */
+    className?: string;
+
+    /**
+     * The emphasis style of the component.
+     * - "bold": Bold emphasis.
+     * - "subtle": Subtle emphasis.
+     */
+    emphasis?: 'bold' | 'subtle';
+
+    /**
+     * Forces the component to render as a skeleton.
+     */
+    forceSkeleton?: boolean;
+
+    /**
+     * The message content of the component.
+     */
+    message?: string | ReactNode;
+
+    /**
+     * Callback function called when the component is closed.
+     */
+    onClose?: () => void;
+
+    /**
+     * The status of the component.
+     * - "info": Informational status.
+     * - "warning": Warning status.
+     * - "critical": Critical status.
+     */
+    status: 'info' | 'warning' | 'critical';
+};
+
+export const BannerNotification = ({
+    actionButtonConfig,
+    className,
+    emphasis = 'subtle',
+    forceSkeleton,
+    message,
+    onClose,
+    status = 'info',
+}: Props) => {
+    const randomTooltipId = useMemo(() => getRandomTooltipId(), []);
+    const isMobile = useWindowIsMobile();
+
+    const classes = useMemo(
+        () =>
+            cn(
+                className,
+                // GENERAL
+                'grid w-full grid-cols-[1fr_min-content] items-center p-[10px_16px_16px_8px]',
+                // MOBILE
+                'xsMax:items-start',
+                // SUBTLE
+                {
+                    'bg-background-critical-light': emphasis === 'subtle' && status === 'critical',
+                    'bg-background-info-light': emphasis === 'subtle' && status === 'info',
+                    'bg-background-warning-light': emphasis === 'subtle' && status === 'warning',
+                },
+                // BOLD
+                {
+                    'bg-background-critical-dark': emphasis === 'bold' && status === 'critical',
+                    'bg-background-info-dark': emphasis === 'bold' && status === 'info',
+                    'bg-background-warning-dark': emphasis === 'bold' && status === 'warning',
+                }
+            ),
+        [className, emphasis, status]
+    );
+
+    if (forceSkeleton) {
+        return <BannerNotificationSkeleton />;
+    }
+
+    return (
+        <div className={classes}>
+            <div className="col-start-1 col-end-2 mt-[6px] flex items-center justify-center xsMax:items-start">
+                <BannerIcon
+                    emphasis={emphasis}
+                    status={status}
+                />
+                <div className="mr-sm flex flex-row items-center xsMax:flex-col xsMax:items-start">
+                    {isMobile ? (
+                        <BodySecondary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>
+                            {message}
+                        </BodySecondary>
+                    ) : (
+                        <BodyPrimary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>
+                            {message}
+                        </BodyPrimary>
+                    )}
+                    {actionButtonConfig && (
+                        <Button
+                            className="ml-sm xsMax:ml-0 xsMax:mt-sm"
+                            onClick={actionButtonConfig.onClick}
+                            size={isMobile ? 'sm' : 'md'}
+                            style="primary"
+                            variant="outlined"
+                        >
+                            {actionButtonConfig.label}
+                        </Button>
+                    )}
+                </div>
+            </div>
+            {onClose && status !== 'critical' && (
+                <div className="relative flex h-full w-[34px] items-center justify-center xsMax:items-start">
+                    <IconButton
+                        aria-label="Close Banner"
+                        className="absolute right-0 col-start-3 col-end-4"
+                        data-tooltip-id={`close-banner-${randomTooltipId}`}
+                        icon={Close}
+                        onClick={onClose}
+                        size={isMobile ? 'sm' : 'md'}
+                        style={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'neutral'}
+                    />
+                    <Tooltip
+                        id={`close-banner-${randomTooltipId}`}
+                        place="left"
+                    >
+                        Close Banner
+                    </Tooltip>
+                </div>
+            )}
+        </div>
+    );
+};

package/src/BannerNotification/components/BannerNotificationSkeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from '../../Skeleton/Skeleton';
+
+export const BannerNotificationSkeleton = () => {
+    return (
+        <div className="flex justify-center border border-solid border-border-secondary px-sm py-md">
+            <Skeleton
+                backgroundColor="#f3f3f3"
+                className="col-start-1 col-end-4"
+                foregroundColor="#ecebeb"
+                height={40}
+                speed={2}
+                viewBox="0 0 600 40"
+                width={600}
+            >
+                <circle
+                    cx="20"
+                    cy="20"
+                    r="20"
+                />
+                <rect
+                    height="24"
+                    rx="3"
+                    ry="3"
+                    width="300"
+                    x="60"
+                    y="10"
+                />
+                <rect
+                    height="24"
+                    rx="3"
+                    ry="3"
+                    width="200"
+                    x="370"
+                    y="10"
+                />
+            </Skeleton>
+        </div>
+    );
+};

package/src/BannerNotification/components/CalloutIcon/BannerIcon.tsx

@@ -0,0 +1,48 @@
+import { Info, Warning } from '../../../Icons';
+import { useWindowIsMobile } from '../../../providers';
+
+type Props = {
+    emphasis?: 'bold' | 'subtle';
+    status: 'info' | 'warning' | 'critical';
+};
+
+export const BannerIcon = ({ emphasis, status }: Props) => {
+    const isMobile = useWindowIsMobile();
+
+    let icon = <></>;
+
+    switch (status) {
+        case 'critical':
+            icon = (
+                <Warning
+                    color={emphasis === 'bold' ? 'inverse' : 'critical'}
+                    size={isMobile ? 'sm' : 'md'}
+                    style="fill"
+                />
+            );
+            break;
+
+        case 'warning':
+            icon = (
+                <Warning
+                    color={emphasis === 'bold' ? 'primary' : 'warning'}
+                    size={isMobile ? 'sm' : 'md'}
+                    style="fill"
+                />
+            );
+            break;
+
+        case 'info':
+        default:
+            icon = (
+                <Info
+                    color={emphasis === 'bold' ? 'inverse' : 'info'}
+                    size={isMobile ? 'sm' : 'md'}
+                    style="fill"
+                />
+            );
+            break;
+    }
+
+    return <div className="pr-xs xsMax:p-xs xsMax:pt-0">{icon}</div>;
+};

package/src/BannerNotification/utils/getRandomTooltipId.ts

@@ -0,0 +1,3 @@
+export const getRandomTooltipId = () => {
+    return Math.floor(Math.random() * 1000);
+};