Skip to content

Commit c8b57b0

Browse files
authored
feat(Boolean): add size property (#4602)
Dependent on #4601
1 parent f77a6c8 commit c8b57b0

File tree

3 files changed

+100
-0
lines changed

3 files changed

+100
-0
lines changed

packages/dnb-eufemia/src/extensions/forms/Field/Boolean/Boolean.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type BooleanProps = {
77
trueText?: string
88
falseText?: string
99
variant?: ToggleFieldProps['variant']
10+
size?: ToggleFieldProps['size']
1011
dependencePaths?: never
1112
}
1213
type NeverBooleanProps = {

packages/dnb-eufemia/src/extensions/forms/Field/Boolean/BooleanDocs.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { PropertiesTableProps } from '../../../../shared/types'
2+
import { ToggleProperties } from '../Toggle/ToggleDocs'
23

34
export const BooleanProperties: PropertiesTableProps = {
45
trueText: {
@@ -16,4 +17,5 @@ export const BooleanProperties: PropertiesTableProps = {
1617
type: 'string',
1718
status: 'optional',
1819
},
20+
size: ToggleProperties.size,
1921
}

packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,27 @@ const nb = nbNO['nb-NO']
99

1010
describe('Field.Boolean', () => {
1111
describe('variant: checkbox', () => {
12+
it('should support size', () => {
13+
render(
14+
<Field.Boolean
15+
variant="checkbox"
16+
label="Boolean label"
17+
size="large"
18+
/>
19+
)
20+
21+
const fieldToggleElement: HTMLInputElement = document.querySelector(
22+
'.dnb-forms-field-toggle'
23+
)
24+
expect(fieldToggleElement.classList).toContain(
25+
'dnb-forms-field-block--label-height-large'
26+
)
27+
28+
const checkboxElement: HTMLInputElement =
29+
document.querySelector('.dnb-checkbox')
30+
expect(checkboxElement.classList).toContain('dnb-checkbox--large')
31+
})
32+
1233
it('renders label', () => {
1334
render(<Field.Boolean variant="checkbox" label="Boolean label" />)
1435
expect(screen.getByLabelText('Boolean label')).toBeInTheDocument()
@@ -257,6 +278,28 @@ describe('Field.Boolean', () => {
257278
})
258279

259280
describe('variant: button', () => {
281+
it('should support size', () => {
282+
render(
283+
<Field.Boolean
284+
variant="button"
285+
label="Boolean label"
286+
size="large"
287+
/>
288+
)
289+
290+
const fieldToggleElement: HTMLInputElement = document.querySelector(
291+
'.dnb-forms-field-toggle'
292+
)
293+
expect(fieldToggleElement.classList).toContain(
294+
'dnb-forms-field-block--label-height-large'
295+
)
296+
297+
const buttonElement: HTMLInputElement = document.querySelector(
298+
'.dnb-toggle-button__button'
299+
)
300+
expect(buttonElement.classList).toContain('dnb-button--size-large')
301+
})
302+
260303
it('renders label', () => {
261304
render(<Field.Boolean variant="button" label="Boolean label" />)
262305
expect(screen.getByText('Boolean label')).toBeInTheDocument()
@@ -404,6 +447,29 @@ describe('Field.Boolean', () => {
404447
})
405448

406449
describe('variant: checkbox-button', () => {
450+
it('should support size', () => {
451+
render(
452+
<Field.Boolean
453+
variant="checkbox-button"
454+
label="Boolean label"
455+
size="large"
456+
/>
457+
)
458+
459+
const fieldToggleElement: HTMLInputElement = document.querySelector(
460+
'.dnb-forms-field-toggle'
461+
)
462+
expect(fieldToggleElement.classList).toContain(
463+
'dnb-forms-field-block--label-height-large'
464+
)
465+
466+
const checkboxButtonElement: HTMLInputElement =
467+
document.querySelector('.dnb-toggle-button__button')
468+
expect(checkboxButtonElement.classList).toContain(
469+
'dnb-button--size-large'
470+
)
471+
})
472+
407473
it('renders label', () => {
408474
render(
409475
<Field.Boolean variant="checkbox-button" label="Boolean label" />
@@ -567,6 +633,37 @@ describe('Field.Boolean', () => {
567633
})
568634

569635
describe('variant: buttons', () => {
636+
it('should support size', () => {
637+
render(
638+
<Field.Boolean
639+
variant="buttons"
640+
label="Boolean label"
641+
size="large"
642+
/>
643+
)
644+
645+
const fieldToggleElement: HTMLInputElement = document.querySelector(
646+
'.dnb-forms-field-toggle'
647+
)
648+
expect(fieldToggleElement.classList).toContain(
649+
'dnb-forms-field-block--label-height-large'
650+
)
651+
652+
const buttonElementOne: Element = document.querySelectorAll(
653+
'.dnb-toggle-button__button'
654+
)[1]
655+
expect(buttonElementOne.classList).toContain(
656+
'dnb-button--size-large'
657+
)
658+
659+
const buttonElementTwo: Element = document.querySelectorAll(
660+
'.dnb-toggle-button__button'
661+
)[0]
662+
expect(buttonElementTwo.classList).toContain(
663+
'dnb-button--size-large'
664+
)
665+
})
666+
570667
it('renders label', () => {
571668
render(<Field.Boolean variant="buttons" label="Boolean label" />)
572669
expect(screen.getByText('Boolean label')).toBeInTheDocument()

0 commit comments

Comments
 (0)