democracyclub/design-system

design-system's Issues

Form mixin should include checkbox and radio mixins

At the moment, when including _forms.scss you also have to include _checkbox.scss and _radio.scss if you want to use those elements.

As I understand it, the point of optionally including the partials is to reduce the finial file size, however I think in this case it's a little too find grained: if you plan on using forms (by including _forms.sss) then you have no real idea of if a form in your application will use checkbox or radio elements in future.

More importantly, it's very possible that the person adding the checkboxes isn't the same person that added the CSS, and it might not get noticed (as they are styled as browser default anyway).

Solution: I think we should add the checkbox and radio elements in to _form.scss.

Add more flexibility in existing components

Issue and Steps to Reproduce

Implementing the design system for Every Election raised the need for more flexibility in at least the table, date form and radio menus - or possibly the need for new components (such as a date picker).

Screenshots

Image crop for candidate card with multiple candidacies

Issue and Steps to Reproduce

While working on the new Person Page, I noticed the candidate images are awkwardly cropped in some cases.

One candidacy: http://localhost:8000/person/7842/tony-devenish
Many candidacies: http://localhost:8000/person/1478/shaun-bailey

Screenshots

While the image for a candidate with one candidacy looks great:

The image for a candidate with more than one candidacy is less so:

Support using thead and tbody in tables

thead and tbody tags are useful in some contexts, but the design system assumes they're not used.

Footer logo has zero margin

.ds-footer .ds-logo img { margin-right: 0; } should be increased.

Error on grid component --minimum value

design-system/system/partials/_grid.scss

Line 14 in 50f155b

@supports (width: min(var(--minimum), 100%)) {

I'm getting this error:

b'sassc: error: Error: "var(--minumum)" is not a number for min'\n on line 14 of design-system/system/partials/_grid.scss\n>> @supports (width: min(var(--minumum), 100%)) {\n\n --------------------^'`

so I just wanted to check where exactly this is set (and maybe it's not available to me) or what data type should be passed into the style, assuming it needs to be set manually. Thank you!

More cards per page on mobile view

Originally raised in DemocracyClub/WhoCanIVoteFor#585

After implementing the design system for people-lists, we still need to resize images for mobile to fit more on a screen at a time.

Add order option for grid list

In the case of grids that contain people, we want to order

A D
B E
C F

rather than

A B
C D
E F

Is there an easy way to do this that won't interfere w other nested elements?

https://whocanivotefor.co.uk/elections/W8%204NU/#election_gla.a.2021-05-06

Add pyproject.toml (and understand why)

 Successfully uninstalled dc-design-system-0.4.0
  DEPRECATION: dc-design-system is being installed using the legacy 'setup.py install' method, because it does not have a 'pyproject.toml' and the 'wheel' package is not installed. pip 23.1 will enforce this behaviour change. A possible replacement is to enable the '--use-pep517' option. Discussion can be found at https://github.com/pypa/pip/issues/8559

Breadcrumbs break card layouts

Issue and Steps to Reproduce

On https://whocanivotefor.co.uk/person/73214/david-fraser with on a narrow window / device the cards and breadcrumbs interact in not ideal ways

Screenshots

Expected

Adding overflow: auto to .breadcrumbs deals with this, but that might not be the best solution:

Additional Details

• Browser and version
  Firefox, Ubuntu

Favicon (in)consistency across projects

Putting this here as it's a cross project thing. This is on firefox on ubuntu. But same issue exists on Chrome. Think it's just transparency around the logo on website and wcivf, plus EE using the old logo.

Improve mobile view

Remove top margin

Smaller clamp one size lower (currently s6; change to s5)

Remove margin on logo text

Issue and Steps to Reproduce

I'm not sure why this margin was added, perhaps with the header but not the footer logo in mind? In any case, it throws the text based logo off center when used in the footer.

Screenshots

Expected

Actual

Additional Details

• Browser and version
• Were you logged in?

.link-button colours have low contrast

The .link-button class is using a blue which doesn't have sufficient contrast to be used on a white/light blue background, affecting our feedback forms on Who and Where.

This combination of colours only has a contrast ratio of 2.24 (on light blue, slightly better on white) but the guidelines for WCAG AA compliance recommend a ratio of 4.5 - for AAA this rises to 7.

We should change these colours to have a higher contrast ratio. Temporary changes have been made to Who and Where to fix these, but as part of this work those temporary fixes should be removed.

The changes made to Who and Where restyled the buttons to use grey and pink, as in the following image. Pink alone did not have sufficient contrast ratio.

Add party-card partial

Issue and Steps to Reproduce

DemocracyClub/WhoCanIVoteFor#1129 This work handles various party emblems where candidate cards could not. This issue is to move this component into the design system.

Photos on candidate profile pages are still too big on mobile

Issue and Steps to Reproduce

#18 (comment)

Screenshots

Expected

Margins on photo and breadcrumbs should match logo and candidate text.

Actual

Additional Details

• Browser and version
• Were you logged in?

Bullet point paragraph gap

The paragraph gap before and after bullet points is Quite Big, can it be reduced a little (and maybe bullet points themselves could be indented more?)

Grid instructions

There were a couple of things that confused me on implementing grids:

Should a grid be set within a <ul> or a <div>?
The examples source code use one while the instructions mention the other.

Initially, I didn't make the connection between columns and --gridCellMin. It might help to plainly say that reducing the default will create 2+ columns.

Quotations are BIG on mobile

Putting text in quotations makes it bigger than anything else when viewed on mobile. Looks a bit weird, especially with referendum questions.

linked text in caps are black rather than pink

https://democracyclub.org.uk/blog/2023/07/20/planning-for-the-general-election/

I think class="caps" comes from the markdown library. The solution is to do a, a > * {} in the design system

Slack Message

Mismatch between scope: true and scope: false

There is a difference between the base units (for fonts and widths) when scope is true vs when it's false. I've not quite worked this out yet.

With no changes to the code at all, apart from flipping $scope: false; (and with class=ds-scope on the body) we get the following:

With scope

Without scope

The browser width is the same in both - and the font size is much bigger without scope.

I think this is due to using rems and the browser font size being bigger than expected, but I'm still investigating.

Tested on Firefox developer edition, Ubuntu.

Remove hyphen from ds-candidate-name

When a candidate card is in a two column grid, the hyphen: auto setting causes most names to be split. Perhaps this should be an optional style.

Without hypen:auto

With hypen:auto

ds-party list links

Issue and Steps to Reproduce

@pmk01 has requested bold or increase in size on manifesto links

Screenshots

coming soon...

Expected

Actual

Additional Details

• Browser and version
• Were you logged in?

Location of status messages

Issue and Steps to Reproduce

The status message is currently placed below the nav and is truncated by the site width. This would look better at the very top of the page, but before implementing, this change needs to be tested in conjunction with sites that have similar bars for language options.

https://user-images.githubusercontent.com/20044500/204319775-597e8f10-1dc3-44b2-84ce-a3bdab29a161.png

Ref DemocracyClub/EveryElection#1637

Hiding default radio buttons precents browser error messages

For a minimal example without the design system:

<form>
  <input type="radio" name="foo" value="1" required>
  <input type="radio" name="foo" value="2" required>
  <button type="submit">submit</button>
</form>

Without selecting either option, when submitting the browser shows an error message.

Adding the below, as we do in the design system, prevents the browser from showing this message

input[type="radio"] {
  visibility: hidden;
}

I _think _ this is because the browser is attaching the message to a pseudo-element of the inputs, and inheriting the visibility.

Changing this to opacity: 0; does show the in-browser error message.

@Heydon I'm not expecting you to dive in and fix this at all, but I thought you might be interested in the bug report.

Tested on Firefox developer edition (96.0b10) on Ubuntu 20.04.

Copyright text is off center

Issue and Steps to Reproduce

The copyright text is not centered in the footer.

Screenshots

Use stack-smaller for text content

Headers and bullet point lists are double spaced, and it's very annoying. Attached shows the minimum space between them.

Language choice element

Issue and Steps to Reproduce

WDIV is targeting having a Welsh-language translation. The design system doesn't support any standard way for a user to explicitly choose a language

Expected

Somewhere there should be an optional design element for choosing a language. For WDIV we'll probably do an English / Cymraeg element in the top-right of the header bar for now, even though that would clash with the general placement of the top nav.

User login UI

This issue described below has been found on EE and WCIVF so it's likely the fix needs to happen in the design system.
(DemocracyClub/WhoCanIVoteFor#1505)

Add page "message" componant

For example, after submitting a form or performing an action, it's common to show a message saying "password changed" or "form uploaded" or whatever.

See examples in this PR DemocracyClub/ec-api-proxy#18

It would be nice to have a visual style for this, but also some idea of the best mark-up (aria alert?)

Plain text brand text; brand text translation

Issue and Steps to Reproduce

The design system currently incorporates an image for the entire brand logo and name, with an alt text of the brand name.

DemoClub site brand names are traditionally questions ("Where Do I Vote?", "Who Can I Vote For?") which could stand translation alongside the English-language brand.

The DemoClub, WDIV, and WCIVF site logos all follow the same pattern of DC circle mark with simple text to the right.

Expected

To save having to create and manage a new image per translation, it would be preferable to present the brand text in the page mark-up.

For sites presented in Welsh — currently just targeting WDIV — the design system should support a translation of the site brand text into Welsh underneath the English-language brand text.

Screenshots of a mock-up are available at DemocracyClub/dc_base_theme#58.

Links in status messages are 🤢

Can be fixed with

.ds-status-message a {
  color: $white;
}

Overflow:hidden causing CTA border clip

Issue and Steps to Reproduce

A ds-cta looks like this:

The :hover state adds transform: scale(1.05);, but this causes the left border to clip outside of the containing ds-page. ds-page has overflow-x: hidden;, so we end up with a missing border:

Expected

I think the border being pushed left is reasonable for the :hover state (so it's not aligned with the rest of the content).

I don't know why overflow-x: hidden; is there — maybe to contain images and other elements that might cause scrolling?

Additional Details

• Browser and version

Firefox developer edition, Ubuntu. But it's expected this will happen in all browsers.

Elements containing lists are sometimes bulleted

For example, when iterating through a list of candidate cards, I have to set style="list-style-type: none;".

Remove massive white space at the top of the index page

(https://democracyclub.github.io/design-system/)

Images, figures

On the DC website we have a minimal figure style - it doesn't do anything apart from centre a figcaption under an image.

When I was looking at how this would look on the design system I noticed that images will break the width of the container - on the current site we have max-width:100% to prevent this - is this worth doing? In most cases it's better for the image to scale down rather than force side-scrolling

Broken color swatches

Issue and Steps to Reproduce

swatch for lightBlue is showing `blueForBlack

https://democracyclub.github.io/design-system/basics/colors/

Meant to be fixed by #78 but doesn't seem to have worked.