Merge pull request #494 from Dark-Matter-Labs/staging

Refactoring

components/about-page/about-page-dropdown.js

@@ -6,7 +6,7 @@ export default function AboutPageDropdown({ currentSlug, slugs }) {
  const remainingTitles = slugs?.filter((el) => el.slug !== currentSlug) ?? [];
  const currentPage = slugs?.filter((el) => el.slug === currentSlug) ?? [];
  const router = useRouter();
- // add on click close to close the disclosure.
+
  return (
  <div className='pt-8 w-full'>
  <Disclosure>
@@ -30,80 +30,21 @@ export default function AboutPageDropdown({ currentSlug, slugs }) {
  />
  </div>
  </Disclosure.Button>
-
- <Disclosure.Panel>
- <Disclosure.Button
- as='div'
- onClick={() => {
- router.push(`/over/${encodeURIComponent(remainingTitles[0]?.slug)}`);
- }}
- >
- <div className='bg-white w-full text-grey-800 border-b border-l border-r border-green-500 h-10 flex items-center hover:text-green-500'>
- <span className='block pl-3 truncate'>{remainingTitles[0]?.title}</span>
- </div>
- </Disclosure.Button>
- <Disclosure.Button
- as='div'
- onClick={() => {
- router.push(`/over/${encodeURIComponent(remainingTitles[1]?.slug)}`);
- }}
- >
- <div className='bg-white w-full text-grey-800 border-b border-l border-r border-green-500 h-10 flex items-center hover:text-green-500'>
- <span className='block pl-3 truncate'>{remainingTitles[1]?.title}</span>
- </div>
- </Disclosure.Button>
- <Disclosure.Button
- as='div'
- onClick={() => {
- router.push(`/over/${encodeURIComponent(remainingTitles[2]?.slug)}`);
- }}
- >
- <div
- className={`${
- remainingTitles[2]?.slug === remainingTitles?.slice(-1)[0]?.slug
- ? 'rounded-b-cl'
- : ''
- } bg-white w-full text-grey-800 border-b border-l border-r border-green-500 h-10 flex items-center hover:text-green-500`}
- >
- <span className='block pl-3 truncate'>{remainingTitles[2]?.title}</span>
- </div>
- </Disclosure.Button>
- {remainingTitles[3] && (
- <Disclosure.Button
- as='div'
- onClick={() => {
- router.push(`/over/${encodeURIComponent(remainingTitles[3]?.slug)}`);
- }}
- >
- <div
- className={`${
- remainingTitles[3]?.slug === remainingTitles?.slice(-1)[0]?.slug
- ? 'rounded-b-cl'
- : ''
- } bg-white text-grey-800 border-b border-l border-r border-green-500 h-10 flex items-center hover:text-green-500`}
- >
- <span className='block pl-3 truncate'>{remainingTitles[3]?.title}</span>
- </div>
- </Disclosure.Button>
- )}
- {remainingTitles[4] && (
+ <Disclosure.Panel as='ul'>
+ {remainingTitles?.map((remaining, id) => (
  <Disclosure.Button
- as='div'
+ key={id}
+ className='bg-white w-full text-grey-800 border-b border-l border-r last:rounded-b-cl border-green-500 h-10 flex items-center hover:text-green-500'
+ as='li'
  onClick={() => {
- router.push(`/over/${encodeURIComponent(remainingTitles[4]?.slug)}`);
+ router.push(`/over/${encodeURIComponent(remaining?.slug)}`);
  }}
  >
- <div
- className={`${
- remainingTitles[4]?.slug === remainingTitles?.slice(-1)[0]?.slug
- ? 'rounded-b-cl'
- : ''
- } bg-white text-grey-800 border-b border-l border-r border-green-500 h-10 flex items-center hover:text-green-500`}
- >
- <span className='block pl-3 truncate'>{remainingTitles[4]?.title}</span>
+ <div className=''>
+ <span className='block pl-3 truncate'>{remaining?.title}</span>
  </div>
  </Disclosure.Button>
- )}
+ ))}
  </Disclosure.Panel>
  </>
  )}

components/about-page/about-page-preview.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { PortableText } from '@portabletext/react';
 import AboutPageNav from './about-page-nav';
 import { usePreview } from '@/lib/sanity.preview';
-import { aboutPagePTComponents } from '@/lib/portable-text/pt-components';
+import { portableTextComponents } from '@/lib/portable-text/pt-components';
 import AboutPageDropdown from './about-page-dropdown';
 
 export default function AboutPagepreview({ query, queryParams }) {
@@ -19,9 +19,9 @@ export default function AboutPagepreview({ query, queryParams }) {
  </div>
  <div className='grid grid-cols-1 w-full lg:grid-cols-3 max-w-8xl'>
  <div className='lg:col-span-2'>
- <div className='breadcrumb pt-8 text-green-500 '>
+ <div className='p-2xs-bold text-green-600 bg-white pl-2 pr-3 py-1.5 rounded-clSm mt-6'>
  <Link href='/' className='link-interaction'>
- Home &gt;
+ Home<span className='ml-2'>{'>'}</span>
  </Link>
  </div>
  <div className='max-w-3xl'>
@@ -30,7 +30,7 @@ export default function AboutPagepreview({ query, queryParams }) {
  </h1>
  <PortableText
  value={data?.aboutPage?.aboutPageContent}
- components={aboutPagePTComponents}
+ components={portableTextComponents}
  />
  </div>
  </div>
@@ -43,7 +43,7 @@ export default function AboutPagepreview({ query, queryParams }) {
  <div className='block lg:hidden'>
  <AboutPageDropdown
  currentSlug={data?.aboutPage?.slug.current}
- slugs={data?.aboutPageSlugs}
+ slugs={data?.aboutPage?.aboutPageSlugs}
  />
  </div>
  </div>

components/about-page/index.js

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { PortableText } from '@portabletext/react';
 import AboutPageNav from './about-page-nav';
-import { aboutPagePTComponents } from '@/lib/portable-text/pt-components';
+import { portableTextComponents } from '@/lib/portable-text/pt-components';
 import AboutPageDropdown from './about-page-dropdown';
 
 export default function AboutPageComponent({ data }) {
@@ -28,7 +28,7 @@ export default function AboutPageComponent({ data }) {
  </h1>
  <PortableText
  value={data?.aboutPage?.aboutPageContent}
- components={aboutPagePTComponents}
+ components={portableTextComponents}
  />
  </div>
  </div>

components/eu-law/europe-tab-content.js

@@ -1,6 +1,6 @@
 import { Link, Element } from 'react-scroll';
 import { PortableText } from '@portabletext/react';
-import { euPageComponents } from '@/lib/portable-text/pt-components';
+import { portableTextComponents } from '@/lib/portable-text/pt-components';
 import ScrollTabMobileMenu from './scroll-tab-mobile-menu';
 
 export default function ScrollPagesTabContent({ content }) {
@@ -15,7 +15,7 @@ export default function ScrollPagesTabContent({ content }) {
  <h2 className='p-6xl-semibold mb-6'>
  {id + 1}. {section.title}
  </h2>
- <PortableText value={section.content} components={euPageComponents} />
+ <PortableText value={section.content} components={portableTextComponents} />
  </div>
  </div>
  </Element>

components/eu-law/summary-tab-content.js

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import EUGenericTooltip from '../tooltips/eu-generic-tooltip';
 import EUTooltip from '../tooltips/eu-tooltip';
 import { PortableText } from '@portabletext/react';
-import { EUtooltipComponents } from '@/lib/portable-text/pt-components';
+import { reducedPortableTextComponents } from '@/lib/portable-text/pt-components';
 import LinkIcon from '../link-icon';
 import StatusThreeStep from './status/status-three-step';
 import StatusTwoStep from './status/status-two-step';
@@ -94,7 +94,10 @@ export default function SummaryComponent({ lawData }) {
  </div>
  <div>
  <EUTooltip title={lawData?.statusContentTitle}>
- <PortableText value={lawData?.statusContent} components={EUtooltipComponents} />
+ <PortableText
+ value={lawData?.statusContent}
+ components={reducedPortableTextComponents}
+ />
  </EUTooltip>
  </div>
  </div>

components/faq-page.js

@@ -1,6 +1,6 @@
 import { PortableText } from '@portabletext/react';
 import Link from 'next/link';
-import { FAQPagePTComponents } from '@/lib/portable-text/pt-components';
+import { portableTextComponents } from '@/lib/portable-text/pt-components';
 import { PlusIcon, MinusIcon } from '@heroicons/react/outline';
 import { useState } from 'react';
 
@@ -70,7 +70,7 @@ export default function FAQPageComponent({ data }) {
  </AccordionSummary>
  <AccordionDetails>
  <Typography as='div' className='w-5/6'>
- <PortableText value={item.response} components={FAQPagePTComponents} />
+ <PortableText value={item.response} components={portableTextComponents} />
  </Typography>
  </AccordionDetails>
  </Accordion>

components/instrument/index.js

@@ -2,7 +2,7 @@ import { PortableText } from '@portabletext/react';
 import { useState, useEffect, useRef } from 'react';
 
 import InstrumentTable from './instrument-table';
-import { instrumentPTComponents } from '@/lib/portable-text/pt-components';
+import { portableTextComponents } from '@/lib/portable-text/pt-components';
 import InstrumentFeedbackBlock from './instrument-feedback-block';
 import InstrumentHeader from './instrument-header';
 import MobileFeedback from './instrument-feedback-block-mobile';
@@ -39,17 +39,20 @@ export default function Instrument({ data }) {
  <div className='global-margin sm:mt-4 z-0'>
  {/* Subtitle */}
  <div className='grid grid-cols-1'>
- {data?.measure?.subtitel && (
+ {data?.instrument?.subtitel && (
  <div className='max-w-[760px]'>
- <h2 className='lg:block p-lg sm:p-3xl sm:mt-2'> {data?.measure?.subtitel}</h2>
+ <h2 className='lg:block p-lg sm:p-3xl sm:mt-2'> {data?.instrument?.subtitel}</h2>
  </div>
  )}
  </div>
  {/* Content */}
  <div className='grid grid-cols-1'>
  <div className='pb-20 max-w-[760px]'>
  <div className=''>
- <PortableText value={data?.measure?.content} components={instrumentPTComponents} />
+ <PortableText
+ value={data?.instrument?.content}
+ components={portableTextComponents}
+ />
  </div>
  <InstrumentTable data={data} />
  </div>

components/instrument/instrument-feedback-block-mobile.js

@@ -28,7 +28,7 @@ export default function MobileFeedback({ data }) {
  </div>
  <Link
  className=''
- href={{ pathname: '/feedback', query: { instrument: data?.measure?.titel } }}
+ href={{ pathname: '/feedback', query: { instrument: data?.instrument?.titel } }}
  >
  <CustomButton color='greenBackground'>
  <span className=''>Ik deel mijn kennis</span>

components/instrument/instrument-feedback-block.js

@@ -35,7 +35,7 @@ export default function InstrumentFeedbackBlock({ data }) {
  </div>
  <Link
  className=''
- href={{ pathname: '/feedback', query: { instrument: data?.measure?.titel } }}
+ href={{ pathname: '/feedback', query: { instrument: data?.instrument?.titel } }}
  >
  <CustomButton color='greenBackground'>
  <span className='p-xs font-bold sm:p-md'>Ik deel mijn kennis</span>

components/instrument/instrument-header.js

@@ -46,93 +46,94 @@ export default function InstrumentHeader({ data }) {
  </span>
  </button>
  <div className='float-right'>
- <SocialButtons title={data?.measure?.titel} viewport='desktop' />
+ <SocialButtons title={data?.instrument?.titel} viewport='desktop' />
  </div>
  </div>
  <div className='mb-6 h-auto'>
  <div className='w-full flex'>
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema
  ?.toLowerCase()
  .replace(/ /g, '-')}`}
  className=''
  >
  <Tag classes='border border-grey-100 hover:border-green-200 active:border-green-400 text-grey-100 mr-2 hover:text-green-200 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white'>
- {data?.measure?.thema.replace('-', ' ')}
+ {data?.instrument?.thema?.replace('-', ' ')}
  </Tag>
  </Link>
 
- {data?.measure?.beleid === true && data?.measure?.themaType === 'thema' && (
+ {data?.instrument?.beleid === true && data?.instrument?.themaType === 'thema' && (
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema}/categorie`}
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema}/categorie`}
  onClick={() => setCategorie('beleid')}
  >
  <Tag classes='bg-green-300 text-green-800 hover:text-grey-100 hover:border hover:border-grey-100 hover:bg-transparent active:border-green-400 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white mr-2'>
  Beleid
  </Tag>
  </Link>
  )}
- {data?.measure?.beleid === true && data?.measure?.themaType !== 'thema' && (
+ {data?.instrument?.beleid === true && data?.instrument?.themaType !== 'thema' && (
  <Tag classes='bg-green-300 text-green-800 mr-2'>Beleid</Tag>
  )}
- {data?.measure?.inkoop === true && data?.measure?.themaType === 'thema' && (
+ {data?.instrument?.inkoop === true && data?.instrument?.themaType === 'thema' && (
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema}/categorie`}
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema}/categorie`}
  onClick={() => setCategorie('inkoop')}
  >
  <Tag classes='bg-green-300 text-green-800 hover:text-grey-100 hover:border hover:border-grey-100 hover:bg-transparent active:border-green-400 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white mr-2'>
  Inkoop
  </Tag>
  </Link>
  )}
- {data?.measure?.inkoop === true && data?.measure?.themaType !== 'thema' && (
+ {data?.instrument?.inkoop === true && data?.instrument?.themaType !== 'thema' && (
  <Tag classes='bg-green-300 text-green-800 mr-2'>Inkoop</Tag>
  )}
 
- {data?.measure?.grondpositie === true && data?.measure?.themaType === 'thema' && (
+ {data?.instrument?.grondpositie === true && data?.instrument?.themaType === 'thema' && (
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema}/categorie`}
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema}/categorie`}
  onClick={() => setCategorie('grondpositie')}
  >
  <Tag classes='bg-green-300 text-green-800 hover:text-grey-100 hover:border hover:border-grey-100 hover:bg-transparent active:border-green-400 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white mr-2'>
  Grondpositie
  </Tag>
  </Link>
  )}
- {data?.measure?.grondpositie === true && data?.measure?.themaType !== 'thema' && (
- <Tag classes='bg-green-300 text-green-800 mr-2'>Grondpositie</Tag>
- )}
+ {data?.instrument?.grondpositie === true &&
+ data?.instrument?.themaType !== 'thema' && (
+ <Tag classes='bg-green-300 text-green-800 mr-2'>Grondpositie</Tag>
+ )}
 
- {data?.measure?.subsidie === true && data?.measure?.themaType === 'thema' && (
+ {data?.instrument?.subsidie === true && data?.instrument?.themaType === 'thema' && (
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema}/categorie`}
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema}/categorie`}
  onClick={() => setCategorie('subsidie')}
  >
  <Tag classes='bg-green-300 text-green-800 hover:text-grey-100 hover:border hover:border-grey-100 hover:bg-transparent active:border-green-400 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white mr-2'>
  Subsidie
  </Tag>
  </Link>
  )}
- {data?.measure?.subsidie === true && data?.measure?.themaType !== 'thema' && (
+ {data?.instrument?.subsidie === true && data?.instrument?.themaType !== 'thema' && (
  <Tag classes='bg-green-300 text-green-800 mr-2'>Subsidie</Tag>
  )}
- {data?.measure?.fiscaal === true && data?.measure?.themaType === 'thema' && (
+ {data?.instrument?.fiscaal === true && data?.instrument?.themaType === 'thema' && (
  <Link
- href={`/${data?.measure?.transitionAgenda}/${data?.measure?.thema}/categorie`}
+ href={`/${data?.instrument?.transitionAgenda}/${data?.instrument?.thema}/categorie`}
  onClick={() => setCategorie('fiscaal')}
  >
  <Tag classes='bg-green-300 text-green-800 hover:text-grey-100 hover:border hover:border-grey-100 hover:bg-transparent active:border-green-400 active:text-green-400 focus:text-green-100 focus:right-2 focus:ring-white mr-2'>
  Fiscaal
  </Tag>
  </Link>
  )}
- {data?.measure?.fiscaal === true && data?.measure?.themaType !== 'thema' && (
+ {data?.instrument?.fiscaal === true && data?.instrument?.themaType !== 'thema' && (
  <Tag classes='bg-green-300 text-green-800 mr-2'>Fiscaal</Tag>
  )}
  </div>
  <div className='max-w-4xl flex justify-start overflow-hidden'>
  <h1 className='justify-self-start p-5xl-semibold sm:p-7xl-bold lg:block mt-1 text-grey-100 pb-1'>
- {data?.measure?.titel}
+ {data?.instrument?.titel}
  </h1>
  </div>
  </div>