Add inline text editing with a story

packages/test/stories/components/InlineTextEditing.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { InlineTextEditing } from '@apicurio-editors/ui';
+
+export default {
+  title: 'Components/InlineTextEditing',
+  component: InlineTextEditing,
+} as Meta<typeof InlineTextEditing>;
+
+const Template: StoryFn<typeof InlineTextEditing> = (args) => {
+  return <InlineTextEditing {...args} />;
+};
+
+export const InlineTextEditingEmpty = Template.bind({});
+InlineTextEditingEmpty.args = {};

packages/ui/src/components/AddMediaType.tsx

@@ -12,7 +12,8 @@ export const AddMediaType: FunctionComponent<AddMediaTypeProps> = (props) => {
   const onToggleClick = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined) => {
     setIsDropdownOpen(false);
   };
 

packages/ui/src/components/ChooseLicense.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Grid, GridItem, Modal, ModalBoxBody } from '@patternfly/react-core';
+import { Button, Divider, Grid, GridItem, Modal, ModalBoxBody, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { FunctionComponent, useCallback, useState } from 'react';
 import { LicenseService } from '../support/license.service';
 
@@ -35,7 +35,9 @@ export const ChooseLicense: FunctionComponent<ChooseLicenseProps> = (props) => {
               <GridItem component='li'>
                 <Grid hasGutter>
                   <GridItem span={6}>
-                    <h2><a href={license.url}>{license.name}</a></h2>
+                    <TextContent>
+                      <Text component={TextVariants.h3}><a href={license.url}>{license.name}</a></Text>
+                    </TextContent>
                   </GridItem>
                   <GridItem span={2}>
                     <b>Permissions</b>

packages/ui/src/components/InlineTextEditing.tsx

@@ -0,0 +1,67 @@
+import { Button, ExpandableSection, Form, FormGroup, Grid, GridItem, TextInput } from '@patternfly/react-core';
+import { TrashIcon } from '@patternfly/react-icons';
+import { FunctionComponent, useState } from 'react';
+
+interface InlineTextEditingProps {
+  deleteUser: () => void;
+}
+
+export const InlineTextEditing: FunctionComponent<InlineTextEditingProps> = (props) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <>
+      <Grid>
+        <GridItem span={11}>
+          <ExpandableSection toggleText={"CONTACT"} onToggle={onToggle} isExpanded={isExpanded}>
+            <Form>
+              <FormGroup
+                label="Name"
+                fieldId="simple-form-tag-01"
+              >
+                <TextInput
+                  type="text"
+                  id="simple-form-extension-01"
+                  name="simple-form-extension-01"
+                  aria-describedby="simple-form-extension-01-helper"
+                  placeholder='No contact provided.'
+                />
+              </FormGroup>
+              <FormGroup
+                label="Email"
+                fieldId="simple-form-tag-02"
+              >
+                <TextInput
+                  type="text"
+                  id="simple-form-extension-02"
+                  name="simple-form-extension-02"
+                  aria-describedby="simple-form-extension-02-helper"
+                  placeholder='No email provided.'
+                />
+              </FormGroup>
+              <FormGroup
+                label="URL"
+                fieldId="simple-form-tag-03"
+              >
+                <TextInput
+                  type="text"
+                  id="simple-form-extension-03"
+                  name="simple-form-extension-03"
+                  aria-describedby="simple-form-extension-03-helper"
+                  placeholder='No URL provided.'
+                />
+              </FormGroup>
+            </Form>
+          </ExpandableSection >
+        </GridItem>
+        <GridItem span={1}>
+          <Button variant="link" icon={<TrashIcon />} size="sm" onClick={() => { props.deleteUser }}>
+          </Button>
+        </GridItem>
+      </Grid>
+    </>
+  );
+};

packages/ui/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './AddPath';
 export * from './AddTag';
 export * from './AddMediaType';
 export * from './ChooseLicense';
+export * from './InlineTextEditing';