feat(ApiTable): Add ability to specify function type

Royal-Navy · Feb 28, 2022 · a1abdb1 · a1abdb1
1 parent d86e09c
commit a1abdb1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/components/adapters/Framework/ApiTableAdapter.tsx b/components/adapters/Framework/ApiTableAdapter.tsx
@@ -28,14 +28,14 @@ interface ApiTableAdapterProps extends ComponentWithClass {
 function renderDefaultValue(
   defaultValue: ApiFieldDefaultValueType
 ): React.ReactElement {
-  const { value, args } = defaultValue || {}
+  const { value, args, type } = defaultValue || {}
 
   if (args) {
     return (
-      <ApiTableDefaultValue>
-        {args.map(({ type, name }) => {
+      <ApiTableDefaultValue type={type}>
+        {args.map(({ type: argType, name }) => {
           return (
-            <ApiTableFunctionParameter key={name} type={type}>
+            <ApiTableFunctionParameter key={name} type={argType}>
               {name}
             </ApiTableFunctionParameter>
           )

diff --git a/components/presenters/Framework/ApiTable/ApiTable.stories.tsx b/components/presenters/Framework/ApiTable/ApiTable.stories.tsx
@@ -25,7 +25,7 @@ stories.add('Default', () => (
 stories.add('Function', () => (
   <ApiTable>
     <ApiTableItem name="render" type="Func">
-      <ApiTableDefaultValue>
+      <ApiTableDefaultValue type="(props: { name1, name2, name3 }) => void">
         <ApiTableFunctionParameter type="date">name1</ApiTableFunctionParameter>
         <ApiTableFunctionParameter type="number">
           name2

diff --git a/components/presenters/Framework/ApiTable/ApiTable.test.tsx b/components/presenters/Framework/ApiTable/ApiTable.test.tsx
@@ -71,8 +71,8 @@ describe('API table', () => {
     beforeEach(() => {
       wrapper = render(
         <ApiTable>
-          <ApiTableItem name="startDate" type="Date">
-            <ApiTableDefaultValue>
+          <ApiTableItem name="render" type="func">
+            <ApiTableDefaultValue type="() => void">
               <ApiTableFunctionParameter type="date">
                 name1
               </ApiTableFunctionParameter>
@@ -88,6 +88,12 @@ describe('API table', () => {
       )
     })
 
+    it('renders the function type', () => {
+      expect(
+        wrapper.getByTestId('api-table-default-value-type')
+      ).toHaveTextContent('() => void')
+    })
+
     it('should render the parameter names', () => {
       const parameterNames = wrapper.getAllByTestId('api-table-parameter-name')
       expect(parameterNames[0]).toHaveTextContent('name1')
@@ -104,4 +110,26 @@ describe('API table', () => {
       expect(parameterTypes).toHaveLength(3)
     })
   })
+
+  describe('function item with default type', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <ApiTable>
+          <ApiTableItem name="render" type="func">
+            <ApiTableDefaultValue>
+              <ApiTableFunctionParameter type="date">
+                name1
+              </ApiTableFunctionParameter>
+            </ApiTableDefaultValue>
+          </ApiTableItem>
+        </ApiTable>
+      )
+    })
+
+    it('renders the default function type', () => {
+      expect(
+        wrapper.getByTestId('api-table-default-value-type')
+      ).toHaveTextContent('Function')
+    })
+  })
 })
diff --git a/components/presenters/Framework/ApiTable/ApiTableDefaultValue.tsx b/components/presenters/Framework/ApiTable/ApiTableDefaultValue.tsx
@@ -8,13 +8,15 @@ import { StyledBodyRowValue } from './partials/StyledBodyRowValue'
 import { StyledParameters } from './partials/StyledParameters'
 
 export interface ApiTableDefaultValueProps {
+  type?: string
   children?:
     | string
     | React.ReactElement<ApiTableFunctionParameterProps>
     | React.ReactElement<ApiTableFunctionParameterProps>[]
 }
 
 export const ApiTableDefaultValue: React.FC<ApiTableDefaultValueProps> = ({
+  type,
   children,
 }) => {
   if (isNil(children) || isString(children)) {
@@ -32,7 +34,9 @@ export const ApiTableDefaultValue: React.FC<ApiTableDefaultValueProps> = ({
     <StyledBodyRow>
       <StyledBodyRowItem>Default Value</StyledBodyRowItem>
       <StyledBodyRowValue>
-        <code>Function</code>
+        <code data-testid="api-table-default-value-type">
+          {type || 'Function'}
+        </code>
         <StyledParameters>{children}</StyledParameters>
       </StyledBodyRowValue>
     </StyledBodyRow>

diff --git a/components/presenters/Framework/ApiTable/partials/StyledParameters.tsx b/components/presenters/Framework/ApiTable/partials/StyledParameters.tsx
@@ -9,5 +9,5 @@ export const StyledParameters = styled.ul`
   justify-content: flex-start;
   border-radius: 4px;
   padding: 0;
-  margin: 0 0 ${spacing('4')} -4px;
+  margin: ${spacing('6')} 0 ${spacing('4')} -4px;
 `