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

package/src/components/Calendar/index.tsx

@@ -3,8 +3,8 @@ import {
   MonthYearPickerViewIOS,
 } from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
-import React, { useMemo, useState } from 'react';
-import { LayoutChangeEvent, Platform, TouchableOpacity } from 'react-native';
+import React, { useState } from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
 import { useTheme } from '../../theme';
 import { noop } from '../../utils/functions';
 import Box from '../Box';
@@ -20,80 +20,16 @@ import {
   StyledContainer,
   StyledDisabledCalendarRowItem,
 } from './StyledCalendar';
-import { getValidDate, initArray, isEqDate } from './helpers';
+import {
+  getCalendarButtonState,
+  getCalendarDate,
+  isEqDate,
+  shouldUseMonthPicker,
+} from './helpers';
 import CalendarRange from './CalendarRange';
-
-const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-const WEEK_INDEX_OFFSET = 1;
-const SUNDAY_INDEX = 6;
-
-// Always render 7 rows x 6 items for consistent layout
-const TOTAL_DATES_ITEMS = 7 * 6;
-
-type ParsedMaskedDate = {
-  [key: string]: boolean;
-};
-
-export interface CalendarProps {
-  /**
-   * Selected date value.
-   */
-  value?: Date;
-  /**
-   * Visible date of month that calendar opens to display. Default is now.
-   */
-  visibleDate: Date;
-  /**
-   * Mininum date. Restrict the range of possible date values.
-   */
-  minDate?: Date;
-  /**
-   * Maximum date. Restrict the range of possible date values.
-   */
-  maxDate?: Date;
-  /**
-   * Callback is called when selected date value is changed.
-   */
-  onChange?: (date: Date) => void;
-  /**
-   * Handler to be called when the user taps the previous button.
-   */
-  onPreviousPress?: () => void;
-  /**
-   * Handler to be called when the user taps the next button.
-   */
-  onNextPress?: () => void;
-  /**
-   * Handler to be called when the user taps the title.
-   */
-  onTitlePress?: () => void;
-  /**
-   * Mark dates to display on calendar.
-   */
-  markedDates?: Date[];
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-  /**
-   * Callback when header month is changed, passing this prop will disable onTitlePress.
-   */
-  onMonthChange?: (date: Date) => void;
-  /*
-   * Callback when month picker is toggled.
-   */
-  onToggleMonthPicker?: (visible: boolean) => void;
-  /**
-   * Label for the confirm button of the month picker, Android only.
-   */
-  monthPickerConfirmLabel?: string;
-  /**
-   * Label for the cancel button of the month picker, Android only.
-   */
-  monthPickerCancelLabel?: string;
-}
+import { DAYS_OF_WEEK } from './constants';
+import { CalendarProps } from './types';
+import { useCalendarLayout } from './shared/hooks/useCalendarLayout';
 
 const Calendar = ({
   value,
@@ -112,98 +48,37 @@ const Calendar = ({
   monthPickerCancelLabel,
 }: CalendarProps) => {
   const theme = useTheme();
-  const currentMonth = visibleDate.getMonth();
-  const currentYear = visibleDate.getFullYear();
-  const now = new Date();
-  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
-    (current, markedDate) => ({
-      ...current,
-      [markedDate.toDateString()]: true,
-    }),
-    {}
-  );
-  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
-  const [contentHeight, setContentHeight] = useState(0);
-  const [contentWidth, setContentWidth] = useState(0);
-  const calendarItemWidth = useMemo(
-    () =>
-      contentWidth > 0
-        ? Math.floor(
-            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
-          )
-        : undefined,
-    [contentWidth, theme]
-  );
-
-  const useMonthPicker = onMonthChange !== noop;
-
-  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-
-  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  const firstDayWeekIndexOfMonth =
-    firstDateOfMonth.getDay() === 0
-      ? SUNDAY_INDEX
-      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
-
-  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-
-  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
-    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    const count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(
-      new Date(currentYear, currentMonth - 1, count),
-      minDate,
-      maxDate
-    );
+  const { onLayout, contentHeight, contentWidth, calendarItemWidth } =
+    useCalendarLayout();
+  const {
+    parsedMaskedDate,
+    daysOfPreviousMonth,
+    daysOfCurrentMonth,
+    daysOfNextMonth,
+  } = getCalendarDate({
+    visibleDate,
+    markedDates,
+    minDate,
+    maxDate,
+    onMonthChange,
   });
+  const { disablePrevButton, disableNextButton } = getCalendarButtonState({
+    visibleDate,
+    minDate,
+    maxDate,
+  });
+  const shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
 
-  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
-    getValidDate(
-      new Date(currentYear, currentMonth, index + 1),
-      minDate,
-      maxDate
-    )
-  );
-
-  const daysOfNextMonth = initArray(
-    TOTAL_DATES_ITEMS -
-      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
-    (index) =>
-      getValidDate(
-        new Date(currentYear, currentMonth + 1, index + 1),
-        minDate,
-        maxDate
-      )
-  );
-
-  const disablePrevButton =
-    minDate === undefined
-      ? false
-      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
-        minDate >= firstDateOfMonth;
-
-  const disableNextButton =
-    maxDate === undefined
-      ? false
-      : !daysOfNextMonth.some((date) => date !== undefined) ||
-        maxDate <= lastDateOfMonth;
+  const [monthPickerVisible, setMonthPickerVisible] = useState(false);
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
+  const now = new Date();
 
   return (
     <StyledContainer testID={testID}>
       <StyledCalendarHeader>
         <ContentNavigator
           value={
-            !useMonthPicker ? (
+            !shouldShowMonthPicker ? (
               format('MMMM yyyy', visibleDate)
             ) : (
               <TouchableOpacity
@@ -239,7 +114,7 @@ const Calendar = ({
           }
           onPreviousPress={onPreviousPress}
           onNextPress={onNextPress}
-          onPress={useMonthPicker ? undefined : onTitlePress}
+          onPress={shouldShowMonthPicker ? undefined : onTitlePress}
           previousDisabled={disablePrevButton}
           nextDisabled={disableNextButton}
           fontSize="large"

package/src/components/Calendar/shared/hooks/useCalendarLayout.ts

@@ -0,0 +1,37 @@
+import { useCallback, useMemo, useState } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+
+import { useTheme } from '../../../../theme';
+
+export const useCalendarLayout = () => {
+  const theme = useTheme();
+
+  const [contentHeight, setContentHeight] = useState(0);
+  const calendarItemHeight =
+    contentHeight - theme.__hd__.calendar.space.iosPickerMarginVertical * 2;
+
+  const [contentWidth, setContentWidth] = useState(0);
+  const calendarItemWidth = useMemo(
+    () =>
+      contentWidth > 0
+        ? Math.floor(
+            (contentWidth - theme.__hd__.calendar.space.cellPadding) / 7
+          )
+        : undefined,
+    [contentWidth, theme]
+  );
+
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setContentHeight(height);
+    setContentWidth(width);
+  }, []);
+
+  return {
+    onLayout,
+    contentHeight,
+    calendarItemHeight,
+    contentWidth,
+    calendarItemWidth,
+  };
+};

package/src/components/Calendar/types.ts

@@ -0,0 +1,62 @@
+export type ParsedMaskedDate = {
+  [key: string]: boolean;
+};
+
+export interface CalendarProps {
+  /**
+   * Selected date value.
+   */
+  value?: Date;
+  /**
+   * Visible date of month that calendar opens to display. Default is now.
+   */
+  visibleDate: Date;
+  /**
+   * Mininum date. Restrict the range of possible date values.
+   */
+  minDate?: Date;
+  /**
+   * Maximum date. Restrict the range of possible date values.
+   */
+  maxDate?: Date;
+  /**
+   * Callback is called when selected date value is changed.
+   */
+  onChange?: (date: Date) => void;
+  /**
+   * Handler to be called when the user taps the previous button.
+   */
+  onPreviousPress?: () => void;
+  /**
+   * Handler to be called when the user taps the next button.
+   */
+  onNextPress?: () => void;
+  /**
+   * Handler to be called when the user taps the title.
+   */
+  onTitlePress?: () => void;
+  /**
+   * Mark dates to display on calendar.
+   */
+  markedDates?: Date[];
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Callback when header month is changed, passing this prop will disable onTitlePress.
+   */
+  onMonthChange?: (date: Date) => void;
+  /*
+   * Callback when month picker is toggled.
+   */
+  onToggleMonthPicker?: (visible: boolean) => void;
+  /**
+   * Label for the confirm button of the month picker, Android only.
+   */
+  monthPickerConfirmLabel?: string;
+  /**
+   * Label for the cancel button of the month picker, Android only.
+   */
+  monthPickerCancelLabel?: string;
+}

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -3,7 +3,8 @@ import { Platform, ScrollView, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
-import Calendar, { CalendarProps } from '../Calendar';
+import Calendar from '../Calendar';
+import type { CalendarProps } from '../Calendar/types';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"timesheet":59182,"touch-id":59183,"trash-bin":59184,"unlock":59185,"user":59186,"video-1":59187,"video-2":59188,"wallet":59189,"warning":59190,"academic-hat-outlined":59191,"accommodation-outlined":59192,"activate-outlined":59193,"add-credit-card-outlined":59194,"add-person-outlined":59195,"add-section-outlined":59196,"add-time-outlined":59197,"add":59198,"adjustment-outlined":59199,"afternoon-outlined":59200,"ai-outlined":59201,"alignment-2-outlined":59202,"alignment-outlined":59203,"all-caps":59204,"application-outlined":59205,"arrow-down":59206,"arrow-downwards":59207,"arrow-left":59208,"arrow-leftwards":59209,"arrow-right":59210,"arrow-rightwards":59211,"arrow-up":59212,"arrow-upwards":59213,"article-outlined":59214,"at-sign":59215,"auto-graph-outlined":59216,"automotive-outlined":59217,"bakery-outlined":59218,"bar-outlined":59219,"beauty-outlined":59220,"beer-outlined":59221,"bell-active-outlined":59222,"bell-outlined":59223,"bell-slash-outlined":59224,"bill-management-outlined":59225,"billing-outlined":59226,"body-outlined":59227,"bold":59228,"bolt-outlined":59229,"book-outlined":59230,"bookmark-added-outlined":59231,"bookmark-checked-outlined":59232,"bookmark-outlined":59233,"box-1-outlined":59234,"box-check-outlined":59235,"box-outlined":59236,"bullet-points":59237,"cake-outlined":59238,"calculator-outlined":59239,"calendar-dates-outlined":59240,"calendar-star-outlined":59241,"call-outlined":59242,"call-split-outlined":59243,"camera-outlined":59244,"cancel":59245,"car-forward-outlined":59246,"cashback-outlined":59247,"charging-station-outlined":59248,"chat-bubble-outlined":59249,"chat-unread-outlined":59250,"checkmark":59251,"circle-add-outlined":59252,"circle-cancel-outlined":59253,"circle-down-outlined":59254,"circle-info-outlined":59255,"circle-left-outlined":59256,"circle-ok-outlined":59257,"circle-question-outlined":59258,"circle-remove-outlined":59259,"circle-right-outlined":59260,"circle-up-outlined":59261,"circle-warning-outlined":59262,"clock-2-outlined":59263,"clock-in-outlined":59264,"clock-out-outlined":59265,"clock-outlined":59266,"cog-outlined":59267,"coin-outlined":59268,"coin-super-outlined":59269,"comment-outlined":59270,"contacts-outlined":59271,"contacts-user-outlined":59272,"credit-card-outlined":59273,"cultural-site-outlined":59274,"cup-outlined":59275,"dentistry-outlined":59276,"direction-arrows-outlined":59277,"directory-outlined":59278,"document-outlined":59279,"dollar-box-outlined":59280,"dollar-card-outlined":59281,"dollar-coin-shine-outlined":59282,"dollar-credit-card-outlined":59283,"dollar-sign":59284,"double-buildings-outlined":59285,"double-left-arrows":59286,"double-right-arrows":59287,"download-box-outlined":59288,"download-outlined":59289,"edit-template-outlined":59290,"electronics-outlined":59291,"email-outlined":59292,"end-break-outlined":59293,"enter-arrow":59294,"entertainment-outlined":59295,"envelope-outlined":59296,"evening-outlined":59297,"expense-approval-outlined":59298,"expense-outlined":59299,"explore-outlined":59300,"extension-outlined":59301,"external-link":59302,"eye-invisible-outlined":59303,"eye-outlined":59304,"face-id":59305,"face-meh-outlined":59306,"face-open-smiley-outlined":59307,"face-sad-outlined":59308,"face-smiley-outlined":59309,"fastfood-outlined":59310,"feed-outlined":59311,"file-certified-outlined":59312,"file-clone-outlined":59313,"file-copy-outlined":59314,"file-dispose-outlined":59315,"file-dollar-certified-outlined":59316,"file-dollar-outlined":59317,"file-download-outlined":59318,"file-export-outlined":59319,"file-lock-outlined":59320,"file-outlined":59321,"file-search-outlined":59322,"file-secured-outlined":59323,"file-statutory-outlined":59324,"file-verified-outlined":59325,"filter-outlined":59326,"fitness-outlined":59327,"folder-outlined":59328,"folder-upload-outlined":59329,"folder-user-outlined":59330,"form-outlined":59331,"funnel-filter-outline":59332,"goal-outlined":59333,"graph-outlined":59334,"grocery-outlined":59335,"hand-holding-user-outlined":59336,"handshake-outlined":59337,"happy-sun-outlined":59338,"health-bag-outlined":59339,"heart-outlined":59340,"home-active-outlined":59341,"home-outlined":59342,"id-card-outlined":59343,"image-outlined":59344,"import-outlined":59345,"instapay-outlined":59346,"italic":59347,"job-search-outlined":59348,"leave-approval-outlined":59349,"link-1":59350,"link-2":59351,"list-outlined":59352,"live-help-outlined":59353,"local_mall_outlined":59354,"location-on-outlined":59355,"location-outlined":59356,"lock-outlined":59357,"locked-file-outlined":59358,"log-out":59359,"mail-outlined":59360,"map-outlined":59361,"media-content-outlined":59362,"menu-close":59363,"menu-expand":59364,"menu-fold-outlined":59365,"menu-unfold-outlined":59366,"moneybag-outlined":59367,"moon-outlined":59368,"more-horizontal":59369,"more-vertical":59370,"morning-outlined":59371,"multiple-folders-outlined":59372,"multiple-users-outlined":59373,"near-me-outlined":59374,"node-outlined":59375,"number-points":59376,"number":59377,"overview-outlined":59378,"park-outlined":59379,"payment-summary-outlined":59380,"payslip-outlined":59381,"pencil-outlined":59382,"percentage":59383,"phone-outlined":59384,"piggy-bank-outlined":59385,"plane-outlined":59386,"play-circle-outlined":59387,"print-outlined":59388,"propane-tank-outlined":59389,"qr-code-outlined":59390,"qualification-outlined":59391,"re-assign":59392,"redeem":59393,"refresh":59394,"remove":59395,"reply-outlined":59396,"restart":59397,"restaurant-outlined":59398,"resume-outlined":59399,"return-arrow":59400,"rostering-outlined":59401,"safety-outlined":59402,"save-outlined":59403,"schedule-outlined":59404,"search-outlined":59405,"search-secured-outlined":59406,"send-outlined":59407,"share-1":59408,"share-2":59409,"share-outlined-2":59410,"share-outlined":59411,"shield-check-outlined":59412,"shop-outlined":59413,"shopping_basket_outlined":59414,"show-chart-outlined":59415,"single-down-arrow":59416,"single-left-arrow":59417,"single-right-arrow":59418,"single-up-arrow":59419,"smart-match-outlined":59420,"sparkle-outlined":59421,"speaker-active-outlined":59422,"speaker-outlined":59423,"star-circle-outlined":59424,"star-outlined":59425,"start-break-outlined":59426,"stash-outlined":59427,"stopwatch-outlined":59428,"strikethrough":59429,"styler-outlined":59430,"suitcase-clock-outlined":59431,"suitcase-outlined":59432,"survey-outlined":59433,"switch-outlined":59434,"sync":59435,"tag-outlined":59436,"target-outlined":59437,"tennis-outlined":59438,"thumb-down-outlined":59439,"ticket-outlined":59440,"timesheet-outlined":59441,"timesheets-outlined":59442,"today-outlined":59443,"transfer":59444,"transportation-outlined":59445,"trash-bin-outlined":59446,"umbrela-outlined":59447,"unavailability-outlined":59448,"unavailable":59449,"underline":59450,"union-outlined":59451,"unlock-outlined":59452,"upload-outlined":59453,"user-circle-outlined":59454,"user-gear-outlined":59455,"user-outlined":59456,"user-rectangle-outlined":59457,"video-1-outlined":59458,"video-2-outlined":59459,"volunteer-outlined":59460,"wallet-outlined":59461,"wellness-outlined":59462}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark-checked":59013,"bookmark":59014,"box-check":59015,"box":59016,"bpay":59017,"buildings":59018,"cake":59019,"calendar-clock":59020,"calendar":59021,"candy-box-menu":59022,"caret-down-small":59023,"caret-down":59024,"caret-left-small":59025,"caret-left":59026,"caret-right-small":59027,"caret-right":59028,"caret-up-small":59029,"caret-up":59030,"check-radio":59031,"circle-add":59032,"circle-cancel":59033,"circle-check":59034,"circle-down":59035,"circle-info":59036,"circle-left":59037,"circle-ok":59038,"circle-pencil":59039,"circle-question":59040,"circle-remove":59041,"circle-right":59042,"circle-up":59043,"circle-warning":59044,"clock-3":59045,"clock":59046,"cloud-download":59047,"cloud-upload":59048,"cog":59049,"coin":59050,"contacts":59051,"credit-card":59052,"diamond":59053,"direction-arrows":59054,"directory":59055,"document":59056,"dollar-coin-shine":59057,"dot":59058,"double-buildings":59059,"edit-template":59060,"envelope":59061,"exclude":59062,"expand-content":59063,"expense":59064,"explore_nearby":59065,"eye-circle":59066,"eye-invisible":59067,"eye":59068,"face-meh":59069,"face-sad":59070,"face-smiley":59071,"feed":59072,"feedbacks":59073,"file-certified":59074,"file-clone":59075,"file-copy":59076,"file-csv":59077,"file-dispose":59078,"file-doc":59079,"file-excel":59080,"file-export":59081,"file-lock":59082,"file-pdf":59083,"file-powerpoint":59084,"file-search":59085,"file-secured":59086,"file-sheets":59087,"file-slide":59088,"file-verified":59089,"file-word":59090,"file":59091,"filter":59092,"folder-user":59093,"folder":59094,"format-bold":59095,"format-heading1":59096,"format-heading2":59097,"format-italic":59098,"format-list-bulleted":59099,"format-list-numbered":59100,"format-underlined":59101,"funnel-filter":59102,"global-dollar":59103,"globe":59104,"graduation-cap":59105,"graph":59106,"happy-sun":59107,"health-bag":59108,"heart":59109,"hero-points":59110,"home":59111,"image":59112,"import":59113,"incident-siren":59114,"instapay-daily":59115,"instapay-now":59116,"instapay":59117,"list":59118,"loading-2":59119,"loading":59120,"location-on":59121,"location":59122,"lock":59123,"looks-one":59124,"looks-two":59125,"media-content":59126,"menu":59127,"money-notes":59128,"moneybag":59129,"moon":59130,"multiple-stars":59131,"multiple-users":59132,"near-me":59133,"node":59134,"open-folder":59135,"paperclip-vertical":59136,"paperclip":59137,"payment-summary":59138,"pencil":59139,"phone":59140,"piggy-bank":59141,"plane-up":59142,"plane":59143,"play-arrow":59144,"play-circle":59145,"print":59146,"raising-hands":59147,"reply-arrow":59148,"reply":59149,"reschedule":59150,"rostering":59151,"salary-sacrifice":59152,"save":59153,"schedule-send":59154,"schedule":59155,"search-person":59156,"search":59157,"send":59158,"speaker-active":59159,"speaker":59160,"star-award":59161,"star-badge":59162,"star-circle":59163,"star-medal":59164,"star":59165,"steps-circle":59166,"stopwatch":59167,"suitcase":59168,"surfing":59169,"survey":59170,"swag-pillar-benefit":59171,"swag-pillar-career":59172,"swag-pillar-money":59173,"swag-pillar-work":59174,"swag":59175,"swipe-right":59176,"switch":59177,"tag":59178,"target":59179,"teams":59180,"thumb-down":59181,"thumb-up":59182,"timesheet":59183,"touch-id":59184,"trash-bin":59185,"unlock":59186,"user":59187,"video-1":59188,"video-2":59189,"wallet":59190,"warning":59191,"academic-hat-outlined":59192,"accommodation-outlined":59193,"activate-outlined":59194,"add-credit-card-outlined":59195,"add-person-outlined":59196,"add-section-outlined":59197,"add-time-outlined":59198,"add":59199,"adjustment-outlined":59200,"afternoon-outlined":59201,"ai-outlined":59202,"alignment-2-outlined":59203,"alignment-outlined":59204,"all-caps":59205,"application-outlined":59206,"arrow-down":59207,"arrow-downwards":59208,"arrow-left":59209,"arrow-leftwards":59210,"arrow-right":59211,"arrow-rightwards":59212,"arrow-up":59213,"arrow-upwards":59214,"article-outlined":59215,"at-sign":59216,"auto-graph-outlined":59217,"automotive-outlined":59218,"bakery-outlined":59219,"bar-outlined":59220,"beauty-outlined":59221,"beer-outlined":59222,"bell-active-outlined":59223,"bell-outlined":59224,"bell-slash-outlined":59225,"bill-management-outlined":59226,"billing-outlined":59227,"body-outlined":59228,"bold":59229,"bolt-outlined":59230,"book-outlined":59231,"bookmark-added-outlined":59232,"bookmark-checked-outlined":59233,"bookmark-outlined":59234,"box-1-outlined":59235,"box-check-outlined":59236,"box-outlined":59237,"bullet-points":59238,"cake-outlined":59239,"calculator-outlined":59240,"calendar-dates-outlined":59241,"calendar-star-outlined":59242,"call-outlined":59243,"call-split-outlined":59244,"camera-outlined":59245,"cancel":59246,"car-forward-outlined":59247,"cashback-outlined":59248,"charging-station-outlined":59249,"chat-bubble-outlined":59250,"chat-unread-outlined":59251,"checkmark":59252,"circle-add-outlined":59253,"circle-cancel-outlined":59254,"circle-down-outlined":59255,"circle-info-outlined":59256,"circle-left-outlined":59257,"circle-ok-outlined":59258,"circle-question-outlined":59259,"circle-remove-outlined":59260,"circle-right-outlined":59261,"circle-up-outlined":59262,"circle-warning-outlined":59263,"clock-2-outlined":59264,"clock-in-outlined":59265,"clock-out-outlined":59266,"clock-outlined":59267,"cog-outlined":59268,"coin-outlined":59269,"coin-super-outlined":59270,"comment-outlined":59271,"contacts-outlined":59272,"contacts-user-outlined":59273,"credit-card-outlined":59274,"cultural-site-outlined":59275,"cup-outlined":59276,"dentistry-outlined":59277,"direction-arrows-outlined":59278,"directory-outlined":59279,"document-outlined":59280,"dollar-box-outlined":59281,"dollar-card-outlined":59282,"dollar-coin-shine-outlined":59283,"dollar-credit-card-outlined":59284,"dollar-sign":59285,"double-buildings-outlined":59286,"double-left-arrows":59287,"double-right-arrows":59288,"download-box-outlined":59289,"download-outlined":59290,"edit-template-outlined":59291,"electronics-outlined":59292,"email-outlined":59293,"end-break-outlined":59294,"enter-arrow":59295,"entertainment-outlined":59296,"envelope-outlined":59297,"evening-outlined":59298,"expense-approval-outlined":59299,"expense-outlined":59300,"explore-outlined":59301,"extension-outlined":59302,"external-link":59303,"eye-invisible-outlined":59304,"eye-outlined":59305,"face-id":59306,"face-meh-outlined":59307,"face-open-smiley-outlined":59308,"face-sad-outlined":59309,"face-smiley-outlined":59310,"fastfood-outlined":59311,"feed-outlined":59312,"file-certified-outlined":59313,"file-clone-outlined":59314,"file-copy-outlined":59315,"file-dispose-outlined":59316,"file-dollar-certified-outlined":59317,"file-dollar-outlined":59318,"file-download-outlined":59319,"file-export-outlined":59320,"file-lock-outlined":59321,"file-outlined":59322,"file-search-outlined":59323,"file-secured-outlined":59324,"file-statutory-outlined":59325,"file-verified-outlined":59326,"filter-outlined":59327,"fitness-outlined":59328,"folder-outlined":59329,"folder-upload-outlined":59330,"folder-user-outlined":59331,"form-outlined":59332,"funnel-filter-outline":59333,"goal-outlined":59334,"graph-outlined":59335,"grocery-outlined":59336,"hand-holding-user-outlined":59337,"handshake-outlined":59338,"happy-sun-outlined":59339,"health-bag-outlined":59340,"heart-outlined":59341,"home-active-outlined":59342,"home-outlined":59343,"id-card-outlined":59344,"image-outlined":59345,"import-outlined":59346,"instapay-outlined":59347,"italic":59348,"job-search-outlined":59349,"leave-approval-outlined":59350,"link-1":59351,"link-2":59352,"list-outlined":59353,"live-help-outlined":59354,"local_mall_outlined":59355,"location-on-outlined":59356,"location-outlined":59357,"lock-outlined":59358,"locked-file-outlined":59359,"log-out":59360,"mail-outlined":59361,"map-outlined":59362,"media-content-outlined":59363,"menu-close":59364,"menu-expand":59365,"menu-fold-outlined":59366,"menu-unfold-outlined":59367,"moneybag-outlined":59368,"moon-outlined":59369,"more-horizontal":59370,"more-vertical":59371,"morning-outlined":59372,"multiple-folders-outlined":59373,"multiple-users-outlined":59374,"near-me-outlined":59375,"node-outlined":59376,"number-points":59377,"number":59378,"overview-outlined":59379,"park-outlined":59380,"payment-summary-outlined":59381,"payslip-outlined":59382,"pencil-outlined":59383,"percentage":59384,"phone-outlined":59385,"piggy-bank-outlined":59386,"plane-outlined":59387,"play-circle-outlined":59388,"print-outlined":59389,"propane-tank-outlined":59390,"qr-code-outlined":59391,"qualification-outlined":59392,"re-assign":59393,"redeem":59394,"refresh":59395,"remove":59396,"reply-outlined":59397,"restart":59398,"restaurant-outlined":59399,"resume-outlined":59400,"return-arrow":59401,"rostering-outlined":59402,"safety-outlined":59403,"save-outlined":59404,"schedule-outlined":59405,"search-outlined":59406,"search-secured-outlined":59407,"send-outlined":59408,"share-1":59409,"share-2":59410,"share-outlined-2":59411,"share-outlined":59412,"shield-check-outlined":59413,"shop-outlined":59414,"shopping_basket_outlined":59415,"show-chart-outlined":59416,"single-down-arrow":59417,"single-left-arrow":59418,"single-right-arrow":59419,"single-up-arrow":59420,"smart-match-outlined":59421,"sparkle-outlined":59422,"speaker-active-outlined":59423,"speaker-outlined":59424,"star-circle-outlined":59425,"star-outlined":59426,"start-break-outlined":59427,"stash-outlined":59428,"stopwatch-outlined":59429,"strikethrough":59430,"styler-outlined":59431,"suitcase-clock-outlined":59432,"suitcase-outlined":59433,"survey-outlined":59434,"switch-outlined":59435,"sync":59436,"tag-outlined":59437,"target-outlined":59438,"tennis-outlined":59439,"thumb-down-outlined":59440,"thumb-up-outlined":59441,"ticket-outlined":59442,"timesheet-outlined":59443,"timesheets-outlined":59444,"today-outlined":59445,"transfer":59446,"transportation-outlined":59447,"trash-bin-outlined":59448,"umbrela-outlined":59449,"unavailability-outlined":59450,"unavailable":59451,"underline":59452,"union-outlined":59453,"unlock-outlined":59454,"upload-outlined":59455,"user-circle-outlined":59456,"user-gear-outlined":59457,"user-outlined":59458,"user-rectangle-outlined":59459,"video-1-outlined":59460,"video-2-outlined":59461,"volunteer-outlined":59462,"wallet-outlined":59463,"wellness-outlined":59464}

package/src/components/Icon/IconList.ts

@@ -182,6 +182,7 @@ const IconList = [
   'target',
   'teams',
   'thumb-down',
+  'thumb-up',
   'timesheet',
   'touch-id',
   'trash-bin',
@@ -440,6 +441,7 @@ const IconList = [
   'target-outlined',
   'tennis-outlined',
   'thumb-down-outlined',
+  'thumb-up-outlined',
   'ticket-outlined',
   'timesheet-outlined',
   'timesheets-outlined',

package/src/components/SegmentedControl/SegmentedItem.tsx

@@ -0,0 +1,192 @@
+import React, { ComponentProps } from 'react';
+import Badge from '../Badge';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import {
+  StyledSegmentedItem,
+  StyledSegmentedItemLabelWrapper,
+  StyledSegmentedItemText,
+  StyledSegmentedItemWrapper,
+} from './StyledSegmentedControl';
+import type {
+  CounterBadgeType,
+  SegmentedControlItemConfig,
+  StatusBadgeType,
+} from './types';
+import Box from '../Box';
+
+const DOT_CHAR = '\u00B7';
+type TypographyIntent = ComponentProps<typeof Typography.Body>['intent'];
+type IconIntent = ComponentProps<typeof Icon>['intent'];
+
+export interface SegmentedItemProps extends SegmentedControlItemConfig {
+  /**
+   * Whether the segment option is selected.
+   */
+  selected?: boolean;
+  /**
+   * The size of the segment option.
+   */
+  size?: 'medium' | 'large';
+  /**
+   * The callback function to be called when the segment option is pressed.
+   */
+  onPress: () => void;
+}
+
+const SegmentedItemBadge = ({
+  children,
+  badge,
+  testID,
+}: {
+  children?: React.ReactNode;
+  badge?: StatusBadgeType | CounterBadgeType;
+  testID?: string;
+}) => {
+  if (!badge) return children;
+
+  if (badge.type === 'status') {
+    return (
+      <Badge.Status visible testID={testID}>
+        <Box marginEnd="smallMedium">{children}</Box>
+      </Badge.Status>
+    );
+  }
+
+  if (badge.type === 'counter') {
+    return (
+      <>
+        <Box marginEnd="xsmall">{children}</Box>
+        <Badge
+          visible
+          content={badge.value}
+          max={badge.max}
+          testID={testID}
+          size="small"
+        />
+      </>
+    );
+  }
+};
+
+const getTextAndIconIntent = ({
+  selected,
+  disabled,
+}: {
+  selected?: boolean;
+  disabled?: boolean;
+}): {
+  iconIntent: IconIntent;
+  textIntent: TypographyIntent;
+  subTextIntent: TypographyIntent;
+} => {
+  if (disabled) {
+    return {
+      iconIntent: 'disabled-text',
+      textIntent: 'disabled',
+      subTextIntent: 'disabled',
+    };
+  }
+
+  if (selected) {
+    return {
+      iconIntent: 'text',
+      textIntent: 'body',
+      subTextIntent: 'muted',
+    };
+  }
+
+  return {
+    iconIntent: 'inactive',
+    textIntent: 'inactive',
+    subTextIntent: 'inactive',
+  };
+};
+
+const SegmentedItem = ({
+  label,
+  prefix,
+  suffix,
+  selected = false,
+  size = 'medium',
+  testID,
+  onPress,
+  disabled,
+  badge,
+  subText,
+}: SegmentedItemProps) => {
+  const { iconIntent, textIntent, subTextIntent } = getTextAndIconIntent({
+    selected,
+    disabled,
+  });
+
+  const shouldShowSuffix = !!label && !!suffix;
+
+  return (
+    <StyledSegmentedItem
+      themeSize={size}
+      themeSelected={selected}
+      testID={testID}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <SegmentedItemBadge badge={badge} testID={`${testID}-badge`}>
+        <StyledSegmentedItemWrapper>
+          {/* Prefix */}
+          {prefix && (
+            <Icon
+              icon={prefix}
+              intent={iconIntent}
+              size="xxxsmall"
+              testID={`${testID}-prefix`}
+            />
+          )}
+
+          {/* Label and subtext */}
+
+          {!!label && (
+            <StyledSegmentedItemLabelWrapper>
+              {label && (
+                <StyledSegmentedItemText
+                  variant="small-bold"
+                  intent={textIntent}
+                >
+                  {label}
+                </StyledSegmentedItemText>
+              )}
+
+              {subText && (
+                <>
+                  <StyledSegmentedItemText
+                    variant="small"
+                    intent={subTextIntent}
+                  >
+                    {DOT_CHAR}
+                  </StyledSegmentedItemText>
+                  <StyledSegmentedItemText
+                    variant="small"
+                    intent={subTextIntent}
+                  >
+                    {subText}
+                  </StyledSegmentedItemText>
+                </>
+              )}
+            </StyledSegmentedItemLabelWrapper>
+          )}
+
+          {/* Suffix, only shown if there is a label and suffix */}
+          {shouldShowSuffix && (
+            <Icon
+              icon={suffix}
+              intent={iconIntent}
+              size="xxxsmall"
+              testID={`${testID}-suffix`}
+            />
+          )}
+        </StyledSegmentedItemWrapper>
+      </SegmentedItemBadge>
+    </StyledSegmentedItem>
+  );
+};
+
+export default SegmentedItem;

package/src/components/SegmentedControl/StyledSegmentedControl.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+import Box from '../Box';
+import Typography from '../Typography';
+
+const StyledSegmentedControlWrapper = styled(Box)<{
+  themeSize: 'medium' | 'large';
+}>(({ themeSize, theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.__hd__.segmentedControl.sizes.wrapperHeight[themeSize],
+  borderRadius: theme.__hd__.segmentedControl.radii.wrapper[themeSize],
+  backgroundColor: theme.__hd__.segmentedControl.colors.wrapperBackground,
+  alignSelf: 'flex-start',
+  paddingHorizontal:
+    theme.__hd__.segmentedControl.space.wrapperHorizontalPadding,
+}));
+
+const StyledSegmentedItem = styled(TouchableOpacity)<{
+  themeSize: 'medium' | 'large';
+  themeSelected: boolean;
+}>(({ themeSize, theme, themeSelected }) => ({
+  flexGrow: 1,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: theme.__hd__.segmentedControl.sizes.itemHeight[themeSize],
+  borderRadius: theme.__hd__.segmentedControl.radii.item[themeSize],
+  backgroundColor: themeSelected
+    ? theme.__hd__.segmentedControl.colors.itemBackground.active
+    : theme.__hd__.segmentedControl.colors.itemBackground.inactive,
+  ...theme.__hd__.segmentedControl.shadows.item[
+    themeSelected ? 'active' : 'inactive'
+  ],
+}));
+
+const StyledSegmentedItemWrapper = styled(Box)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: theme.__hd__.segmentedControl.space.itemAffixGap,
+}));
+
+const StyledSegmentedItemLabelWrapper = styled(Box)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: theme.__hd__.segmentedControl.space.itemLabelGap,
+}));
+
+const StyledSegmentedItemText = styled(Typography.Body)(({ theme }) => ({
+  lineHeight: theme.__hd__.segmentedControl.lineHeights.itemText,
+}));
+
+export {
+  StyledSegmentedControlWrapper,
+  StyledSegmentedItem,
+  StyledSegmentedItemLabelWrapper,
+  StyledSegmentedItemText,
+  StyledSegmentedItemWrapper,
+};