This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
We can remove our page.
TBD
To include:
We are working on a common pattern for capturing user help and feedback within services.
This has been ported across but needs guidance.
Note: in RPL it's marked as “Internal use only” but I don't think this should be a tag because it should be easy to find even if there is another variant for citizen facing sites. Instead the page should contain variants—the DS is already setup for variants.
Our tab component is now redundant. I think this should be removed.
Our collapsible component seems to be a number of “Details” components with borders.
I suggest we remove our version.
I think our own version is now redundant and I suggest we remove this pattern.
I haven't seen a use for the jurisdiction nav so I think we can remove this part from the ticket.
I believe our guidance is now redundant given the GOV.UK Design System matches our own guidance.
I suggest we remove .our version.
Hello,
We have some common button text to add to the library:
Submit | Used at the end of the application to submit the data when all fields are complete.
Add another | Used to add another item.
Pay | Used to make a payment on the confirmation page from GOV.UK.
Sign in | Used to sign in to an account that has already been set up.
Sign out | Used to sign out of account.
Start | Used at the start of the service. Should only be used once in an end-to-end service.
This will be added to when more buttons are agreed.
Thanks!
We already have a primary navigation component in the design system. We need to add a variant that can take two search form variants:
Mobile:
Mobile:
We can remove ours.
We should remove ours, unless we want to recommend content templates.
Can we discuss how and when the blue panel pattern is used - it is currently used in video hearings and in SSCS.
Also, we need to discuss when to use HMCTS branding (service header, crest etc).
Not in the GOV.UK Design System.
Questions:
I think this pattern needs a review.
Objective: Let users search across a service for specific things or everything.
Togglable search:
As the search is specific, we need visible label and hint text, so it's togglable.
Persistent search:
As the search is truly global, we can forgo the visible label and hint text, and use the search button as a quasi label for sighted users. The hidden label would still need to be in the page for screen reader users.
Same, consistent layout for large and small screens.
Should reference the GDS Design Pattern library shutter pages which exist.
We have shutter page designs available for communicating a situation but no design for informing a user that a service will be out of action at a future date/time. Do we need a broadcast banner design?
Let users select multiple items and action them in bulk.
This has been ported across but it still needs guidance.
TBD
This component is needed.
This has been ported across but we need to add guidance.
No longer needed. Let's remove.
@trevorsaint - add a footer pattern in library as discussed in Design Crit on 29 Aug 2018.
We have some internal facing services that need to let users perform actions at any time. We've seen this in JUI, PUI, fees and payments. We've also seen this in other x-government systems such as CJS:
We originally designed grey buttons to work inside the blue case bar (also known as entity or details bar) like this:
But this didn't work because users couldn't spot the buttons. So we iterated and came up with this design:
The problem with the above design is that the actions are at the page level and aren't signifying their intention correctly. Sometimes we may want page-specific actions in and around that area such as on a data table where the actions sit above (not below). And you may have a search in the top right.
Then we looked at other ways to incorporate these buttons above, below, next to the sub navigation. None of it worked well for various reasons.
So our latest iteration involves changing the colour/style of the case/details bar to grey instead of blue.
By making the details bar grey it's less dominant which helps:
All of the form controls are provided in the GOV.UK Design System.
There's no need for us to have these.
There is no component for this in the GOV.UK Design System. We'll create an improved robust version of what's currently in the RPL.
I'd like to review the name of this component.
And we also need guidance as to when to use it.
At a certain pint in a user journey there is a need to either introduce or explain a concept or emphasise something important. In video hearings we have used an emerging pattern to introduce the concept of a video hearing and how it might be conducted. (examples to follow).
Desktop credit payment
Desktop card payment
Mobile credit payment
Mobile card payment
This might be a number of patterns.
Objective: let users filter a large number of items in a table such as a case list or something else like a timeline.
To make sure these designs are flexible and scalable we have tried to accommodate a large set of capabilities including search (see header), bulk actions, sorting (tables and other things), pagination, mobile, desktop in addition to filters. While also considering the varying levels of navigation and action buttons that may be present on screen.
We don't think there is a one-size-fits-all solution so there are a number of variants.
We explored filters that show above the list but this was difficult to lay out and accommodate a large set of filter options without resorting to select box menus (which are generally the least usable form control). And the filters then push the main information down the page which can be especially problematic when employing AJAX enhanced filters — not that we necessarily recommend using them until there is a clear user need.
So the way this filter works is by letting users batch select a number of options and then submitting them with a submit button (like any other form). Then the page will refresh with the filters applied and denoted in the “selected filters” section.
Users might arrive at the list by just navigating. Or users may search first. In the screens below users can only search for cases so the labelling is explicit. If search becomes more sophisticated we think there should be an interim page of all the entities (cases, users, events, payments, whatever) the search finds before being presented with filters because the information (and therefore their display) differs greatly across the entities.
There are no secondary or tertiary button styles in GOV.UK, so we'll create those with modifier classes.
Current pattern is a drop-down. What happens when more than 5 actions in the drop-down?
Rob Armes had an example from Fees & Payments.
Discuss in a Design Crit.
This is now redundant. I suggest removal.
@trevorsaint - please update the Alerts section on the HMCTS Pattern Library as discussed in Design Crit on 29 August.
Would suggest we restructure our guidance. Currently the guidance looks like the recommended pattern.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
