@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

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

@@ -108,6 +108,19 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `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` |
 
+### `ModalImage` Props
+
+The `ModalImage` component can be used to display an image within the Modal. It accepts the following props:
+
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 ## Features
 
 ### Automatic Layout Management
@@ -269,6 +282,8 @@ Use the `image` prop to display an image-centric modal with centered content:
 <Canvas of={Stories.WithImage} />
 
 ```tsx
+import { Modal, ModalImage, Button } from '@utilitywarehouse/hearth-react-native';
+
 const ImageModal = () => {
   const modalRef = useRef<BottomSheetModal>(null);
 
@@ -282,10 +297,7 @@ const ImageModal = () => {
         description="Thanks for joining our community"
         primaryButtonText="Get Started"
         secondaryButtonText="Maybe Later"
-        image={{
-          source: require('./path/to/image.png'),
-          resizeMode: 'contain',
-        }}
+        image={<ModalImage source={require('./path/to/image.png')} resizeMode="contain" />}
         onPressPrimaryButton={() => modalRef.current?.dismiss()}
         onPressSecondaryButton={() => modalRef.current?.dismiss()}
       />

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/Modal/Modal.props.ts

@@ -1,11 +1,12 @@
-import { ImageProps, ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
 import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
 interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   loading?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
   description?: string;

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

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef } from 'react';
 import { ImageSourcePropType, Platform, View } from 'react-native';
-import { Modal } from '.';
+import { Modal, ModalImage } from '.';
 import pigs from '../../../docs/assets/pigs.png';
 import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -117,10 +117,7 @@ export const WithImage = () => {
           secondaryButtonText="Cancel"
           onPressSecondaryButton={closeModal}
           index={1}
-          image={{
-            source: pigs as ImageSourcePropType,
-            resizeMode: 'contain',
-          }}
+          image={<ModalImage source={pigs as ImageSourcePropType} resizeMode="contain" />}
         />
       </ViewWrap>
     </View>

package/src/components/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sh
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -200,7 +200,7 @@ const Modal = ({
           </View>
           {image ? (
             <View style={styles.imageContainer}>
-              <Image style={styles.image} {...image} />
+              {image}
               <View style={styles.textContent}>
                 {heading ? (
                   <Heading size="lg" textAlign="center" accessible>
@@ -296,10 +296,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
     gap: theme.components.modal.content.gap,
   },
-  image: {
-    width: 260,
-    height: 260,
-  },
   imageContainer: {
     alignItems: 'center',
     flex: 1,

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

@@ -2,7 +2,7 @@ import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sh
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
-import { AccessibilityInfo, Image, Platform, View, findNodeHandle } from 'react-native';
+import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -197,7 +197,7 @@ const Modal = ({
           </View>
           {image ? (
             <View style={styles.imageContainer}>
-              <Image style={styles.image} {...image} />
+              {image}
               <View style={styles.textContent}>
                 {heading ? (
                   <Heading size="lg" textAlign="center" accessible>
@@ -281,10 +281,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
     gap: theme.components.modal.content.gap,
   },
-  image: {
-    width: 260,
-    height: 260,
-  },
   imageContainer: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/Modal/ModalImage.tsx

@@ -0,0 +1,20 @@
+import { Image, ImageProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
+
+const ModalImage = (props: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} style={[styles.image, props.style]} />;
+  }
+  return <Image resizeMode="cover" {...props} style={[styles.image, props.style]} />;
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: 260,
+    height: 260,
+  },
+});
+
+export default ModalImage;

package/src/components/Modal/index.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from './Modal';
 export type { default as ModalProps } from './Modal.props';
+export { default as ModalImage } from './ModalImage';

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} />,
+});

package/src/components/PillGroup/Pill.tsx

@@ -1,10 +1,10 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
-import { usePillGroupContext } from './PillGroup.context';
+import { Icon } from '../Icon';
 import type { PillProps } from './Pill.props';
+import { usePillGroupContext } from './PillGroup.context';
 
 const PillRoot = ({
   value,
@@ -61,7 +61,7 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
     },
     variants: {
       active: {

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

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { PillGroup } from './PillGroup';
+
+/**
+ * -- 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(
+  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?'),
+    },
+    example: props => <PillGroup value={null} wrap={props.wrap} />,
+  }
+);

package/src/components/PillGroup/PillGroup.stories.tsx

@@ -142,7 +142,7 @@ export const Multiple: Story = {
     return (
       <Flex space="lg" direction="column" align="center" style={{ maxWidth: 400 }}>
         <PillGroup wrap={true} multiple value={selectedCategories} onChange={v => setSelectedCategories(v as string[])}>
-          <Pill value="all" label="All" />
+          <Pill value="unread" label="Unread" />
           <Pill value="new" label="New" icon={HeartMediumIcon} />
           <Pill value="favourites" label="My favourites" icon={HeartMediumIcon} />
           <Pill value="read" label="Read" />

package/src/components/ProgressStepper/ProgressStep.figma.tsx

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import ProgressStep from './ProgressStep';
+
+/**
+ * -- 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(
+  ProgressStep,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A1987',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      status: figma.enum('State', {
+        Complete: 'complete',
+        Active: 'active',
+        Incomplete: 'incomplete',
+      }),
+      // No matching props could be found for these Figma properties:
+      // "label": figma.string('Label'),
+      // "label": figma.boolean('Label?'),
+      // "stepNumber": figma.string('Step number'),
+      // "interactive": figma.boolean('Interactive?')
+    },
+    example: props => <ProgressStep id={null} status={props.status} />,
+  }
+);

package/src/components/ProgressStepper/ProgressStepper.figma.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import ProgressStepper from "./ProgressStepper"
+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(
+  ProgressStepper,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6056%3A2000",
+  {
+    props: {},
+    example: (props) => <ProgressStepper />,
+  },
+)

package/src/components/Radio/Radio.docs.mdx

@@ -104,7 +104,7 @@ const MyComponent = () => {
 | `validText`          | `string`                            | -         | The valid text to be displayed below the radio.                                                      |
 | `showValidationIcon` | `boolean`                           | `true`    | Whether to show the validation icon.                                                                 |
 | `type`               | `'default' \| 'tile'`               | `default` | The type of the radio.                                                                               |
-| `image`              | `ImageProps`                        | -         | The image to be displayed next to the label.                                                         |
+| `image`              | `ReactNode`                         | -         | The image to be displayed next to the label.                                                         |
 
 ## Components
 
@@ -150,6 +150,15 @@ Contains all Group related layout style props and actions. It inherits all the p
 
 ### `RadioImage`
 
+| Property  | Type                  | Description                                                              |
+| --------- | --------------------- | ------------------------------------------------------------------------ |
+| `source`  | `ImageSourcePropType` | The source of the image to display                                       |
+| `light`   | `ImageSourcePropType` | The source of the image to display in light mode (use instead of source) |
+| `dark`    | `ImageSourcePropType` | The source of the image to display in dark mode (use instead of source)  |
+| `...rest` | `ImageProps`          | Additional props to pass to the underlying Image component               |
+
+For more details about the ThemedImage component used internally, refer to the [`ThemedImage` documentation](/docs/utility-components-themed-image--docs).
+
 Contains all Image related layout style props and actions. It inherits all the properties of React Native's [Image component](https://reactnative.dev/docs/image).
 
 ## Variants
@@ -261,9 +270,9 @@ The `RadioImage` component is used to display an image next to the radio button.
 <Canvas of={Stories.WithImage} />
 
 ```tsx
-import { Radio, RadioGroup } from '@utilitywarehouse/native-ui';
+import { Radio, RadioGroup, RadioImage } from '@utilitywarehouse/native-ui';
 import visaLogo from './visa-logo.png';
-import mastarcardLogo from './mastercard-logo.png';
+import mastercardLogo from './mastercard-logo.png';
 
 const MyComponent = () => {
   const [value, setValue] = React.useState('Option 1');
@@ -273,16 +282,20 @@ const MyComponent = () => {
         value="visa"
         aria-label="Visa"
         label="Visa"
-        image={{ source: visaLogo, style: { width: 40, height: 24, resizeMode: 'contain' } }}
+        image={
+          <RadioImage source={visaLogo} style={{ width: 40, height: 24, resizeMode: 'contain' }} />
+        }
       />
       <Radio
         value="mastercard"
         aria-label="Mastercard"
         label="Mastercard"
-        image={{
-          source: mastarcardLogo,
-          style: { width: 40, height: 24, resizeMode: 'contain' },
-        }}
+        image={
+          <RadioImage
+            source={mastercardLogo}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </RadioGroup>
   );

package/src/components/Radio/Radio.figma.tsx

@@ -1,45 +1,25 @@
 import figma from '@figma/code-connect';
-import { Radio, RadioGroup } from './';
+import Radio from './Radio';
 
-const value = 'some-value';
-const setValue = (value: string) => console.log(value);
+/**
+ * -- 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(
-  Radio,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5626-1463&m=dev',
-  {
-    props: {
-      disabled: figma.boolean('disabled'),
-      label: figma.nestedProps('Label', {
-        text: figma.string('Label Text'),
-      }),
-      helperText: figma.nestedProps('Helper Text', {
-        text: figma.string('Text'),
-      }),
-      invalidText: figma.boolean('invalid', {
-        true: figma.nestedProps('Helper Text', {
-          text: figma.string('Text'),
-          showIcon: figma.boolean('showIcon?'),
-        }),
-        false: {
-          text: undefined,
-          showIcon: undefined,
-        },
-      }),
-    },
-    example: ({ disabled, label, helperText, invalidText }) => (
-      <RadioGroup value={value} onChange={setValue}>
-        <Radio
-          value="someValue"
-          disabled={disabled}
-          label={label.text}
-          helperText={helperText.text}
-          invalidText={invalidText.text}
-          showValidationIcon={invalidText.showIcon}
-        />
-      </RadioGroup>
-    ),
-  }
-);
-
-// TODO: Add variants with helperText when it's implemented
+figma.connect(Radio, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A12685', {
+  props: {
+    // No matching props could be found for these Figma properties:
+    // "helperText": figma.boolean('Helper text?'),
+    // "helperText": figma.string('Helper text'),
+    // "label": figma.string('Label'),
+    // "image": figma.boolean('Image?'),
+    // "state": figma.enum('State', {
+    //   "Default": "default"
+    // }),
+    // "checked": figma.boolean('Checked?')
+  },
+  example: props => <Radio value={null} />,
+});

package/src/components/Radio/Radio.props.ts

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 interface RadioBaseProps extends Omit<PressableProps, 'children'> {
   value: string;
@@ -28,7 +28,7 @@ interface RadioWithoutChildrenProps extends RadioBaseProps {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
 }
 
 type RadioProps = RadioWithChildrenProps | RadioWithoutChildrenProps;

package/src/components/Radio/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { ImageSourcePropType } from 'react-native';
-import { Radio, RadioGroup } from '.';
+import { Radio, RadioGroup, RadioImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
@@ -106,11 +106,13 @@ export const WithImage: Story = {
         {...args}
         label="Visa"
         value="Option 1"
-        image={{
-          source: bankLogo1 as ImageSourcePropType,
-          style: { width: 48, height: 32 },
-          resizeMode: 'cover',
-        }}
+        image={
+          <RadioImage
+            source={bankLogo1 as ImageSourcePropType}
+            style={{ width: 48, height: 32 }}
+            resizeMode="cover"
+          />
+        }
       />
       <Radio
         aria-label="Label 2"
@@ -121,11 +123,13 @@ export const WithImage: Story = {
         {...args}
         label="Mastercard"
         value="Option 2"
-        image={{
-          source: bankLogo as ImageSourcePropType,
-          style: { width: 48, height: 32 },
-          resizeMode: 'cover',
-        }}
+        image={
+          <RadioImage
+            source={bankLogo as ImageSourcePropType}
+            style={{ width: 48, height: 32 }}
+            resizeMode="cover"
+          />
+        }
       />
     </RadioGroup>
   ),

package/src/components/Radio/Radio.tsx

@@ -9,7 +9,6 @@ import StyledRadio from './RadioRoot';
 import { useFormFieldContext } from '../FormField';
 import { Helper } from '../Helper';
 import { useRadioGroupContext } from './RadioGroup.context';
-import RadioImage from './RadioImage';
 import RadioTextContent from './RadioTextContent';
 import RadioTileRoot from './RadioTileRoot';
 
@@ -57,7 +56,7 @@ const Radio = ({
       <RadioIndicator>
         <RadioIcon />
       </RadioIndicator>
-      {image ? <RadioImage {...image} /> : null}
+      {image ? image : null}
       <RadioTextContent>
         {!!label && <RadioLabel>{label}</RadioLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}

package/src/components/Radio/RadioGroup.figma.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import RadioGroup from "./RadioGroup"
+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(
+  RadioGroup,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13254",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      label: figma.string("Group label"),
+      helperText: figma.string("Helper text"),
+      invalidText: figma.string("Helper text"),
+      validText: figma.string("Validation text"),
+      direction: figma.enum("Direction", {
+        Row: "row",
+        Column: "column",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "groupLabel": figma.string('Group label'),
+      // "helperText": figma.boolean('Helper text?'),
+      // "helperText": figma.string('Helper text'),
+      // "validationText": figma.string('Validation text'),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Invalid": "invalid"
+      // }),
+      // "labelVariant": figma.enum('Label variant', {
+      //   "Body": "body",
+      //   "Heading": "heading"
+      // }),
+      // "content": figma.enum('Content', {
+      //   "Radio": "radio",
+      //   "Radio Tile": "radio-tile"
+      // })
+    },
+    example: (props) => (
+      <RadioGroup
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validText={props.validText}
+        direction={props.direction}
+      />
+    ),
+  },
+)