lbhackney-it/lbh-frontend

Everything you need to build user interfaces for Hackney platforms and services.

Hackney Design System

The Hackney Design System contains everything you need to build user interfaces for Hackney platforms and services.

See the full documentation

---

We have a Codepen for you to quickly experiment with code samples from the design system, and a prototype kit for making flows to share with stakeholders or use in research.

We have starter kits for using the design system in production.

---

Contributing

We use a feature-branching strategy. Make your pull requests to the develop branch.

See the full contributor guidance

lbh-frontend's Issues

Semantic release isn't publishing dist files when a new version is released

semantic-release should build css and js files and commit them in the dist directory whenever it releases a new version to npm:

      [
        "@semantic-release/git",
        {
          "assets": [
            "dist/**/*.{js,css}",
            "package.json",
            "CHANGELOG.md"
          ],
          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
        }
      ]

this isn't happening.

it is committing new changelog.md and package.json files, so something about committing the dist files in particular is causing trouble.

investigate:

• config syntax
• are build files being pushed to npm but not git? or not at all?
• what happens during a dry run?

Add a variant of the button size

Ideally, we want to be able to define a button with the same height as the inputs.

I don't know if our buttons should adapt to the same height of the inputs or if it's better to add a new button modifier, for example lbh-button--s.

Solve deprecation warning from GOV.UK frontend

We probably just need to rearrange some imports.

WARNING: Importing items from the core layer without first importing `base` is deprecated, and will no longer work as of GOV.UK Frontend v4.0.
    node_modules/govuk-frontend/govuk/core/_links.scss 2:3  @import
    node_modules/govuk-frontend/govuk/core/_all.scss 1:9    @import
    node_modules/lbh-frontend/lbh/core/_all.scss 5:9        @import
    styles/globals.scss 3:9                                 root stylesheet

Skip to main link + header margin top should be 36px

currently 40px.

_width-container.scss contains no import for govuk-width-contaner mixin.

An error occurs when importing lbh-container from lbh-frontend, needs an import for the govuk-width-container mixin.

Improve component previews in the docs

fixed position components don't look good right now, and margins between previews and code samples could do some work.

eg. https://design-system.hackney.gov.uk/components/back-to-top

Add margin top to lists.

(removed by govuk explicitly)

core/_form-group.scss does not import the govuk-form-group styles

lbh-frontend-react is going to require a FormGroup component in order to correctly group form controls. I was looking for the form group styling and I found a file inside core, but it does not import the core govuk-form-group styles inside it. I'm assuming this may be because the styles can be imported from the components where form-group is being used.

I would need both this file and the govuk file seperately imported. The ideal would be to import the lbh-frontend form-group and have that import the govuk-frontend styles.

Hackney logo svg file is incorrect.

Designing accessible services

At Hackney Council we want our services to be as accessible as possible for everyone.

The Government Home Office has some guidance on how to design more accessible services.

The guidance covers design best practices for users from these areas: low vision, D/deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum and users of screen readers.

Designing accessible services guidance

Get remaining colour and typography examples into the docs

need to add these docs still:

https://lbh-frontend.herokuapp.com/examples/colours
https://lbh-frontend.herokuapp.com/examples/typography

Fieldset and button margins

Review starter kits and check that asset importing guidance is correct

current guidance may be out of date: https://github.com/LBHackney-IT/lbh-frontend/blob/main/docs/developing/installing-from-npm.md

starter kits do it in different ways: https://github.com/LBHackney-IT/hackney-design-system-examples/

Add file upload to pattern library

Top level navigation tabs

Screenshots of the component

In isolation:

In situ:

What should the component be called?
Top level navigation tabs

What is the component for?
Very much based on the existing tab box but modified to provide in page navigation at a secondary level. Ideally used in conjunction with the side bar menu.

Does code for the component exist?
Not yet

Who contributed to this work?
Alex Sadler (nudge)

LBH Accordion - Component

The current Accordion on the Design System needs improvement. The font weight is too light eg "Example item 1". Modify to regular Open Sans.

Screenshots
Current accordion

Why is the change better?
Improve accessibility.

Does code for the change exist?
If the change involves any code changes, does the code exist in any prototypes or production apps already? Is anyone willing to write the code for it if not? Link to the GitHub commit if so.

Who contributed to this work?
Andrew Cochrane - Associate User Researcher/Designer

Set up visual regression testing

need to use jest, jest-image-screenshot and similar libs to set up automatic regression testing for components.

should use the mdx of the documentation as the test cases.

Add 100% width to lbh-container

lbh-rem doesn't output negative pixel values

Speed up sass compilation times

sass compilation can sometimes take up to a minute (eg. parcel first run of all components, no cache: 47s). this is very slow compared to just importing govuk frontend, which takes up to a few seconds.

appear to be caused by recursive/circular imports from gov.uk frontend.

possibly as simple as removing some unnecessary imports from component files and doing some performance/smoke testing on the results.

will post more in here as i learn about it.

Remove leaflet and make a dependency

`lbh-label` is overriding label modifiers

Describe the bug

lbh-label is overriding all the label modifiers (i.e. govuk-label--xl).

The problem is visible in the docs 👇

https://design-system.hackney.gov.uk/components/label

How it looks at the moment:

How it should look:

Table

Screenshots of the change
Before:

After:

Why is the change better?
There's not enough space in the existing table for complex dashboard data views. The original table is suited more towards simpler lateral flows for residents and might be worth keeping alongside this version.
We've taken the text size down to 14/18px and also allowed for different colours where neccersary.

Does code for the change exist?
Not yet

Who contributed to this work?
Alex Sadler (nudge)

Side bar

Screenshots of the component

What should the component be called?
Side Bar Menu

What is the component for?
Offers greater level of navigation flexibility for internal dashboard views

Does code for the component exist?
Not yet, nudge will code and contribute

Who contributed to this work?
Alex Sadler (nudge)

Confirmation banner

Screenshots of the component
https://slack-files.com/T456ZF7UL-F025ALSJHQ9-e45013a137

What should the component be called?
Confirmation banner

What is the component for?
to highlight important, positive content on staff-facing tools, like confirming the end of a flow, process or form.

it adapts the existing panel component: https://design-system.service.gov.uk/components/panel/

....but where that component takes up an entire page (a good fit for the "one thing per page" pattern), staff generally prefer more than one thing per page, so this component takes up much less vertical space. it's intended to appear above unrelated content to assist swift working.

more: https://hackit-lbh.slack.com/archives/CJ6AWTH0A/p1623669907028600

Does code for the component exist?
production-ready styles and react code: LBHackney-IT/lbh-social-care-frontend#461

Who contributed to this work?
@jhackett1

Consider relaxing restrictions around using NVM

There are other Node environment managers (N, Nodenv, probably more). What matters is the version of Node that's running, not whether someone is using NVM to run it.

Consider using a changelog

As a package depending on this package, it would be really helpful to know what changes have gone into a new version. I suggest using a Keep a Changelog format changelog, which you update as you make the changes. Any thoughts?

Add hint as component.

Textarea doesn't have a focus outline in the docs

https://design-system.hackney.gov.uk/components/textarea

not sure if it only affects the docs, or the underlying component itself.

should have a focus outline like: https://design-system.hackney.gov.uk/components/input

Add tag as component

Search Results Table

Screenshots of the component
Single View:

Structured View:

What should the component be called?
Search Results Table

What is the component for?
Searching large or structured datasets with a view to accessing a resident or property record. Could be repurposed for repairs etc where there are high volumes of results too.

Does code for the component exist?
Not yet

Who contributed to this work?
Alex Sadler (nudge)

In-page notification

Screenshots of the component
In isolation

Figma component: https://www.figma.com/file/QeTHOuvDxli5KMSOcPAEe3/Design-library?node-id=1147%3A525
In use

Figme design: https://www.figma.com/file/09a9HI3ngi7oOCwYD0lXRG/MTFH-T-and-L-workstream-wireframes?node-id=4368%3A589

What should the component be called?
In-page notification

What is the component for?
What user needs does it meet? Who is it for? When should it be used? When shouldn't it be used?
When a user takes and action the in-page notification displays confirmation that the action has taken place. Action links in the notification can be used to, for instance, offer the user the chance to undo the action.

The component should not be used for announcements - see the announcement element

Does code for the component exist?
Not as of 19.7.21; check with MTFH T&L workstream

Who contributed to this work?
Jaye @ wearefuturegov - original design
Rob Pearson @ Amido - figma component

Primary and secondary buttons have different heights

Screenshot

Improve tag component

the visual look and feel of https://design-system.hackney.gov.uk/components/tag needs to be returned to something closer to the govuk component so it can be used in admin-facing tools to show status.

see #hackit-design-system for background.

need to check that the phase banner component doesn't depend on it.

Investigate why lbh-fieldset doesn't work when used using "call"

https://design-system.service.gov.uk/components/fieldset/

Leaflet map in contact block not appearing in docs

we need to include some extra css, js and documentation to explain how to make this work:

https://design-system.hackney.gov.uk/components/contacts-block

as part of this, we should also investigate that lbh/vendor folder more generally.

Check rem support before using rems

height: 40px;
@if $govuk-typography-use-rem {
    height: govuk-px-to-rem(40px);
}

Fix margin on breadcrumb when immediately after header--fixed