EDSC-4342: Adds features facet icons #1850
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1850 +/- ##
==========================================
+ Coverage 93.68% 93.72% +0.04%
==========================================
Files 778 778
Lines 19020 19023 +3
Branches 4895 4894 -1
==========================================
+ Hits 17818 17829 +11
+ Misses 1155 1147 -8
Partials 47 47 ☔ View full report in Codecov by Sentry. |
daniel-zamora
force-pushed
the
EDSC-4342
branch
3 times, most recently
from
1dc679a to
04a2df2
Compare
eudoroolivares2016
changed the title
eudoroolivares2016
requested review from
macrouch,
trevorlang,
dpesall and
eudoroolivares2016
| @@ -20,6 +20,7 @@ export const EDSCIcon = ({ | |||
| size, | |||
| title, | |||
| variant, | |||
| label, | |||
There was a problem hiding this comment.
I am not sure we want this, considering label is a html attribute and might cause confusion, and make it harder set a html label attribute, if we ever needed to. We could have an explicit ariaLabel prop, or just rely on props being passed through the ...props spread and use aria-label. I think either would be preferable to using label.
| @@ -47,6 +49,10 @@ const Facets = (props) => { | |||
| featuresFacet.children.push({ | |||
| applied: featureFacets.availableInEarthdataCloud, | |||
| title: 'Available in Earthdata Cloud', | |||
| iconProps: { | |||
| icon: CloudFill, | |||
| label: 'a cloud icon' | |||
There was a problem hiding this comment.
Depending on how you decide to define the label, this could be changed to ariaLabel or `"aria-label".
Also, in these labels, we should probably be sure to use proper capitalization, i.e. "A cloud icon".
| @@ -55,6 +61,10 @@ const Facets = (props) => { | |||
| featuresFacet.children.push({ | |||
| applied: featureFacets.customizable, | |||
| title: 'Customizable', | |||
| iconProps: { | |||
| icon: Settings, | |||
| label: 'a gear icon' | |||
| @@ -63,6 +73,10 @@ const Facets = (props) => { | |||
| if (showMapImagery) { | |||
| featuresFacet.children.push({ | |||
| applied: featureFacets.mapImagery, | |||
| iconProps: { | |||
| icon: FaMap, | |||
| label: 'a map icon' | |||
daniel-zamora
force-pushed
the
EDSC-4342
branch
from
f1dc630 to
0c921dc
Compare
Overview
What is the feature?
The Facets for the "Available in Earthdata Cloud" and "Map Imagery" Should have icons added to them these should match icons used in static/src/js/components/CollectionResults/CollectionResultsItem.jsx for consistency
What is the Solution?
Facets and FacetItem components will allow for adding of icons to facets via a new icon prop
What areas of the application does this impact?
Facets.jsx and FacetsItem.jsx
Testing
Reproduction steps
On main search page with collection results, there should now be icons for cloud and map imagery feature
Attachments
facets
Please include relevant screenshots or files that would be helpful in reviewing and verifying this change.
Checklist