Origami Frontend Components & Services

JSDoc: o-typography

CharacterHighlight

Properties

  • 0 - (type: string) the character in the suggestion
  • 1 - (type: boolean) should it be highlighted?

Type

Array

Links

PopulateOptions(options)

parameter type default description
options Array.<*> The options which match the rext which was typed into the autocomplete by the user

Returns

  • void

Type

function

Links

Source(query, populateOptions)

parameter type default description
query string Text which was typed into the autocomplete by the user
populateOptions PopulateOptions Function to call when ready to update the suggestions dropdown

Returns

  • void

Type

function

Links

MapOptionToSuggestedValue(option)

parameter type default description
option * The option to transform into a suggestion string

Returns

  • string - The string to display as the suggestions for this option

Type

function

Links

onConfirm(option)

parameter type default description
option * The option the user selected

Returns

  • void

Type

function

Links

AutocompleteOptions

Properties

  • defaultValue - (type: string) Specify a string to prefill the autocomplete with
  • source - (type: Source) The function which retrieves the suggestions to display
  • mapOptionToSuggestedValue - (type: MapOptionToSuggestedValue) Function which transforms a suggestion before rendering
  • onConfirm - (type: onConfirm) Function which is called when the user selects an option

Type

object

Links

ErrorSummaryElement

Properties

  • element - (type: HTMLInputElement) the associated element
  • id - (type: string) the input element's id
  • valid - (type: boolean) was the user's value valid?
  • error - (type: string) the error message for this element
  • field - (type: HTMLElement) a containing o-forms-field element
  • label - (type: HTMLLabelElement) an associated label element

Type

object

Links

highlightSuggestion(suggestion, query)

Global Function

parameter type default description
suggestion string Text which is going to be suggested to the user
query string Text which was typed into the autocomplete by the user

Returns

  • Array.<CharacterHighlight> - An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

createLoadingContainer

Global Function

Create DOM for the loading container.

Returns

  • HTMLDivElement - The loading container.

Links

showLoadingPane(instance)

Global Function

Show the loading panel

parameter type default description
instance Autocomplete The autocomplete instance whose loading panel should be shown

Returns

  • void

Links

hideLoadingPane(instance)

Global Function

Hide the loading panel

parameter type default description
instance Autocomplete The autocomplete instance whose loading panel should be hidden

Returns

  • void

Links

createClearButton(id)

Global Function

Create the DOM tree which corresponds to <button class="o-autocompleteclear" type="button" aria-controls=${autocompleteEl.id} title="Clear input"> <span class="o-autocompletevisually-hidden">Clear input</span> </button>

parameter type default description
id string The id of the autocomplete input to associate the clear button with

Returns

  • HTMLButtonElement - The clear button DOM tree

Links

initClearButton(instance)

Global Function

Attach the clear button and corresponding event listeners to the o-autocomplete instance

parameter type default description
instance Autocomplete The autocomplete instance to setup the clear button for

Returns

  • void

Links

new Autocomplete(autocompleteEl, options)

Class constructor.

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

Methods

Properties

Links

new Drawer(headerEl)

Class constructor.

parameter type default description
headerEl (optional) HTMLElement The component element in the DOM

Methods

Properties

  • enabled - Check if the drawer is currently enabled. If the burger element is visible, the drawer is enabled.

Links

new ErrorSummary(elements, headingMessage)

Class constructor.

parameter type default description
elements (optional) Array.<ErrorSummaryElement> An array of objects, where each object describes an invalid input element
headingMessage (optional) string 'There is a problem' A message to show in the header. It defaults to: 'There is a problem'

Methods

Example

const elementsExample = [
		{
			id: 'text-input',
			valid: false,
			error: 'Please fill out this field',
			label: 'Input Label',
			element: <Element />,
		},
		{...},
	];
	new ErrorSummary(example, 'This is a heading message')

Links

new ExpanderUtility(...)

Class constructor.

parameter type default description
oExpanderElement HTMLElement The component element in the DOM
opts object An options object for configuring the component.
opts.shrinkTo string | number ['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState string | number ['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.expandedToggleText string ['fewer'] - Toggle text when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText string ['more'] - Toggle text when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".
opts.selectors object The selectors for expander elements.
opts.selectors.toggle string A selector for the expanders toggles e.g. `.my-expander__toggle`.
opts.selectors.content string A selector for the expanders content, which will collapse or expand e.g. `.my-expander__content`.
opts.selectors.item string A selector for the items within the expander content e.g. `li` (required only when `shrinkTo` is set to a number).
opts.classnames object The classnames to apply to the expander for different states.
opts.classnames.initialized string The class to apply to the top level of the expander when initialised by JS e.g. `.my-expander--initialized`.
opts.classnames.inactive string The class to apply to the top level of the expander when it can not expand or collapse e.g. `.my-expander--inactive`.
opts.classnames.expanded string The class to apply to the expander content when it is expanded e.g. `.my-expander--expanded`.
opts.classnames.collapsed string The class to apply to the expander content when it is collapsed JS e.g. `.my-expander--collapsed`.
opts.classnames.collapsibleItem string The class to apply to any item (see the `selectors.item` option) which will be hidden when collapsed e.g. `.my-expander__collapsible-item` (required only when `shrinkTo` is set to a number).

Methods

  • apply(isSilent) - (instance) Recalculate and apply the styles to expand or collapse the expander according to its current state.
  • toggle - (instance) Toggle the expander so expands or, if it's already expanded, collapses.
  • expand(isSilent) - (instance) Expand the expander.
  • collapse(isSilent) - (instance) Collapse the expander.
  • isCollapsed - (instance) Return true if the expander is currently collapsed.
  • destroy - (instance) Remove the expander from the page.

Links

new Expander(...)

o-expander constructor.

parameter type default description
oExpanderElement HTMLElement The component element in the DOM
opts object An options object for configuring the component.
opts.shrinkTo string | number ['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState string | number ['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.itemSelector string ['li'] - A selector for the expandable items when `shrinkTo` is set to a number, relative to `.o-expander__content`.
opts.expandedToggleText string ['fewer'] - Toggle text for when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText string ['more'] - Toggle text for when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".

Methods

Links

new Forms(formElement, options)

Class constructor.

parameter type default description
formElement (optional) HTMLElement The form element in the DOM
options (optional) object {} An options object for configuring the form

Methods

Links

new HeaderServices(headerEl)

Class constructor

parameter type default description
headerEl (optional) HTMLElement The component element in the DOM

Methods

Links

new Input(element)

Class constructor.

parameter type default description
element (optional) HTMLElement An input element in the DOM

Methods

Links

new Layout(layoutEl, options)

Class constructor.

parameter type default description
layoutEl (optional) HTMLElement The layout element in the DOM
options (optional) object {} An options object for configuring aspects of the layout

Methods

  • constructNavFromDOM - (instance) Construct the sidebar navigation from headings within the DOM.
  • destroy - (instance) Unmount the sideBarNavigation.
  • highlightNavItems - (instance) Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.
  • getDataAttributes(layoutElement) - (static) Get the data attributes from the layoutEl. If the layout is being set up declaratively, this method is used to extract the data attributes from the DOM.
  • init(rootEl, opts) - (static) Initialise layout component.

Properties

Links

new LinkedHeading(...)

Represents a linked heading.

Class constructor.

parameter type default description
headingElement HTMLElement The heading element in the DOM
options (optional) object {} An options object for configuring the linked heading
options.content (optional) string "¶" The content to add to the created link
options.title (optional) string "Link directly to this section of the page" The title attribute to add to the created link

Links

new Overlay(...)

Represents an Overlay.

Construct an overlay.

parameter type default description
id HTMLElement String. A unique identifier for the overlay within the page. (Required)
opts object An options object for configuring the Overlay. This object MUST have either `src` or `html` set. (Required)
opts.heading.title string Your overlay's title
opts.heading.visuallyhidetitle boolean If you want to provide a different title style, this option will prevent the title span from being added to the overlay. (In this case the title is only used for aria labelling) Default: false.
opts.heading.shaded boolean Whether to shade the background of the header. Default: to false
opts.modal boolean Whether the overlay should have modal behaviour or not. Setting this as true will add a translucent shadow between the page and the overlay
opts.compact boolean If true, the .o-overlay--compact class will be added to the overlay that reduces heading font-size and paddings in the content.
opts.src string Either a url from which HTML to populate the overlay can be loaded, or a querySelector string identifying an element from which the textContent should be extracted.
opts.html string String or HTMLElement. Raw HTML (cannot be set declaratively)
opts.trigger string querySelector expression or HTMLElement. When there's a trigger set, a click event handler will be added to it that will open or close the overlay accordingly. (cannot be set declaratively)
opts.zindex string Value of the CSS z-index property of the overlay. Default set via CSS: '10'
opts.preventclosing boolean Prevents closure of overlay via standard x button or escape key. For use when you are directing the user to somewhere else. Only valid with modal set to true.
opts.customclose boolean If you do not use the heading, but want to provide a close button in your html / src (with a class of o-overlay__close), setting customclose to true will attach o-overlay's close handler function to that button.
opts.parentnode string Should be a query selector for a DOM element. If set, the overlay will be appended as a child of this rather than the document body or target. If multiple nodes are matched, it will use the first. If nothing matches this selector, the body will be used.
opts.nested boolean If set to true, the resize, escape, and layer listeners will not be set up. This boolean should be used in conjunction with the parentnode setting to allow an overlay to be positioned within a DOM element rather than overlaid on top of everything. Default: false.
opts.nofocus boolean If set to true, the tabindex will not be set on the wrapper element. Useful in conjunction with the nested and parentnode options. Default: false.
opts.fullscreen boolean If set to true, the overlay will display full screen. This overlay disables scroll on the underlying document and is dismissible with the back button.

Methods

  • show - (instance) Show the overlay

Links

new Scroll(headerEl)

Class constructor

parameter type default description
headerEl (optional) HTMLElement The component element in the DOM

Methods

Links

new Share(rootEl)

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for an o-share component. You can pass an HTMLElement or a selector string

Methods

  • init - (inner) Initialises the Share class, rendering the o-share element if it's empty with [config](#config) options, or from corresponding data attributes and sets up dom-delegates. Dispatches 'oShare.ready' at the end
  • destroy - (instance) Destroys the Share instance, disables dom-delegates
  • init(rootEl) - (static) Initialises all o-share components inside the element passed as the first parameter

Links

new State(...)

Class constructor.

parameter type default description
inputs (optional) RadioNodeList A NodeList of radio input elements
opts boolean | object an object of options
opts.iconOnly string [null] - when true display an icon only, hiding the status label

Methods

Links

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

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

new Typography(typographyEl, opts)

Class constructor.

parameter type default description
typographyEl (optional) HTMLElement The root element to apply typography classes.
opts (optional) object {loadOnInit: true, rejectOnFontLoadFailure: false, fontLoadedCookieName: 'o-typography-fonts-loaded'} An options object for configuring o-typography.

Methods

Links

event:"oShare.open"

Type: object

The `oShare.open` open event fires when a social network share action is triggered, to open a new window.

property type description
share The o-share instance.
action The kind of share i.e. "social".
url The social share url opened.

Links

event:"oShare.ready"

Type: object

The `oShare.ready` fires when a o-share instance has been initialised.

property type description
share The initialised o-share instance.

Links

<anonymous>~customSource

Inner Property

Type

  • Source

Links

Autocomplete#mapOptionToSuggestedValue

Instance Property

Type

  • MapOptionToSuggestedValue

Links

Autocomplete#options.source(query, populateOptions)

Static Method

parameter type default description
query string Text which was typed into the autocomplete by the user
populateOptions PopulateOptions Function to call when ready to update the suggestions dropdown

Returns

  • void

Links

Autocomplete#options.source~callback(options)

Inner Function

parameter type default description
options Array.<string> The options which match the rext which was typed into the autocomplete by the user

Returns

  • void

Links

templates.suggestion(option)

Static Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

parameter type default description
option * The suggestion to apply the template with.

Returns

  • string | undefined - HTML string to represent a single suggestion.

Links

templates.inputValue(option)

Static Method

Used when a suggestion is selected, the return value of this will be used as the value for the input element.

parameter type default description
option * The suggestion which was selected.

Returns

  • string | undefined - String to represent the suggestion.

Links

Autocomplete#suggestionTemplate(suggestedValue)

Instance Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

parameter type default description
suggestedValue string The suggestion to apply the template with.

Returns

  • string - HTML string to be represent a single suggestion.

Links

<anonymous>~characters

Inner Property

Type

  • Array.<CharacterHighlight>

An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

Autocomplete.getDataAttributes(autocompleteEl)

Static Method

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

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

Returns

  • object - An options object which can be used for configuring the component

Links

Autocomplete.init(rootElement, options)

Static Method

Initialise o-autocomplete component/s.

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

  • Autocomplete | Array.<Autocomplete> - The newly constructed Autocomplete components

Links

Drawer#handleEvent(event)

Instance Method

Event Handler

parameter type default description
event object The event emitted by element/window interactions

Returns

  • void

Links

Drawer#enabled

Instance Property

Check if the drawer is currently enabled. If the burger element is visible, the drawer is enabled.

Links

Drawer#render

Instance Method

Drawer rendering

Returns

  • void

Links

Drawer#toggleDrawer

Instance Method

Drawer hide/show functionality

Returns

  • void

Links

ErrorSummary#createSummary

Instance Method

Generate Node to hold list of invalid inputs

Returns

  • HTMLDivElement - - a div full of error messages

Links

ErrorSummary.createList(inputs)

Static Method

Generate list of anchors

parameter type default description
inputs Array.<ErrorSummaryElement> element descriptors

Returns

  • HTMLUListElement - - the list

Links

ErrorSummary.createItem(input)

Static Method

Generate an item for the error summary

parameter type default description
input (optional) object The input object to construct an error summary item for

Returns

  • Element - - li

Links

ErrorSummary.createAnchor(input)

Static Method

Generate anchor element to point at invalid input

parameter type default description
input (optional) object The input object to construct an anchor for

Returns

  • Element - - a

Links

ExpanderUtility#apply(isSilent)

Instance Method

Recalculate and apply the styles to expand or collapse the expander according to its current state.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.expand` or `oExpander.collapse` events.

Returns

  • void

Links

ExpanderUtility#toggle

Instance Method

Toggle the expander so expands or, if it's already expanded, collapses.

Returns

  • void

Links

ExpanderUtility#expand(isSilent)

Instance Method

Expand the expander.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.expand` event.

Returns

  • void

Links

ExpanderUtility#collapse(isSilent)

Instance Method

Collapse the expander.

parameter type default description
isSilent boolean [false] Set to true to avoid firing the `oExpander.collapse` event.

Returns

  • void

Links

ExpanderUtility#isCollapsed

Instance Method

Return true if the expander is currently collapsed.

Returns

  • boolean - - is the expander collapsed

Links

ExpanderUtility#destroy

Instance Method

Remove the expander from the page.

Returns

  • void

Links

Expander.createCustom(oExpanderElement, opts)

Static Method

Construct a custom expander. Useful to add customised expander functionality to a component. E.g. to animate away collapsed items rather than hide them immediately.

parameter type default description
oExpanderElement HTMLElement The expander element in the DOM.
opts object [{}] - An options object for configuring the expander @see ExpanderUtility.

Returns

  • ExpanderUtility - - A custom expander

Links

Expander.init(rootEl, opts)

Static Method

Initialise the component.

parameter type default description
rootEl HTMLElement | string The root element to initialise the component in, or a CSS selector for the root element
opts object [{}] - An options object for configuring the component

Returns

  • Expander | Array.<Expander> - - Expander instance(s)

Links

Forms.getDataAttributes(formElement)

Static Method

Get the data attributes from the formElement. If the form is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
formElement HTMLElement The message element in the DOM

Returns

  • Object.<string, any> - - The options

Links

Forms#handleEvent(event)

Instance Method

Event Handler

parameter type default description
event object The event emitted by element/window interactions

Returns

  • void

Links

Forms#validateFormInputs

Instance Method

Form validation Validates every element in the form and creates input objects for the error summary

Returns

Links

Forms#setState(...)

Instance Method

parameter type default description
state string name of the input fields to add state to
name string type of state to apply — one of 'saving', 'saved', 'none'
options object an object of options
options.iconLabel string [null] - customise the label of the state, e.g. the saved state defaults to "Saving" but could be "Sent"
options.iconOnly boolean [false] - when true display an icon only, hiding the status label

Links

Forms#destroy

Instance Method

Destroy form instance

Links

Forms.init(rootEl, opts)

Static Method

Initialise form component.

parameter type default description
rootEl HTMLElement | string The root element to intialise a form in, or a CSS selector for the root element
opts (optional) object {} An options object for configuring the banners

Returns

  • Forms | Array.<Forms> - - The newly instantiated Form or Forms

Links

HeaderServices.init(rootElement, options)

Static Method

Initialise header 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

  • Array.<HTMLElement> | HTMLElement - - The header(s) initalised.

Links

Input#handleEvent(event)

Instance Method

Event Handler

parameter type default description
event object The event emitted by element/window interactions

Links

Input#validate(event)

Instance Method

Input validation Conditions for input validation

parameter type default description
event FocusEvent [] - The event which has caused re-validation.

Returns

  • boolean - - is the input valid?

Links

Layout#navAnchors

Instance Property

Type

  • Array.<HTMLAnchorElement>

Links

Layout#constructNavFromDOM

Instance Method

Construct the sidebar navigation from headings within the DOM.

Links

Layout#navAnchors

Instance Property

Type

  • Array.<HTMLAnchorElement>

Links

Layout#destroy

Instance Method

Unmount the sideBarNavigation.

Links

Layout#highlightNavItems

Instance Method

Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.

Returns

  • void

Links

Layout.getDataAttributes(layoutElement)

Static Method

Get the data attributes from the layoutEl. If the layout is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
layoutElement HTMLElement The layout element in the DOM

Returns

  • Object.<string, any> - - Options for configuring the layout

Links

Layout.init(rootEl, opts)

Static Method

Initialise layout component.

parameter type default description
rootEl HTMLElement | string The root element to intialise the layout in, or a CSS selector for the root element
opts (optional) object {} An options object for configuring layout behaviour.

Returns

  • Layout | Array.<Layout> - Returns either a single Layout instance or an array of Layout instances

Links

Overlay#show

Instance Method

Show the overlay

Fires Event

Links

oOverlay#event:ready

Type: object

Ready event

property type description
instance the firing instance

Links

Scroll#render

Instance Method

Scroll functionality rendering

Returns

  • void

Links

Scroll#toggleScrollButtons

Instance Method

Hide/show scroll buttons

Returns

  • void

Links

Scroll#scroll(event)

Instance Method

Scrolling functionality

parameter type default description
event object A scroll event

Returns

  • void

Links

Scroll#showCurrentSelection

Instance Method

Scroll secondary nav to 'current selection'

Returns

  • void

Links

Share~init

Inner Function

Initialises the Share class, rendering the o-share element if it's empty with config options, or from corresponding data attributes and sets up dom-delegates. Dispatches 'oShare.ready' at the end

Returns

  • undefined

Fires Event

Links

Share#destroy

Instance Method

Destroys the Share instance, disables dom-delegates

Returns

  • undefined

Links

Share.init(rootEl)

Static Method

Initialises all o-share components inside the element passed as the first parameter

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for o-share components. You can pass an HTMLElement or a selector string

Returns

  • Share | Array.<Share> - - A Share or an array of Shares

Links

State#set(state, label)

Instance Method

State setter

parameter type default description
state string type of state to display
label string customise the label of the state, e.g. the saved state defaults to "Saving" but could be "Sent"

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

Typography.getOptions(typographyEl)

Static Method

Get the data attributes from the typographyEl. If typography is being set up declaratively, this method is used to extract the data attributes from the DOM.

parameter type default description
typographyEl HTMLElement The typography element in the DOM (Required)

Returns

  • Object.<string, any> - An option dictionary

Links

Typography.checkOptions(opts)

Static Method

Check the options passed in are valid, otherwise set defaults

parameter type default description
opts object An Object with configuration options for typography

Returns

  • object - opts

Links

Typography.init(rootElement, options)

Static Method

Initialise o-typography.

parameter type default description
rootElement HTMLElement | string The root element to intialise o-typography on, or a CSS selector for the root element
options (optional) object {} An options object for configuring o-typography

Returns

  • Typography - The Typography instance

Links

new Typography(typographyEl, opts)

Class constructor.

parameter type default description
typographyEl (optional) HTMLElement The root element to apply typography classes.
opts (optional) object {loadOnInit: true, rejectOnFontLoadFailure: false, fontLoadedCookieName: 'o-typography-fonts-loaded'} An options object for configuring o-typography.

Methods

Links

Status
active
Switch component view

GitHub: o-typography@7.3.4

Install o-typography

If using the Build Service, add o-typography@^7.3.4 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-typography@^7.3.4".

Help & Support

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

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com