feat: add react markdown to radio label (#111)

* feat: add react markdown to radio label

* style: update radio markdown styles in an object

* test: add radio markdown test

src/Questions/Radio/__tests__/radio.test.js

@@ -36,6 +36,24 @@ test('markdown is displayed', () => {
  expect(getByText('question text to display'))
 })
 
+test('handles default markdown link', () => {
+ const questionWithLink = {
+ ...question,
+ label: 'question text to display[radio link](https://www.google.es)'
+ }
+
+ const { getByRole } = render(
+ <QuestionRadio
+ question={questionWithLink}
+ useForm={{ errors: {}, register: () => {} }}
+ />
+ )
+
+ const markDownLink = getByRole('link')
+ expect(markDownLink.href).toBe('https://www.google.es/')
+ expect(markDownLink.target).toBe('_blank')
+})
+
 test('radio labels are displayed', () => {
  const { getByLabelText } = render(
  <QuestionRadio

src/Questions/Radio/index.js

@@ -1,12 +1,25 @@
 import ErrorMessage from '../../Fields/Error'
 import Label from '../../Fields/Label'
 import Radio from '../../Fields/Radio'
-// import ReactMarkdown from '../../Fields/Markdown'
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx } from 'theme-ui'
 
-const QuestionRadio = ({ question, useForm }) => {
+import ReactMarkdown from '../../Fields/Markdown'
+
+const QuestionRadio = ({ question, useForm, onLinkOpen }) => {
+ const styles = {
+ fieldset: {
+ border: '0',
+ m: '0',
+ p: '0'
+ },
+ markDown: {
+ alignSelf: 'center',
+ p: { m: '0px' }
+ }
+ }
+
  const { register, errors } = useForm
 
  const radioButtonGenerator = (question) => {
@@ -42,14 +55,24 @@ const QuestionRadio = ({ question, useForm }) => {
  : 'forms.radioContainer'
  }}
  >
- <fieldset sx={{ border: '0', m: '0', p: '0' }}>
+ <fieldset sx={styles.fieldset}>
  {question.accessibility ? (
  <legend sx={{ variant: 'forms.label' }} htmlFor={question.name}>
- {question.label}
+ <ReactMarkdown
+ sx={styles.markDown}
+ source={question.label}
+ onLinkOpen={onLinkOpen}
+ modalLabel={question.modalLabel}
+ />
  </legend>
  ) : (
  <Label htmlFor={question.label} key={question.label}>
- {question.label}
+ <ReactMarkdown
+ sx={styles.markDown}
+ source={question.label}
+ onLinkOpen={onLinkOpen}
+ modalLabel={question.modalLabel}
+ />
  </Label>
  )}