Built-in CSS classes

DataWollet's base stylesheet provides a number of utility classes that can be used to easily hide or show elements conditionally, based on the current state of DataWollet and the activities being performed.

Example usage

<span class="dw-visible-when--sources--some">
  <span data-dw-data="fill.expected">0</span>
  questions answered using uploaded
  document<span class="dw-visible-when--sources--multiple">s</span>.
</span>

Number of data sources added

Class name	Description
dw-visible-when--sources--none	No data sources have been added.
dw-visible-when--sources--one	Exactly one data source has been added. Can be useful for pluralisation differences in copy.
dw-visible-when--sources--some	One or more data sources have been added.
dw-visible-when--sources--multiple	Two or more data sources have been added. Can be useful for pluralisation differences in copy.

Drag and drop behaviour

Class name	Description
dw-visible-when--drop--active	A file is being dragged over the drop zone.
dw-visible-when--drop--permitted	The file being dragged is a permitted file type.
dw-visible-when--drop--invalid	The file being dragged is not a permitted file type and would be discarded if dropped.

Pluralisation

Class name	Description
dw-visible-when--sources--not--one	Used when the number of sources is either zero or greater than one. Normally used to show an 's' to pluralise copy (e.g. document vs documents added).
dw-visible-when--fills--not--one	Used when the number of expected fills is either zero or greater than one. Normally used to show an 's' to pluralise copy (e.g. question vs questions answered).

Activity

Class name	Description
dw-visible-when--activity--idle	No activity is taking place in the background.
dw-visible-when--activity--prefilling	Inputs are being auto-filled after a new source was added.
dw-visible-when--activity--filling	Inputs are being auto-filled with previously added source data.
dw-visible-when--activity--uploading	Input is being uploaded or waiting for response from server.

Interactive processes

Class name	Description
dw-visible-when--interaction--none	No activity requiring user action is pending.
dw-visible-when--interaction--confirming	User confirmation is required to proceed (e.g. removing a source).

Errors

Class name	Description
dw-visible-when--error	Any error or warning is active, from the specific types listed below.
dw-visible-when--error--file-type	Source is not of the correct type (e.g. PDF). This error is uncommon as the file picker and drop zone both check file types before accepting input.
dw-visible-when--error--file-parse	Source could not be read (e.g. corrupt).
dw-visible-when--error--file-size	Source is too large to upload.
dw-visible-when--error--source-unexpected	Source was classified as a data source that isn't listed as an expected type (e.g. bill provided when identity document expected).
dw-visible-when--error--source-expectations	Source was added but failed the graph node test specified, and so likely contains incomplete data or relationships.
dw-visible-when--error--source-unmatched	Source document type could not be determined (not in library).
dw-visible-when--error--source-lacking	Source was processed successfully but no data was extracted.
dw-visible-when--error--server-error	Server returned an error not otherwise described. Retrying could be recommended.
dw-visible-when--error--server-timeout	Server did not respond within the configured timeout. Document could be too large or the internet connection poor.
dw-visible-when--error--server-forbidden	Server submission was blocked or rejected. Could be a result of network restrictions or browser restrictions.
dw-visible-when--error--scan-capability	Scanning capability is not an option with the browser or hardware available.
dw-visible-when--error--scan-permission	Permissions required were not granted by the user, such as access to the camera.
dw-visible-when--error--scan-quality	Scan seems to be of poor quality and might not be able to be used. Retrying could be recommended with further guidance.