-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-react): ReactNode type for labels #DS-1632
- Change type for labels, helperText, and validationText to ReactNode
- Loading branch information
1 parent
254167d
commit a8cdf78
Showing
35 changed files
with
404 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/web-react/src/components/Checkbox/demo/CheckboxWithHtmlFormatting.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react'; | ||
| import Checkbox from '../Checkbox'; | ||
|
|
||
| const CheckboxWithHtmlFormatting = () => ( | ||
| <Checkbox | ||
| id="checkbox-with-html-formatting" | ||
| name="checkboxWithHtmlFormatting" | ||
| label={ | ||
| <> | ||
| Label with <b>bold</b> text | ||
| </> | ||
| } | ||
| validationState="success" | ||
| validationText={ | ||
| <> | ||
| Validation with <i>italic</i> text | ||
| </> | ||
| } | ||
| helperText={ | ||
| <> | ||
| Helper text with a <a href="#link">link</a> | ||
| </> | ||
| } | ||
| onChange={() => {}} | ||
| /> | ||
| ); | ||
|
|
||
| export default CheckboxWithHtmlFormatting; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 36 additions & 15 deletions
51
packages/web-react/src/components/Field/__tests__/HelperText.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,54 @@ | ||
| import { render } from '@testing-library/react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import '@testing-library/jest-dom'; | ||
| import HelperText from '../HelperText'; | ||
|
|
||
| describe('HelperText', () => { | ||
| const helperText = 'Helper Text'; | ||
|
|
||
| it('should render helper text', () => { | ||
| const dom = render(<HelperText className="HelperText__helperText" helperText="Helper Text" />); | ||
| render(<HelperText className="HelperText__helperText" helperText={helperText} />); | ||
|
|
||
| const element = screen.getByText(helperText); | ||
|
|
||
| const element = dom.container.querySelector('div') as HTMLElement; | ||
| expect(element).not.toBeNull(); | ||
| expect(element.textContent).toBe('Helper Text'); | ||
| expect(element.textContent).toBe(helperText); | ||
| }); | ||
|
|
||
| it('should render with custom element type', () => { | ||
| const { container } = render(<HelperText elementType="span" helperText="Helper Text" />); | ||
| render(<HelperText elementType="span" helperText={helperText} />); | ||
|
|
||
| const element = screen.getByText(helperText); | ||
|
|
||
| const element = container.querySelector('span') as HTMLElement; | ||
| expect(element).not.toBeNull(); | ||
| expect(element.textContent).toBe('Helper Text'); | ||
| expect(element.tagName).toBe('SPAN'); | ||
| }); | ||
|
|
||
| it('should render with className and id', () => { | ||
| const { container } = render( | ||
| <HelperText className="test__helperText" id="test-helper-text-id" helperText="Helper Text" />, | ||
| const helperTextId = 'test-helper-text-id'; | ||
| const helperTextClass = 'test__helperText'; | ||
|
|
||
| render(<HelperText className={helperTextClass} id={helperTextId} helperText={helperText} data-testid="test" />); | ||
|
|
||
| const element = screen.getByText(helperText); | ||
|
|
||
| expect(element.getAttribute('id')).toBe(helperTextId); | ||
| expect(element).toHaveClass(helperTextClass); | ||
| }); | ||
|
|
||
| it('should render with html tags', () => { | ||
| render( | ||
| <HelperText | ||
| id="test" | ||
| helperText={ | ||
| <> | ||
| Helper <b>Text</b> | ||
| </> | ||
| } | ||
| />, | ||
| ); | ||
|
|
||
| const element = container.querySelector('.test__helperText') as HTMLElement; | ||
| expect(element).not.toBeNull(); | ||
| expect(element.getAttribute('id')).toBe('test-helper-text-id'); | ||
| expect(element.textContent).toBe('Helper Text'); | ||
| const element = document.querySelector('#test') as HTMLElement; | ||
|
|
||
| expect(element).toHaveTextContent('Helper Text'); | ||
| expect(element.innerHTML).toBe('Helper <b>Text</b>'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.