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.

Sign up for GitHub

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

Feature: Topics Component Refactor #7376

Merged
merged 45 commits into from
Apr 2, 2024
Merged

Feature: Topics Component Refactor #7376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
b6689f0
Creating partial for topics button
clmedders Mar 4, 2024
e267710
linting updates
clmedders Mar 4, 2024
915fb20
adding partial from new topics button
clmedders Mar 4, 2024
dd00d45
Updating style sheet
clmedders Mar 4, 2024
2b13a63
Linting and file clean up
clmedders Mar 4, 2024
760a17f
Merge remote-tracking branch 'origin' into cm-topics-button-component
clmedders Mar 4, 2024
f2385fc
linting fix
clmedders Mar 4, 2024
1b2d697
file clean up
clmedders Mar 4, 2024
7e4e7ab
linting fix
clmedders Mar 4, 2024
3c699f3
Merge branch 'main' into cm-topics-button-component
nick-mon1 Mar 5, 2024
22ef639
Updated markup, styles to be consistent
nick-mon1 Mar 6, 2024
3be29b2
Fixed prettier error
nick-mon1 Mar 6, 2024
fa8f228
Removed un-necessary markup
nick-mon1 Mar 6, 2024
7e6ec1f
Removed comments
nick-mon1 Mar 6, 2024
67be07f
Fixed template logic comments by @mejiaj
nick-mon1 Mar 11, 2024
e98fff2
updates to files after code review
clmedders Mar 15, 2024
9da3ea9
linting updates
clmedders Mar 15, 2024
fbbedc2
linting updates
clmedders Mar 15, 2024
a683f17
adding transition effect on arrow
clmedders Mar 15, 2024
6ba3dfd
adding single prop css styles
clmedders Mar 15, 2024
ce2835f
linting updates
clmedders Mar 15, 2024
e80048e
updating from change request to partial
clmedders Mar 18, 2024
15d85e1
updating from change request to style sheet
clmedders Mar 18, 2024
7ddc3d3
linting updates
clmedders Mar 18, 2024
b360e49
updating visited action for primary to stay with base color
clmedders Mar 18, 2024
ba6491b
linting updates
clmedders Mar 18, 2024
7b9326e
Merge branch 'main' into cm-topics-button-component
mejiaj Mar 19, 2024
991ff7d
updating padding for link to fix wrapping issue
clmedders Mar 19, 2024
0090b39
checking verified access
clmedders Mar 19, 2024
057a456
linting update
clmedders Mar 19, 2024
c9db283
checking signoff
clmedders Mar 19, 2024
0051467
linting fix
clmedders Mar 19, 2024
1492111
Refactored mixins to functions, fixed 2 minor visual bugs
nick-mon1 Mar 20, 2024
b837ef9
Updating bug that came up with padding
clmedders Mar 22, 2024
77109db
linting updates
clmedders Mar 22, 2024
4b46657
Merge remote-tracking branch 'origin' into cm-topics-button-component
clmedders Mar 22, 2024
11cad11
removed zombie code
clmedders Mar 22, 2024
5d69ba1
Merge branch 'main' into cm-topics-button-component
nick-mon1 Mar 22, 2024
9567382
fixed spacing on mobile for count link
clmedders Mar 22, 2024
df16dcf
linting updates
clmedders Mar 22, 2024
c35c4a2
linting updates
clmedders Mar 22, 2024
f1718ab
Replaced px-to-rem with units
nick-mon1 Mar 22, 2024
9f0d0db
Remove unnecessary grid row
mejiaj Mar 28, 2024
9dae523
Merge branch 'main' into cm-topics-button-component
mejiaj Apr 1, 2024
15dd166
Merge remote-tracking branch 'origin' into cm-topics-button-component
clmedders Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions themes/digital.gov/layouts/partials/core/topics-button.html
View file
Open in desktop
clmedders marked this conversation as resolved.
Show resolved Hide resolved
clmedders marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{{/* Renders a topics button with the name of the topic and has two display options.

1. Primary - Styled button with a hover effect.
2. Count - Link followed by the amount of pages that use the topic.

@param {url} link - String path to a topic page.
@param {string} title - Topic name.
@param {number} tag_count - Number of times the topic tag is used.
@param {boolean} has_tag_count - Checks if `tag_count` number is present.
*/}}

{{ $link := .link }}
{{ $title := .title }}
{{ $tag_count := .tag_count }}
{{ $has_tag_count := false }}

{{ if ne $tag_count nil }}
{{ $has_tag_count = true }}
{{ end }}


<div
class="topics-button {{ if not $has_tag_count }}
topics-button--primary
{{ else }}
topics-button--count
{{ end }}"
>
<a
class="topics-button__link"
href="{{- $link | relURL -}}"
title="{{- $title -}}"
>
{{- $title -}}
{{ if not $has_tag_count }}
<span class="topics-button__arrow">
<svg
class="usa-icon dg-icon dg-icon--standard margin-bottom-05"
aria-hidden="true"
focusable="false"
>
<use
xlink:href="{{ "uswds/img/sprite.svg#arrow_forward" | relURL }}"
></use>
</svg>
</span>
{{ end }}
</a>
{{ if $has_tag_count }}
<span class="topics-button__number">{{- $tag_count -}}</span>
{{ end }}
</div>
67 changes: 26 additions & 41 deletions themes/digital.gov/layouts/resources/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,49 +119,34 @@ <h2>All Resources by Topic</h2>
</div>
</section>

<section class="topic-buttons">
clmedders marked this conversation as resolved.
Show resolved Hide resolved
<div class="grid-container grid-container-desktop">
<div class="grid-row">
<div class="grid-col-12">
<h2>Resources by Topic</h2>
</div>
</div>
<div class="grid-row tablet:grid-gap-2">
{{- $top_topics := $.Site.Taxonomies.topics -}}
{{- range $name, $taxonomy := $top_topics -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{- if or (eq .Params.weight 2) (eq .Params.weight 3) -}}
<div class="grid-col-12 tablet:grid-col-4">
<div class="topic">
<h3>
<a
href="{{- .Permalink | absURL -}}"
title="{{- .Title -}}"
>{{- .Title -}} <span>&#8594;</span></a
>
</h3>
</div>
</div>
{{- end -}}
<section class="grid-container grid-container-desktop">
<h2>Resources by Topic</h2>

<div class="grid-row tablet:grid-gap-2">
{{- $top_topics := $.Site.Taxonomies.topics -}}
{{- range $name, $taxonomy := $top_topics -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{- if or (eq .Params.weight 2) (eq .Params.weight 3) -}}
<div class="grid-col-12 tablet:grid-col-4">
{{ partial "core/topics-button" (dict "link" .Permalink "title" .Title) }}
</div>
{{- end -}}
{{- end -}}
</div>
<footer>
<p>
<a href="{{ "topics" | relURL }}" class="dg-more-link">
<span>See all topics</span>
<svg
class="usa-icon dg-icon dg-icon--standard margin-bottom-05"
aria-hidden="true"
focusable="false"
>
<use
xlink:href="{{ "uswds/img/sprite.svg#arrow_forward" | relURL }}"
></use>
</svg>
</a>
</p>
</footer>
{{- end -}}
</div>
<div>
<a href="{{ "topics" | relURL }}" class="dg-more-link__label">
<span>See all topics</span>
<svg
class="usa-icon dg-icon dg-icon--standard margin-bottom-05"
aria-hidden="true"
focusable="false"
>
<use
xlink:href="{{ "uswds/img/sprite.svg#arrow_forward" | relURL }}"
></use>
</svg>
</a>
</div>
</section>
</article>
Expand Down
85 changes: 32 additions & 53 deletions themes/digital.gov/layouts/topics/terms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,74 +3,53 @@
{{- define "content" -}}
<main role="main" id="main-content">
<header>
<div class="grid-container grid-container-desktop">
<div class="grid-container grid-container-desktop margin-top-2">
clmedders marked this conversation as resolved.
Show resolved Hide resolved
{{- $topics := (where .Site.Pages "Section" "topics") -}}
<h1>Topics</h1>
<h4 class="display-none">There are {{ len $topics }} topics</h4>
</div>
</header>

<section class="topic-buttons">
<div class="grid-container grid-container-desktop">
<div class="grid-row tablet:grid-gap-2">
{{- $top_topics := $.Site.Taxonomies.topics -}}
{{- range $name, $taxonomy := $top_topics -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{- if eq .Params.weight 2 -}}
<div class="grid-col-12 tablet:grid-col-4">
<div class="topic">
<h3>
<a
href="{{- .Permalink | absURL -}}"
title="{{- .Title -}}"
>
{{- .Title -}} <span>&#8594;</span>
</a>
</h3>
</div>
</div>
{{- end -}}
<section class="grid-container-desktop">
<div class="grid-row tablet:grid-gap-2">
{{- $top_topics := $.Site.Taxonomies.topics -}}
{{- range $name, $taxonomy := $top_topics -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{- if eq .Params.weight 2 -}}
<div class="grid-col-12 tablet:grid-col-4">
{{ partial "core/topics-button" (dict "link" .Permalink "title" .Title) }}
</div>
{{- end -}}
{{- end -}}
</div>
{{- end -}}
</div>
</section>

<section class="topic-buttons">
<div class="grid-container grid-container-desktop">
<div class="grid-row tablet-lg:grid-gap-2">
<div class="grid-col-auto">
{{- $topics_tax := $.Site.Taxonomies.topics -}}
{{- $topics_count := len $topics_tax -}}
{{- $topics_col := (div $topics_count 3) -}}
<h2>All {{ $topics_count }} Topics</h2>
</div>
<section class="grid-container grid-container-desktop margin-bottom-4">
<div class="grid-row tablet-lg:grid-gap-2">
<div class="grid-col-auto">
{{- $topics_tax := $.Site.Taxonomies.topics -}}
{{- $topics_count := len $topics_tax -}}
<h2>All {{ $topics_count }} Topics</h2>
</div>
<ol class="topic-buttons__list">
{{/* How we're dividing all the topics into 4 columns
Set the counter to 0.
*/}}
{{- $.Scratch.Set "counter" 0 -}}
</div>
<div class="topics-button__list">
{{/* How we're dividing all the topics into 4 columns
Set the counter to 0.
*/}}
{{- $.Scratch.Set "counter" 0 -}}

{{/* Loop through all the terms */}}
{{- range $name, $taxonomy := $topics_tax -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{/* Increment the counter for each topic */}}
{{- $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) -}}
{{- $count := $.Scratch.Get "counter" -}}
{{/* Loop through all the terms */}}
{{- range $name, $taxonomy := $topics_tax -}}
{{- with $.Site.GetPage (printf "/topics/%s" $name) -}}
{{/* Increment the counter for each topic */}}
{{- $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) -}}
{{- $count := $.Scratch.Get "counter" -}}

{{/* Output the topic HTML */}}
<li class="topic topic-buttons__list-item">
<p>
<a href="{{- .Permalink -}}" title="{{- $name -}}">
<span>{{- .Title -}}</span>
</a>
<span class="count">{{- $taxonomy.Count -}}</span>
</p>
</li>
{{- end -}}
{{/* Output the topic HTML */}}
{{ partial "core/topics-button" (dict "link" .Permalink "title" .Title "tag_count" $taxonomy.Count) }}
Comment on lines +40 to +50
Copy link
Contributor

Choose a reason for hiding this comment

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

If all of this logic is necessary for a four column grid, we should look into other solutions, like columns | MDN or Flexbox.

Logic can be expensive for performance and there's really no need for it with modern CSS techniques.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

how both nick and i are understanding this... the logic here is getting the count that is added to the links at the bottom that show the number of topics assoicated with it. happy to talk through it more as well

Copy link
Contributor

Choose a reason for hiding this comment

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

@clmedders I was strictly speaking about the extra markup required to generate the grid.

Let's address it in a future card, so as to not expand the scope of this any more.

{{- end -}}
</ol>
{{- end -}}
</div>
</section>

Expand Down
7 changes: 0 additions & 7 deletions themes/digital.gov/src/scss/new/_resources.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
@use "uswds-core" as *;

// .paper sets the background-color for the page
.resources.section {
.paper {
@include u-bg("blue-warm-5");
}
}
Comment on lines -4 to -8
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

@nick-mon1 @clmedders, unresolving the comment as it's useful information for reviewer.


.main-resources {
.in-page {
@include u-bg("gray-warm-3");
Expand Down
106 changes: 0 additions & 106 deletions themes/digital.gov/src/scss/new/_topic-buttons.scss
View file
Open in desktop

This file was deleted.

Loading
Loading