-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: handle question component css #287
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,6 +33,9 @@ export const useLunaticStyles = tss.create(({ theme }) => ({ | |
padding: '0.2em 1em', | ||
}, | ||
}, | ||
'&.Question .lunatic-table .lunatic-table-td > .field-container': { | ||
marginTop: '1em', | ||
}, | ||
|
||
'&.Loop': { | ||
display: 'block', | ||
|
@@ -110,42 +113,61 @@ export const useLunaticStyles = tss.create(({ theme }) => ({ | |
}, | ||
|
||
// declarations | ||
'& .declarations-lunatic': { | ||
padding: '0.5em', | ||
fontSize: '92%', | ||
}, | ||
'& .declarations-lunatic, &:is(.Sequence, .Subsequence) .label-description': | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. to check after we change the generation by Eno : there should not be any description in sequence/subSequence, only declarations as for other components |
||
{ | ||
padding: '0.5em', | ||
fontSize: '92%', | ||
}, | ||
'& .declaration-lunatic': { | ||
marginBottom: '1em', | ||
}, | ||
'&:not(.Question) .declaration-lunatic': { | ||
'&.declaration-help': { | ||
color: theme.palette.declarations.help, | ||
}, | ||
'&.declaration-instruction': { | ||
color: theme.palette.declarations.instruction, | ||
}, | ||
'&.declaration-statement': { | ||
'&.declaration-instruction, &.declaration-statement, &.declaration-codecard': | ||
{ | ||
color: theme.palette.declarations.instruction, | ||
}, | ||
}, | ||
'&.Question > .declarations-lunatic': { | ||
'.declaration-help': { | ||
color: theme.palette.declarations.instruction, | ||
}, | ||
'&.declaration-codecard': { | ||
color: theme.palette.declarations.instruction, | ||
}, | ||
'&.Question > .field-container .declarations-lunatic': { | ||
'.declaration-help': { | ||
color: theme.palette.declarations.help, | ||
}, | ||
'.declaration-instruction, .declaration-statement, .declaration-codecard': | ||
{ | ||
color: theme.palette.declarations.instruction, | ||
}, | ||
}, | ||
'&.Subsequence > .field-container > .field > .label-description': { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same, here we should have declarations only |
||
color: theme.palette.declarations.instruction, | ||
}, | ||
|
||
'& .label-top label': { | ||
fontWeight: 'bold', | ||
}, | ||
|
||
'& .lunatic-component fieldset legend, fieldset legend': { | ||
fontWeight: 'bold', | ||
maxWidth: '90%', | ||
color: 'initial', | ||
backgroundColor: 'initial', | ||
fontSize: 'initial', | ||
marginBottom: '1.5em', | ||
lineHeight: '1.3em', | ||
}, | ||
'& .lunatic-component .field-container, .field-container': { | ||
'&:not(.Loop) .lunatic-component fieldset legend, &:not(.Question, .Loop) fieldset legend': | ||
{ | ||
fontWeight: 'bold', | ||
maxWidth: '90%', | ||
color: 'initial', | ||
backgroundColor: 'initial', | ||
fontSize: 'initial', | ||
marginBottom: '1.5em', | ||
lineHeight: '1.3em', | ||
}, | ||
'&:not(.Question) .lunatic-component .field-container': { | ||
marginTop: '1em', | ||
}, | ||
'&.Question .lunatic-component .field-container': { | ||
marginTop: '0', | ||
}, | ||
'& .lunatic-textarea textarea': { | ||
padding: '0.5em', | ||
fontSize: '100%', | ||
|
@@ -186,14 +208,22 @@ export const useLunaticStyles = tss.create(({ theme }) => ({ | |
borderRadius: '15px', | ||
}, | ||
}, | ||
'&.Question .lunatic-table fieldset:is(.lunatic-radio-group, .lunatic-checkbox-one) .code-modality': | ||
{ | ||
borderRadius: '5px', | ||
}, | ||
'&.Question fieldset:is(.lunatic-radio-group, .lunatic-checkbox-one) .code-modality': | ||
{ | ||
borderRadius: '15px', | ||
}, | ||
|
||
'& .lunatic-component fieldset, fieldset': { | ||
padding: 0, | ||
margin: 0, | ||
border: 'none', | ||
|
||
// checkbox & radio | ||
'& .lunatic-input-checkbox, & .lunatic-input-checkbox': { | ||
'&:not(:has(.lunatic-checkbox-boolean)) .lunatic-input-checkbox': { | ||
borderRadius: '5px', | ||
border: `1px solid ${borderColorCheckbox}`, | ||
backgroundColor: `${backgroundColorCheckbox}`, | ||
|
@@ -287,11 +317,59 @@ export const useLunaticStyles = tss.create(({ theme }) => ({ | |
padding: '0.5em', | ||
}, | ||
}, | ||
'&:is(.Question, .Loop) .field-container > .field > fieldset > legend': { | ||
'> h3': { | ||
backgroundColor: 'transparent', | ||
fontSize: '1em', | ||
color: 'black', | ||
display: 'block', | ||
marginBottom: '1em', | ||
fontWeight: 'bold', | ||
padding: '0.5em', | ||
marginTop: '0', | ||
}, | ||
'> p:not(:has(*))': { | ||
display: 'none', | ||
}, | ||
}, | ||
'&.Loop .field-container > .field > fieldset > legend': { | ||
'> h3': { marginBottom: '0' }, | ||
}, | ||
|
||
// missing response buttons css override | ||
// roll-back some changes when Missing override is available in lunatic-v2 | ||
// such as shortcut and checked selectors | ||
|
||
'&.Question, &.Loop': { | ||
'&:has(> .declarations-lunatic)': { | ||
display: 'grid', | ||
gridTemplateRows: 'auto 1fr', | ||
gridRowGap: '1em', | ||
}, | ||
'.field-container, .field': { | ||
height: '100%', | ||
}, | ||
'.field fieldset': { | ||
height: '100%', | ||
display: 'grid', | ||
gridTemplateRows: 'auto auto 1fr', | ||
legend: { | ||
gridRow: '1', | ||
'&:not(:has(*))': { | ||
display: 'none', | ||
}, | ||
}, | ||
'.declarations-lunatic': { | ||
gridRow: '2', | ||
}, | ||
'.lunatic.lunatic-component': { | ||
gridRow: '3', | ||
display: 'grid', | ||
gridTemplateRows: 'auto 1fr', | ||
}, | ||
}, | ||
}, | ||
|
||
'& .lunatic-component .missing-buttons, .missing-buttons': { | ||
display: 'flex', | ||
gap: '1em', | ||
|
@@ -512,5 +590,27 @@ export const useLunaticStyles = tss.create(({ theme }) => ({ | |
}, | ||
}, | ||
}, | ||
'&.Question .lunatic-combo-box-container:has(.lunatic-combo-box-fab)': { | ||
display: 'grid', | ||
gridTemplateColumns: '70% auto', | ||
gridTemplateRows: 'auto auto', | ||
columnGap: '0.5em', | ||
'.lunatic-combo-box': { | ||
gridColumn: 1, | ||
'.lunatic-combo-box-content': { | ||
width: 'unset', | ||
}, | ||
}, | ||
'.lunatic-combo-box-fab': { | ||
gridColumn: 2, | ||
position: 'unset', | ||
left: 'unset', | ||
alignSelf: 'center', | ||
}, | ||
'.lunatic-errors': { | ||
gridRow: 2, | ||
gridColumn: 1 / 3, | ||
}, | ||
}, | ||
}, | ||
})) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import type { LunaticComponentProps } from '@inseefr/lunatic/components/type' | ||
import { describe, expect, it, vi } from 'vitest' | ||
|
||
import { shouldAutoNext } from './functions' | ||
|
||
describe('Should auto next', () => { | ||
it('returns false with non-radio and non-checkbox components', () => { | ||
const components: LunaticComponentProps[] = [ | ||
{ | ||
componentType: 'Text', | ||
id: 'a', | ||
value: 'v', | ||
handleChanges: vi.fn(), | ||
missingResponse: { name: 'a_MISSING' }, | ||
}, | ||
] | ||
const valueChange = [{ name: 'a', value: 'v2' }] | ||
expect(shouldAutoNext(components, valueChange)).toBeFalsy() | ||
}) | ||
it('returns true with radio components', () => { | ||
const components: LunaticComponentProps[] = [ | ||
{ | ||
componentType: 'Radio', | ||
id: 'a', | ||
value: '', | ||
options: [], | ||
handleChanges: vi.fn(), | ||
response: { name: 'a' }, | ||
missingResponse: { name: 'a_MISSING' }, | ||
}, | ||
] | ||
const valueChange = [{ name: 'a', value: 'v2' }] | ||
expect(shouldAutoNext(components, valueChange)).toBeTruthy() | ||
}) | ||
it('returns true with missing value', () => { | ||
const components: LunaticComponentProps[] = [ | ||
{ | ||
componentType: 'Radio', | ||
id: 'a', | ||
value: '', | ||
options: [], | ||
handleChanges: vi.fn(), | ||
response: { name: 'a' }, | ||
missingResponse: { name: 'a_MISSING' }, | ||
}, | ||
] | ||
const valueChange = [{ name: 'a_MISSING', value: 'DK' }] | ||
expect(shouldAutoNext(components, valueChange)).toBeTruthy() | ||
}) | ||
it('returns true with a radio in a question component', () => { | ||
const components: LunaticComponentProps[] = [ | ||
{ | ||
componentType: 'Question', | ||
id: 'q', | ||
components: [ | ||
{ | ||
componentType: 'Radio', | ||
id: 'a', | ||
value: '', | ||
options: [], | ||
handleChanges: vi.fn(), | ||
response: { name: 'a' }, | ||
missingResponse: { name: 'a_MISSING' }, | ||
}, | ||
], | ||
}, | ||
] | ||
const valueChange = [{ name: 'a', value: 'v2' }] | ||
expect(shouldAutoNext(components, valueChange)).toBeTruthy() | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why did you need to increase it ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed a marginTop: 1em that was on every .field-container and should have been called only on the first one. It should not change anything except remove a weird top margin in table cells and it's way easier to handle things in Question components since they use more .field-container.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok. Just we globally lose some space at the top of the "main part" compared with before