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

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

@@ -0,0 +1,359 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SegmentedControl should render correctly with default props 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#f6f6f7",
+            "borderRadius": 16,
+            "flexDirection": "row",
+            "height": 36,
+            "justifyContent": "center",
+            "paddingHorizontal": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeSize="medium"
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 12,
+          "elevation": 6,
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "height": 28,
+          "justifyContent": "center",
+          "opacity": 1,
+          "shadowColor": "#001f23",
+          "shadowOffset": {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 2,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 8,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {},
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "gap": 4,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 14,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 22,
+                },
+                [
+                  {},
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="body"
+            themeTypeface="neutral"
+            themeVariant="small-bold"
+          >
+            Option 1
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 12,
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "height": 28,
+          "justifyContent": "center",
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 8,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {},
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "gap": 4,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#808f91",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 14,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 22,
+                },
+                [
+                  {},
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="inactive"
+            themeTypeface="neutral"
+            themeVariant="small-bold"
+          >
+            Option 2
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 12,
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "height": 28,
+          "justifyContent": "center",
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          [
+            {},
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 8,
+                "justifyContent": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {},
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "gap": 4,
+                  "justifyContent": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            style={
+              [
+                {
+                  "color": "#808f91",
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 14,
+                  "letterSpacing": 0.24,
+                  "lineHeight": 22,
+                },
+                [
+                  {},
+                  undefined,
+                ],
+              ]
+            }
+            themeIntent="inactive"
+            themeTypeface="neutral"
+            themeVariant="small-bold"
+          >
+            Option 3
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+  <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>
+`;

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;
+}