- Use disabled attribute on DropDownGroup
- Update survey-engine version
- Survey items can use separate subtitle component
- Matrix question improvements for accessibility and styling
- Can hide signup button on
LoginCardcomponent
- Fix issue in `MultipleChoiceGroup" "subResponseCache" issues and correctly setting the response if checkbox is selected again. Also appending corresponding "dtype" to the response in case number input or time input is used.
- Fix issue in
SingleChoiceGroupwhere the "subResponseCache" was not properly updated when the "sub-response" was deleted.
- Updated dependencies
- helpGroup is now using the Popover component from react-bootstrap (popper not needed to render the component anymore)
- Updated dependencies
- Add missing
childrenprop to<Checkbox>component
- PR#8: Add surveyEngine in the onResponseChanged callback
- Fixing an issue where toggling responses between answered and unanswered state quicker than the cool down delay resulted different state than expected (init items with empty array instead of setting the response with undefined).
- Fixing an issue where the missing "items" attribute of a helpGroup survey component would cause the survey to crash.
- We updated the survey data model to accomodate changes related to the improved survey history handling.
- Updated dependencies
- Fix response update in
responsiveMatrix.
- In
ResponsiveMatrixuse role to find dropdown options
- New question type
ResponsiveMatrix, currently supporting dropdown as an input.
- Updated dependencies: recharts, react-dropzone, react-simple-maps
- file dropzones had breaking change about how the accept property is defined: see here https://github.com/react-dropzone/react-dropzone/releases/tag/v13.0.0
- TextInput survey response component:
- auto-removes leading and trailing whitespaces in the stored response (but does not modifies the user input to allow simpler typing)
- through a new style attribute, the component can define a transformation such as convert to upper case or convert to lower case. ({ key: 'transformCase', value: 'upper' | 'lower'})
- Export survey utils functions & components
- TeaserImage component supports copyright placement
- TextLink will use target '_self', when internal link is used.
- Update some dependency versions.
- Bugfix for survey's number input to handle min/max values with 0.
- Update survey-engine version.
- Improve nav-link style for accessibility
- Improve behaviour of number input in the survey regarding min/max validation. Previously, input with valid but partial values were moved to the min/max value while the user was typing, resulting in a confusing behaviour. Now, the input accepts the user typed input, but sets the response, only if the value is valid otherwise unsets the response.
- LoadingPlaceholder's h-100 class removed. Instead, you can control height as an optional attribute.
- Slider input reacts to first click if the slider is not moved as well to provide a more intuitive use.
- MapChart hides tab navigation if only one map is available.
- Improve survey end buttons white space
- Text and number inputs in the survey remove the response if the input's value is deleted (empty). This is to fix the expected behaviour and avoid users to be able to work around survey validation by entering and afterwards removing their entry.
- Adding a workaround to apply scrolling in firefox when switching survey pages.
- Improve responsive single choice array behavior on some devices, where it sometimes lead to disappearing answers or unintended scrolling.
- Cloze question's input's text can be aligned start, center, end.
- Improved scrolling behaviour of numeric input in surveys. Also open the numeric keyboard on mobile.
- Datepicker header includes year and month dropdown to simplify selection.
- Added
classNameOverrideoption to footer column props, e.g., to be able to use different column width.
- date input inside a single choice should not automatically open date picker when prefill is used
- fix cloze question's response cache handling (how to prefill existing values)
- dropdown group's
descriptionattribute will be used for the placeholder item of the dropdown. - survey's number inputs by default has no value (empty string), this would help to indicate that a value needs to be set
- Fix further input name issue in responsive single choice array and bipolar likert causing issues between multiple questions.
- Fix input name issue in responsive single choice array and bipolar likert.
- Fixing issue with response single choice and bipolar likert choice where keyboard navigation was not working as expected in table mode.
- Center text and number inputs content when used in a cloze question.
- TextLink should work as normal tag.
- Updated project dependencies.
- New input for "time", to ask for a specific hour and minute of the day. When stepsize is set, seconds can be asked as well.
- Added new response component with the role
timeInputto select a time. Result will be interpreted as seconds since 00:00:00. Can also be used in cloze questions, single choice or multiple choice questions. - New question type
consentto display a consent dialog and store the response in a survey.
- Formatted text components in the survey can include date object to display a localized date. (With
role: dateDisplay). - Use webpack5 in storybook.
- Survey view accepts flag to turn on debug messages for survey engine.
Action card images' copyright notice can be aligned right.
Action card images can contain copyright notice.
Color and font-size optimisations for accessibility.
- Fix optional survey list's top spacing and border behaviour
- Survey list header contains one top border, and this can be hidden. This change is to make the page less cluttered for use cases when report list or other article based content is displayed.
- Run locale registration for react-datepicker, when a component is initialized.
- Survey View needs to receive date-fns locales as a prop. These locales needs to be registered outside of the library, from the host app.
- New component called
ActionCard- a configurable card with hover effect, clickable, can include image on top or on the left. Image is attached as background image to a div, with configurable width, height (also min/max) and and background position and size. Optionally the image can be included as a normalimg- by using the propas. - Survey renderer accepts an array of custom defined response components:
customResponseComponents: Array<CustomSurveyResponseComponent>;. These can be used to extend the survey question types. - New components for report history / report card / report detail dialog.
- Accordion list component accepts itemKey property, and uses this to generate item keys. By setting the
itemKey, more than one accordion list on the page can be used. - Add shadow to modal (dialog) border.
- Cloze question can include line breaks with role
lineBreak. - Updated project dependencies. From this, important is especially the survey
survey-engine. - Dialog prop "onClose" is optional. If no onClose is provided, the closing icon is hidden.
- Responsive Single Choice array and Bipolar likert scale array rows support displayCondition.
- SurveyCard can handle 'immediate' category.
Fix issue with dialog header rendering on windows.
Updated project dependencies.
- Replacing material-ui dialog, with react bootstrap's modal. Dialog component support now following props:
- size (optional): 'sm', 'lg', 'xl'
- fullScreenFrom (optional): 'sm-down', 'md-down', 'lg-down', xl-down', 'xxl-down'. If not defined, 'sm-down' will be used as a default value.
- New survey response item type for "cloze" question, a question where inputs embedded in a text can be placed. E.g., On .... between ... and ... . This can be embedded inside a single or multiple choice question as well. To invoke such an item, you can use the
role: 'cloze'. - New component available for file inputs using a dropzone.
- Survey navigation buttons should loose focus after clicked. Also submit button should not gain autofocus now.
- Small improvements on TextInput and NumberInput styling.
- DateInput n survey also accepts className for the component.
- NavLink example removes
type="button"that causes wrong style in Safari. - TextInput and MultiLineTextInput survey components now support
maxLengthattribute passed down through the style array, to control how many characters can be entered.
- Fixed issue for map-time-series visualisation to be able include values with zero.
- Add css class
fs-survey-item-titleto survey items and set default size to 1.125rem.
- Survey Page buttons on last page, put focus on Submit instead of back button. This a temporary solution, since ideally focus should be set to the top survey item.
- Improve survey page progress indicator, to better handle cases with many survey pages.
- Improve click target for likert scales item, especially relevant for vertical mode.
- New survey response component for role
responsiveBipolarLikertScaleArray.
- Updating project dependencies (react-markdown, recharts, react-datepicker)
responsiveSingleChoiceArray: fix isLast for horizontal modelikertsurvey response item fixes issues with longer text when stacked in vertical mode.
SingleChoiceGroupandMultipleChoiceGroup: use flex grow label also in case of formatted text.responsiveSingleChoiceArray: small improvements on props.
- New survey question type:
ResponsiveSingleChoiceArray. When using this component, you can define different view modes for different screen sizes. Currently supported are: 'vertical', 'horizontal' and 'table' modes. This question type can be used, e.g., to implement Likert Scale matrices.
SingleChoiceGroup: Options of a single choice group can be styled (with className attribute). In such a case, styling is not propagated down to the nested inputs, to avoid issues with improperly applied styles twice.SingleChoiceGroupandMultipleChoiceGroupaccept now option items with multiple parts (items in the component's items array). Currently, only text-based components are supported, for the purpose if different parts of the text needs to be styled differently (e.g., bold, color highlight or underlined).- Title component of a single survey item now supports className style attribute to attach CSS class to the whole title area. This can be used, e.g., to add "sticky-top", to make the question title stick to the top of the screen as long as the question is visible.
- Title component of a single survey item accepts now a list of items through its
itemsattribute. This can be used to define acontentwith differently styled parts (e.g., to highlight specific words, or override default font weight from bold to normal).
SurveySingleItemView: Apply same style to debug key as title even if there is no title component.- Add Italian date locale for datepickers.
- Updating dependencies: material-ui, react-date-picker
Needed to downgrade rollup and plugin versions. When creating the bundle and deploying, react-markdown was not working anymore.
- Updated react-markdown version to 6.0.0
- Dialog header fixed always
SurveySingleItemViewandSurveyPageVieware now exported, so that they can be used, e.g., by the editor.- Add a new callback to SurveyView:
onResponsesChanged. Optional method that will be called every time the responses changed. - Option to display item and response option keys in surveys, to be used by the editor when testing. Option keys are currently only available for single and multiple choice questions.
Due to the updates related to react-markdown version, the following markdown custom syntax need to be changed.
Map Chart
Previously:
[mapchart:/charts/ggd-map-nl.json]: /charts/20210126_0801_kaart_data.json
New syntax:
<mapchart
map-url="/charts/ggd-map-nl.json"
data-url="/charts/20210126_0801_kaart_data.json"
/>
Line and Scatter Chart
Previously:
[line-and-scatter-chart]: /charts/20210126_0801_percentage_klachten_over_tijd.json
New syntax:
<lineandscatterchart
data-url="/charts/20210126_0801_percentage_klachten_over_tijd.json"
/>
Page info for date line
Previously:
`Deze pagina is voor het laatst aangepast op 02.feb.2021 16:00.`
New syntax:
<pageinfo>
Deze pagina is voor het laatst aangepast op 02.feb.2021 16:00.
</pageinfo>
The old syntax will be rendered as the default code block.
VideoPlayeracceptstracksarray (optional property), to define caption/subtitles.- New storybook example for
VideoPlayer
- Likert scale survey component supports the option to put label before radio buttons
- Updating dependencies, especially bootstrap to stable version
- New stories for single choice survey component.
- Internal changes how color is handled by LoadingPlacelholder
- Updating project dependencies
- New stories for single choice survey component.
SingleChoiceGroupandMultipleChoiceGroupsurvey components display error message if there are no items (instead of crashing).
- New stories to locally test and preview components.
LoadingPlaceholderwidget supports "white" background color.LoadingPlaceholderwidget allows configuring width of the spinner's line.- Updated project dependencies
- Add
controlList='nodownload'option to VideoPlayer to prevent download option appearing in video menu. (Videos are typically not meant for downloading locally.) - Survey's numeric slider component is using the "description" attribute, as a placeholder when no answer is selected yet.
- NumberInput component accepts new style attribute (e.g.,
{ key: 'inputMaxWidth': '80px'}) to control max width of the input field. Ignored if smaller than min width (50px). If not defined, component won't have max width, thus will try to fill up remaining space.
- Multiple choice question can include numeric input fields as well. For this, inside the options array, add an item with
role: 'numberInput'. Component properties like min, max, step can be applied.
- Change styling of Text and Number input components. Label part should only expand as far as its content requires. Number input has max width currently.
- Markdown component for survey questions: Inside a survey item, new component type with
role: 'markdown'is available. This can be used either directly inside the route (e.g., as a top or bottom component below the response group) or inside a response group. - Stories for more survey components: TextDisplay/Markdowns and Multiple choice group.
- Multiple Choice survey component can render formatted text component between the options. For this, use the
role: 'text'for the component inside the multiple choice group. Formatting is applied through thestylelist's "className" entry.