wmcadigital / wmca-design-system Goto Github PK

Describe the bug
Feedback loop covers the footer graphic on mobile

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Would expect feedback loop to sit below the image on mobile

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
The footer elements are misaligned when at these browser widths, for example in portrait on a tablet. The copyright notice covers the links at the bottom of the footer as well.

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. Scroll down to footer
3. See errors

Expected behaviour

• The elements in the footer should all be aligned left and right, and the same width.
• Copyright notice shouldn't cover the statement/policy links. Can the footer links stack underneath the copyright notice?

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.6

Smartphone (please complete the following information):

• Device: iPad Air
• OS: iPadOS
• Browser: Safari
• Version: 15

Additional context
This also applies to the TfWM footer.

Failing validation check on banner:

Attribute type not allowed on element

Describe the bug
Favicon is currently TfWM

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Would expect it to be WMCA hexagon - similar to beta.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Update select arrow bg to use primary colour

Describe the bug
Divider spacing is not consistent - have marked on screenshot.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Should be equally spaced between content sections, so that space either side of the divider is equal.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Images have a tiny border around them on Image Content Cards, rather than filling the card's width entirely.

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. Scroll down to campaigns section
3. Notice 1-2px border around images on the Content Cards. It is more apparent on the right-hand side of the image.

Expected behavior
Images should fill the entire width of the Content Card.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS
• Browser: Safari
• Version: 14.6

Describe the bug
12px padding is added to the left and right when the browser is scaled ≤568px wide on the homepage.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk
2. Scale browser ≤568px or view on mobile
3. See error

Expected behavior
The header, footer and other components should be full width.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12 Max
• OS: iOS
• Browser: Safari
• Version: 14.6

Additional context
This issue is only on the homepage and is reproducible in Chromium browsers (Chrome, Edge)

Validation issue - Element style not allowed as child of element body in this context

Need remove all inline styles in CMS

Describe the bug
In the latest release, links have lost their bold styling and have odd spacing. The CSS references bold so seems to be an issue with it pulling the weight through

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. Scroll down to 'see all news', 'see all events', or social media links
3. See styling issue

Expected behavior
Links should be Noto Sans Display Bold.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.6

Additional information
This can be reproduced in Chrome as well.

Describe the bug
The Mayor link needs to be added into the nav bar. Currently has a rollover state (see attached pic), but no content or hyperlink.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk

Expected behavior
Mayor link should be present as first option in nav bar.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
The top 2 image content cards do not scale down on mobile and bleed off the screen

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk on mobile
2. Scroll down to campaign section
3. The top 2 content cards bleed off the edge

Expected behavior
The cards should scale down to the width of the screen

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS
• Browser: Safari
• Version: 14.6

Describe the bug
Vertical/horizontal spacing between content cards is not consistent

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Would expect vertical spacing to match horizontal spacing - creating an equally spaced grid of components.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
The tip text in the search bar is populated with transport advice. Can this please be changed to:
"Search for news, campaigns, events..."

To Reproduce
Steps to reproduce the behaviour:

1. Go to beta.wmca.org.uk
2. Click on Search
3. See text

Expected behavior
The text should relate to WMCA content

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.6

Describe the bug
The logo/breadcrumb links redirect to wmca.org.uk

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/what-we-do/
2. Click the logo in the nav bar; or the home icon in the breadcrumb
3. You are redirected to the old homepage rather than the new one

Expected behavior
Links should keep within the beta website and redirect to the new homepage.

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS
• Browser: Safari
• Version: 14.6

Additional context
This is a global issue.

Describe the bug
No margin between the contents component and the main content block on the right hand side of the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://beta.wmca.org.uk/campaigns/the-great-summer-staycation/#welcome-back.'

Expected behavior
Would expect there to be a margin between the contents and the main block of text on the right.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 91.0.4472.164

Describe the bug
Line height on H2 is currently 48px.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-one-column/

Expected behavior
Line height on H2 should be 36px.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

What

We currently use a home icon in the breadcrumb rather than text. This should be changed to text 'home'.

Why

• Parity with TfWM Design System
• Make the navigation clearer, especially for users with accessibility requirements

Describe the bug
The menu button in the nav bar is not visible. It is there and interactive.

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. View on a mobile or resize browser width so the navbar collapses
3. See the menu button is not visible

Expected behavior
The menu button should be visible so there's a visual cue.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS
• Browser: Safari
• Version: 14.6

Describe the bug
Current SVG has a transparent element which isn't correct. Please replace with the attached.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/

Expected behavior
Would expect icon to appear correctly.
logo.svg.zip

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 91.0.4472.164

Adding spacing to the search bar does not work.

What

Add a new List icon to the general section on the Icons page.

Why

This icon is used to represent the list view option we have in the rail zone micro journey and bus area micro journey - part of the new ticket finder experience

Anything else

Name the new List icon 'general-list'

Download: list-solid.svg.zip

Describe the bug
The Mayoral mark in the hub header is too large

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/the-mayor-1/

Expected behavior
The mark should be 138px wide

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Describe the bug
There are a few bugs/glitches with content cards. Have noticed a number of variants across a couple of pages.

On the home page, on hover the image is shrunk by 1 pixel to account for the external px stroke. This is a little bit jarring and appears a bit glitchy. The image should ideally remain the same size.

On the who we are page, similar content cards are shown with a 1 px border around the image. You would expect these to look the same other other content cards, without the white border. These have the shame issue where the image shrinks on hover.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://beta.wmca.org.uk/' & 'https://beta.wmca.org.uk/who-we-are'

Expected behavior
Would expect content card component to appear consistently.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 91.0.4472.164

Describe the bug
The social media embeds and links seem to be obeying a different grid to the rest of the hp content/components.

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. Scroll down to Social Media
3. Embeds and links are following a narrower grid and out of alignment with other components

Expected behavior
All items on the homepage should be following a consistent grid

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Describe the bug
Spacing on homepage components needs to be consistent with the cards at the bottom

To Reproduce

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/homepage/

Expected behavior
Would expect all spacing to be consistent (both vertically and horizontally between components) to match spacing used at the bottom of the page for the 'upcoming events' section. Have annotated the attached screenshot with magenta stripes to show the issues.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Safari
• Version: 14.1

Failing validation check - The charset attribute on the script element is obsolete.

What

The beta banner currently doesn't have a feedback loop integrated. Can we change the wording to:

This is a new service - your feedback will help us improve it.

Why

We need to gather user feedback from the new website to improve the experience iteratively.

Anything else

Hotjar user feedback survey: https://surveys.hotjar.com/ed9799a8-4ee1-47d1-838c-3922a90f2eb7

Describe the bug
The WMCA DS shows a WMN favicon, this should be a WMCA one.

To Reproduce
Steps to reproduce the behavior:

1. Go to WMN Design System
2. Look in browser tabs
3. WMN favicon is shown

Expected behavior
The website should provide a WMCA favicon

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version 14.0.3

Describe the bug
The heading and body content within the banner isn't in line with the rest of the page contents.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://beta.wmca.org.uk/who-we-are

Expected behavior
The text should be left-aligned to the body content.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Describe the bug
The SVG needs to be swapped so that the interior parts of the mark are 50% transparent.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page
2. Logo in the header shows lighter interior elements, they should be 50% transparent

Expected behavior
The interior parts of the logo should be 50% transparent.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Describe the bug
Tighten space up between date and H2 on news components

To Reproduce

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/homepage/

Expected behavior
Spacing should be tighter - have a look at the spacing in the Figma/Sketch design system for reference (screenshot included here)

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Safari
• Version: 14.1

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/what-we-do
2. Click on Productivity and Skills
3. See that the link doesn't work

Expected behavior
The link should open the Productivity and Skills hub

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Additional context
As all Skills content moved wholly to the beta site, the content is currently inaccessible.

There are a few issues with fonts in the WMCA DS:

• The link text in the Nav Bar should be in DM Sans rather than Noto Sans;
• Body text/button text/everything other than headers and Nav Bar should be in Noto Sans Display, rather than Open Sans
• Headings should be DM Sans (this is already logged)
• DM Sans doesn't pull through in Safari (14) and the browser uses the default sans-serif font. Likely the same in IE but not tested. Fonts pull properly in other browsers.

Describe the bug
The header image is different heights on when the component spans two columns in comparison to the one.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/homepage/

Expected behavior
All header image heights should be consistent to allow alignment across the row.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Content cards backgrounds should be white.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-104--wmcads.netlify.app/templates/homepage/
2. Content cards have page bg colour, they should be white

Expected behavior
The CC cards should be white

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.0.3

Additional context
This is global to all CCs, not just the HP

Describe the bug
News components have a white background.

To Reproduce
Steps to reproduce the behavior:
Go to https://deploy-preview-148--wmcads.netlify.app/templates/homepage/

Expected behavior
News components background should be #BDBCBC - so effectively invisible against rest of the page background.

Screenshots

Desktop (please complete the following information):

OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Buttons aren't pulling through the correct font and are using a generic sans-serif font

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/what-we-do/west-midlands-cultural-sector-research-project/west-midlands-cultural-infrastructure-map/
2. Scroll down to buttons
3. See error

Expected behavior
The font should be styled in Noto Sans Display Bold

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Describe the bug
There's inconsistent vertical spacing on smaller displays/windows between news articles

To Reproduce
Steps to reproduce the behavior:

1. Go to beta.wmca.org.uk
2. View on mobile or resize browser window
3. Scroll down to News
4. See inconsistent news spacing

Expected behavior
There should be 10px spacing between news images/dates, 20px between news articles.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS
• Browser [e.g. stock browser, safari]
• Version: 14.6

Additional context
Figma file with hp news article spacing

Describe the bug
Footer needs to be updated

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk

Expected behavior
Updated footer

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Image height on news cards should be consistent, currently they vary.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-104--wmcads.netlify.app/templates/homepage/
2. News images should be the same height

Expected behavior
The height should be consistently 150px
Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.0.3

Describe the bug
The hub banner component does not scale responsively and content is cut off.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/who-we-are
2. Resize the page to a narrow view

Expected behavior
The banner should resize responsively and the image disappear - https://www.figma.com/file/NE1D76Vj3OEAcZSQGJgYmV/WMCA-Design-System?node-id=111%3A1699

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1

Smartphone (please complete the following information):

• Device: iPhone 12 Pro Max
• OS: iOS
• Browser: Safari
• Version: 14.6

Describe the bug
Contents card functionality doesn’t work as intended.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Links need to act as anchors

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Contents card needs to be sticky - currently scrolls off the page.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Would expect content card to be sticky, so doesn't scroll off the page with content.

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Describe the bug
Chevron on the breadcrumbs is currently a transport site colour.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://deploy-preview-148--wmcads.netlify.app/templates/campaign-two-columns/

Expected behavior
Needs to change to primary orange colour

Screenshots

Desktop (please complete the following information):
OS: macOS
Browser: Safari
Version: 14.1

Ensure lists in footer use unique id's and link back to the aria-controls

Describe the bug
There is too much of a margin between the column on the left hand side (with text) and the column of content cards on the right hand side (i.e. Laura and Andy)

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://beta.wmca.org.uk/who-we-are'

Expected behavior
Would expect it to match other areas of the site/design system. Compare with TfWM site.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 91.0.4472.164

Describe the bug
A couple of issues:

• There are a number of URLs that are not hyperlinks - not sure if this is an Umbraco issue or the content editor not marking them as such.
• We also have two colours being used to denote them - the Birmingham.gov on at the top is a standard web hyperlink colour, whereas others use our design system blue.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://beta.wmca.org.uk/campaigns/the-great-summer-staycation/#welcome-back.'
2. Scroll down to the accordian section at bottom of the page and open.

Expected behavior
Would expect all URLs to be hyperlinks and appear with consistent styling.

Screenshots

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome
• Version: 91.0.4472.164

Headings should be in DM sans rather than Noto Sans

Describe the bug
Content cards on content page templates have Dividers applied automatically, these should only be on Campaign pages with the option to disable them.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://beta.wmca.org.uk/what-we-do/west-midlands-cultural-sector-research-project/west-midlands-cultural-infrastructure-map/
2. Scroll down to content card
3. See dividers are applied

Expected behavior
Content cards shouldn't have dividers styled above and below them.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 14.1.1