Adds Reorderable lists component

[DilwoarH]

What

A list of items that can be reordered

List items can be reordered by drag and drop or by using the up/down buttons. On small viewports the drag and drop feature is disabled to prevent being triggered when scrolling on touch devices.

This component uses SortableJS - a JavaScript library for drag and drop interactions. When JavaScript is disabled a set of inputs will be shown allowing users to provide an order index for each item.

Why

This is used by publishing tools to allow reordering of lists such as steps in step by step, entries in timelines and order of visual presentation of attachments.

Disclaimer

This is a port/extension of the work that @alex-ju has done on the content publisher app.

Demo

https://govuk-publis-add-reorde-g116bw.herokuapp.com/component-guide/reorderable_list

Visual Changes

No JS view

https://trello.com/c/SD4pLfen/1086-add-reorder-component-to-govukpublishingcomponents

[kevindew]

Nice one putting this together Dilwoar.

I do still think there needs to be more consolidation between the two implementations rather than having options for all. Nikin is available to have a meeting tomorrow to work towards this consolidation.

@alex-ju do you have any recollections for why Content Publisher made particular design decisions and or opinions on any parts where the collections-publisher designer is an improvement? as I understand the difference's we've got are:

1. Green and grey secondary buttons (Collections Publisher) vs grey secondary buttons (Content Publisher) - seems fine and non-divisive to go with just grey secondary buttons
2. Draggable elements in boxes (Collections Publisher) vs border bottom line (Content Publisher) - this seems the most divisive with a few people stating that boxes are easier to understand for drag and drop and probably the biggest decision
3. Whether to have numbers or not - these seem to be confusing and they seem reasonable to be implemented as an option, though I do wonder whether they're needed at all?

[alex-ju]

Nice one putting this together Dilwoar.

I do still think there needs to be more consolidation between the two implementations rather than having options for all. Nikin is available to have a meeting tomorrow to work towards this consolidation.

@alex-ju do you have any recollections for why Content Publisher made particular design decisions and or opinions on any parts where the collections-publisher designer is an improvement? as I understand the difference's we've got are:

1. Green and grey secondary buttons (Collections Publisher) vs grey secondary buttons (Content Publisher) - seems fine and non-divisive to go with just grey secondary buttons
2. Draggable elements in boxes (Collections Publisher) vs border bottom line (Content Publisher) - this seems the most divisive with a few people stating that boxes are easier to understand for drag and drop and probably the biggest decision
3. Whether to have numbers or not - these seem to be confusing and they seem reasonable to be implemented as an option, though I do wonder whether they're needed at all?

Hi both,

I don't have strong opinions on this, but I can provide a bit of background being involved with both:

• Collections Publisher implementation was a rough improvement of an existing implementation in a rush to replace the old publishing interface for step-by-steps; this was tested internally with a limited number of users.
• Content Publisher implementation was developed afterwards, was build from scratch and iterated a few times; this was tested with external stakeholders in a round of research.

Some of my design-related recollections of this during the Content Publisher times, in relation to the above points:

• grey secondary buttons were used not to stand out as we found that users were less inclined to take the button-based approach to reorder
• a boxes-based approach was considered but we realised it involved more vertical spacing – which became a problem on documents with lots of attachments as users needed to combine drag-and-drop with scroll and things end up messy
• users didn't explicitly complain about the numbers, but some colleagues were confused by them after starting the reorder

I share the view that having as fewer options as possible would be ideal.