@utilitywarehouse/hearth-react-native 0.12.0 → 0.14.0

package/src/components/List/ListItem/ListItem.figma.tsx

@@ -1,220 +1,40 @@
-// /* eslint-disable react/jsx-no-undef */
-//
-// import { ListItem } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   divider: figma.boolean('Divider?'),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   trailingIcon: figma.instance('Trailing Icon'),
-//   leadingIcon: figma.instance('Leading Icon'),
-//   text: figma.nestedProps('.Parts/List Item Text', {
-//     text: figma.string('list item text'),
-//     helperText: figma.string('Supporting Text'),
-//   }),
-// };
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': false,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import ListItem from './ListItem';
+
+/**
+ * -- 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(ListItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    loading: figma.enum('State', {
+      Loading: true,
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    // No matching props could be found for these Figma properties:
+    // "listHeading": figma.string('List heading'),
+    // "helperText": figma.boolean('Helper text?'),
+    // "helperText": figma.string('Helper text'),
+    // "customContent": figma.instance('Custom content'),
+    // "badge": figma.boolean('Badge?'),
+    // "leadingContent": figma.boolean('Leading content?'),
+    // "trailingContent": figma.boolean('Trailing Content?'),
+    // "numericalValue": figma.boolean('Numerical value?'),
+    // "numericalValue": figma.string('Numerical value'),
+    // "variant": figma.enum('Variant', {
+    //   "Default": "default",
+    //   "Custom": "custom"
+    // }),
+    // "paddingNone": figma.boolean('Padding None?')
+  },
+  example: props => <ListItem loading={props.loading} disabled={props.disabled} />,
+});

package/src/components/List/ListItem/ListItem.props.ts

@@ -5,7 +5,6 @@ interface ListItemBaseProps extends Omit<PressableProps, 'children'> {
   loading?: boolean;
   disabled?: boolean;
   variant?: 'subtle' | 'emphasis';
-  isFirst?: boolean;
 }
 
 export interface ListItemWithChildren extends ListItemBaseProps {
@@ -17,6 +16,8 @@ export interface ListItemWithChildren extends ListItemBaseProps {
   numericValue?: never;
   badge?: never;
   badgePosition?: never;
+  truncateHeading?: never;
+  truncateHelperText?: never;
 }
 
 export interface ListItemWithoutChildren extends ListItemBaseProps {
@@ -28,6 +29,8 @@ export interface ListItemWithoutChildren extends ListItemBaseProps {
   numericValue?: string | number;
   badge?: ReactNode;
   badgePosition?: 'top' | 'bottom';
+  truncateHeading?: boolean;
+  truncateHelperText?: boolean;
 }
 
 type ListItemProps = ListItemWithChildren | ListItemWithoutChildren;

package/src/components/List/ListItem/ListItemHeading.tsx

@@ -0,0 +1,20 @@
+import { BodyText, BodyTextProps } from '../../BodyText';
+
+const ListItemHeading = ({ children, ...props }: BodyTextProps) => {
+  return (
+    <BodyText size="lg" {...props}>
+      {children}
+    </BodyText>
+  );
+};
+
+ListItemHeading.displayName = 'ListItemHeading';
+
+/**
+ * @deprecated Use `ListItemHeading` instead.
+ */
+export const ListItemText = ListItemHeading;
+
+ListItemText.displayName = 'ListItemText';
+
+export default ListItemHeading;

package/src/components/List/ListItem/ListItemHelperText.tsx

@@ -1,8 +1,7 @@
-import { TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
+import { BodyText, BodyTextProps } from '../../BodyText';
 
-const ListItemHelperText = ({ children, ...props }: TextProps) => {
+const ListItemHelperText = ({ children, ...props }: BodyTextProps) => {
   return (
     <BodyText size="md" {...props} style={[styles.text, props.style]}>
       {children}

package/src/components/List/ListItem/ListItemLeadingContent.figma.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import ListItemLeadingContent from "./ListItemLeadingContent"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  ListItemLeadingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6732%3A5792",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon24": figma.instance('Icon-24'),
+      // "variant": figma.enum('Variant', {
+      //   "Icon": "icon",
+      //   "Icon Container": "icon-container",
+      //   "Avatar": "avatar",
+      //   "Indicator": "indicator"
+      // })
+    },
+    example: (props) => <ListItemLeadingContent />,
+  },
+)

package/src/components/List/ListItem/ListItemRoot.tsx

@@ -4,13 +4,13 @@ import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { DetailText } from '../../DetailText';
 import { Skeleton } from '../../Skeleton';
-import { useListContext } from '../List.context';
+import { useListContext, useListFirstItemContext } from '../List.context';
 import { IListItemContext, ListItemContext } from './ListItem.context';
 import type ListItemProps from './ListItem.props';
 import ListItemContent from './ListItemContent';
+import ListItemHeading from './ListItemHeading';
 import ListItemHelperText from './ListItemHelperText';
 import ListItemLeadingContent from './ListItemLeadingContent';
-import ListItemText from './ListItemText';
 import ListItemTrailingContent from './ListItemTrailingContent';
 import ListItemTrailingIcon from './ListItemTrailingIcon';
 
@@ -27,10 +27,13 @@ const ListItemRoot = ({
   badge,
   badgePosition = 'bottom',
   numericValue,
+  truncateHeading = false,
+  truncateHelperText = false,
   ...props
 }: ListItemProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { onPress } = props;
   const listContext = useListContext();
+  const isFirstContext = useListFirstItemContext();
   const { active } = states || { active: false };
 
   const getListContainer = (): ListItemProps['variant'] => {
@@ -56,8 +59,8 @@ const ListItemRoot = ({
     showPressed,
     active,
     disabled: isDisabled || isLoading,
-    showDisabled: !listContext?.disabled && disabled,
-    isFirstChild: props.isFirst,
+    showDisabled: !listContext.disabled && disabled,
+    isFirstChild: isFirstContext,
     container: listContext?.container,
   });
 
@@ -106,8 +109,10 @@ const ListItemRoot = ({
             ) : null}
             <ListItemContent>
               {badgePosition === 'top' && badge ? badge : null}
-              <ListItemText>{heading}</ListItemText>
-              {helperText ? <ListItemHelperText>{helperText}</ListItemHelperText> : null}
+              <ListItemHeading truncated={truncateHeading}>{heading}</ListItemHeading>
+              {helperText ? (
+                <ListItemHelperText truncated={truncateHelperText}>{helperText}</ListItemHelperText>
+              ) : null}
               {badgePosition === 'bottom' && badge ? badge : null}
             </ListItemContent>
             {!!numericValue && <DetailText size="lg">{numericValue}</DetailText>}

package/src/components/List/ListItem/ListItemTrailingContent.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import ListItemTrailingContent from "./ListItemTrailingContent"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  ListItemTrailingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9852%3A9858",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon20": figma.instance('Icon-20'),
+      // "variant": figma.enum('Variant', {
+      //   "Link": "link",
+      //   "Button": "button"
+      // })
+    },
+    example: (props) => <ListItemTrailingContent />,
+  },
+)

package/src/components/List/ListItem/index.ts

@@ -1,9 +1,9 @@
 export { default as ListItem } from './ListItem';
 export type { default as ListItemProps } from './ListItem.props';
 export { default as ListItemContent } from './ListItemContent';
+export { default as ListItemHeading, ListItemText } from './ListItemHeading';
 export { default as ListItemHelperText } from './ListItemHelperText';
 export { default as ListItemIcon } from './ListItemIcon';
 export { default as ListItemLeadingContent } from './ListItemLeadingContent';
-export { default as ListItemText } from './ListItemText';
 export { default as ListItemTrailingContent } from './ListItemTrailingContent';
 export { default as ListItemTrailingIcon } from './ListItemTrailingIcon';

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

@@ -0,0 +1,30 @@
+import React from "react"
+import Menu from "./Menu"
+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
+ */
+
+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} />,
+  },
+)

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

@@ -0,0 +1,31 @@
+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
+ */
+
+figma.connect(
+  MenuItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6416%3A11142',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum('State', {
+        Active: true,
+      }),
+      focusable: figma.enum('State', {
+        Focus: 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} />
+    ),
+  }
+);

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

@@ -87,26 +87,29 @@ 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`  |
-| `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` |
+| `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
 
 ### `ModalImage` Props
 

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

@@ -0,0 +1,56 @@
+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
+ */
+
+figma.connect(
+  Modal,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6300%3A2825",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      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?"),
+      // 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"
+      // })
+    },
+    example: (props) => (
+      <Modal
+        loading={props.loading}
+        image={props.image}
+        heading={props.heading}
+        description={props.description}
+        fullscreen={props.fullscreen}
+        showHandle={props.showHandle}
+      />
+    ),
+  },
+)

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

@@ -0,0 +1,25 @@
+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
+ */
+
+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,
+    }),
+    // 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} />,
+});