Progress bar
Importing contacts since 9:40
Source
@react.component
let make = () =>
<KitReact.Roles.ProgressBar id="contacts-import" words=[KitReact.Words.Text("Importing contacts since 9:40")] />
Progress bar, running
Importing contacts: 312 of 1,240
About 4 minutes left
An action that cannot be taken.
Importing contacts: 312 of 1,240
About 4 minutes left
Cancel waits until the file check has finished.
Source
@react.component
let make = () =>
<>
<KitReact.Roles.ProgressBar
id="contacts-import-running"
state=Running({value: 312., max: 1240.})
words=[KitReact.Words.Text("Importing contacts: 312 of 1,240")]
remaining=[KitReact.Words.Text("About 4 minutes left")]
action=SecondaryAction({children: React.string("Cancel")})
/>
<p className="specimen-case-line">{React.string("An action that cannot be taken.")}</p>
<KitReact.Roles.ProgressBar
id="contacts-import-running-inert"
state=Running({value: 312., max: 1240.})
words=[KitReact.Words.Text("Importing contacts: 312 of 1,240")]
remaining=[KitReact.Words.Text("About 4 minutes left")]
action=InertControl({id: "contacts-import-running-cancel", words: [KitReact.Words.Text("Cancel waits until the file check has finished.")], action: SecondaryAction, children: React.string("Cancel")})
/>
</>
Progress bar, done
Imported 1,240 contacts
Source
@react.component
let make = () =>
<KitReact.Roles.ProgressBar id="contacts-import-done" state=Done words=[KitReact.Words.Text("Imported 1,240 contacts")] />
Progress bar, failed
The import stopped after 312 of 1,240 contacts. Row 313 has no email address.
An action that cannot be taken.
The import stopped after 312 of 1,240 contacts. Row 313 has no email address.
Add the missing email address before retrying.
Source
@react.component
let make = () =>
<>
<KitReact.Roles.ProgressBar
id="contacts-import-failed"
state=Failed
words=[KitReact.Words.Text("The import stopped after 312 of 1,240 contacts. Row 313 has no email address.")]
action=SecondaryAction({children: React.string("Retry")})
/>
<p className="specimen-case-line">{React.string("An action that cannot be taken.")}</p>
<KitReact.Roles.ProgressBar
id="contacts-import-failed-inert"
state=Failed
words=[KitReact.Words.Text("The import stopped after 312 of 1,240 contacts. Row 313 has no email address.")]
action=InertControl({id: "contacts-import-failed-retry", words: [KitReact.Words.Text("Add the missing email address before retrying.")], action: SecondaryAction, children: React.string("Retry")})
/>
</>