Step by step navigation example

Test all the things

This component is very complicated so here is an example containing as many of the options available as possible.

How it looks (preview)

  1. Step 1 Get the TV ready

    Configure the television so it is ready for the standup. You will also need a laptop.

    1. Remove the Chromebit from HDMI 1 on the TV

  2. and Plug everything in

    Connect the relevant cables between the various devices.

    1. Run the HDMI - MINI DVI cable from the TV to the facilitators laptop
    2. Plug the Jabra into the facilitators laptop

  3. Step 2 Configure the catchbox

    These steps are required.

    1. Ensure the catchbox transmitter is plugged in at the mains wall
    2. Turn on the transmitter and wait for the switch to blink green
    3. You are currently viewing: Plug the transmitter USB cable into the facilitators laptop
    4. Twist and pull the black piece of foam out of the catchbox
    5. Turn on the catchbox and wait for the LED to turn green
    6. Wait for the transmitter light to turn solid green

  4. Step 3 Join and configure the standup

    Join the hangout and present to those on it.

    1. Connect to standup hangout via the calendar invite
    2. or
    3. Connect to standup hangout via the link in the team slack

    then

    1. Click the three dots in the bottom hand corner to open settings
    2. Set speaker to "Jabra"
    3. Set microphone to "C Media USB"
    4. Click "present to meeting"

  5. Step 4 Clear up

    Disconnect from the hangout and disconnect any cables.

    Most importantly, remember to switch off the catchbox to save the battery.

  6. or Get someone else to clear up

    Schedule another meeting for right after the standup and force someone else to sort everything out.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  step_nav_url: "/learn-to-setup-standup",
  highlight_step: 3,
  steps: [
    {
      title: "Get the TV ready",
      contents: [
        {
          type: "paragraph",
          text: "Configure the television so it is ready for the standup. You will also need a laptop."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://en.wikipedia.org/wiki/HDMI",
              text: "Remove the Chromebit from HDMI 1 on the TV"
            }
          ]
        }
      ]
    },
    {
      title: "Plug everything in",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Connect the relevant cables between the various devices."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://www.google.co.uk/",
              text: "Run the HDMI - MINI DVI cable from the TV to the facilitators laptop"
            },
            {
              href: "https://www.jabra.co.uk/",
              text: "Plug the Jabra into the facilitators laptop"
            }
          ]
        }
      ]
    },
    {
      title: "Configure the catchbox",
      contents: [
        {
          type: "paragraph",
          text: "These steps are required."
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Ensure the catchbox transmitter is plugged in at the mains wall"
            },
            {
              href: "http://www.google.com",
              text: "Turn on the transmitter and wait for the switch to blink green"
            },
            {
              href: "http://www.google.com",
              text: "Plug the transmitter USB cable into the facilitators laptop",
              active: true
            },
            {
              href: "http://www.google.com",
              text: "Twist and pull the black piece of foam out of the catchbox"
            },
            {
              href: "http://www.google.com",
              text: "Turn on the catchbox and wait for the LED to turn green"
            },
            {
              href: "http://www.google.com",
              text: "Wait for the transmitter light to turn solid green"
            }
          ]
        },
        {
          type: "substep",
          optional: true,
          contents: [
            {
              type: "heading",
              text: "Optional steps"
            },
            {
              type: "paragraph",
              text: "These steps are not required."
            },
            {
              type: "list",
              style: "choice",
              contents: [
                {
                  href: "https://www.google.co.uk/",
                  text: "Get annoyed when it doesn't work"
                },
                {
                  href: "http://www.google.com",
                  text: "Try to find someone else who knows how to do it",
                  context: "1 to 10 minutes"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      title: "Join and configure the standup",
      show_help_link: true,
      contents: [
        {
          type: "paragraph",
          text: "Join the hangout and present to those on it."
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Connect to standup hangout via the calendar invite"
            },
            {
              text: "or"
            },
            {
              href: "http://www.google.com",
              text: "Connect to standup hangout via the link in the team slack"
            }
          ]
        },
        {
          type: "paragraph",
          text: "then"
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Click the three dots in the bottom hand corner to open settings"
            },
            {
              href: "http://www.google.com",
              text: "Set speaker to \"Jabra\""
            },
            {
              href: "http://www.google.com",
              text: "Set microphone to \"C Media USB\""
            },
            {
              href: "http://www.google.com",
              text: "Click \"present to meeting\""
            }
          ]
        }
      ]
    },
    {
      title: "Clear up",
      contents: [
        {
          type: "paragraph",
          text: "Disconnect from the hangout and disconnect any cables."
        },
        {
          type: "paragraph",
          text: "Most importantly, remember to switch off the catchbox to save the battery."
        }
      ]
    },
    {
      title: "Get someone else to clear up",
      logic: "or",
      optional: true,
      contents: [
        {
          type: "paragraph",
          text: "Schedule another meeting for right after the standup and force someone else to sort everything out."
        }
      ]
    }
  ]
} %>