Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wd 17296 dev create solutions open source security cyber resilience act #14560

Open
wants to merge 23 commits into
base: main
Choose a base branch
from

Conversation

abhigyanghosh30
Copy link
Contributor

@abhigyanghosh30 abhigyanghosh30 commented Dec 11, 2024

Done

  • Created Page on CRA

QA

Issue / Card

Fixes #WD-17296

Screenshots

[If relevant, please include a screenshot.]

Help

QA steps - Commit guidelines

@webteam-app
Copy link

@abhigyanghosh30
Copy link
Contributor Author

abhigyanghosh30 commented Dec 11, 2024

@mattea-turic Can you review the page once? There is a demo at https://ubuntu-com-14560.demos.haus/solutions/open-source-security/cyber-resilience-act

The forms are not done yet

@mattea-turic
Copy link
Collaborator

mattea-turic commented Dec 18, 2024

Thanks @abhigyanghosh30 ! A few comments from me:


For the entire page:

  • Could you make the background colour paper pls?

For the hero section:

  • For smaller screens, the H1 should be wrapped in a shallow to allow for more breathing room between itself and the paragraph below

For "What is the Cyber Resilience Act (CRA)":

  • There looks to be a shallow under the section's hr which shouldn't be there
  • The heading should have H2 styling
  • Again in the heading, there should be a <br> after "the"
  • There looks to be excess padding in the paragraph that's under the image (between the p itself and the link)
  • The hr above the link should be muted

For "What products and devices does the CRA regulate?":

  • Similar to above, there looks to be a shallow under the section's hr
  • There should be a <br> after "devices" in the heading
  • You're missing the paragraph, "The CRA will cover all products or devices available in the EU market that are connected to any other device or network to exchange data. This includes PDEs that use:" that goes right below the heading and above the first list
  • There should also be a hr above each set of lists
  • There's some excess spacing under the subsection, "The CRA will cover all PDEs made available in the EU market regardless of:"
  • You're missing bottom padding for this section (4 rem)

For "The Cyber Resilience Act requirements in a nutshell":

  • Again, there should be a hr above each initial list item (as well as following ones, which you've already done)

For the section, "Who does the Cyber Resilience Act apply to?":

  • The image should be wrapped in a shallow
  • The section is missing bottom padding

For "Canonical’s commitment to the CRA":

  • There's a shallow under the section's hr that shouldn't be there
  • There should be a <br> after "commitment" pls
  • There should be a hr above the first list item under "Canonical has committed to:"

For the CTA section ("Need help with your CRA roadmap..."):

  • The text itself doesn't need to be wrapped; it's resulting in too much bottom padding atm

For "How the Cyber Resilience Act will impact device manufacturers":

  • There's a shallow under the section's hr that shouldn't be there
  • There should be a <br> after "Act" pls (if it can fit so there's no wrapping to a third line)

For "Fast-track compliance with Ubuntu Pro for Devices":

  • <br> after "compliance" pls
  • There looks to be excess padding under the image
  • Similar to the "What is the CRA?" section, there's excess bottom padding in the paragraph and the hr above the link should be muted

For the FAQ section:

  • There should be a hr above the first list item in the last subsection ("What are manufacturer reporting requirements under the CRA?"

For "Dive deep into the CRA with our free resources":

  • <br> after "CRA" pls
  • There's a shallow under the section's hr that shouldn't be there
  • The hrs between the resources should be muted
  • The section should have deep bottom padding (8 rem)

@Sophie-32
Copy link

Sophie-32 commented Dec 18, 2024

  1. Missing some text from copydoc, @abhigyanghosh30 you're tagged in the copydoc
  2. Correct the headings -
  • should be h2 - Screen Shot 2024-12-18 at 3 30 43 PM
  • should be h3 not h5 - Screen Shot 2024-12-18 at 3 31 27 PM
  • should be h3 not h5 - Screen Shot 2024-12-18 at 3 31 49 PM
  • should be h3 instead of h5 - Screen Shot 2024-12-18 at 3 32 50 PM
  1. Update contact link to the form - Screen Shot 2024-12-18 at 3 35 07 PM

@abhigyanghosh30 abhigyanghosh30 force-pushed the WD-17296-dev-create-solutions-open-source-security-cyber-resilience-act branch from 2d4e075 to 676c0e4 Compare December 18, 2024 18:15
@abhigyanghosh30
Copy link
Contributor Author

@mattea-turic @Sophie-32 I addressed most of your concerns. Please check again if I have addressed everything.

The text itself doesn't need to be wrapped; it's resulting in too much bottom padding atm

I did not exactly understand what this meant so I just reduced the size of the section.

@mattea-turic
Copy link
Collaborator

mattea-turic commented Dec 19, 2024

@mattea-turic updated the page. Please check

@abhigyanghosh30 Just tried checking, but the link doesn't seem to be working

@abhigyanghosh30
Copy link
Contributor Author

@mattea-turic the demo was bugging out. Fixed it

@mattea-turic
Copy link
Collaborator

This section is still missing a reg. bottom padding; but I'll add a design +1 since it's the only thing to change now :)
Screenshot 2024-12-20 at 01 43 46

Copy link
Contributor

@fasih-mehmood fasih-mehmood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to go once the duplication is removed. Thank you for the great work!

</p>
</div>
<div class="p-cta-block">
<a href="#"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be a fallback URL in case user doesn't have JS enabled. I see that it is not included in the copy doc. Could you please check with Gloria or UX?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can leave the fallback for now because the site needs to be up before the holidays

</div>
</div>
<div class="p-section--shallow">
{{ image (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here can you format the image template please

<div class="u-fixed-width p-strip">
<section class="p-strip">
<h2>
<a aria-controls="contact-modal" class="js-invoke-modal">Need help with your CRA roadmap? Contact our experts ›</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be a fallback href for the anchor tag here

<h1 class="u-no-margin--bottom">Meet your Cyber Resilience Act requirements with Canonical</h1>
</div>
<div class="col">
<div class="p-section--shallow u-hide--large"></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this empty div be removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. Needed for spacing


{% block content %}

<section class="p-section--hero">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are using hero patterns from Vanilla for hero sections, can you update it to use the pattern? Link to the doc here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesnot follow exactly any of the hero patterns as all of them require an image but this hero doesnot have an image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants