Merge pull request #55 from DTS-STN/DCWC-640-search-grid

Dcwc 640 search grid
DTS-STN · Oct 26, 2021 · eaa69ba · eaa69ba
2 parents 44bb289 + d191649
commit eaa69ba
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 44 deletions.
diff --git a/__tests__/pages/home.test.js b/__tests__/pages/home.test.js
@@ -54,9 +54,9 @@ describe('Home page', () => {
     render(<Home />)
     expect(screen.getByTestId('topTasks')).toBeTruthy()
   })
-  it('should render mostRequestedList', () => {
+  it('should render cardList', () => {
     render(<Home />)
-    expect(screen.getByTestId('mostRequestedList')).toBeTruthy()
+    expect(screen.getByTestId('cardList')).toBeTruthy()
   })
   it('should render featureBlock', () => {
     render(<Home />)

diff --git a/components/atoms/MostRequestedCard.js → components/atoms/Card.js b/components/atoms/MostRequestedCard.js → components/atoms/Card.js
@@ -1,20 +1,22 @@
 import PropTypes from 'prop-types'
-import { ActionButton } from '../atoms/ActionButton'
+import { ActionButton } from './ActionButton'
 
-export const MostRequestedCard = ({
+export const Card = ({
   title,
+  tag,
   text,
   callToActionHref,
   callToActionText,
   btnId,
 }) => {
   return (
-    <div className="shadow-most-requested p-6">
-      <h3 className="font-bold font-display text-xl mb-5">{title}</h3>
-      <p className="mb-5">{text}</p>
+    <div className="shadow-card p-6">
+      <h3 className="font-bold font-display text-xl">{title}</h3>
+      <p className="">{tag}</p>
+      <p className="my-5">{text}</p>
       <ActionButton
         id={btnId}
-        className="font-display text-xl font-semibold underline text-deep-blue-solid hover:text-blue-800 visited:text-purple-600"
+        className="font-display text-xl underline text-white bg-gray-500 rounded px-4 py-2 flex justify-center max-w-sm mx-auto"
         href={callToActionHref}
       >
         {callToActionText}
@@ -23,12 +25,17 @@ export const MostRequestedCard = ({
   )
 }
 
-MostRequestedCard.propTypes = {
+Card.propTypes = {
   /**
    * The title that the card will display
    */
   title: PropTypes.string.isRequired,
 
+  /**
+   * The tag that the card will display
+   */
+  tag: PropTypes.string.isRequired,
+
   /**
    * The text that the card will display
    */

diff --git a/components/atoms/MostRequestedCard.test.js → components/atoms/Card.test.js b/components/atoms/MostRequestedCard.test.js → components/atoms/Card.test.js
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { MostRequestedCard } from './MostRequestedCard'
+import { Card } from './Card'
 
 import { useRouter } from 'next/router'
 // mocks useRouter to be able to use component' router.asPath
@@ -19,25 +19,28 @@ jest.mock('next/link', () => ({
 }))
 expect.extend(toHaveNoViolations)
 
-describe('MostRequestedCard', () => {
-  it('renders MostRequestedCard', () => {
+describe('Card', () => {
+  it('renders Card', () => {
     useRouter.mockImplementation(() => ({
       pathname: '/',
       asPath: '/',
     }))
     render(
-      <MostRequestedCard
+      <Card
         title="title test"
+        tag="tag test"
         text="text test"
         callToActionHref="href test"
         callToActionText="link test"
         btnId="btnTestId"
       />
     )
     const titleText = screen.getByText('title test')
+    const tagText = screen.getByText('tag test')
     const textText = screen.getByText('text test')
     const linkText = screen.getByText('link test')
     expect(titleText).toBeInTheDocument()
+    expect(tagText).toBeInTheDocument()
     expect(textText).toBeInTheDocument()
     expect(linkText).toBeInTheDocument()
   })
@@ -48,8 +51,9 @@ describe('MostRequestedCard', () => {
       asPath: '/',
     }))
     const { container } = render(
-      <MostRequestedCard
+      <Card
         title="title test"
+        tag="tag test"
         text="text test"
         callToActionHref="href test"
         callToActionText="link test"

diff --git a/components/molecules/MostRequestedList.js → components/molecules/CardList.js b/components/molecules/MostRequestedList.js → components/molecules/CardList.js
@@ -1,33 +1,34 @@
 import PropTypes from 'prop-types'
-import { MostRequestedCard } from '../atoms/MostRequestedCard'
+import { Card } from '../atoms/Card'
 
-export const MostRequestedList = ({ requestedList }) => {
-  const displayMostRequested = requestedList.map((requested) => (
-    <li key={requested.id}>
-      <MostRequestedCard
-        title={requested.title}
-        text={requested.text}
-        callToActionText={requested.callToActionText}
-        callToActionHref={requested.callToActionHref}
-        btnId={requested.btnId}
+export const CardList = ({ cardList }) => {
+  const displayCards = cardList.map((card) => (
+    <li key={card.id}>
+      <Card
+        title={card.title}
+        tag={card.tag}
+        text={card.text}
+        callToActionText={card.callToActionText}
+        callToActionHref={card.callToActionHref}
+        btnId={card.btnId}
       />
     </li>
   ))
   return (
     <ul
       className="grid grid-cols-1 gap-6 md:grid-cols-2 md:pl-1"
-      data-testid="mostRequestedList"
+      data-testid="cardList"
     >
-      {requestedList ? displayMostRequested : ''}
+      {cardList ? displayCards : ''}
     </ul>
   )
 }
 
-MostRequestedList.propTypes = {
+CardList.propTypes = {
   /**
-   * The requested page that the card will display
+   * The card page that the card will display
    */
-  requestedList: PropTypes.arrayOf(
+  cardList: PropTypes.arrayOf(
     PropTypes.shape({
       /**
        * Title for the card

diff --git a/...nents/molecules/MostRequestedList.test.js → components/molecules/CardList.test.js b/...nents/molecules/MostRequestedList.test.js → components/molecules/CardList.test.js
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { MostRequestedList } from './MostRequestedList'
+import { CardList } from './CardList'
 
 import { useRouter } from 'next/router'
 // mocks useRouter to be able to use component' router.asPath
@@ -19,18 +19,19 @@ jest.mock('next/link', () => ({
 }))
 expect.extend(toHaveNoViolations)
 
-describe('MostRequestedList', () => {
-  it('renders MostRequestedList', () => {
+describe('CardList', () => {
+  it('renders CardList', () => {
     useRouter.mockImplementation(() => ({
       pathname: '/',
       asPath: '/',
     }))
     render(
-      <MostRequestedList
-        requestedList={[
+      <CardList
+        cardList={[
           {
             id: 1,
             title: 'titleTest',
+            tag: 'tag test',
             text: 'text test',
             callToActionText: 'CallToActionTest',
             callToActionHref: '/home',
@@ -40,9 +41,11 @@ describe('MostRequestedList', () => {
       />
     )
     const titleText = screen.getByText('titleTest')
+    const tagText = screen.getByText('tag test')
     const textText = screen.getByText('text test')
     const linkText = screen.getByText('CallToActionTest')
     expect(titleText).toBeInTheDocument()
+    expect(tagText).toBeInTheDocument()
     expect(textText).toBeInTheDocument()
     expect(linkText).toBeInTheDocument()
   })
@@ -53,11 +56,12 @@ describe('MostRequestedList', () => {
       asPath: '/',
     }))
     const { container } = render(
-      <MostRequestedList
-        requestedList={[
+      <CardList
+        cardList={[
           {
             id: 1,
             title: 'titleTest',
+            tag: 'tag test',
             text: 'text test',
             callToActionText: 'CallToActionTest',
             callToActionHref: '/home',

diff --git a/components/molecules/Header.js b/components/molecules/Header.js
@@ -85,7 +85,7 @@ export default function Header({ language, t }) {
           loginText={t.login}
           items={[
             {
-              link: '/',
+              link: '/searchResult',
               text: t.serviceAndBenefits,
             },
             {

diff --git a/pages/home.js b/pages/home.js
@@ -2,7 +2,7 @@ import Layout from '../components/organisms/Layout'
 import SearchCard from '../components/molecules/SearchCard'
 import { getLocalTopics } from './api/getData'
 import TopTasks from '../components/molecules/TopTasks'
-import { MostRequestedList } from '../components/molecules/MostRequestedList'
+import { CardList } from '../components/molecules/CardList'
 import FeatureBlock from '../components/molecules/FeatureBlock'
 import { ServiceCanada } from '../components/molecules/ServiceCanada'
 import { ContactUs } from '../components/molecules/ContactUs'
@@ -61,11 +61,12 @@ export default function Home(props) {
           <h2 className="font-bold font-display text-2xl mb-4">
             {t.mostRequestedTitle}
           </h2>
-          <MostRequestedList
-            requestedList={[
+          <CardList
+            cardList={[
               {
                 id: 1,
                 title: 'Lorem Ipsum',
+                tag: 'Public Pension',
                 text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 callToActionText: 'Lorem Ipsum',
                 callToActionHref: '/home',
@@ -74,6 +75,7 @@ export default function Home(props) {
               {
                 id: 2,
                 title: 'Lorem Ipsum',
+                tag: 'Public Pension',
                 text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 callToActionText: 'Lorem Ipsum',
                 callToActionHref: '/home',
@@ -82,6 +84,7 @@ export default function Home(props) {
               {
                 id: 3,
                 title: 'Lorem Ipsum',
+                tag: 'Public Pension',
                 text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 callToActionText: 'Lorem Ipsum',
                 callToActionHref: '/home',
@@ -90,6 +93,7 @@ export default function Home(props) {
               {
                 id: 4,
                 title: 'Lorem Ipsum',
+                tag: 'Public Pension',
                 text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 callToActionText: 'Lorem Ipsum',
                 callToActionHref: '/home',

diff --git a/pages/searchResult.js b/pages/searchResult.js
@@ -2,6 +2,7 @@ import Layout from '../components/organisms/Layout'
 import { getLocalTopics } from './api/getData'
 import { useRouter } from 'next/router'
 import { useState, useEffect } from 'react'
+import { CardList } from '../components/molecules/CardList'
 
 import en from '../locales/en'
 import fr from '../locales/fr'
@@ -11,6 +12,44 @@ export default function SearchResult(props) {
   const router = useRouter()
 
   const [search, setSearch] = useState('')
+  const [benefitList, setbenefitList] = useState([
+    {
+      id: 1,
+      title: 'Lorem Ipsum',
+      tag: 'Public Pension',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      callToActionText: 'Lorem Ipsum',
+      callToActionHref: '/searchResult',
+      btnId: 'btn1',
+    },
+    {
+      id: 2,
+      title: 'Lorem Ipsum',
+      tag: 'Public Pension',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      callToActionText: 'Lorem Ipsum',
+      callToActionHref: '/searchResult',
+      btnId: 'btn2',
+    },
+    {
+      id: 3,
+      title: 'Lorem Ipsum',
+      tag: 'Public Pension',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      callToActionText: 'Lorem Ipsum',
+      callToActionHref: '/searchResult',
+      btnId: 'btn3',
+    },
+    {
+      id: 4,
+      title: 'Lorem Ipsum',
+      tag: 'Public Pension',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      callToActionText: 'Lorem Ipsum',
+      callToActionHref: '/searchResult',
+      btnId: 'btn4',
+    },
+  ])
 
   useEffect(() => {
     if (router.query.search) {
@@ -20,15 +59,13 @@ export default function SearchResult(props) {
 
   return (
     <Layout locale={props.locale} title="searchResult">
-      <h1 className="layout-container text-3xl">
-        Search results page placeholder.
-      </h1>
       <h2 className="layout-container text-2xl">
         Locale selected: {props.locale}.
       </h2>
       <h2 className="layout-container text-2xl">
         Current search: {search ? search : 'No search specified'}.
       </h2>
+      <CardList cardList={benefitList} />
     </Layout>
   )
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -77,7 +77,7 @@ module.exports = {
         'splash-page': 'url(../public/sp-bg-1.jpg)',
       }),
       boxShadow: {
-        'most-requested': '0px 2px 8px rgba(0, 0, 0, 0.25)',
+        card: '0px 2px 8px rgba(0, 0, 0, 0.25)',
       },
     },
   },