Skip to content

Commit

Permalink
Searchcard (#605)
Browse files Browse the repository at this point in the history 
* [sitemap]: remove diallow all from sitemap

* update searchcard style

* add aria-label to the footer

* update test

* update

* update dataset card
  • Loading branch information
@steveoni
steveoni authored Dec 16, 2024
1 parent 889a0f0 commit 54ceef4
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 105 deletions.
2 changes: 2 additions & 0 deletions deployment/frontend/src/components/_shared/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ export default function Footer({
href="https://www.portaljs.com/"
target="_blank"
className=" text-wri-green"
aria-label="Portal.js website"
>
Portal.js
</a>{' '}
Expand All @@ -168,6 +169,7 @@ export default function Footer({
<a
href="https://www.datopian.com/"
target="_blank"
aria-label="Datopian website"
>
<Image
src="/images/datopian.png"
Expand Down
2 changes: 2 additions & 0 deletions deployment/frontend/src/components/home/HomeFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export function HomeFooter() {
href="https://www.portaljs.com/"
target="_blank"
className=" text-wri-green"
aria-label="Portal.js website"
>
Portal.js
</a>{' '}
Expand All @@ -158,6 +159,7 @@ export function HomeFooter() {
<a
href="https://www.datopian.com/"
target="_blank"
aria-label="Datopian website"
>
<Image
src="/images/datopian.png"
Expand Down
217 changes: 112 additions & 105 deletions deployment/frontend/src/components/search/DatasetHorizontalCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,136 +46,143 @@ export default function DatasetHorizontalCard({
dataset?.rw_id || dataset?.resources?.some((r) => r.datastore_active)

return (
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3 className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green">
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
<Link href={`/datasets/${dataset.name}`}>
<div className="flex flex-col border border-[#C9C9C9] hover:border-wri-green bg-white p-5 mb-2 shadow-wri-dcard transition hover:bg-[#EFF5F7] group rounded-[4px]">
<div className="flex flex-col lg:flex-row gap-y-2">
<div className="flex items-center grow shrink ">
<h3
className="font-acumin text-[18px] font-bold leading-[28px] text-stone-900 line-clamp-1 group-hover:text-wri-green"
tabIndex={0}
>
<span className="my-auto">{format}</span>
</span>
))}
{dataset.title}
</h3>
{dataset.visibility_type &&
session.status == 'authenticated' &&
dataset.visibility_type != 'public' && (
<Chip
text={
visibilityTypeLabels[
dataset.visibility_type
] ?? ''
}
/>
)}
</div>

<div className="flex lg:ml-auto gap-x-[12px] shrink-0">
{formats.slice(0, 4).map((format) => (
<span
key={`dataset-${dataset.name}-format-${format}`}
className={` font-acumin inline-flex w-fit items-center justify-center rounded-[9999px] px-[12px] py-[4px] text-center text-[12px] font-bold leading-[16px] ${
format &&
Object.keys(formatColors).includes(
format.toLowerCase()
)
? getFormatColor(format.toLowerCase())
: 'bg-wri-light-green'
}`}
>
<span className="my-auto">{format}</span>
</span>
))}
</div>
</div>
</div>

<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>
<p className="font-acumin text-[1rem] leading-[22px] font-light text-[#1A1919] line-clamp-4 mt-[12px] w-full h-[88px] lg:w-[733.783px] mb-[21px] ">
{dataset.short_description ?? ''}
</p>

<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<div className="flex flex-col lg:flex-row gap-x-1.5 gap-y-2">
<div className="flex items-center grow shrink gap-x-[16px] gap-y-[4px] flex-wrap">
{dataset.organization?.title && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<UserGroupIcon className="h-3 w-3 text-wri-green" />
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.organization?.title}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Team</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ArrowPathIcon className="h-3 w-3 text-wri-green" />
<p className="font-acumin text-[14px] leading-[14px] font-normal text-[#4F4E4E] ">
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
.toLocaleDateString('en-US', {
day: 'numeric',
month: 'short',
year: 'numeric',
})
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
{dataset.metadata_modified
? 'Last Updated ' +
new Date(
dataset.metadata_modified
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
.toLocaleDateString(
'en-US',
{
day: 'numeric',
month: 'short',
year: 'numeric',
}
)
.replace(
/^([a-zA-Z]+) (\d+), (\d+)$/,
'$2 $1 $3'
)
: ''}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
<p>Last modified</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>
<Link href={`/datasets/${dataset.name}`}>
<div className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
{(dataset.temporal_coverage_start ||
dataset.temporal_coverage_end) && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger>
<div className="flex flex-row items-center gap-x-1">
<ClockIcon className="h-3 w-3 text-blue-800" />
<p className="font-acumin flex text-[14px] leading-[14px] font-normal text-[#4F4E4E]">
{dataset.temporal_coverage_start ||
'?'}
{' - '}
{dataset.temporal_coverage_end ||
'?'}
</p>
</div>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent>
Temporal Coverage
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
)}
</div>

<button className="flex justify-end lg:justify-start lg:ml-auto shrink-0 group-hover:text-wri-green">
<div className="text-base leading-[24px] font-bold">
View dataset
</div>
<div className="pt-0.5">
<ChevronRightIcon className="h-4 w-4 stroke-current stroke-[3] " />
</div>
</div>
</Link>
</button>
</div>
</div>
</div>
</Link>
)
}
1 change: 1 addition & 0 deletions e2e-tests/cypress/e2e/accesibility_test.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ describe("Pages meet the accessibility requirements onload ", () => {

pages.forEach((page) => {
it(`${replaceParams(page)}`, () => {
cy.once('uncaught:exception', () => false);
cy.visit(replaceParams(page), { timeout: 30000 });
if (page.includes("edit")) {
cy.wait(5000);
Expand Down

0 comments on commit 54ceef4

Please sign in to comment.