@utilitywarehouse/hearth-react-native 0.19.1 → 0.20.0

package/src/components/Textarea/Textarea.figma.tsx

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect';
+import { Textarea } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  readonly: figma.enum('State', {
+    'Read-only': true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  Textarea,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356-5180&m=dev',
+  {
+    props: {
+      ...props,
+      required: figma.boolean('Optional?', {
+        true: false,
+        false: true,
+      }),
+    },
+    example: props => (
+      <Textarea
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        required={props.required}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

package/src/components/ToggleButtonCard/ToggleButtonCard.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { ToggleButtonCard } from '../';
+
+figma.connect(
+  ToggleButtonCard,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2164-727&t=Uq6QfQcygdNGv5lM-4',
+  {
+    variant: {
+      Variant: 'Toggle Button',
+    },
+    props: {
+      radio: figma.nestedProps('Radio', {
+        label: figma.string('Label'),
+      }),
+      content: figma.instance('Content'),
+    },
+    example: props => (
+      // This should be wrapped in a ToggleButtonCardGroup, see docs
+      <ToggleButtonCard label={props.radio.label} value="someValue">
+        {props.content}
+      </ToggleButtonCard>
+    ),
+  }
+);

package/src/components/VerificationInput/VerificationInput.figma.tsx

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { VerificationInput } from '..';
+
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value 1'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
+
+figma.connect(
+  VerificationInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&m=dev',
+  {
+    props,
+    example: props => (
+      <VerificationInput
+        disabled={props.disabled}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);

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

@@ -1,31 +0,0 @@
-import React from "react"
-import RadioTileRoot from "./RadioTileRoot"
-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(
-  RadioTileRoot,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13222",
-  {
-    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",
-      //   "Focus": "focus"
-      // }),
-      // "checked": figma.boolean('Checked?')
-    },
-    example: (props) => <RadioTileRoot />,
-  },
-)