fix(hint): ♾️ recursive fn and tests

packages/react/src/FieldSet/FieldSet.test.tsx

@@ -79,7 +79,7 @@ describe('FieldSet', () => {
     expect(legend).toHaveTextContent('Legend (not required)')
   })
 
-  it('renders the provided hint text after the legend when `optional` is set to `false`', () => {
+  it('renders the provided hint text after the legend while `optional` is set to `false`', () => {
     const { container } = render(<FieldSet legend="Legend" optional={false} hint="required" />)
 
     const legend = container.querySelector('legend')

packages/react/src/Hint/Hint.test.tsx

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Hint', () => {
   it('renders', () => {
-    const { container } = render(<Hint />)
+    const { container } = render(<Hint hint="hint" />)
 
     const component = container.querySelector(':only-child')
 
@@ -14,15 +14,15 @@ describe('Hint', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<Hint />)
+    const { container } = render(<Hint optional />)
 
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-hint')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<Hint className="extra" />)
+    const { container } = render(<Hint optional className="extra" />)
 
     const component = container.querySelector(':only-child')
 
@@ -42,32 +42,32 @@ describe('Hint', () => {
   it('renders the provided hint text', () => {
     const { container } = render(<Hint hint="hint text" />)
 
-    const hint = container.querySelector('span.ams-hint')
+    const component = container.querySelector(':only-child')
 
-    expect(hint).toHaveTextContent('(hint text)')
+    expect(component).toHaveTextContent('(hint text)')
   })
 
   it('renders the default hint text', () => {
     const { container } = render(<Hint optional={true} />)
 
-    const label = container.querySelector('label:only-child')
+    const component = container.querySelector(':only-child')
 
-    expect(label).toHaveTextContent('Label (niet verplicht)')
+    expect(component).toHaveTextContent('(niet verplicht)')
   })
 
   it('renders the provided hint text when `optional` is set to `false`', () => {
     const { container } = render(<Hint optional={true} hint="not required" />)
 
-    const label = container.querySelector('label:only-child')
+    const component = container.querySelector(':only-child')
 
-    expect(label).toHaveTextContent('Label (not required)')
+    expect(component).toHaveTextContent('(not required)')
   })
 
-  it('renders the provided hint text "required" marked as not optional', () => {
+  it('renders the provided hint text "required" while also being marked as not optional', () => {
     const { container } = render(<Hint optional={false} hint="required" />)
 
-    const label = container.querySelector('label:only-child')
+    const component = container.querySelector(':only-child')
 
-    expect(label).toHaveTextContent('Label (required)')
+    expect(component).toHaveTextContent('(required)')
   })
 })

packages/react/src/Hint/Hint.tsx

@@ -16,9 +16,9 @@ export type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
 
 const getHintText = ({ hint, optional }: HintProps) => {
   if (hint) {
-    return <Hint hint={hint} />
+    return hint
   } else if (optional) {
-    return <Hint hint="niet verplicht" />
+    return 'niet verplicht'
   }
 
   return null

packages/react/src/Label/Label.test.tsx

@@ -123,7 +123,7 @@ describe('Label', () => {
     expect(label).toHaveTextContent('Label (not required)')
   })
 
-  it('renders the provided hint text "required" after the label marked as not optional', () => {
+  it('renders the provided hint text after the label while `optional` is set to `false`', () => {
     const { container } = render(
       <Label htmlFor="form-control" optional={false} hint="required">
         Label