@compsych/mobile-ui 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/index.ts

@@ -35,14 +35,6 @@ export type {
   ServiceCardSize,
 } from './components/ServiceCard';
 
-export { PromotionCard } from './components/PromotionCard';
-export type {
-  PromotionCardProps,
-  PromotionCardVariant,
-  PromotionCardUsage,
-  PromotionCardSize,
-} from './components/PromotionCard';
-
 export { Checkbox } from './components/Checkbox';
 export type {
   CheckboxProps,

package/src/components/PromotionCard/PromotionCard.test.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render } from '@testing-library/react-native';
-
-import { PromotionCard } from './index';
-
-describe('PromotionCard', () => {
-  it('renders title and description', () => {
-    const { getByText } = render(
-      <PromotionCard title="New feature" description="Check it out" />,
-    );
-    expect(getByText('New feature')).toBeTruthy();
-    expect(getByText('Check it out')).toBeTruthy();
-  });
-
-  it('renders chip label when provided', () => {
-    const { getByText } = render(
-      <PromotionCard title="Card" chipLabel="NEW" />,
-    );
-    expect(getByText('NEW')).toBeTruthy();
-  });
-
-  it('calls onPress when tapped', () => {
-    const onPress = jest.fn();
-    const { getByRole } = render(
-      <PromotionCard
-        title="Promo"
-        accessibilityLabel="Promo card"
-        onPress={onPress}
-      />,
-    );
-    fireEvent.press(getByRole('button', { name: 'Promo card' }));
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders disabled state without crashing', () => {
-    const { toJSON } = render(
-      <PromotionCard
-        title="Promo"
-        accessibilityLabel="Promo card"
-        onPress={jest.fn()}
-        disabled
-      />,
-    );
-    expect(toJSON()).toBeTruthy();
-  });
-
-  it.each(['filled', 'tonal'] as const)(
-    'renders variant "%s" without crashing',
-    (variant) => {
-      const { toJSON } = render(
-        <PromotionCard title="Card" variant={variant} />,
-      );
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-
-  it.each(['md', 'lg'] as const)(
-    'renders size "%s" without crashing',
-    (size) => {
-      const { toJSON } = render(<PromotionCard title="Card" size={size} />);
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-
-  it.each(['neutral', 'informative', 'positive', 'danger', 'warning'] as const)(
-    'renders usage "%s" without crashing',
-    (usage) => {
-      const { toJSON } = render(<PromotionCard title="Card" usage={usage} />);
-      expect(toJSON()).toBeTruthy();
-    },
-  );
-});

package/src/components/PromotionCard/index.tsx

@@ -1,543 +0,0 @@
-import React, { useMemo } from 'react';
-
-import {
-  Image,
-  type ImageSourcePropType,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { Ionicons } from '@expo/vector-icons';
-import Svg, { Circle as SvgCircle } from 'react-native-svg';
-
-import { useTheme } from '../../theme';
-import { BodyText } from '../BodyText';
-import { HeaderText } from '../HeaderText';
-
-export type PromotionCardVariant = 'filled' | 'tonal';
-export type PromotionCardUsage =
-  | 'neutral'
-  | 'informative'
-  | 'positive'
-  | 'danger'
-  | 'warning'
-  | 'image';
-export type PromotionCardSize = 'md' | 'lg';
-
-export interface PromotionCardProps {
-  size?: PromotionCardSize;
-  variant?: PromotionCardVariant;
-  usage?: PromotionCardUsage;
-  title?: string;
-  description?: string;
-  chipLabel?: string;
-  chipIcon?: React.ReactNode;
-  image?: ImageSourcePropType;
-  progress?: number;
-  showProgressBar?: boolean;
-  showRingTimer?: boolean;
-  onPress?: () => void;
-  disabled?: boolean;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-type VariantTokens = {
-  cardBg: string;
-  chipBg: string;
-  chipTextColor: string;
-  titleColor: string;
-  descColor: string;
-  descOpacity: number;
-  buttonBg: string;
-  buttonIconColor: string;
-  progressColor: string;
-};
-
-const MD_HEIGHT = 197;
-const LG_HEIGHT = 363;
-const MD_BUTTON = 32;
-const LG_BUTTON = 48;
-const MD_RING_R = 14;
-const LG_RING_R = 21;
-const MD_RING_C = 2 * Math.PI * MD_RING_R;
-const LG_RING_C = 2 * Math.PI * LG_RING_R;
-const LG_DOTS_BOTTOM = 53;
-const LG_DOTS_LEFT = 32;
-const LG_DOT_SIZE = 6;
-const LG_DOT_GAP = 4;
-const LG_DOT_COUNT = 5;
-
-export function PromotionCard({
-  size = 'md',
-  variant = 'filled',
-  usage = 'neutral',
-  title,
-  description,
-  chipLabel,
-  chipIcon,
-  image,
-  progress = 0.25,
-  showProgressBar = true,
-  showRingTimer = true,
-  onPress,
-  disabled = false,
-  accessibilityLabel,
-  style,
-}: PromotionCardProps) {
-  const { colorRoles: cr, dimensions: dim } = useTheme();
-
-  const tokens = useMemo(
-    (): Record<
-      PromotionCardVariant,
-      Record<PromotionCardUsage, VariantTokens>
-    > => ({
-      filled: {
-        neutral: {
-          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-          chipTextColor: cr.surface.surface.sysOnSurface,
-          titleColor: '#0f0f0f',
-          descColor: cr.surface.surface.sysOnSurfaceVariant,
-          descOpacity: 1,
-          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-          progressColor: cr.accent.primary.sysPrimary,
-        },
-        informative: {
-          cardBg: cr.custom.info.sysOnInfoContainer,
-          chipBg: cr.custom.info.sysInfoContainer,
-          chipTextColor: cr.custom.info.sysOnInfoContainer,
-          titleColor: cr.custom.info.sysOnInfo,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.info.sysOnInfo,
-          buttonIconColor: cr.custom.info.sysOnInfoContainer,
-          progressColor: cr.custom.info.sysOnInfo,
-        },
-        positive: {
-          cardBg: cr.custom.success.sysOnSuccessContainer,
-          chipBg: cr.custom.success.sysSuccessContainer,
-          chipTextColor: cr.custom.success.sysOnSuccessContainer,
-          titleColor: cr.custom.success.sysOnSuccess,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.success.sysOnSuccess,
-          buttonIconColor: cr.custom.success.sysOnSuccessContainer,
-          progressColor: cr.custom.success.sysOnSuccess,
-        },
-        danger: {
-          cardBg: cr.error.sysOnErrorContainer,
-          chipBg: cr.error.sysErrorContainer,
-          chipTextColor: cr.error.sysOnErrorContainer,
-          titleColor: cr.error.sysOnError,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.error.sysOnError,
-          buttonIconColor: cr.error.sysOnErrorContainer,
-          progressColor: cr.error.sysOnError,
-        },
-        warning: {
-          cardBg: cr.custom.warning.sysOnWarningContainer,
-          chipBg: cr.custom.warning.sysWarningContainer,
-          chipTextColor: cr.custom.warning.sysOnWarningContainer,
-          titleColor: cr.custom.warning.sysOnWarning,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.warning.sysOnWarning,
-          buttonIconColor: cr.custom.warning.sysOnWarningContainer,
-          progressColor: cr.custom.warning.sysOnWarning,
-        },
-        image: {
-          cardBg: 'transparent',
-          chipBg: 'rgba(255,255,255,0.2)',
-          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-          titleColor: cr.accent.primary.sysOnPrimary,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          buttonIconColor: cr.surface.surface.sysOnSurface,
-          progressColor: cr.accent.primary.sysOnPrimary,
-        },
-      },
-      tonal: {
-        neutral: {
-          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-          chipTextColor: cr.surface.surface.sysOnSurface,
-          titleColor: '#0f0f0f',
-          descColor: cr.surface.surface.sysOnSurfaceVariant,
-          descOpacity: 1,
-          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-          progressColor: cr.accent.primary.sysPrimary,
-        },
-        informative: {
-          cardBg: cr.custom.info.sysInfoContainer,
-          chipBg: cr.custom.info.sysOnInfo,
-          chipTextColor: cr.custom.info.sysOnInfoContainer,
-          titleColor: cr.custom.info.sysOnInfoContainer,
-          descColor: cr.custom.info.sysOnInfoContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.info.sysInfo,
-          buttonIconColor: cr.custom.info.sysOnInfo,
-          progressColor: cr.custom.info.sysInfo,
-        },
-        positive: {
-          cardBg: cr.custom.success.sysSuccessContainer,
-          chipBg: cr.custom.success.sysOnSuccess,
-          chipTextColor: cr.custom.success.sysOnSuccessContainer,
-          titleColor: cr.custom.success.sysOnSuccessContainer,
-          descColor: cr.custom.success.sysOnSuccessContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.success.sysSuccess,
-          buttonIconColor: cr.custom.success.sysOnSuccess,
-          progressColor: cr.custom.success.sysSuccess,
-        },
-        danger: {
-          cardBg: cr.error.sysErrorContainer,
-          chipBg: cr.error.sysOnError,
-          chipTextColor: cr.error.sysOnErrorContainer,
-          titleColor: cr.error.sysOnErrorContainer,
-          descColor: cr.error.sysOnErrorContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.error.sysError,
-          buttonIconColor: cr.error.sysOnError,
-          progressColor: cr.error.sysError,
-        },
-        warning: {
-          cardBg: cr.custom.warning.sysWarningContainer,
-          chipBg: cr.custom.warning.sysOnWarning,
-          chipTextColor: cr.custom.warning.sysOnWarningContainer,
-          titleColor: cr.custom.warning.sysOnWarningContainer,
-          descColor: cr.custom.warning.sysOnWarningContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.warning.sysWarning,
-          buttonIconColor: cr.custom.warning.sysOnWarning,
-          progressColor: cr.custom.warning.sysWarning,
-        },
-        image: {
-          cardBg: 'transparent',
-          chipBg: 'rgba(255,255,255,0.2)',
-          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-          titleColor: cr.accent.primary.sysOnPrimary,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          buttonIconColor: cr.surface.surface.sysOnSurface,
-          progressColor: cr.accent.primary.sysOnPrimary,
-        },
-      },
-    }),
-    [cr],
-  );
-
-  // lg tokens: neutral uses filled, others use tonal
-  function getLgTokens(u: PromotionCardUsage): VariantTokens {
-    if (u === 'neutral') return tokens.filled.neutral;
-    return tokens.tonal[u];
-  }
-
-  const isLg = size === 'lg';
-  const t = isLg ? getLgTokens(usage) : tokens[variant][usage];
-  const isImage = usage === 'image';
-  const p = Math.max(0, Math.min(1, progress));
-
-  const buttonSize = isLg ? LG_BUTTON : MD_BUTTON;
-  const ringR = isLg ? LG_RING_R : MD_RING_R;
-  const ringC = isLg ? LG_RING_C : MD_RING_C;
-  const ringArcLength = ringC * p;
-
-  const containerStyle = [
-    styles.card,
-    isLg
-      ? {
-          height: LG_HEIGHT,
-          borderRadius: dim.borderRadius.sysRadiusXl,
-          padding: dim.spacing.padding.sysPadding32,
-          flexDirection: 'column' as const,
-          gap: dim.spacing.padding.sysPadding24,
-        }
-      : {
-          height: MD_HEIGHT,
-          borderRadius: dim.borderRadius.sysRadiusLg,
-          paddingHorizontal: dim.spacing.padding.sysPadding16,
-          paddingVertical: dim.spacing.padding.sysPadding16,
-          justifyContent: 'space-between' as const,
-        },
-    { backgroundColor: t.cardBg, opacity: disabled ? 0.48 : 1 },
-    style,
-  ];
-
-  const inner = (
-    <>
-      {isImage && image && (
-        <>
-          <Image
-            source={image}
-            style={[
-              StyleSheet.absoluteFillObject,
-              {
-                borderRadius: isLg
-                  ? dim.borderRadius.sysRadiusXl
-                  : dim.borderRadius.sysRadiusLg,
-              },
-            ]}
-            resizeMode="cover"
-            accessible={false}
-          />
-          <View
-            style={[
-              StyleSheet.absoluteFillObject,
-              {
-                borderRadius: isLg
-                  ? dim.borderRadius.sysRadiusXl
-                  : dim.borderRadius.sysRadiusLg,
-                backgroundColor: 'rgba(0,0,0,0.35)',
-              },
-            ]}
-            pointerEvents="none"
-          />
-        </>
-      )}
-
-      {/* Chip */}
-      {chipLabel && (
-        <View
-          style={[
-            isLg
-              ? {
-                  flexDirection: 'row' as const,
-                  alignItems: 'center' as const,
-                  alignSelf: 'flex-start' as const,
-                  borderRadius: dim.borderRadius.sysRadiusFull,
-                  paddingHorizontal: dim.spacing.padding.sysPadding16,
-                  paddingVertical: dim.spacing.padding.sysPadding4,
-                  gap: dim.spacing.padding.sysPadding8,
-                  height: 32,
-                }
-              : {
-                  flexDirection: 'row' as const,
-                  alignItems: 'center' as const,
-                  alignSelf: 'flex-start' as const,
-                  borderRadius: dim.borderRadius.sysRadiusFull,
-                  paddingHorizontal: dim.spacing.padding.sysPadding12,
-                  paddingVertical: dim.spacing.padding.sysPadding4,
-                  gap: dim.spacing.padding.sysPadding4,
-                  height: 24,
-                },
-            { backgroundColor: t.chipBg },
-          ]}
-        >
-          {chipIcon && (
-            <View
-              style={
-                isLg
-                  ? {
-                      width: 20,
-                      height: 20,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }
-                  : {
-                      width: 16,
-                      height: 16,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }
-              }
-            >
-              {chipIcon}
-            </View>
-          )}
-          <BodyText variant="labelMedium" color={t.chipTextColor}>
-            {chipLabel}
-          </BodyText>
-        </View>
-      )}
-
-      {/* Content (title + description) */}
-      <View
-        style={
-          isLg
-            ? { gap: dim.spacing.padding.sysPadding8, flex: 1 }
-            : { gap: dim.spacing.padding.sysPadding4, maxWidth: '78%' }
-        }
-      >
-        {title &&
-          (isLg ? (
-            <HeaderText variant="titleLarge" color={t.titleColor}>
-              {title}
-            </HeaderText>
-          ) : (
-            <HeaderText variant="titleSmall" color={t.titleColor}>
-              {title}
-            </HeaderText>
-          ))}
-        {description && (
-          <View style={{ opacity: t.descOpacity }}>
-            <BodyText variant={isLg ? 'medium' : 'small'} color={t.descColor}>
-              {description}
-            </BodyText>
-          </View>
-        )}
-      </View>
-
-      {/* Arrow button (absolute, bottom-right) */}
-      <View
-        style={[
-          styles.buttonWrap,
-          {
-            bottom: isLg
-              ? dim.spacing.padding.sysPadding32
-              : dim.spacing.padding.sysPadding16,
-            right: isLg
-              ? dim.spacing.padding.sysPadding32
-              : dim.spacing.padding.sysPadding16,
-            width: buttonSize,
-            height: buttonSize,
-          },
-        ]}
-      >
-        <View
-          style={[
-            styles.button,
-            {
-              width: buttonSize,
-              height: buttonSize,
-              borderRadius: dim.borderRadius.sysRadiusFull,
-              backgroundColor: t.buttonBg,
-            },
-          ]}
-        >
-          <Ionicons
-            name="arrow-forward"
-            size={isLg ? 24 : 16}
-            color={t.buttonIconColor}
-            accessible={false}
-          />
-        </View>
-        {showRingTimer && (
-          <Svg
-            width={buttonSize}
-            height={buttonSize}
-            style={StyleSheet.absoluteFillObject}
-          >
-            <SvgCircle
-              cx={buttonSize / 2}
-              cy={buttonSize / 2}
-              r={ringR}
-              stroke={t.progressColor}
-              strokeWidth={2}
-              fill="transparent"
-              strokeDasharray={`${ringArcLength} ${ringC - ringArcLength}`}
-              strokeLinecap="round"
-              rotation={-90}
-              origin={`${buttonSize / 2}, ${buttonSize / 2}`}
-            />
-          </Svg>
-        )}
-      </View>
-
-      {/* Pagination dots (lg only) */}
-      {isLg && (
-        <View style={styles.dotsRow}>
-          {Array.from({ length: LG_DOT_COUNT }).map((_, i) => (
-            <View
-              key={i}
-              style={[
-                styles.dot,
-                {
-                  backgroundColor: i === 0 ? t.progressColor : 'transparent',
-                  borderColor: t.progressColor,
-                  borderWidth: i === 0 ? 0 : 1.5,
-                  opacity: i === 0 ? 1 : 0.4,
-                },
-              ]}
-            />
-          ))}
-        </View>
-      )}
-
-      {/* Progress bar */}
-      {showProgressBar && (
-        <View
-          style={[styles.progressTrack, { height: isLg ? 4 : 2 }]}
-          pointerEvents="none"
-        >
-          <View
-            style={[
-              styles.progressFill,
-              {
-                width: `${p * 100}%` as any,
-                height: isLg ? 4 : 2,
-                backgroundColor: t.progressColor,
-              },
-            ]}
-          />
-        </View>
-      )}
-    </>
-  );
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={disabled ? undefined : onPress}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? title}
-        accessibilityState={{ disabled }}
-        style={({ pressed }: { pressed: boolean }) => [
-          ...containerStyle,
-          pressed && !disabled && styles.pressed,
-        ]}
-      >
-        {inner}
-      </Pressable>
-    );
-  }
-
-  return <View style={containerStyle}>{inner}</View>;
-}
-
-const styles = StyleSheet.create({
-  card: {
-    overflow: 'hidden',
-    alignSelf: 'stretch',
-  },
-  buttonWrap: {
-    position: 'absolute',
-  },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-  },
-  dotsRow: {
-    position: 'absolute',
-    bottom: LG_DOTS_BOTTOM,
-    left: LG_DOTS_LEFT,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: LG_DOT_GAP,
-  },
-  dot: {
-    width: LG_DOT_SIZE,
-    height: LG_DOT_SIZE,
-    borderRadius: LG_DOT_SIZE / 2,
-  },
-  progressTrack: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0,0,0,0.08)',
-  },
-  progressFill: {},
-  pressed: {
-    opacity: 0.84,
-  },
-});