fix(PhaseBanner): Wrap text to the right of the phase badge - Githubissues

Royal-Navy / design-system

Build web applications that meet the Royal Navy service standards

https://storybook.design-system.navy.digital.mod.uk

Apache License 2.0

103 stars 32 forks source link

fix(PhaseBanner): Wrap text to the right of the phase badge #3754

Closed markhigham closed 1 month ago

markhigham commented 1 month ago

Related issue

Closes #3733

Overview

Wrap the banner text away from the badge

Reason

Better design treatment and consistency with GDS

Work carried out

[x] Add CSS to handle the wrapping
[x] Add new story with narrow example
[x] Add unit tests

Screenshot

netlify[bot] commented 1 month ago

Deploy Preview for storybook-navy-digital-mod-uk ready!

Name	Link
Latest commit	edbdf0b495f2f89a2dbd524812710c1239452e7e
Latest deploy log	https://app.netlify.com/sites/storybook-navy-digital-mod-uk/deploys/661e4de7f4f6730008659e46
Deploy Preview	https://deploy-preview-3754--storybook-navy-digital-mod-uk.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

markhigham commented 1 month ago

When it wraps do you think the Alpha badge should be vertically centered?

I used the same layout as the GDS component https://design-system.service.gov.uk/components/phase-banner/default/

sonarcloud[bot] commented 1 month ago

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud