[ckan catalog][m]: new hero element in the home page.
This commit is contained in:
anuveyatsu
@@ -11,57 +11,18 @@ exports[`📸 of Form component with empty 1`] = `
|
|||||||
<input
|
<input
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
||||||
name="q"
|
name="search#q"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
type="text"
|
type="text"
|
||||||
value=""
|
value=""
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
Search
|
Search
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="inline-block my-6 float-right"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
for="field-order-by"
|
|
||||||
>
|
|
||||||
Order by:
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
class="bg-white"
|
|
||||||
id="field-order-by"
|
|
||||||
name="sort"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="score:desc"
|
|
||||||
>
|
|
||||||
Relevance
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="title_string:asc"
|
|
||||||
>
|
|
||||||
Name Ascending
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="title_string:desc"
|
|
||||||
>
|
|
||||||
Name Descending
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="metadata_modified:desc"
|
|
||||||
>
|
|
||||||
Last Modified
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="views_recent:desc"
|
|
||||||
>
|
|
||||||
Popular
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -77,57 +38,18 @@ exports[`📸 of Form component with query 1`] = `
|
|||||||
<input
|
<input
|
||||||
aria-label="Search"
|
aria-label="Search"
|
||||||
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
|
||||||
name="q"
|
name="search#q"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
type="text"
|
type="text"
|
||||||
value=""
|
value=""
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
Search
|
Search
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="inline-block my-6 float-right"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
for="field-order-by"
|
|
||||||
>
|
|
||||||
Order by:
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
class="bg-white"
|
|
||||||
id="field-order-by"
|
|
||||||
name="sort"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="score:desc"
|
|
||||||
>
|
|
||||||
Relevance
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="title_string:asc"
|
|
||||||
>
|
|
||||||
Name Ascending
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="title_string:desc"
|
|
||||||
>
|
|
||||||
Name Descending
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="metadata_modified:desc"
|
|
||||||
>
|
|
||||||
Last Modified
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="views_recent:desc"
|
|
||||||
>
|
|
||||||
Popular
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
7
examples/catalog/components/home/Hero.tsx
Normal file
7
examples/catalog/components/home/Hero.tsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import Template from './HeroTemplate';
|
||||||
|
|
||||||
|
const Hero: React.FC = () => {
|
||||||
|
return <Template />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
130
examples/catalog/components/home/HeroTemplate.tsx
Normal file
130
examples/catalog/components/home/HeroTemplate.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
import useTranslation from 'next-translate/useTranslation';
|
||||||
|
import SearchForm from '../search/Form';
|
||||||
|
|
||||||
|
export default function Example() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative bg-white overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="hidden lg:block lg:absolute lg:inset-0"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
|
||||||
|
width={640}
|
||||||
|
height={784}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 640 784"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern
|
||||||
|
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
|
||||||
|
x={118}
|
||||||
|
y={0}
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x={0}
|
||||||
|
y={0}
|
||||||
|
width={4}
|
||||||
|
height={4}
|
||||||
|
className="text-gray-200"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect
|
||||||
|
y={72}
|
||||||
|
width={640}
|
||||||
|
height={640}
|
||||||
|
className="text-gray-50"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x={118}
|
||||||
|
width={404}
|
||||||
|
height={784}
|
||||||
|
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
|
||||||
|
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
|
||||||
|
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||||
|
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||||
|
<h1>
|
||||||
|
<span className="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
|
||||||
|
Quality Data ready to Integrate
|
||||||
|
</span>
|
||||||
|
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
|
||||||
|
<span className="block text-gray-900">Find and Share</span>
|
||||||
|
<span className="block text-indigo-600">Quality Data</span>
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||||
|
{t(`common:description`)}
|
||||||
|
</p>
|
||||||
|
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
||||||
|
<SearchForm />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
||||||
|
<svg
|
||||||
|
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
|
||||||
|
width={640}
|
||||||
|
height={784}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 640 784"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<pattern
|
||||||
|
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
|
||||||
|
x={118}
|
||||||
|
y={0}
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
x={0}
|
||||||
|
y={0}
|
||||||
|
width={4}
|
||||||
|
height={4}
|
||||||
|
className="text-gray-200"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect
|
||||||
|
y={72}
|
||||||
|
width={640}
|
||||||
|
height={640}
|
||||||
|
className="text-gray-50"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x={118}
|
||||||
|
width={404}
|
||||||
|
height={784}
|
||||||
|
fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
|
||||||
|
<img
|
||||||
|
className="w-full"
|
||||||
|
src="/images/banner.svg"
|
||||||
|
alt="banner_img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@ describe('Test Home Page', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('renders the hero title', () => {
|
it('renders the hero title', () => {
|
||||||
cy.contains('Find, Share and Publish Quality Data with Datahub');
|
cy.contains('Find and Share');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('checks that a search form exists', () => {
|
it('checks that a search form exists', () => {
|
||||||
|
|||||||
@@ -2,11 +2,11 @@ import { GetServerSideProps } from 'next';
|
|||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import { initializeApollo } from '../lib/apolloClient';
|
import { initializeApollo } from '../lib/apolloClient';
|
||||||
import RecentDataset from '../components/home/Recent';
|
import RecentDataset from '../components/home/Recent';
|
||||||
import SearchForm from '../components/search/Form';
|
|
||||||
import { SEARCH_QUERY } from '../graphql/queries';
|
import { SEARCH_QUERY } from '../graphql/queries';
|
||||||
import { loadNamespaces } from './_app';
|
import { loadNamespaces } from './_app';
|
||||||
import useTranslation from 'next-translate/useTranslation';
|
import useTranslation from 'next-translate/useTranslation';
|
||||||
import NavBar from '../components/home/Nav';
|
import NavBar from '../components/home/Nav';
|
||||||
|
import Hero from '../components/home/Hero';
|
||||||
|
|
||||||
const Home: React.FC<{ locale: any; locales: any }> = ({
|
const Home: React.FC<{ locale: any; locales: any }> = ({
|
||||||
locale,
|
locale,
|
||||||
@@ -21,21 +21,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
|
|||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
|
<Hero />
|
||||||
<div>
|
|
||||||
<h1 className="text-4xl mb-3 font-thin">
|
|
||||||
Find, Share and Publish <br /> Quality Data with{' '}
|
|
||||||
<span className="text-orange-500">Datahub</span>
|
|
||||||
</h1>
|
|
||||||
<p className="text-md font-light mb-3 w-4/5">
|
|
||||||
{t(`common:description`)}
|
|
||||||
</p>
|
|
||||||
<SearchForm />
|
|
||||||
</div>
|
|
||||||
<div className="mt-4">
|
|
||||||
<img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<RecentDataset />
|
<RecentDataset />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user