@utilitywarehouse/hearth-react-native 0.27.2 → 0.28.0-testid-fix-1

package/build/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Combobox';
 export * from './Container';
 export * from './CurrencyInput';
 export * from './DateInput';
@@ -39,20 +40,24 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Timeline';
 export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';

package/build/components/index.js

@@ -12,6 +12,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Combobox';
 export * from './Container';
 export * from './CurrencyInput';
 export * from './DateInput';
@@ -40,20 +41,24 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Timeline';
 export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';

package/build/tokens/components/dark/timeline.d.ts

@@ -13,8 +13,8 @@ declare const _default: {
     readonly gap: 12;
     readonly progress: {
         readonly circle: {
-            readonly height: 24;
-            readonly width: 24;
+            readonly height: 28;
+            readonly width: 28;
         };
     };
     readonly static: {

package/build/tokens/components/dark/timeline.js

@@ -13,8 +13,8 @@ export default {
     gap: 12,
     progress: {
         circle: {
-            height: 24,
-            width: 24,
+            height: 28,
+            width: 28,
         },
     },
     static: {

package/docs/components/AllComponents.web.tsx

@@ -8,6 +8,7 @@ import {
   ChevronRightMediumIcon,
   EditSmallIcon,
   ElectricityMediumIcon,
+  ExpandSmallIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
   ShareSmallIcon,
@@ -39,6 +40,7 @@ import {
   CarouselItem,
   Center,
   Checkbox,
+  Combobox,
   Container,
   CurrencyInput,
   DateInput,
@@ -72,6 +74,7 @@ import {
   MenuTrigger,
   Modal,
   OL,
+  Pagination,
   Pill,
   PillGroup,
   ProgressBar,
@@ -89,11 +92,19 @@ import {
   Spinner,
   Switch,
   Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
   TabPanel,
   Tabs,
   TabsList,
   Textarea,
   ThemedImage,
+  Timeline,
+  TimelineItem,
   TimePicker,
   TimePickerInput,
   ToastItem,
@@ -139,6 +150,7 @@ const ComponentWrapper = ({
 };
 
 const AllComponents: React.FC = () => {
+  const [comboboxValue, setComboboxValue] = React.useState<string | null>('uk');
   const [selectValue, setSelectValue] = React.useState('1');
   const [toggleButtonValue, setToggleButtonValue] = React.useState('');
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -349,6 +361,24 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Combobox" link="/?path=/docs/forms-combobox--docs">
+            <Center flex={1}>
+              <BottomSheetModalProvider>
+                <Combobox
+                  label="Search a country"
+                  placeholder="Search for a country"
+                  searchPlaceholder="Search for a country"
+                  options={[
+                    { label: 'United Kingdom', value: 'uk' },
+                    { label: 'United States', value: 'us' },
+                    { label: 'Canada', value: 'ca' },
+                  ]}
+                  value={comboboxValue}
+                  onValueChange={setComboboxValue}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
             <Container spacing="md" backgroundColor="secondary">
               <Box h={20} bg={color.blue[300]} />
@@ -390,29 +420,6 @@ const AllComponents: React.FC = () => {
               </BottomSheetModalProvider>
             </Center>
           </ComponentWrapper>
-          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
-            <Center flex={1}>
-              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
-              <BottomSheetModalProvider>
-                <TimePicker
-                  ref={timePickerRef}
-                  date={selectedTime}
-                  onChange={({ date }) => setSelectedTime(date)}
-                  onCancel={() => setSelectedTime(undefined)}
-                />
-              </BottomSheetModalProvider>
-            </Center>
-          </ComponentWrapper>
-          <ComponentWrapper
-            name="Time Picker Input"
-            link="/?path=/docs/forms-time-picker-input--docs"
-          >
-            <Center flex={1} padding="200">
-              <BottomSheetModalProvider>
-                <TimePickerInput placeholder="HH:mm" />
-              </BottomSheetModalProvider>
-            </Center>
-          </ComponentWrapper>
           <ComponentWrapper
             name="Description List"
             link="/?path=/docs/components-description-list--docs"
@@ -681,6 +688,19 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Pagination" link="/?path=/docs/components-pagination--docs">
+            <Center flex={1} p="200">
+              <Box style={{ width: 280 }}>
+                <Pagination
+                  currentPage={3}
+                  totalPages={10}
+                  onPageChange={() => {}}
+                  condensed
+                  hideSkipButtons
+                />
+              </Box>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
             <Center flex={1} p="200">
               <PillGroup
@@ -733,6 +753,7 @@ const AllComponents: React.FC = () => {
               </RadioCardGroup>
             </Center>
           </ComponentWrapper>
+
           <ComponentWrapper
             name="Section Header"
             link="/?path=/docs/components-section-header--docs"
@@ -795,6 +816,36 @@ const AllComponents: React.FC = () => {
               <Switch value={switchEnabled} onValueChange={toggleSwitch} />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Table" link="/?path=/docs/components-table--docs">
+            <Center flex={1} px="300">
+              <Box style={{ width: 360 }}>
+                <Table container="subtle">
+                  <TableHeader color="purple">
+                    <TableHeaderCell
+                      trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
+                    >
+                      Name
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
+                    >
+                      Plan
+                    </TableHeaderCell>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableHeaderCell row>Alex Morgan</TableHeaderCell>
+                      <TableCell>Full Fibre 900</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHeaderCell row>Priya Shah</TableHeaderCell>
+                      <TableCell>Energy Saver</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </Box>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Tabs" link="/?path=/docs/components-tabs--docs">
             <Center flex={1}>
               <Tabs defaultValue="tab-1">
@@ -831,6 +882,38 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Timeline" link="/?path=/docs/components-timeline--docs">
+            <Center flex={1} px="300">
+              <Timeline variant="progress">
+                <TimelineItem label="Order placed" helperText="Received" state="complete" />
+                <TimelineItem label="Checking details" helperText="In progress" state="active" />
+                <TimelineItem label="Service live" helperText="Pending" state="incomplete" />
+              </Timeline>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
+            <Center flex={1}>
+              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
+              <BottomSheetModalProvider>
+                <TimePicker
+                  ref={timePickerRef}
+                  date={selectedTime}
+                  onChange={({ date }) => setSelectedTime(date)}
+                  onCancel={() => setSelectedTime(undefined)}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Time Picker Input"
+            link="/?path=/docs/forms-time-picker-input--docs"
+          >
+            <Center flex={1} padding="200">
+              <BottomSheetModalProvider>
+                <TimePickerInput placeholder="HH:mm" />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Toast" link="/?path=/docs/components-toast--docs">
             <Center flex={1} p="200">
               <ToastItem