@hero-design/rn 8.104.1-alpha.2 → 8.105.0

package/src/components/SegmentedControl/__tests__/index.spec.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import SegmentedControl, { SegmentedControlProps } from '..';
+import type { SegmentedControlItemConfig } from '../types';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { scale } from '../../../utils/scale';
+
+describe('SegmentedControl', () => {
+  const defaultItems: SegmentedControlItemConfig[] = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  const defaultProps: SegmentedControlProps = {
+    items: defaultItems,
+    value: 'option1',
+    onItemPress: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <SegmentedControl {...defaultProps} />
+    );
+
+    expect(getByText('Option 1')).toBeVisible();
+    expect(getByText('Option 2')).toBeVisible();
+    expect(getByText('Option 3')).toBeVisible();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  describe('sizing', () => {
+    it.each`
+      size        | expectedHeight
+      ${'medium'} | ${scale(36)}
+      ${'large'}  | ${scale(44)}
+    `(
+      'should have correct height of $expectedHeight for $size size',
+      ({ size, expectedHeight }) => {
+        const { getByTestId } = renderWithTheme(
+          <SegmentedControl
+            {...defaultProps}
+            size={size}
+            testID="segmented-control"
+          />
+        );
+
+        const wrapper = getByTestId('segmented-control');
+        expect(wrapper).toHaveStyle({ height: expectedHeight });
+      }
+    );
+  });
+
+  it('should display icons when provided', () => {
+    const itemsWithIcons: SegmentedControlItemConfig[] = [
+      {
+        value: 'home',
+        label: 'Home',
+        prefix: 'home-outlined',
+        testID: 'home-item',
+      },
+      {
+        value: 'settings',
+        label: 'Settings',
+        suffix: 'cog-outlined',
+        testID: 'settings-item',
+      },
+    ];
+
+    const { getByText, getByTestId } = renderWithTheme(
+      <SegmentedControl {...defaultProps} items={itemsWithIcons} value="home" />
+    );
+
+    expect(getByTestId('home-item-prefix')).toBeVisible();
+    expect(getByTestId('settings-item-suffix')).toBeVisible();
+    expect(getByText('Home')).toBeVisible();
+    expect(getByText('Settings')).toBeVisible();
+  });
+
+  it('should not call onItemPress when disabled item is clicked', () => {
+    const onItemPress = jest.fn();
+    const itemsWithDisabled: SegmentedControlItemConfig[] = [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', disabled: true },
+    ];
+
+    const { getByText } = renderWithTheme(
+      <SegmentedControl
+        {...defaultProps}
+        items={itemsWithDisabled}
+        onItemPress={onItemPress}
+      />
+    );
+
+    fireEvent.press(getByText('Option 2'));
+    expect(onItemPress).not.toHaveBeenCalled();
+  });
+
+  it.each`
+    value | max          | expectedText
+    ${10} | ${10}        | ${'10'}
+    ${15} | ${10}        | ${'10+'}
+    ${99} | ${undefined} | ${'99'}
+  `(
+    'should display count badge $expectedText for $value and $max',
+    ({ value, max, expectedText }) => {
+      const itemsWithBadges: SegmentedControlItemConfig[] = [
+        {
+          value: 'counter',
+          label: 'Counter',
+          badge: { type: 'counter', value, max },
+        },
+      ];
+
+      const { getByText } = renderWithTheme(
+        <SegmentedControl
+          {...defaultProps}
+          items={itemsWithBadges}
+          value="counter"
+        />
+      );
+
+      expect(getByText('Counter')).toBeVisible();
+      expect(getByText(expectedText)).toBeVisible();
+    }
+  );
+
+  it('should display status badge correctly', () => {
+    const itemsWithStatusBadge: SegmentedControlItemConfig[] = [
+      {
+        value: 'status',
+        label: 'Status',
+        badge: { type: 'status' },
+        testID: 'status-item',
+      },
+    ];
+
+    const { getByText, getByTestId } = renderWithTheme(
+      <SegmentedControl
+        {...defaultProps}
+        items={itemsWithStatusBadge}
+        value="status"
+      />
+    );
+
+    expect(getByText('Status')).toBeVisible();
+    expect(getByTestId('status-item-badge')).toBeVisible();
+  });
+
+  it('should display subtext when provided', () => {
+    const itemsWithSubtext: SegmentedControlItemConfig[] = [
+      {
+        value: 'item1',
+        label: 'Main Label',
+        subText: 'Secondary text',
+      },
+    ];
+
+    const { getByText } = renderWithTheme(
+      <SegmentedControl
+        {...defaultProps}
+        items={itemsWithSubtext}
+        value="item1"
+      />
+    );
+
+    expect(getByText('Main Label')).toBeVisible();
+    expect(getByText('Secondary text')).toBeVisible();
+    expect(getByText('·')).toBeVisible(); // bullet separator
+  });
+
+  it('should render complex control with all features correctly', () => {
+    const complexItems: SegmentedControlItemConfig[] = [
+      {
+        value: 'complex1',
+        label: 'Dashboard',
+        subText: 'Overview',
+        prefix: 'home-outlined',
+        suffix: 'cog-outlined',
+        badge: { type: 'counter', value: 5, max: 3 },
+        testID: 'complex1',
+      },
+      {
+        value: 'complex2',
+        label: 'Profile',
+        badge: { type: 'status' },
+        disabled: true,
+        testID: 'complex2',
+      },
+      {
+        value: 'complex3',
+        label: 'Settings',
+        prefix: 'pencil-outlined',
+        testID: 'complex3',
+      },
+    ];
+
+    const { getByText, getByTestId } = renderWithTheme(
+      <SegmentedControl
+        {...defaultProps}
+        items={complexItems}
+        value="complex1"
+        size="large"
+        testID="complex-control"
+      />
+    );
+
+    // Control container
+    expect(getByTestId('complex-control')).toBeVisible();
+    expect(getByTestId('complex-control')).toHaveStyle({ height: scale(44) }); // large size
+
+    // First item - all features
+    expect(getByText('Dashboard')).toBeVisible();
+    expect(getByText('Overview')).toBeVisible();
+    expect(getByText('·')).toBeVisible(); // bullet separator
+    expect(getByText('3+')).toBeVisible(); // over max badge
+    expect(getByTestId('complex1-prefix')).toBeVisible();
+    expect(getByTestId('complex1-suffix')).toBeVisible();
+
+    // Second item - disabled with status badge
+    expect(getByText('Profile')).toBeVisible();
+    expect(getByTestId('complex2-badge')).toBeVisible();
+
+    // Third item - simple with prefix
+    expect(getByText('Settings')).toBeVisible();
+    expect(getByTestId('complex3-prefix')).toBeVisible();
+  });
+
+  it('should call onItemPress with correct item when pressed', () => {
+    const onItemPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <SegmentedControl {...defaultProps} onItemPress={onItemPress} />
+    );
+
+    fireEvent.press(getByText('Option 2'));
+
+    expect(onItemPress).toHaveBeenCalledTimes(1);
+    expect(onItemPress).toHaveBeenCalledWith({
+      value: 'option2',
+      label: 'Option 2',
+    });
+  });
+});

package/src/components/SegmentedControl/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import SegmentedItem from './SegmentedItem';
+import { StyledSegmentedControlWrapper } from './StyledSegmentedControl';
+import type { SegmentedControlItemConfig } from './types';
+
+export interface SegmentedControlProps extends ViewProps {
+  /**
+   * The size of the segmented control.
+   */
+  size?: 'medium' | 'large';
+  /**
+   * The items to display in the segmented control.
+   */
+  items: SegmentedControlItemConfig[];
+  /**
+   * The value of the selected item.
+   */
+  value: string;
+  /**
+   * Test ID for testing purposes.
+   */
+  testID?: string;
+  /**
+   * The style of the segmented control.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The callback function to be called when the selected item changes.
+   */
+  onItemPress: (item: SegmentedControlItemConfig) => void;
+}
+
+const SegmentedControl = ({
+  size = 'medium',
+  items,
+  value,
+  testID,
+  style,
+  onItemPress,
+}: SegmentedControlProps) => {
+  return (
+    <StyledSegmentedControlWrapper
+      themeSize={size}
+      testID={testID}
+      style={style}
+    >
+      {items.map((item) => (
+        <SegmentedItem
+          {...item}
+          key={item.value}
+          selected={item.value === value}
+          onPress={() => onItemPress(item)}
+          size={size}
+        />
+      ))}
+    </StyledSegmentedControlWrapper>
+  );
+};
+
+export default SegmentedControl;

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,46 @@
+import type { IconName } from '../Icon';
+
+export type StatusBadgeType = {
+  type: 'status';
+};
+
+export type CounterBadgeType = {
+  type: 'counter';
+  value: number;
+  max?: number;
+};
+
+export interface SegmentedControlItemConfig {
+  /**
+   * The value of the segment option.
+   */
+  value: string;
+  /**
+   * The label of the segment option.
+   */
+  label?: string;
+  /**
+   * The subtext of the segment option.
+   */
+  subText?: string;
+  /**
+   * The prefix of the segment option.
+   */
+  prefix?: IconName;
+  /**
+   * The suffix of the segment option.
+   */
+  suffix?: IconName;
+  /**
+   * Test ID for testing purposes.
+   */
+  testID?: string;
+  /**
+   * Whether the segment option is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The badge configuration of the segment option.
+   */
+  badge?: StatusBadgeType | CounterBadgeType;
+}

package/src/components/Typography/Body/StyledBody.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import { ThemeIntent } from '../types';
+import type { TypographyIntent } from '../types';
 
 type ThemeVariant = 'small' | 'small-bold' | 'regular' | 'regular-bold';
 type FontWeights = 'regular' | 'semiBold';
@@ -20,7 +20,7 @@ const FONTSIZE_MAP: Record<ThemeVariant, FontSizes> = {
   'small-bold': 'small',
 } as const;
 const StyledBody = styled(Text)<{
-  themeIntent: ThemeIntent;
+  themeIntent: TypographyIntent;
   themeTypeface: 'neutral' | 'playful';
   themeVariant: ThemeVariant;
 }>(({ themeIntent, theme, themeTypeface, themeVariant }) => ({

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -204,6 +204,57 @@ exports[`Body has disabled intent style 1`] = `
 </View>
 `;
 
+exports[`Body has inactive intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="inactive"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Body has info intent style 1`] = `
 <View
   style={

package/src/components/Typography/Body/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ describe('Body', () => {
     ${'archived'}
     ${'disabled'}
     ${'muted'}
+    ${'inactive'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Body intent={intent}>This is a test</Body>

package/src/components/Typography/Body/index.tsx

@@ -6,6 +6,7 @@ import type {
   TextStyle,
 } from 'react-native';
 import { StyledBody } from './StyledBody';
+import type { TypographyIntent } from '../types';
 
 export interface BodyProps extends NativeTextProps {
   /**
@@ -15,19 +16,7 @@ export interface BodyProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?:
-    | 'body'
-    | 'subdued'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'danger'
-    | 'inverted'
-    | 'archived'
-    | 'disabled'
-    | 'muted';
+  intent?: TypographyIntent;
   /**
    * Additional style.
    */

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -1,10 +1,10 @@
 import { Text } from 'react-native';
 import styled from '@emotion/native';
-import { FONTWEIGHT_MAP, ThemeIntent } from '../types';
+import { FONTWEIGHT_MAP, TypographyIntent } from '../types';
 
 const StyledCaption = styled(Text)<{
   themeFontWeight: 'regular' | 'semi-bold';
-  themeIntent: ThemeIntent;
+  themeIntent: TypographyIntent;
 }>(({ themeFontWeight, themeIntent, theme }) => ({
   fontSize: theme.__hd__.typography.fontSizes.caption,
   lineHeight: theme.__hd__.typography.lineHeights.caption,

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -200,6 +200,56 @@ exports[`Caption has disabled intent style 1`] = `
 </View>
 `;
 
+exports[`Caption has inactive intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="inactive"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Caption has info intent style 1`] = `
 <View
   style={

package/src/components/Typography/Caption/__tests__/index.spec.tsx

@@ -37,6 +37,7 @@ describe('Caption', () => {
     ${'archived'}
     ${'disabled'}
     ${'muted'}
+    ${'inactive'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Caption intent={intent}>This is a test</Caption>

package/src/components/Typography/Caption/index.tsx

@@ -6,6 +6,7 @@ import type {
   TextStyle,
 } from 'react-native';
 import { StyledCaption } from './StyledCaption';
+import type { TypographyIntent } from '../types';
 
 export interface CaptionProps extends NativeTextProps {
   /**
@@ -19,19 +20,7 @@ export interface CaptionProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?:
-    | 'body'
-    | 'subdued'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'danger'
-    | 'inverted'
-    | 'archived'
-    | 'disabled'
-    | 'muted';
+  intent?: TypographyIntent;
   /**
    * Additional style.
    */

package/src/components/Typography/Label/StyledLabel.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import { ThemeIntent } from '../types';
+import type { TypographyIntent } from '../types';
 
 const StyledLabel = styled(Text)<{
-  themeIntent: ThemeIntent;
+  themeIntent: TypographyIntent;
 }>(({ themeIntent, theme }) => ({
   fontSize: theme.__hd__.typography.fontSizes.label,
   lineHeight: theme.__hd__.typography.lineHeights.label,

package/src/components/Typography/Label/__tests__/__snapshots__/index.spec.tsx.snap

@@ -192,6 +192,54 @@ exports[`Label has disabled intent style 1`] = `
 </View>
 `;
 
+exports[`Label has inactive intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#808f91",
+          "fontSize": 10,
+          "letterSpacing": 0,
+          "lineHeight": 14,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="inactive"
+  >
+    This is a test
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Label has info intent style 1`] = `
 <View
   style={

package/src/components/Typography/Label/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ describe('Label', () => {
     ${'archived'}
     ${'disabled'}
     ${'muted'}
+    ${'inactive'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Label intent={intent}>This is a test</Label>

package/src/components/Typography/Label/index.tsx

@@ -6,6 +6,7 @@ import type {
   TextStyle,
 } from 'react-native';
 import { StyledLabel } from './StyledLabel';
+import type { TypographyIntent } from '../types';
 
 export interface LabelProps extends NativeTextProps {
   /**
@@ -15,19 +16,7 @@ export interface LabelProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?:
-    | 'body'
-    | 'subdued'
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'danger'
-    | 'inverted'
-    | 'archived'
-    | 'disabled'
-    | 'muted';
+  intent?: TypographyIntent;
   /**
    * Additional style.
    */

package/src/components/Typography/Title/StyledTitle.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/native';
 import { Text } from 'react-native';
-import { ThemeIntent } from '../types';
+import type { TypographyIntent } from '../types';
 
 type ThemeLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 const StyledTitle = styled(Text)<{
-  themeIntent: ThemeIntent;
+  themeIntent: TypographyIntent;
   themeLevel: ThemeLevel;
   themeTypeface: 'neutral' | 'playful';
 }>(({ themeIntent, themeLevel, theme, themeTypeface: typeface }) => ({