What would you like to change?

I wanted to pass classes to each of the menus I was using in the identity bar - so that I could hook them in js. After some searching, I realised classes isn't passed to the child macro.

FWIW, it would be good if the examples of menus used explicit classes for the js hooks - it wasn't obvious adding a class was even possible.

.hmcts-banner__message {
overflow: visible; // temp
}

Favicon should be the same too.

alphagov/govuk-frontend#870

hmcts-header
hmcts-badge
etc

Create a Menu component (toggle menu) with links and the style is broken.

We should follow the principles in GOV.UK Frontend (but check those principles are right for us).

• Version the package.json to 0.0.1-alpha
• Create Gulp task that moves stuff (components, assets, etc) within src to /package
• Create NPM prepublish script that runs the Gulp task and releases the version)
• Create changelog.md
• Create docs/publishing guide for contributors and for ourselves

We need a way to document nunjucks arguments for each macro somehow.

So that it can be exposed nicely on the Design System side.

This might an arguments.md file inside each component folder.

If that's hard then maybe just link out to the readme in github (like GOV.UK Design System)

Add a button component to allow for the addition of a secondary button as well as the option of alternative button styles.

A secondary button example below used on HMCTS services.

Document icon not rendering correctly.

Currently the Identity Bar has a flat list of actions that can be presented either in a row or all behind a toggle menu.

But let's say we had 5 actions. 2 are frequently used and 3 less so. It might make sense to expose the 2 frequently used actions and hide the rest behind a menu.

PRIMARY ACTION 1 | PRIMARY ACTION 2 | MORE ACTIONS MENU

In this case we'd need a Toggle Menu to be applied to 3 of the 5 buttons.

To do this two things need to happen.

1. The macro/html need to be able to create groups of buttons.

<div class="g1"><button1><button2></div><div class="g2"><button3><button4><button5></div>

2. Then you can use the Menu JS component to target “g2” (group 2) to turn it into a Menu while leaving the first group (g1) alone laid out in a row.

new HMCTSFrontend.Menu(target g2 etc)

Add a collapsible component to allow users to gradually reveal information, whilst keeping the overall page uncluttered with information.

A typical example as shown below:

@adamsilver to write scalable efficient Javascript.
@trevorsaint to style a responsive (progressively enhanced version)

1. Add hmcts-primary-navigation__container element
2. Mixin the hmcts-width-container styles onto it
3. Set default $hmcts-page-width to 960 (a sensible default)
4. The mixin width should be a parameter that is set to the sensible default $hmcts-page-width
5. Set the default font size to 19px (and adjust spacing/padding/etc accordingly)

<div class="hmcts-alert {% if params.classes %}{{ params.classes }}{% endif %}" role="status" aria-live="polite">
  {%- if params.icon %}<span class="hmcts-alert__icon {% if params.icon.classes %}{{ params.icon.classes }}{% endif %}">{{ params.icon.text }}</span>{% endif %}
  <span class="hmcts-alert__text">{{ params.html | safe if params.html else params.text }}</span>
</div>

Would be useful to consider different states for this. Error, success etc.

We need to create an all.js bundle using rollup (most prob) that bundles together all components into a single file.

Notes:

• jQuery is already in vendor so will be there
• We need to write guidance for setting up JS to run in say JUI or the DS etc. That is we want to make sure vendor/jquery and all.js is added to the right place. (see govuk frontend for a very good starting point).

Need to remove the margins in small screens.

What would you like to change?

Explicitly set border-color for .hmcts-banner--warning and .hmcts-banner--success

How do you think that would improve the project?

Borders for these classes would display correctly on IE11.

I've raised a PR with this change here: #69

If this entry is related to a bug, please provide the steps to reproduce it

Show users which stage of the journey they’re at. Only use this pattern on Start and Done pages.

How to use this pattern

Follow these guidelines for this pattern:

• include a maximum of 4 steps even if your service has more - the pattern is a visual aid to orient users, not a navigation tool
• write the label for each step in the present tense, for example “Court decides”
• each step has 3 states - “completed”, “in progress” and...
• the responsive component shrinks on mobile but too much text overcrowds it - use shorter text labels for each step

Research for this pattern

In discovery, several services found users needed to know the stage of a service they’re at and how much more they have to do.

I've already added the majority of this.

@trevorsaint you can:

• review CSS
• sort out the secondary button styles (see JUI)

I need to revisit the progress bar and how I tackle the styling of it to ensure it works in High Contrast Mode.

• document links (none, 1 or several)
• heading level
• code whitespace formatting
• careful overall crit

(And even after this it's probably still an alpha component)

Should we cater to IE8? Or IE9+ only?

Before:
.hmcts-sub-navigation__link[aria-current] {}
After:
.hmcts-sub-navigation__link[aria-current="page"] {}

This will allow to always have aria-current in our code an only when the page is active it would assign the "page" value

{
  "nunjucksDirs": ["/components"],
  "sassIncludes": ["/all.scss"],
  "globalAssets": ["/assets"],
  "scripts": ["/vendor/jquery.js", "/all.js"]
}

Call the file: govuk-prototype-kit-hooks.json

Needs to be able to have custom navigation.item.html for the alert: