+ * Proposed names are populated in the state using the `NameController` and the attached `NameProvider` instances.
+ * These name providers use multiple sources such as ENS, Etherscan, and the Blockchain itself.
+ * Clicking the component will display a modal to select a proposed name or enter a custom name.
+ */
+export default {
+ title: 'Components/App/Name',
+ component: Name,
+ argTypes: {
+ value: {
+ control: 'text',
+ description: 'The raw value to display the name of.',
+ },
+ type: {
+ options: [NameType.ETHEREUM_ADDRESS],
+ control: 'select',
+ description: `The type of value.
+ Limited to the values in the \`NameType\` enum.`,
+ },
+ sourcePriority: {
+ control: 'object',
+ description: `The order of priority to use when choosing which proposed name to display.
+ The available source IDs are defined by the \`NameProvider\` instances passed to the \`NameController\`.
+ Current options include:
+ \`ens\`
+ \`etherscan\`
+ \`lens\`
+ \`token\``,
+ },
+ disableEdit: {
+ control: 'boolean',
+ description: `Whether to prevent the modal from opening when the component is clicked.`,
+ table: {
+ defaultValue: { summary: false },
+ },
+ },
+ disableUpdate: {
+ control: 'boolean',
+ description: `Whether to disable updating the proposed names on render.`,
+ table: {
+ defaultValue: { summary: false },
+ },
+ },
+ updateDelay: {
+ control: 'number',
+ description: `The minimum number of seconds to wait between updates of the proposed names on render.`,
+ table: {
+ defaultValue: { summary: 300 },
+ },
+ },
+ },
+ args: {
+ value: addressProposedMock,
+ type: NameType.ETHEREUM_ADDRESS,
+ sourcePriority: ['ens'],
+ disableEdit: false,
+ disableUpdate: false,
+ updateDelay: 300,
+ },
+ decorators: [(story) => {story()}],
+};
+
+// eslint-disable-next-line jsdoc/require-param
+/**
+ * A proposed name matching the value and type has been found in the state.
+ * Which proposed name is displayed is configurable by the `sourcePriority` property.
+ */
+export const DefaultStory = (args) => {
+ return ;
+};
+
+DefaultStory.storyName = 'Proposed Name';
+
+/** No proposed name matching the value and type has been found in the state. */
+export const NoProposedNameStory = () => {
+ return (
+
+ );
+};
+
+NoProposedNameStory.storyName = 'No Proposed Name';
+
+/**
+ * A name was previously saved for this value and type.
+
+`;
diff --git a/ui/components/ui/form-combo-field/form-combo-field.stories.tsx b/ui/components/ui/form-combo-field/form-combo-field.stories.tsx
new file mode 100644
index 000000000000..bd16b4fc29c9
--- /dev/null
+++ b/ui/components/ui/form-combo-field/form-combo-field.stories.tsx
@@ -0,0 +1,105 @@
+import React, { useCallback, useState } from 'react';
+import FormComboField from './form-combo-field';
+
+/**
+ * A form field that supports free text entry or the selection of a value from an attached dropdown list.
+ */
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+ title: 'Components/UI/FormComboField',
+ component: FormComboField,
+ argTypes: {
+ value: {
+ control: 'text',
+ description: 'The value to display in the field.',
+ },
+ options: {
+ control: 'object',
+ description: `The options to display in the dropdown.
+ Must be an array of objects with a \`primaryLabel\` and optionally a \`secondaryLabel\` property.`,
+ },
+ placeholder: {
+ control: 'text',
+ description:
+ 'The placeholder text to display in the field when the value is empty.',
+ },
+ noOptionsText: {
+ control: 'text',
+ description: `The text to display in the dropdown when there are no options to display.`,
+ table: {
+ defaultValue: { summary: 'No options found' },
+ },
+ },
+ maxDropdownHeight: {
+ control: 'number',
+ description: 'The maximum height of the dropdown in pixels.',
+ table: {
+ defaultValue: { summary: 179 },
+ },
+ },
+ onChange: {
+ description: `Optional callback function to invoke when the value changes.`,
+ },
+ onOptionClick: {
+ description: `Optional callback function to invoke when a dropdown option is clicked.`,
+ },
+ },
+ args: {
+ value: undefined,
+ options: [
+ { primaryLabel: 'Berlin', secondaryLabel: 'Germany' },
+ { primaryLabel: 'London', secondaryLabel: 'United Kingdom' },
+ { primaryLabel: 'Lisbon', secondaryLabel: 'Portugal' },
+ { primaryLabel: 'Paris', secondaryLabel: 'France' },
+ ],
+ placeholder: 'Specify a city...',
+ noOptionsText: undefined,
+ maxDropdownHeight: undefined,
+ onChange: undefined,
+ onOptionClick: undefined,
+ },
+};
+
+export const DefaultStory = (args) => {
+ const [value, setValue] = useState('');
+
+ const handleChange = useCallback(
+ (newValue: string) => {
+ setValue(newValue);
+ },
+ [setValue],
+ );
+
+ return (
+