From a1abdb1cb85aed5095638bd50cec33bc1e2f621b Mon Sep 17 00:00:00 2001
From: jpveooys <66470099+jpveooys@users.noreply.github.com>
Date: Wed, 23 Feb 2022 17:00:52 +0000
Subject: [PATCH] feat(ApiTable): Add ability to specify function type

---
 .../adapters/Framework/ApiTableAdapter.tsx    |  8 ++---
 .../Framework/ApiTable/ApiTable.stories.tsx   |  2 +-
 .../Framework/ApiTable/ApiTable.test.tsx      | 32 +++++++++++++++++--
 .../ApiTable/ApiTableDefaultValue.tsx         |  6 +++-
 .../ApiTable/partials/StyledParameters.tsx    |  2 +-
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/components/adapters/Framework/ApiTableAdapter.tsx b/components/adapters/Framework/ApiTableAdapter.tsx
index ce6e0bea..433190c0 100644
--- 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
index fe284a78..ef6832e1 100644
--- 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
index bfb0f2fa..ab4f60c5 100644
--- 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
index 92fbdfa5..40ac58a5 100644
--- a/components/presenters/Framework/ApiTable/ApiTableDefaultValue.tsx
+++ b/components/presenters/Framework/ApiTable/ApiTableDefaultValue.tsx
@@ -8,6 +8,7 @@ import { StyledBodyRowValue } from './partials/StyledBodyRowValue'
 import { StyledParameters } from './partials/StyledParameters'
 
 export interface ApiTableDefaultValueProps {
+  type?: string
   children?:
     | string
     | React.ReactElement<ApiTableFunctionParameterProps>
@@ -15,6 +16,7 @@ export interface ApiTableDefaultValueProps {
 }
 
 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
index 29d0fd31..febe7754 100644
--- 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;
 `