Origami Frontend Components & Services

JSDoc: o-stepped-progress

new SteppedProgressStep(stepElement, parent)

Represents a step in a stepped progress component.

Class constructor.

parameter type default description
stepElement HTMLElement The step element in the DOM
parent SteppedProgress The parent stepped progress instance

Methods

  • isComplete - (instance) Get whether the step has the "complete" state.
  • isCurrent - (instance) Get whether the step has the "current" state.
  • isError - (instance) Get whether the step has the "error" state.
  • isFuture - (instance) Get whether the step has no explicit state (and so is a future step).
  • markAsComplete - (instance) Set the step's state to "complete".
  • markAsCurrent - (instance) Set the step's state to "current".
  • markAsError - (instance) Set the step's state to "error".
  • markAsFuture - (instance) Remove all states from the step (marking it as a future step).

Links

new SteppedProgress(steppedProgressElement, options)

Represents a stepped progress component.

Class constructor.

parameter type default description
steppedProgressElement HTMLElement The component element in the DOM.
options (optional) Object {} An options object for configuring the component.

Methods

  • getSteps - (instance) Get an array of steps.
  • getCompletedSteps - (instance) Get an array of steps with a "completed" status.
  • hasStepAtIndex(index) - (instance) Get whether a step exists at a given index (0-based).
  • getStepAtIndex(index) - (instance) Get the step at a given index (0-based).
  • getCurrentStep - (instance) Get the step which has the "current" state. If there are multiple steps with this state then the last one will be returned.
  • getLastStep - (instance) Get the last step in the stepped progress.
  • isComplete - (instance) Get whether all steps have the "completed" state.
  • getNextStep - (instance) Get the next future step (a step which does not have the "current", "complete", or "error" states). If no such step exists, the last step will be returned.
  • progress - (instance) Mark the current step as "complete" and then mark the next step as "current". If all steps have the "complete" state then this method does nothing.
  • getDataAttributes(steppedProgressElement) - (static) Get the data attributes from the stepped progress element. If the component is being set up declaratively, this method is used to extract the data attributes from the DOM.
  • init(rootElement, options) - (static) Initialise stepped progress component.

Links

SteppedProgressStep#isComplete

Instance Method

Get whether the step has the "complete" state.

Returns

  • Boolean - Returns whether the step is complete.

Links

SteppedProgressStep#isCurrent

Instance Method

Get whether the step has the "current" state.

Returns

  • Boolean - Returns whether the step is current.

Links

SteppedProgressStep#isError

Instance Method

Get whether the step has the "error" state.

Returns

  • Boolean - Returns whether the step has an error.

Links

SteppedProgressStep#isFuture

Instance Method

Get whether the step has no explicit state (and so is a future step).

Returns

  • Boolean - Returns whether the step has no explicit state.

Links

SteppedProgressStep#markAsComplete

Instance Method

Set the step's state to "complete".

Returns

  • void

Links

SteppedProgressStep#markAsCurrent

Instance Method

Set the step's state to "current".

Returns

  • void

Links

SteppedProgressStep#markAsError

Instance Method

Set the step's state to "error".

Returns

  • void

Links

SteppedProgressStep#markAsFuture

Instance Method

Remove all states from the step (marking it as a future step).

Returns

  • void

Links

SteppedProgress#getSteps

Instance Method

Get an array of steps.

Returns

  • Array.<SteppedProgressStep> - Returns an array of steps.

Links

SteppedProgress#getCompletedSteps

Instance Method

Get an array of steps with a "completed" status.

Returns

  • Array.<SteppedProgressStep> - Returns an array of steps.

Links

SteppedProgress#hasStepAtIndex(index)

Instance Method

Get whether a step exists at a given index (0-based).

parameter type default description
index Number The index to check.

Returns

  • Boolean - Returns whether a step exists at a given index.

Links

SteppedProgress#getStepAtIndex(index)

Instance Method

Get the step at a given index (0-based).

parameter type default description
index Number The index of the step to get.

Returns

  • SteppedProgressStep - Returns the step at the given index.

Links

SteppedProgress#getCurrentStep

Instance Method

Get the step which has the "current" state. If there are multiple steps with this state then the last one will be returned.

Returns

  • SteppedProgressStep - Returns the current step.

Links

SteppedProgress#getLastStep

Instance Method

Get the last step in the stepped progress.

Returns

  • SteppedProgressStep - Returns the last step.

Links

SteppedProgress#isComplete

Instance Method

Get whether all steps have the "completed" state.

Returns

  • Boolean - Returns whether all steps are completed.

Links

SteppedProgress#getNextStep

Instance Method

Get the next future step (a step which does not have the "current", "complete", or "error" states). If no such step exists, the last step will be returned.

Returns

  • SteppedProgressStep - Returns the next step.

Links

SteppedProgress#progress

Instance Method

Mark the current step as "complete" and then mark the next step as "current". If all steps have the "complete" state then this method does nothing.

Returns

  • void

Links

SteppedProgress.getDataAttributes(steppedProgressElement)

Static Method

Get the data attributes from the stepped progress element. If the component is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
steppedProgressElement HTMLElement The component element in the DOM

Returns

  • Object - Returns an options object constructed from the DOM.

Links

SteppedProgress.init(rootElement, options)

Static Method

Initialise stepped progress component.

parameter type default description
rootElement HTMLElement | String The root element to intialise the component in, or a CSS selector for the root element
options (optional) Object {} An options object for configuring the component

Returns

  • SteppedProgress | Array.<SteppedProgress> - Returns a stepped progress instance, or an array of instances.

Links

Switch component view

GitHub Repository

Install o-stepped-progress

If using the Build Service, add o-stepped-progress@^1.0.0 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=whitelabel.

If running a Manual Build, run bower install --save "o-stepped-progress@^1.0.0".

Help & Support

o-stepped-progress is maintained directly by the Origami team. If you have any questions about o-stepped-progress or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com