Component

Published dates

Dates to reflect when content was published and updated

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Published 1st January 1990

How to call this component

<%= render "components/published_dates", {
  published: "1st January 1990"
} %>

Accessibility acceptance criteria

The published dates component must:

• indicate to users that the full history section can be expanded and collapsed
• inform the user of the state of the full history section (expanded or collapsed)
• be usable with a keyboard

Links in the component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
• type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
• rel - accepts any valid rel attribute e.g. ‘nofollow’
• target - accepts a valid target attribute e.g. ‘_blank’
• title - accepts any string
• draggable - accepts a draggable attribute value (“true” or “false”)

Just last updated date (preview)

Last updated 20th October 2016

<%= render "components/published_dates", {
  last_updated: "20th October 2016"
} %>

With last updated date (preview)

Published 1st January 1990
Last updated 20th October 2016

<%= render "components/published_dates", {
  published: "1st January 1990",
  last_updated: "20th October 2016"
} %>

Link to page history (preview)

This will set up a link to a ‘#history’ anchor on the page. This can be used to link to another instance of this component, see Display Page History example

Published 1st January 1990
Last updated 20th October 2016 — See all updates

<%= render "components/published_dates", {
  published: "1st January 1990",
  last_updated: "20th October 2016",
  link_to_history: true
} %>

Display page history (preview)

This will set up an expandable section on the page, with a top border, to let users toggle the display of the page history.

Published 1st January 1990
Last updated 20th October 2016 + show all updates

1. 1st January 1990

   First published

2. 20th July 1995

   Updated to include information for 1994

3. 14th October 2000

   Updated information on pupil premium reviews and what information schools need to publish on their websites.

<%= render "components/published_dates", {
  published: "1st January 1990",
  last_updated: "20th October 2016",
  history: [
    {
      display_time: "1st January 1990",
      note: "First published",
      timestamp: "1990-01-01 15:42:37 +0000"
    },
    {
      display_time: "20th July 1995",
      note: "Updated to include information for 1994",
      timestamp: "1995-07-20 15:42:37 +0000"
    },
    {
      display_time: "14th October 2000",
      note: "Updated information on pupil premium reviews and what information schools need to publish on their websites.",
      timestamp: "2000-10-14 15:42:37 +0000"
    }
  ]
} %>