@utilitywarehouse/hearth-react-native 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
+    "@utilitywarehouse/hearth-tokens": "^0.2.2",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.3.0",
-    "@utilitywarehouse/hearth-tokens": "^0.2.2"
+    "@utilitywarehouse/hearth-svg-assets": "^0.3.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
@@ -76,6 +76,7 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
+    "copyChangelog": "node ./scripts/copyChangelog.js",
     "lint:fix": "TIMING=1 eslint --fix .",
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
@@ -83,9 +84,8 @@
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "storybook dev -p 6006",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
+    "dev": "npm run copyChangelog && storybook dev -p 6006",
+    "build:storybook": "npm run copyChangelog && storybook build",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/scripts/copyChangelog.js

@@ -0,0 +1,50 @@
+/**
+ * Script to copy CHANGELOG.md to docs folder and convert it to changelog.mdx
+ * with proper Meta and BackToTopButton components
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get the directory name in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Define paths
+const sourceFile = path.resolve(__dirname, '../CHANGELOG.md');
+const targetFile = path.resolve(__dirname, '../docs/changelog.mdx');
+
+// Read the changelog content
+console.log('Reading CHANGELOG.md...');
+if (!fs.existsSync(sourceFile)) {
+  console.error('Error: CHANGELOG.md not found at', sourceFile);
+  process.exit(1);
+}
+
+let changelogContent = fs.readFileSync(sourceFile, 'utf-8');
+
+// Remove the first line (package name heading)
+changelogContent = changelogContent.split('\n').slice(1).join('\n');
+
+// Create the MDX content with imports and components
+const mdxContent = `import { Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton } from './components';
+
+<Meta title="Changelog" />
+<BackToTopButton />
+
+# Changelog - ${'`@utilitywarehouse/hearth-react-native`'}
+
+The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
+
+${changelogContent}
+`;
+
+// Write the new MDX file
+console.log('Writing changelog.mdx...');
+fs.writeFileSync(targetFile, mdxContent);
+
+console.log('✅ Changelog copied and transformed successfully!');
+console.log(`   Source: ${sourceFile}`);
+console.log(`   Target: ${targetFile}`);

package/src/components/Checkbox/CheckboxGroup.figma.tsx

@@ -3,6 +3,10 @@ import { CheckboxGroup } from '../';
 
 const props = {
   label: figma.string('Group label'),
+  labelVariant: figma.enum('Label variant', {
+    Heading: 'heading',
+    Body: 'body',
+  }),
   helperText: figma.boolean('Helper text?', {
     true: figma.string('Helper text'),
     false: undefined,
@@ -13,6 +17,12 @@ const props = {
   }),
   tiles: figma.children('Checkbox Tile'),
   checkboxes: figma.children('Checkbox'),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation text'),
+  }),
 };
 
 figma.connect(
@@ -27,8 +37,11 @@ figma.connect(
       <CheckboxGroup
         type="tile"
         label={props.label}
+        labelVariant={props.labelVariant}
         helperText={props.helperText}
         direction={props.direction}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
       >
         {props.tiles}
       </CheckboxGroup>
@@ -45,7 +58,14 @@ figma.connect(
     },
     props,
     example: props => (
-      <CheckboxGroup label={props.label} helperText={props.helperText} direction={props.direction}>
+      <CheckboxGroup
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        direction={props.direction}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+      >
         {props.checkboxes}
       </CheckboxGroup>
     ),

package/src/components/Menu/Menu.docs.mdx

@@ -67,11 +67,14 @@ const MyComponent = () => {
 
 ### Menu
 
-| Prop               | Type                             | Default | Description                                         |
-| ------------------ | -------------------------------- | ------- | --------------------------------------------------- |
-| `heading`          | `string`                         | -       | Heading text displayed at the top of the menu       |
-| `children`         | `ReactNode`                      | -       | Menu items to display                               |
-| `bottomSheetProps` | `Partial<BottomSheetModalProps>` | -       | Optional bottom sheet modal props for customization |
+| Prop       | Type        | Default | Description                                   |
+| ---------- | ----------- | ------- | --------------------------------------------- |
+| `heading`  | `string`    | -       | Heading text displayed at the top of the menu |
+| `children` | `ReactNode` | -       | Menu items to display                         |
+
+The rest of the props are passed down to the underlying `BottomSheetModal` component, so you can use any of its
+props for additional configuration (e.g. `snapPoints`, `backgroundStyle`, etc.).
+See the [BottomSheetModal docs](/?path=/docs/components-bottomsheet--docs) for more details.
 
 ### MenuItem
 

package/src/components/Menu/Menu.figma.tsx

@@ -1,30 +1,30 @@
-import React from "react"
-import Menu from "./Menu"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { useRef } from 'react';
+import { Button, Menu, MenuTrigger } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+figma.connect(Menu, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832', {
+  props: {
+    menuItems: figma.children('Menu Item'),
+    heading: figma.boolean('Heading?', {
+      true: figma.string('Heading'),
+    }),
+    showHandle: figma.boolean('Grabber?', {
+      true: true,
+    }),
+  },
+  example: props => {
+    const menuRef = useRef(null);
+
+    return (
+      <>
+        <MenuTrigger onPress={() => menuRef.current?.present()}>
+          <Button>Open Menu</Button>
+        </MenuTrigger>
 
-figma.connect(
-  Menu,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      heading: figma.string("Heading"),
-      // No matching props could be found for these Figma properties:
-      // "heading": figma.string('Heading'),
-      // "heading": figma.boolean('Heading?'),
-      // "grabber": figma.boolean('Grabber?'),
-      // "deviceType": figma.enum('Device type', {
-      //   "Web": "web",
-      //   "App": "app"
-      // })
-    },
-    example: (props) => <Menu heading={props.heading} />,
+        <Menu ref={menuRef} heading={props.heading} showHandle={props.showHandle}>
+          {props.menuItems}
+        </Menu>
+      </>
+    );
   },
-)
+});

package/src/components/Menu/Menu.props.ts

@@ -1,12 +1,12 @@
-import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
 import type { ReactNode } from 'react';
+import { BottomSheetProps } from '../BottomSheet';
 
 export interface MenuMethods {
   present: () => void;
   dismiss: () => void;
 }
 
-export interface MenuProps {
+export interface MenuProps extends BottomSheetProps {
   /**
    * Heading text displayed at the top of the menu
    */
@@ -15,10 +15,6 @@ export interface MenuProps {
    * Menu items to display
    */
   children: ReactNode;
-  /**
-   * Optional bottom sheet modal props to customise the menu behavior
-   */
-  bottomSheetProps?: Partial<BottomSheetModalProps>;
 }
 
 export default MenuProps;

package/src/components/Menu/Menu.tsx

@@ -1,12 +1,12 @@
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
-import { BottomSheetModal, BottomSheetProps, BottomSheetScrollView } from '../BottomSheet';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
 import { MenuContext } from './Menu.context';
 import type MenuProps from './Menu.props';
 import type { MenuMethods } from './Menu.props';
 
-const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, bottomSheetProps }, ref) => {
+const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, ...props }, ref) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   useImperativeHandle(
@@ -25,10 +25,7 @@ const Menu = forwardRef<MenuMethods, MenuProps>(({ heading, children, bottomShee
   const contextValue = useMemo(() => ({ close: handleClose }), [handleClose]);
 
   return (
-    <BottomSheetModal
-      ref={bottomSheetModalRef}
-      {...(bottomSheetProps as Partial<BottomSheetProps>)}
-    >
+    <BottomSheetModal ref={bottomSheetModalRef} {...props}>
       <BottomSheetScrollView contentContainerStyle={styles.container}>
         <MenuContext.Provider value={contextValue}>
           {heading && (

package/src/components/Menu/MenuItem.figma.tsx

@@ -1,31 +1,39 @@
 import figma from '@figma/code-connect';
-import MenuItem from './MenuItem';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { MenuItem } from '../';
 
 figma.connect(
   MenuItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6416%3A11142',
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3253-8193',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      disabled: figma.enum('State', {
-        Active: true,
+      text: figma.string('Text'),
+      icon: figma.boolean('Icon left?', {
+        true: figma.instance('Icon left-20'),
+        false: figma.boolean('Icon right?', {
+          true: figma.instance('Icon right-20'),
+        }),
+      }),
+      iconPosition: figma.boolean('Icon left?', {
+        true: 'left',
+        false: figma.boolean('Icon right?', {
+          true: 'right',
+        }),
       }),
-      focusable: figma.enum('State', {
-        Focus: true,
+      colorScheme: figma.enum('Color Scheme', {
+        Destructive: 'destructive',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
       }),
-      // No matching props could be found for these Figma properties:
-      // "number": figma.string('Number'),
-      // "selected": figma.boolean('Selected?')
     },
     example: props => (
-      <MenuItem text={null} disabled={props.disabled} focusable={props.focusable} />
+      <MenuItem
+        text={props.text}
+        disabled={props.disabled}
+        colorScheme={props.colorScheme}
+        icon={props.icon}
+        iconPosition={props.iconPosition}
+      />
     ),
   }
 );

package/src/components/Modal/Modal.docs.mdx

@@ -87,27 +87,28 @@ const MyComponent = () => {
 
 The Modal component extends the `BottomSheetModal` component and accepts all of its props, plus the following additional props:
 
-| Property                      | Type                                                               | Description                                                                                                   | Default |
-| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ------- |
-| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                            | -       |
-| `description`                 | `string`                                                           | The description text displayed below the heading                                                              | -       |
-| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                      | `true`  |
-| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                            | -       |
-| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                          | -       |
-| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                   | -       |
-| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                 | -       |
-| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                     | -       |
-| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                   | `true`  |
-| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                 | `true`  |
-| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                 | -       |
-| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                  | `false` |
-| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                     | -       |
-| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                   | -       |
-| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
-| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
-| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false` |
-| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false` |
+| Property                      | Type                                                               | Description                                                                                                   | Default        |
+| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -------------- |
+| `heading`                     | `string`                                                           | The heading text displayed at the top of the modal                                                            | -              |
+| `description`                 | `string`                                                           | The description text displayed below the heading                                                              | -              |
+| `showCloseButton`             | `boolean`                                                          | Whether to show the close button in the top-right corner                                                      | `true`         |
+| `primaryButtonText`           | `string`                                                           | Text for the primary action button                                                                            | -              |
+| `secondaryButtonText`         | `string`                                                           | Text for the secondary action button                                                                          | -              |
+| `onPressPrimaryButton`        | `() => void`                                                       | Callback function called when the primary button is pressed                                                   | -              |
+| `onPressSecondaryButton`      | `() => void`                                                       | Callback function called when the secondary button is pressed                                                 | -              |
+| `onPressCloseButton`          | `() => void`                                                       | Callback function called when the close button is pressed                                                     | -              |
+| `closeOnPrimaryButtonPress`   | `boolean`                                                          | Whether to automatically close the modal when the primary button is pressed                                   | `true`         |
+| `closeOnSecondaryButtonPress` | `boolean`                                                          | Whether to automatically close the modal when the secondary button is pressed                                 | `true`         |
+| `onChange`                    | `(index: number, position: number, `<br />` type: number) => void` | Callback function called when the modal's position changes \*                                                 | -              |
+| `loading`                     | `boolean`                                                          | Whether to show a loading state with spinner                                                                  | `false`        |
+| `loadingHeading`              | `string`                                                           | The heading text to be displayed when loading is true. If not provided, the regular heading will be shown.    | `'Loading...'` |
+| `image`                       | `ImageProps`                                                       | Image to display in the modal (shows as centered content with text below)                                     | -              |
+| `children`                    | `ReactNode`                                                        | Custom content to display in the modal body                                                                   | -              |
+| `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -              |
+| `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -              |
+| `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
+| `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 

package/src/components/Modal/Modal.figma.tsx

@@ -1,56 +1,67 @@
-import React from "react"
-import Modal from "./Modal"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import figma from '@figma/code-connect';
+import { useCallback, useRef } from 'react';
+import { BottomSheetModal, Button, Modal } from '../';
 
 figma.connect(
   Modal,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6300%3A2825",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6300-2825',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
-      loading: figma.enum("State", {
+      loading: figma.enum('State', {
         Loading: true,
       }),
-      image: figma.enum("Image?", {
-        False: false,
-        True: true,
+      heading: figma.string('Heading'),
+      description: figma.string('Description'),
+      fullscreen: figma.boolean('Full screen?'),
+      showHandle: figma.boolean('Handle?'),
+      customContent: figma.boolean('Custom content?', {
+        true: figma.instance('Custom content'),
+      }),
+      buttons: figma.boolean('Buttons?', {
+        true: figma.nestedProps('Button', {
+          primaryButtonText: figma.string('Text'),
+        }),
       }),
-      heading: figma.string("Heading"),
-      description: figma.string("Description"),
-      fullscreen: figma.boolean("Full screen?"),
-      showHandle: figma.boolean("Handle?"),
-      // No matching props could be found for these Figma properties:
-      // "heading": figma.string('Heading'),
-      // "description": figma.string('Description'),
-      // "customContent": figma.boolean('Custom content?'),
-      // "buttons": figma.boolean('Buttons?'),
-      // "close": figma.boolean('Close?'),
-      // "customContent": figma.instance('Custom content'),
-      // "homeIndicator": figma.boolean('Home indicator?'),
-      // "handle": figma.boolean('Handle?'),
-      // "loadingHeading": figma.string('Loading heading'),
-      // "deviceType": figma.enum('Device type', {
-      //   "Desktop": "desktop",
-      //   "Tablet": "tablet",
-      //   "Mobile": "mobile"
-      // })
+      close: figma.boolean('Close?'),
+      image: figma.boolean('Image?', {
+        true: figma.instance('Modal illustration'),
+      }),
+      loadingHeading: figma.string('Loading heading'),
+    },
+    example: props => {
+      const modalRef = useRef<BottomSheetModal>(null);
+
+      const handleOpenModal = useCallback(() => {
+        modalRef.current?.present();
+      }, []);
+
+      const handleCloseModal = useCallback(() => {
+        modalRef.current?.dismiss();
+      }, []);
+
+      return (
+        <>
+          <Button onPress={handleOpenModal}>Open Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading={props.heading}
+            description={props.description}
+            loading={props.loading}
+            loadingHeading={props.loadingHeading}
+            showCloseButton={props.close}
+            fullscreen={props.fullscreen}
+            image={props.image}
+            showHandle={props.showHandle}
+            primaryButtonText={props.buttons.primaryButtonText}
+            secondaryButtonText={props.buttons.primaryButtonText}
+            onPressPrimaryButton={handleCloseModal}
+            onPressSecondaryButton={handleCloseModal}
+          >
+            {props.customContent}
+          </Modal>
+        </>
+      );
     },
-    example: (props) => (
-      <Modal
-        loading={props.loading}
-        image={props.image}
-        heading={props.heading}
-        description={props.description}
-        fullscreen={props.fullscreen}
-        showHandle={props.showHandle}
-      />
-    ),
-  },
-)
+  }
+);

package/src/components/Modal/Modal.props.ts

@@ -9,6 +9,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
+  loadingHeading?: string;
   description?: string;
   inNavModal?: boolean;
   fullscreen?: boolean;

package/src/components/Modal/Modal.stories.tsx

@@ -41,6 +41,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the modal is in a loading state.',
     },
+    loadingHeading: {
+      control: 'text',
+      description: 'The heading text to be displayed when loading is true.',
+    },
     fullscreen: {
       control: 'boolean',
       description: 'Whether the modal should take up the full screen height.',

package/src/components/Modal/Modal.tsx

@@ -42,6 +42,7 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  loadingHeading = 'Loading...',
   fullscreen = false,
   image,
   primaryButtonProps,
@@ -206,7 +207,7 @@ const Modal = ({
         >
           <Spinner size="lg" />
           <Heading size="lg" textAlign="center">
-            Loading...
+            {loadingHeading}
           </Heading>
         </View>
       ) : (

package/src/components/Modal/Modal.web.tsx

@@ -37,6 +37,7 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  loadingHeading = 'Loading...',
   image,
   primaryButtonProps,
   secondaryButtonProps,
@@ -166,7 +167,7 @@ const Modal = ({
         >
           <Spinner size="lg" />
           <Heading size="lg" textAlign="center">
-            Loading...
+            {loadingHeading}
           </Heading>
         </View>
       ) : (

package/src/components/PillGroup/Pill.figma.tsx

@@ -1,25 +1,12 @@
 import figma from '@figma/code-connect';
-import { Pill } from './Pill';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { Pill } from '../';
 
 figma.connect(Pill, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15595', {
   props: {
-    // These props were automatically mapped based on your linked code:
     label: figma.string('Label'),
-    focusable: figma.enum('State', {
-      Focus: true,
+    icon: figma.boolean('Icon?', {
+      true: figma.instance('Icon-20'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "label": figma.string('Label'),
-    // "icon": figma.boolean('Icon?'),
-    // "icon20": figma.instance('Icon-20'),
-    // "selected": figma.boolean('Selected?')
   },
-  example: props => <Pill value={null} label={props.label} focusable={props.focusable} />,
+  example: props => <Pill value={props.label} label={props.label} />,
 });

package/src/components/PillGroup/PillGroup.figma.tsx

@@ -1,21 +1,20 @@
 import figma from '@figma/code-connect';
-import { PillGroup } from './PillGroup';
+import { PillGroup } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const value = '';
 
 figma.connect(
   PillGroup,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4348%3A15988',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       wrap: figma.boolean('Wrap?'),
+      pills: figma.children('Pill'),
     },
-    example: props => <PillGroup value={null} wrap={props.wrap} />,
+    example: props => (
+      <PillGroup value={value} wrap={props.wrap}>
+        {props.pills}
+      </PillGroup>
+    ),
   }
 );