Feature: Topics Component Refactor #7376
Conversation
- made stylesheets and component name consistent - improved BEM styles names and format - improved template logic and added partial component to resources/list.html
nick-mon1
added
Dev: Template Logic
| .resources.section { | ||
| .paper { | ||
| @include u-bg("blue-warm-5"); | ||
| } | ||
| } |
There was a problem hiding this comment.
Removed .resources.section .paper since it is over-ridden on resources/list.html and sets background color on topics-button-list section which we do not want.
There was a problem hiding this comment.
@nick-mon1 @clmedders, unresolving the comment as it's useful information for reviewer.
There was a problem hiding this comment.
Made some comments on my changes. Take a look to see if these make sense @clmedders
Signed-off-by: christian medders <[email protected]>
There was a problem hiding this comment.
Added some comments addressing my changes (1492111) and we should be good to go if you don't have any more questions.
Can we confirm on why some topics are displayed as Capital Case versus Sentence case, is this related to a plain language rule? See Application programming interface versus Software Engineering. We can create another ticket if these need to be updated for consistency.
| @@ -52,27 +54,30 @@ | |||
| font-size: font-size("sans", "2xs"); | |||
| height: fit-content; | |||
| margin: auto; | |||
| padding-bottom: units("05"); | |||
| padding-top: units("05"); | |||
| padding-left: units("05"); | |||
There was a problem hiding this comment.
updated to left and right to fix the visual error that came up the circle around the numbers
There was a problem hiding this comment.
Made a minor update to the styles to prefer units over px-to-rem. 12px token is 1.5. See https://designsystem.digital.gov/design-tokens/spacing-units/
Summary
Refactors the topics button into a component.
Preview
Link to Preview
Solution
1 - Created partial for topics button to live in, within this file also set logic to render the two topic button variants.
2 - Logic is set based on if
tag_countis set within the template and both groups will have the same mark up within the markup3 - Updated the class naming to follow a more BEM format.
How To Test
Dev Checklist